:root { --bg: #F5F7FA; --bg-card: #FFFFFF; --ink: #0F4C81; --ink-soft: #4A6178; --accent: #4EA8DE; --accent-deep: #2E7CB8; --sage: #2ECC71; --sage-deep: #1E9E58; --line: #E1E8F0; --mono: 'IBM Plex Mono', monospace; --display: 'Fraunces', serif; --body: 'Inter', sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: linear-gradient(180deg, #0B1626 0%, #10203A 28%, #FFFFFF 55%, #FFFFFF 100%); color: var(--ink); font-family: var(--body); line-height: 1.7; position: relative; } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 560px; background: radial-gradient(ellipse 700px 420px at 15% 10%, rgba(78,168,222,0.28) 0%, rgba(78,168,222,0) 60%), radial-gradient(ellipse 600px 400px at 85% 0%, rgba(46,204,113,0.18) 0%, rgba(46,204,113,0) 60%), linear-gradient(180deg, #0B1626 0%, #10203A 70%, rgba(11,22,38,0) 100%); z-index: -1; pointer-events: none; } a { color: inherit; } /* ================================================ Dark Article Page Theme Applied via on magazine-style article pages. Overrides the light card/ink tokens with dark equivalents so the whole page — hero, body, related cards, footer — reads as one continuous, premium dark surface (no fade to white partway down long articles). ================================================ */ body.article-page { background: radial-gradient(ellipse at 20% 0%, #16223d 0%, #0B1626 38%, #0A0F1C 100%); --bg: #0d1220; --bg-card: #151a2c; --ink: #ECEDF7; --ink-soft: #A9AEC9; --line: rgba(255,255,255,0.09); } body.article-page::before { content: none; } body.article-page .article-header h1 { color: #fff; } body.article-page .quick-summary, body.article-page .toc-box, body.article-page .callout-box, body.article-page .read-next-grid a, body.article-page .newsletter-box { background: linear-gradient(135deg, rgba(78,168,222,0.10), rgba(46,204,113,0.05)); backdrop-filter: blur(2px); } body.article-page .article-cover { box-shadow: 0 20px 44px rgba(0,0,0,0.5); } body.article-page .highlight-box.tip { background: rgba(46,204,113,0.12); } body.article-page .highlight-box.warning { background: rgba(196,69,59,0.14); } body.article-page .highlight-box.note { background: rgba(78,168,222,0.14); } .wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; } /* Article pages get a wider content column so it doesn't look narrow on large screens */ body.article-page .wrap { max-width: 1100px; } /* Header */ header.site { padding: 20px 0; background: linear-gradient(120deg, #FFFFFF 0%, #E8F1FB 45%, #4EA8DE 100%); box-shadow: 0 4px 16px rgba(22,35,61,0.15); position: sticky; top: 0; z-index: 100; } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.65rem; letter-spacing: 0.01em; text-decoration: none; display: flex; align-items: center; gap: 10px; animation: brandGlow 4s linear infinite; } @keyframes brandGlow { 0% { color: #C4453B; } 14% { color: #D68A2B; } 28% { color: #C99A1E; } 42% { color: #1E8C6E; } 57% { color: #2F4C9E; } 71% { color: #6B3EA8; } 85% { color: #A83EA8; } 100% { color: #C4453B; } } .brand img.logo { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.6); opacity: 1; } } nav.site a { font-family: var(--mono); font-size: 0.82rem; text-decoration: none; color: #D7E3D9; margin-left: 22px; padding-bottom: 2px; border-bottom: 1px solid transparent; } nav.site a:hover { color: var(--accent); border-bottom-color: var(--accent); } .translate-widget { display: inline-block; margin-left: 14px; } .translate-widget .goog-te-gadget-simple { background: rgba(255,255,255,0.15) !important; border: none !important; border-radius: 8px !important; padding: 6px 10px !important; font-family: var(--mono) !important; } .translate-widget .goog-te-gadget-simple span { color: #fff !important; } .dots-menu { position: relative; order: 1; } .lang-corner { min-width: 36px; order: 3; background: rgba(22,35,61,0.1); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand { order: 2; } .lang-corner .goog-te-gadget-simple { background: rgba(255,255,255,0.15) !important; border: none !important; border-radius: 8px !important; padding: 4px 6px !important; font-size: 0 !important; } .lang-corner .goog-te-gadget-simple .goog-te-menu-value { font-size: 0 !important; } .lang-corner .goog-te-gadget-simple .goog-te-menu-value:before { content: "🌐"; font-size: 18px; } .lang-corner img { display: none !important; } .dots-btn { background: rgba(22,35,61,0.1); border: none; color: #0F4C81; font-size: 1.4rem; line-height: 1; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; } .dots-btn:hover { background: rgba(255,255,255,0.3); } .dots-dropdown { display: none; position: absolute; right: 0; top: 44px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,76,129,0.2); overflow: hidden; min-width: 160px; z-index: 50; } .dots-dropdown.open { display: block; } .dots-dropdown a { display: block; padding: 12px 18px; font-family: var(--mono); font-size: 0.85rem; color: var(--ink); text-decoration: none; } .dots-dropdown a:hover { background: var(--bg); color: var(--accent-deep); } .falling-particles { position: absolute; top: 0; left: 0; width: 100%; height: 560px; pointer-events: none; overflow: hidden; z-index: 1; } .particle { position: absolute; top: 0; border-radius: 50%; opacity: 0.85; animation: drift ease-in-out infinite alternate; box-shadow: 0 0 10px 3px currentColor; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); opacity: 0.25; } 20% { transform: translate(40px, 60px) scale(1.15); opacity: 0.9; } 40% { transform: translate(-30px, 140px) scale(0.9); opacity: 0.5; } 60% { transform: translate(50px, 220px) scale(1.1); opacity: 0.95; } 80% { transform: translate(-45px, 320px) scale(0.85); opacity: 0.4; } 100% { transform: translate(20px, 420px) scale(1); opacity: 0.8; } } .listen-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: none; padding: 12px 22px; border-radius: 999px; font-family: var(--mono); font-size: 0.85rem; cursor: pointer; margin: 10px 0 20px; transition: background 0.15s ease; } .listen-btn:hover { background: var(--accent-deep); } /* Table of contents */ .toc-box { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 24px 0; } .toc-title { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-deep); margin-bottom: 10px; } .toc-box ul { margin: 0; padding-left: 20px; } .toc-box li { margin-bottom: 6px; } .toc-box a { color: var(--ink); text-decoration: none; font-size: 0.95rem; } .toc-box a:hover { color: var(--accent-deep); text-decoration: underline; } /* Related articles */ .related-articles { margin: 44px 0 20px; border-top: 1px solid var(--line); padding-top: 30px; } .related-articles h2 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 16px; } .related-grid { display: grid; gap: 12px; } .related-card { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 1rem; transition: border-color 0.15s ease, transform 0.15s ease; } .related-card:hover { border-color: var(--accent); transform: translateX(4px); } .sub-nav { background: var(--ink); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav .wrap { display: flex; gap: 4px; padding: 0; } .sub-nav a { display: inline-block; padding: 10px 16px; font-family: var(--mono); font-size: 0.78rem; color: #D7E3D9; text-decoration: none; border-bottom: 2px solid transparent; flex-shrink: 0; } .sub-nav a:hover, .sub-nav a.active { color: #FFD966; border-bottom-color: #FFD966; } /* Fruit carousel */ .fruit-carousel { overflow: hidden; margin: 20px 0; border-radius: 14px; } .fruit-track { display: flex; gap: 14px; width: max-content; animation: scrollLeft 18s linear infinite; } .fruit-track img { width: 220px; height: 220px; object-fit: cover; border-radius: 14px; flex-shrink: 0; } @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero { padding: 60px 0 0; position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; } .welcome-banner { display: inline-block; color: #FFFFFF; font-family: var(--display); font-weight: 600; font-style: italic; font-size: 1.4rem; padding: 10px 22px; border-radius: 10px; margin-bottom: 16px; letter-spacing: 0.01em; animation: bgCycle 6s linear infinite; } @keyframes bgCycle { 0% { background: #C4453B; } 14% { background: #D68A2B; } 28% { background: #1E8C6E; } 42% { background: #2F4C9E; } 57% { background: #6B3EA8; } 71% { background: #A83EA8; } 85% { background: #0F4C81; } 100% { background: #C4453B; } } @keyframes colorCycle { 0% { color: #FFD966; } 25% { color: #4EA8DE; } 50% { color: #2ECC71; } 75% { color: #FF9E6D; } 100% { color: #FFD966; } } .hero-text .eyebrow { display: inline-block; font-family: var(--mono); font-size: 0.75rem; color: var(--ink); background: var(--accent); padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; } .hero-text h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.25; margin: 18px 0 18px; color: #FFFFFF; } .hero-text p { color: #C7D3E3; font-size: 1.08rem; max-width: 46ch; } .hero-image { width: 100%; aspect-ratio: 4/5; border-radius: 24px; object-fit: cover; box-shadow: 0 20px 40px rgba(27,46,34,0.18); } /* Hero auto-rotating wellness image carousel (replaces static hero photo) */ .hero-carousel { position: relative; width: 100%; height: 560px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(27,46,34,0.18); background: #0B1626; mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); } .hero-carousel-track { display: flex; gap: 14px; padding: 14px; width: max-content; height: 100%; animation: heroCarouselScroll 120s linear infinite; } .hero-carousel:hover .hero-carousel-track { animation-play-state: paused; } .hero-carousel-track img { width: auto; height: 100%; object-fit: cover; border-radius: 16px; flex-shrink: 0; box-shadow: 0 8px 20px rgba(11,22,38,0.25); } @keyframes heroCarouselScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; padding-top: 44px; } .hero-image { aspect-ratio: 16/9; order: -1; } .hero-carousel { height: 260px; order: -1; } } /* Trust line under hero intro */ .hero-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-family: var(--mono); font-size: 0.82rem; color: #C7D3E3; } .hero-trust span { white-space: nowrap; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .btn-primary-hero, .btn-secondary-hero { display: inline-block; padding: 11px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .92rem; } .btn-primary-hero { background: var(--accent); color: #0B1626; } .btn-secondary-hero { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); } /* Why Daily Vitality section */ .why-section { padding: 10px 0 50px; } .why-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 20px; } .why-card { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px; text-align: left; text-decoration: none; animation: whyFloat 4.5s ease-in-out infinite; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 0 6px 16px rgba(15,76,129,0.06); } .why-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 28px rgba(15,76,129,0.14); border-color: var(--accent); } .why-card:nth-child(1) { animation-delay: 0s; } .why-card:nth-child(2) { animation-delay: 0.4s; } .why-card:nth-child(3) { animation-delay: 0.8s; } .why-card:nth-child(4) { animation-delay: 1.2s; } .why-card:nth-child(5) { animation-delay: 1.6s; } .why-card:nth-child(6) { animation-delay: 2s; } @keyframes whyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .why-card:hover { animation-play-state: paused; } .why-card .why-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; } .why-card:nth-child(6n+1) .why-icon { background: rgba(78,168,222,0.16); } .why-card:nth-child(6n+2) .why-icon { background: rgba(46,204,113,0.16); } .why-card:nth-child(6n+3) .why-icon { background: rgba(255,183,77,0.18); } .why-card:nth-child(6n+4) .why-icon { background: rgba(155,109,255,0.16); } .why-card:nth-child(6n+5) .why-icon { background: rgba(78,168,222,0.16); } .why-card:nth-child(6n+6) .why-icon { background: rgba(46,204,113,0.16); } .why-card h3 { font-family: var(--display); font-size: 1.02rem; margin: 0 0 6px; color: var(--ink); } .why-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; line-height: 1.5; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } } /* Rotating "hook line" engagement banner, auto-inserted every 4 articles */ .hook-banner { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 32px; min-height: 210px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 26px rgba(11,22,38,0.25); } .hook-banner .hook-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 5s ease; } .hook-banner .hook-bg.active { opacity: 1; transform: scale(1); } .hook-banner .hook-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,38,0.35) 0%, rgba(11,22,38,0.72) 100%); } .hook-banner .hook-content { position: relative; z-index: 2; padding: 30px 24px; max-width: 560px; } .hook-banner .hook-line { font-family: var(--display); font-weight: 600; color: #fff; font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.4; min-height: 2.8em; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; } .hook-banner a.hook-cta { display: inline-block; margin-top: 14px; background: var(--accent); color: #0B1626; padding: 10px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.88rem; } /* Post list */ .posts { padding: 30px 0 80px; } /* "Explore More Wellness Reads" auto-scrolling belt */ .explore-belt-heading { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin: 36px 0 14px; } .explore-belt { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .explore-belt-track { display: flex; gap: 14px; width: max-content; animation: exploreBeltScroll linear infinite; } .explore-belt:hover .explore-belt-track { animation-play-state: paused; } .explore-belt-item { display: block; width: 190px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .explore-belt-item:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(15,76,129,0.14); } .explore-belt-item img { width: 100%; height: 110px; object-fit: cover; display: block; } .explore-belt-item span { display: block; padding: 10px 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.35; } @keyframes exploreBeltScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .posts h2, .page-label { display: inline-block; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); background: var(--sage); padding: 5px 12px; border-radius: 999px; margin-bottom: 24px; } .category-tag { display: inline-block; font-family: var(--mono); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 16px; border-radius: 999px; margin-right: 8px; } .category-tag.mind { background: #2F4C9E; color: #FFFFFF; } .category-tag.body { background: #C4453B; color: #FFFFFF; } .category-tag.sleep { background: #6B3EA8; color: #FFFFFF; } .category-tag.nutrition { background: #1E8C6E; color: #FFFFFF; } .category-tag.fitness { background: #D68A2B; color: #FFFFFF; } .category-tag.skin { background: #1A9C9C; color: #FFFFFF; } .category-tag.immunity { background: #A83EA8; color: #FFFFFF; } .category-tag.chronic { background: #8C2F3D; color: #FFFFFF; } .category-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; } .category-nav a { font-family: var(--mono); font-size: 0.8rem; text-decoration: none; color: var(--ink-soft); background: var(--bg-card); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; } .category-nav a:hover { border-color: var(--accent); color: var(--accent-deep); } .category-nav a.active { background: var(--ink); color: #fff; border-color: var(--ink); } .post-card { display: block; text-decoration: none; background: var(--bg-card); border: 1px solid var(--line); border-left: 6px solid var(--sage); border-radius: 20px; overflow: hidden; margin-bottom: 32px; box-shadow: 0 2px 10px rgba(27,46,34,0.05); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .post-card.cat-mind { border-left-color: #2F4C9E; } .post-card.cat-body { border-left-color: #C4453B; } .post-card.cat-sleep { border-left-color: #6B3EA8; } .post-card.cat-nutrition { border-left-color: #1E8C6E; } .post-card.cat-fitness { border-left-color: #D68A2B; } .post-card.cat-skin { border-left-color: #1A9C9C; } .post-card.cat-immunity { border-left-color: #A83EA8; } .post-card.cat-chronic { border-left-color: #8C2F3D; } .post-card:hover { transform: translateY(-4px); border-color: var(--sage); box-shadow: 0 18px 38px rgba(27,46,34,0.16); } .post-thumb { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; } .post-card-body { padding: 28px 32px 34px; } .post-card-body .date { font-size: 0.8rem; } .post-card-body h3 { font-size: 1.65rem; margin: 12px 0 12px; line-height: 1.25; } .post-card-body p { font-size: 1.05rem; line-height: 1.65; } @media (max-width: 520px) { .post-thumb { aspect-ratio: 16/10; } .post-card-body { padding: 20px 22px 26px; } .post-card-body h3 { font-size: 1.3rem; } } .post-card .date { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-deep); } .post-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin: 8px 0 8px; } .post-card p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; } /* Footer */ .founder-section { padding: 50px 0; text-align: center; } .founder-section img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); margin-bottom: 14px; } .founder-section .role { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9FB3CC; } .founder-section h3 { font-family: var(--display); font-size: 1.3rem; margin: 6px 0 8px; color: #FFFFFF; } .founder-section p { color: #C7D3E3; max-width: 44ch; margin: 0 auto; font-size: 0.95rem; } footer.site { padding: 26px 0; font-family: var(--mono); font-size: 0.76rem; color: #9FB3CC; text-align: center; line-height: 1.9; } footer.site a { text-decoration: none; color: #9FB3CC; } footer.site a:hover { color: var(--accent-deep); text-decoration: underline; } /* Write for Daily Vitality CTA (moved down, away from hero) */ .write-section { padding: 40px 0; text-align: center; } .write-section h2 { font-family: var(--display); color: #FFFFFF; font-size: 1.5rem; margin: 0 0 10px; } .write-section p { color: #C7D3E3; max-width: 50ch; margin: 0 auto 18px; font-size: 0.98rem; } .write-section a { display: inline-block; background: var(--accent); color: #0B1626; padding: 11px 24px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.92rem; } /* Footer columns */ .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; text-align: left; padding: 40px 0 20px; } .footer-grid h4 { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #FFFFFF; margin: 0 0 12px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid p { color: #9FB3CC; font-size: 0.85rem; max-width: 32ch; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 0; text-align: center; font-size: 0.75rem; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* Article / static page */ .article-header { padding: 54px 0 18px; } .article-header .date { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-deep); } .article-header h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 12px 0 8px; line-height: 1.3; color: #FFFFFF; } .article-body { padding: 30px 0 80px; font-size: 1.08rem; } .article-body h2 { font-family: var(--display); font-weight: 600; margin-top: 38px; font-size: 1.45rem; padding-left: 14px; border-left: 4px solid var(--accent); } .article-body p { margin: 18px 0; color: var(--ink); } .back-link { font-family: var(--mono); font-size: 0.84rem; text-decoration: none; color: var(--ink-soft); display: inline-block; margin-top: 24px; } .back-link:hover { color: var(--accent-deep); } .faq-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-bottom: 14px; } .faq-item h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin: 0 0 8px; } .faq-item p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; } /* Contact form look (static) */ .contact-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-bottom: 14px; } .contact-item .label { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-deep); text-transform: uppercase; } @media (max-width: 560px) { nav.site a { margin-left: 12px; } .hero { padding: 46px 0 30px; } .hero-shape { display: none; } } /* ================================================ Modern Article Template (professional refresh) Used by article.html and all newly generated posts. Edit here to restyle every article at once. ================================================ */ .article-cover { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 20px; margin: 22px 0 8px; box-shadow: 0 18px 40px rgba(15,76,129,0.22); display: block; } .article-header h1.gradient-title { background: linear-gradient(100deg, #FFFFFF 15%, #BFE0FF 55%, #4EA8DE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .article-lede { font-family: var(--display); font-style: italic; font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); border-left: 3px solid var(--sage); padding-left: 18px; margin: 26px 0 6px; } .article-body h2 { display: flex; align-items: center; gap: 10px; } .article-body h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; border-left: none; } .callout-box { margin: 40px 0; padding: 24px 28px; background: linear-gradient(135deg, rgba(78,168,222,0.10), rgba(46,204,113,0.08)); border: 1px solid var(--line); border-radius: 16px; } .callout-box h3 { font-family: var(--display); font-weight: 600; margin: 0 0 12px; font-size: 1.15rem; color: var(--ink); } .callout-box .btn-row a { display: inline-block; margin: 4px 10px 4px 0; padding: 10px 18px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background 0.15s ease; } .callout-box .btn-row a:hover { background: var(--accent-deep); } .read-next { margin-top: 42px; } .read-next h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-bottom: 14px; color: var(--ink); } .read-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .read-next-grid a { display: block; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.4; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .read-next-grid a:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27,46,34,0.1); } .article-disclaimer { font-size: 0.88rem; color: var(--ink-soft); font-style: italic; margin-top: 30px; } @media (max-width: 520px) { .article-cover { aspect-ratio: 16/10; border-radius: 14px; } .read-next-grid { grid-template-columns: 1fr; } } /* ================================================ Magazine-Style Article Additions (v2) Hero meta, quick summary, TOC, highlight boxes, FAQ, auto-scroll carousel, ebook + newsletter promo. ================================================ */ .article-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; } .article-meta-row .dot { opacity: 0.5; } .quick-summary { margin: 26px 0; padding: 22px 26px; background: linear-gradient(135deg, rgba(78,168,222,0.10), rgba(46,204,113,0.07)); border: 1px solid var(--line); border-radius: 16px; } .quick-summary .qs-label { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-deep); font-weight: 700; margin-bottom: 10px; } .quick-summary ul { margin: 0; padding-left: 20px; } .quick-summary li { margin: 6px 0; font-size: 1rem; color: var(--ink); } .toc-box { margin: 26px 0 34px; padding: 20px 26px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; } .toc-box .toc-label { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 10px; } .toc-box ol { margin: 0; padding-left: 20px; } .toc-box li { margin: 5px 0; } .toc-box a { text-decoration: none; color: var(--accent-deep); font-weight: 600; font-size: 0.96rem; } .toc-box a:hover { text-decoration: underline; } .highlight-box { margin: 26px 0; padding: 18px 22px; border-radius: 14px; font-size: 0.98rem; line-height: 1.6; display: flex; gap: 12px; align-items: flex-start; } .highlight-box .icon { font-size: 1.25rem; line-height: 1.4; } .highlight-box.tip { background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.3); } .highlight-box.warning { background: rgba(196,69,59,0.08); border: 1px solid rgba(196,69,59,0.28); } .highlight-box.note { background: rgba(78,168,222,0.09); border: 1px solid rgba(78,168,222,0.28); } .highlight-box strong { display: block; margin-bottom: 3px; } .faq-section { margin-top: 44px; } .faq-section h2 { margin-bottom: 18px; } .faq-section .faq-item h3 { font-family: var(--body); font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; color: var(--ink); } .faq-section .faq-item p { margin: 0; font-size: 0.96rem; } /* Auto-scrolling image carousel */ .img-carousel { overflow: hidden; margin: 30px 0; border-radius: 18px; padding: 6px; background: linear-gradient(135deg, rgba(78,168,222,0.08), rgba(46,204,113,0.06)); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .img-carousel-track { display: flex; gap: 14px; width: max-content; animation: carouselScroll 32s linear infinite; } .img-carousel:hover .img-carousel-track { animation-play-state: paused; } .img-carousel-track img { width: 300px; height: 205px; object-fit: cover; border-radius: 14px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 24px rgba(15,76,129,0.16); transition: transform 0.3s ease; } .img-carousel-track img:hover { transform: translateY(-3px) scale(1.015); } @keyframes carouselScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ebook-promo { margin: 44px 0; padding: 28px; border-radius: 18px; background: linear-gradient(120deg, #0B1626 0%, #10203A 60%, #17335A 100%); color: #fff; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .ebook-promo img { width: 100px; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); flex-shrink: 0; } .ebook-promo .ep-text { flex: 1; min-width: 200px; } .ebook-promo .ep-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8FC7F2; margin-bottom: 6px; } .ebook-promo h3 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 8px; color: #fff; } .ebook-promo p { color: #C7D3E3; margin: 0 0 14px; font-size: 0.94rem; } .ebook-promo a.buy-btn { display: inline-block; background: var(--sage); color: #06331d; font-weight: 700; padding: 10px 22px; border-radius: 8px; text-decoration: none; font-size: 0.94rem; } .ebook-promo a.buy-btn:hover { background: var(--sage-deep); color: #fff; } .newsletter-box { margin: 40px 0 10px; padding: 30px 28px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--line); text-align: center; } .newsletter-box h3 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 6px; color: var(--ink); } .newsletter-box p { color: var(--ink-soft); margin: 0 0 18px; font-size: 0.95rem; } .newsletter-box form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .newsletter-box input[type="email"] { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); font-family: var(--body); font-size: 0.95rem; min-width: 240px; } .newsletter-box button { padding: 12px 24px; border-radius: 8px; border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; } .newsletter-box button:hover { background: var(--accent-deep); } @media (max-width: 520px) { .img-carousel-track img { width: 220px; height: 150px; } .ebook-promo { flex-direction: column; text-align: center; } .ebook-promo .ep-text { text-align: left; } }