/* ═══════════════════════════════════════════════════════════════════ 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 { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; } .nav-logo img { width: 17px; height: 23px; display: block; } .nav-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 50px; padding: 9px 16px 9px 18px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .nav-cta-label { pointer-events: none; } .nav-cta-icon { display: inline-flex; color: #fff; transition: opacity 160ms ease, transform 160ms ease; } .nav-cta-icon:hover { opacity: 0.75; transform: scale(0.92); } .nav-cta-icon svg { width: 24px; height: 24px; display: block; } /* ── 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-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; } .cta-card .store-badge-link { display: inline-flex; transition: transform 160ms ease, opacity 160ms ease; } .cta-card .store-badge-link:hover { transform: scale(0.98); opacity: 0.92; } .cta-card .store-badge { display: block; height: 48px; width: auto; } /* Secondary route for people who already downloaded — sends them to the tour instead of back to a store page they don't need. */ .cta-card .cta-alt { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.68); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); padding-bottom: 2px; transition: color 160ms ease, border-color 160ms ease; } .cta-card .cta-alt:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.7); } .cta-card .cta-alt svg { width: 13px; height: 13px; transition: transform 160ms ease; } .cta-card .cta-alt:hover svg { transform: translateX(3px); } /* ── 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 ── */ /* Full-width "start here" bar above the topic filters. The tour isn't a topic-filtered article, so it sits outside the grid rather than competing inside it. */ .start-bar { display: flex; align-items: center; gap: 18px; width: 100%; background: #E3EEF7; border: 2px solid #132138; border-radius: 999px; padding: 18px 26px 18px 22px; text-decoration: none; margin: 8px 0 44px; transition: box-shadow 200ms ease, transform 200ms ease; } .start-bar:hover { box-shadow: 0 12px 34px rgba(19,33,56,0.18); transform: translateY(-2px); } .start-bar .sb-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(19,33,56,0.08); display: inline-flex; align-items: center; justify-content: center; } .start-bar .sb-icon svg { width: 21px; height: 21px; color: #132138; } .start-bar .sb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .start-bar .sb-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(19,33,56,0.55); } .start-bar .sb-title { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: #132138; line-height: 1.3; } .start-bar .sb-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #132138; letter-spacing: -0.01em; } .start-bar .sb-go svg { width: 15px; height: 15px; transition: transform 160ms ease; } .start-bar:hover .sb-go svg { transform: translateX(4px); } .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); } /* ── TOOL TOUR (/learn/getting-started) ── */ .section-sub { font-size: 15px; color: var(--ink-mid); margin-top: 6px !important; } .tool { display: grid; grid-template-columns: 148px 1fr; gap: 26px; align-items: start; margin-top: 34px !important; padding-top: 30px; border-top: 1px solid var(--hairline); /* Clears the 79px sticky nav so /learn/getting-started# deep links from other guides land with the tool's name visible, not tucked behind it. */ scroll-margin-top: 100px; } .tool:first-of-type { border-top: none; padding-top: 6px; } .tool-media { position: relative; border-radius: 20px; overflow: hidden; background: #f4f3f0; border: 1px solid var(--hairline); aspect-ratio: 440 / 954; cursor: pointer; } .tool-media video { width: 100%; height: 100%; display: block; object-fit: cover; } /* Play affordance, shown only while the clip is paused. */ .tool-media::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(19,33,56,0.62); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5-9-5.5z'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: 53% 50%; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .tool-media.is-paused::after { opacity: 1; } .tool-body h3 { margin-top: 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .tool-dur { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 50px; padding: 3px 9px; } .tool-tag { font-size: 14px; font-weight: 600; color: var(--ink-mid); margin-top: 5px !important; } .tool-body p:last-child { margin-top: 12px !important; } .mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px !important; } .mini { border: 1px solid var(--hairline); border-radius: 18px; padding: 20px 22px; background: #fff; } .mini-cat { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; } .mini-name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 5px; } .mini-desc { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-mid); } /* ── TOOL PICKS (in-article links through to the tour) ── */ .tool-picks { margin-top: 44px !important; padding: 26px 26px 24px; border-radius: 22px; background: var(--accent-wash); border: 1px solid var(--hairline); } .tool-picks .tp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px !important; } .tool-picks .tp-grid { display: grid; gap: 10px; } /* .prose a underlines every link — these are cards, not inline links, so opt out. */ .tp-card, .prose .tp-card, .prose .tp-card:hover { text-decoration: none; font-weight: 400; } .tp-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 12px 16px 12px 12px; transition: box-shadow 180ms ease, transform 180ms ease; } .tp-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); transform: translateY(-2px); } /* Hairline keeps the mostly-white app screens reading as a phone, not a gap. */ .tp-card img { flex-shrink: 0; width: 46px; height: 64px; border-radius: 9px; object-fit: cover; background: #f4f3f0; display: block; border: 1px solid var(--hairline); } .tp-card .tp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tp-card .tp-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .tp-card .tp-desc { font-size: 13px; line-height: 1.45; color: var(--ink-mid); } .tp-card .tp-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; } .tp-card .tp-go svg { width: 12px; height: 12px; transition: transform 160ms ease; } .tp-card:hover .tp-go svg { transform: translateX(3px); } @media (max-width: 520px) { .tp-card .tp-go span { display: none; } /* keep just the arrow when tight */ } /* ── 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); } /* ── Cross-promo + authorship strip (RiceBowl / Kizuna) ── */ .footer-cross { flex: 0 0 100%; width: 100%; border-top: 1px solid var(--hairline); margin-top: 26px; padding-top: 20px; text-align: center; } .footer-cross-line { display: inline-block; /* hug the text; parent's text-align keeps it centered */ background-color: #ffeb8b; padding: 18px 48px; border-radius: 100px; font-size: 14px; color: rgb(26 26 26 / 66%); margin: 11px 0 26px; line-height: 1.5; } .footer-cross-line a { color: inherit; text-decoration: none; } .footer-cross-line a:hover { color: var(--ink); } .footer-madeby { font-size: 12.5px; color: rgb(26 26 26 / 50%); margin: 0; line-height: 1.5; } .footer-madeby a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .footer-madeby a:hover { 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, .mini-grid { grid-template-columns: 1fr; } /* Candy-bar ends look wrong once it wraps to two rows — square it off. */ .start-bar { flex-wrap: wrap; border-radius: 26px; padding: 20px 22px; gap: 14px; } .start-bar .sb-text { flex-basis: calc(100% - 56px); } .start-bar .sb-go { margin-left: 60px; } .tool { grid-template-columns: 116px 1fr; gap: 18px; scroll-margin-top: 92px; } .tool-media { border-radius: 16px; } footer { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 20px; } }