/* ═══════════════════════════════════════════════════════════════════ Shared stylesheet for content pages: /about, /learn, and every guide. Matches the homepage design tokens (Plus Jakarta Sans, ink/hairline). Per-page accent: set style="--accent:#xxxxxx" on . ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --ink: #1a1a1a; --ink-mid: rgba(26,26,26,0.55); --ink-soft: rgba(26,26,26,0.32); --hairline: rgba(26,26,26,0.09); --prose: rgba(26,26,26,0.82); --accent: #7BA8C4; /* overridable per page */ --accent-wash: rgba(123,168,196,0.10); } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── NAV ── */ nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); } .nav-logo { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; } .nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border-radius: 50px; padding: 9px 18px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; transition: opacity 160ms ease, transform 160ms ease; } .nav-cta:hover { opacity: 0.85; transform: scale(0.98); } .nav-cta svg { width: 14px; height: 14px; } /* ── LAYOUT ── */ main { max-width: 680px; margin: 0 auto; padding: 40px 24px 40px; } .wide { max-width: 960px; } /* ── BREADCRUMB ── */ .crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 28px; } .crumb a { color: var(--ink-mid); text-decoration: none; transition: color 140ms ease; } .crumb a:hover { color: var(--ink); } .crumb span { color: var(--ink-soft); } /* ── ARTICLE HEADER ── */ .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } h1 { font-size: clamp(34px, 5.4vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--ink); margin-bottom: 20px; } .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); font-weight: 500; margin-bottom: 32px; } .byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); } .lead { font-size: 20px; line-height: 1.55; color: var(--ink-mid); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 40px; } /* ── QUICK ANSWER (top-of-article summary — featured-snippet + AI extraction bait) ── */ .answer { border: 1px solid var(--hairline); border-left: 4px solid var(--accent); background: var(--accent-wash); border-radius: 12px; padding: 18px 22px; } .answer .answer-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 7px; } .answer .answer-text { font-size: 16.5px; line-height: 1.62; color: var(--ink); font-weight: 500; margin: 0; } /* ── PROSE ── */ .prose { font-size: 17px; line-height: 1.72; color: var(--prose); } .prose > * + * { margin-top: 22px; } .prose h2 { font-size: clamp(24px, 3.2vw, 30px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); margin-top: 48px; margin-bottom: 4px; } .prose h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-top: 32px; } .prose p { margin-top: 18px; } .prose strong { font-weight: 700; color: var(--ink); } .prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .prose a:hover { text-decoration-thickness: 2px; } .prose ul { margin-top: 18px; padding-left: 22px; } .prose ul li { margin-top: 8px; padding-left: 4px; } .prose ul li::marker { color: var(--accent); } .prose blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin-top: 26px; font-size: 19px; font-style: italic; color: var(--ink); font-weight: 500; } /* ── STEP LIST (how-to) ── */ .steps { counter-reset: step; list-style: none; margin-top: 26px; padding: 0; } .steps li { position: relative; padding: 0 0 4px 52px; margin-top: 22px; min-height: 36px; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; } .steps li strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; } /* ── CALLOUT ── */ .callout { background: var(--accent-wash); border-radius: 18px; padding: 22px 24px; margin-top: 32px; font-size: 16px; line-height: 1.6; color: var(--ink); } .callout .callout-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } /* ── CTA CARD (app promo) ── */ .cta-card { background: #132138; border-radius: 24px; padding: 36px 32px; margin-top: 48px; text-align: center; } .cta-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-bottom: 10px; } .cta-card p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 40ch; margin: 0 auto 22px; } .cta-card .store-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #132138; border-radius: 14px; padding: 13px 22px; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; transition: transform 160ms ease, opacity 160ms ease; } .cta-card .store-btn:hover { transform: scale(0.98); opacity: 0.92; } .cta-card .store-btn svg { width: 20px; height: 20px; } .cta-card .fine { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 14px; } /* ── DISCLAIMER ── */ .disclaimer { border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px; margin-top: 40px; display: flex; gap: 14px; align-items: flex-start; } .disclaimer svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-soft); margin-top: 1px; } .disclaimer p { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); margin: 0; } .disclaimer strong { color: var(--ink); font-weight: 700; } /* ── FAQ (visible, mirrors FAQPage schema) ── */ .faq { margin-top: 44px; } .faq details { border-bottom: 1px solid var(--hairline); } .faq details:first-of-type { border-top: 1px solid var(--hairline); } .faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 16px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--accent); font-size: 22px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { font-size: 15.5px; line-height: 1.7; color: var(--prose); padding: 0 0 18px; margin: 0; } /* ── SOURCES ── */ .sources { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hairline); } .sources h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; } .sources ol { padding-left: 20px; } .sources li { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); margin-top: 8px; } .sources a { color: var(--ink-mid); } /* ── RELATED ── */ .related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hairline); } .related-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; } .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .related-card { display: block; border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; } .related-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.06); transform: translateY(-2px); } .related-card .rc-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .related-card .rc-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; } /* ── LEARN HUB FILTER CHIPS ── */ .hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; } .hub-chip { border: 1px solid var(--hairline); background: #fff; border-radius: 50px; padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-mid); cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; } .hub-chip:hover { border-color: var(--ink-soft); color: var(--ink); } .hub-chip.active { background: #132138; border-color: #132138; color: #fff; } /* ── LEARN HUB GRID ── */ .hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; } .hub-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 22px; padding: 26px 26px 24px; text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; background: #fff; } .hub-card:hover { box-shadow: 0 10px 34px rgba(0,0,0,0.07); transform: translateY(-3px); } .hub-card .hc-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } .hub-card .hc-title { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin-bottom: 8px; } .hub-card .hc-desc { font-size: 14px; line-height: 1.55; color: var(--ink-mid); } .hub-card .hc-more { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .hub-card .hc-more svg { width: 14px; height: 14px; transition: transform 160ms ease; } .hub-card:hover .hc-more svg { transform: translateX(3px); } /* ── FOOTER ── */ footer { border-top: 1px solid var(--hairline); padding: 40px; max-width: 1100px; margin: 56px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-logo { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; } .footer-links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: var(--ink-soft); font-weight: 600; text-decoration: none; letter-spacing: -0.01em; transition: color 140ms ease; } .footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--ink); } /* ── RESPONSIVE ── */ @media (max-width: 640px) { nav { padding: 16px 20px; } main { padding: 28px 20px 32px; } .lead { font-size: 18px; } .prose { font-size: 16px; } .hub-grid, .related-grid { grid-template-columns: 1fr; } footer { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 20px; } }