/* ========================================================================== Countly Journal — blog stylesheet An editorial reading surface for the Endless River "dusk over water" world. The brand identity (dusk gradient, grain, Newsreader display) lives in the accent BANDS (hero, footer); long-form articles sit on a calm, light "morning mist" surface tuned for reading. Shared by every /countly/blog page. Fonts (Instrument Sans + Newsreader) are loaded in each page . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* Ink — deep desaturated slate-teal, the water at dusk read as text */ --ink: oklch(0.26 0.022 226); --ink-2: oklch(0.42 0.020 224); --ink-3: oklch(0.52 0.018 222); /* Paper — cool near-white, a misted dawn over the same water */ --paper: oklch(0.985 0.004 210); --surface: oklch(0.992 0.003 205); --surface-2: oklch(0.965 0.007 205); --line: oklch(0.905 0.009 212); --line-2: oklch(0.86 0.011 210); /* Teal — the Countly accent (hue 195, matched to the /countly view) */ --teal: oklch(0.56 0.088 195); --teal-deep: oklch(0.46 0.078 200); --teal-ink: oklch(0.40 0.072 200); --teal-wash: oklch(0.93 0.035 193); /* A warm secondary — low sun catching the water */ --gold: oklch(0.72 0.095 74); --radius: 20px; --radius-sm: 13px; --radius-xs: 9px; --maxw: 1180px; --measure: 68ch; --shadow-sm: 0 1px 2px oklch(0.3 0.03 222 / 0.05); --shadow: 0 1px 2px oklch(0.3 0.03 222 / 0.05), 0 14px 34px -16px oklch(0.32 0.05 222 / 0.30); --shadow-lg: 0 2px 4px oklch(0.3 0.03 222 / 0.06), 0 30px 60px -24px oklch(0.30 0.06 222 / 0.34); /* Dusk gradient — same hue family as the /countly view, pitched darker so light text holds WCAG AA across the whole band (the /countly view is a full-screen ambient with text only at the edges; a blog band carries text across its face, so it must stay dark from the top). */ --dusk: linear-gradient(176deg, oklch(0.47 0.05 199) 0%, oklch(0.38 0.052 200) 44%, oklch(0.29 0.05 202) 72%, oklch(0.20 0.045 205) 100%); --ease: cubic-bezier(0.22, 1, 0.36, 1); } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: oklch(0.85 0.04 195 / 0.45); } img { max-width: 100%; height: auto; } a { color: inherit; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; } /* Visually-hidden helper for SEO H1s that live in art */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-size: 13px; letter-spacing: 0.08em; } .skip-link:focus { left: 0; } .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; } @media (max-width: 760px) { .shell { padding: 0 22px; } } /* Typography primitives ---------------------------------------------------- */ .eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); } .eyebrow--light { color: oklch(0.97 0.005 200 / 0.82); } .display { font-family: 'Newsreader', Georgia, serif; font-weight: 300; line-height: 1.08; letter-spacing: 0.005em; text-wrap: balance; margin: 0; } .display em, .display i { font-style: italic; } .lede { font-family: 'Newsreader', Georgia, serif; font-weight: 300; line-height: 1.45; text-wrap: pretty; } /* ========================================================================== Dusk band — the brand background, reused for heroes & footer ========================================================================== */ .band { position: relative; isolation: isolate; background: var(--dusk); color: oklch(0.97 0.005 200); overflow: hidden; } .band::before { /* grain */ content: ""; position: absolute; inset: 0; z-index: -1; background-image: url(/grain.png); background-size: 320px 320px; opacity: 0.16; mix-blend-mode: overlay; animation: band-grain 90s linear infinite; } .band::after { /* drifting ambient glow */ content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none; background: radial-gradient(48% 42% at 72% 38%, oklch(0.66 0.06 185 / 0.42), transparent 70%), radial-gradient(40% 34% at 24% 30%, oklch(0.85 0.03 192 / 0.24), transparent 70%), radial-gradient(60% 34% at 48% 96%, oklch(0.24 0.06 205 / 0.55), transparent 70%); animation: band-drift 24s ease-in-out infinite alternate; } @keyframes band-grain { from { background-position: 0 0; } to { background-position: -320px 320px; } } @keyframes band-drift { from { transform: translate3d(-2.5%, -1.6%, 0) scale(1.06); } to { transform: translate3d(2.6%, 2%, 0) scale(1.14); } } /* ========================================================================== Header ========================================================================== */ .masthead { position: sticky; top: 0; z-index: 40; background: oklch(0.985 0.004 210 / 0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .masthead__row { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 20px; } .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); } .brand__bars { display: flex; flex-direction: column; align-items: flex-end; gap: 3.5px; } .brand__bars i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; } .brand__bars i:nth-child(1) { width: 22px; } .brand__bars i:nth-child(2) { width: 14px; opacity: 0.7; } .brand__bars i:nth-child(3) { width: 18px; opacity: 0.45; } .brand__text { font-size: 14px; font-weight: 500; letter-spacing: 0.28em; margin-right: -0.28em; } .brand__text b { font-weight: 600; } .masthead__nav { display: flex; align-items: center; gap: 26px; } .masthead__link { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink-3); transition: color 0.25s var(--ease); } .masthead__link:hover { color: var(--ink); } .masthead__cta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--teal-ink); font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid color-mix(in oklab, var(--teal) 45%, transparent); transition: border-color 0.25s var(--ease); } .masthead__cta:hover { border-bottom-color: var(--teal); } @media (max-width: 620px) { .masthead__nav { gap: 16px; } /* Keep a real in-site nav link (Journal) + CTA on mobile; only the link that duplicates the brand target (The app → /countly) is dropped. */ .masthead__link--app { display: none; } } @media (max-width: 400px) { .masthead__link { font-size: 11px; } } /* ========================================================================== Index hero ========================================================================== */ .hero { padding: 74px 0 84px; } .hero__inner { max-width: 760px; } .hero .display { margin-top: 18px; font-size: clamp(42px, 6.4vw, 76px); font-style: italic; } .hero .lede { margin-top: 26px; max-width: 580px; font-size: clamp(18px, 2.3vw, 23px); color: oklch(0.97 0.005 200 / 0.9); } .hero .lede b { font-weight: 400; color: #fff; } /* ========================================================================== Category filter ========================================================================== */ .filters { position: sticky; top: 62px; z-index: 30; background: oklch(0.985 0.004 210 / 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .filters__row { display: flex; gap: 9px; overflow-x: auto; padding: 16px 0; scrollbar-width: none; } .filters__row::-webkit-scrollbar { display: none; } .pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; padding: 8px 15px; border-radius: 999px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .pill:hover { border-color: var(--line-2); color: var(--ink); } .pill[aria-current="page"] { background: var(--ink); color: oklch(0.97 0.005 200); border-color: var(--ink); } .pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--teal)); } .pill[aria-current="page"] .pill__dot { background: currentColor; } /* ========================================================================== Article grid + cards ========================================================================== */ .grid { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 46px 0 28px; } @media (max-width: 980px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; } } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); } .card--featured { grid-column: span 2; } @media (max-width: 980px) { .card--featured { grid-column: span 2; } } @media (max-width: 640px) { .card--featured { grid-column: span 1; } } .card__media { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-2); } .card__media > svg, .card__media > img, .card__media .ph, .card__media > .hero-svg { width: 100%; height: 100%; display: block; object-fit: cover; } .card--featured .card__media { aspect-ratio: 16 / 7; } /* Pasted inline SVG heroes (viewBox 0 0 1200 630) — neutralise hardcoded size */ .hero-svg { display: block; } .hero-svg > svg { display: block; width: 100%; height: 100%; object-fit: cover; } /* Coloured placeholder hero (when no svg/image is supplied) */ .ph { position: relative; display: flex; align-items: center; justify-content: center; padding: 8% 9%; text-align: center; isolation: isolate; background: radial-gradient(120% 90% at 18% 0%, color-mix(in oklab, var(--cat) 42%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in oklab, var(--cat) 78%, #0c1418) 0%, oklch(0.2 0.04 220) 96%); } .ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url(/grain.png); background-size: 300px 300px; opacity: 0.12; mix-blend-mode: overlay; } .ph__title { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-style: italic; color: oklch(0.98 0.01 200); line-height: 1.16; font-size: clamp(20px, 2.4vw, 30px); text-wrap: balance; } .card--featured .ph__title { font-size: clamp(26px, 3vw, 40px); } .card__body { display: flex; flex-direction: column; gap: 11px; padding: 22px 22px 24px; flex: 1; } .card--featured .card__body { padding: 28px 30px 30px; } .card__title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.22; letter-spacing: 0.003em; margin: 0; color: var(--ink); transition: color 0.25s var(--ease); } .card--featured .card__title { font-size: clamp(24px, 2.6vw, 32px); } .card:hover .card__title { color: var(--teal-ink); } .card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card__foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-3); } /* Category tag (small, on light) */ .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--cat-ink, var(--teal-ink)); background: color-mix(in oklab, var(--cat, var(--teal)) 13%, white); border: 1px solid color-mix(in oklab, var(--cat, var(--teal)) 26%, transparent); } .dot-sep { color: var(--line-2); } /* ========================================================================== Pagination ========================================================================== */ .pager { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px 0 84px; } .pager__count { font-size: 13px; color: var(--ink-3); letter-spacing: 0.02em; } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; text-decoration: none; color: var(--ink); padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); } /* Closing CTA band (.calc-cta), used by the calculator + rule/answer pages. .band has no padding by design, so give the CTA real vertical rhythm, size its serif heading (base .display has no font-size), and turn the light .btn-ghost into an understated on-dark control instead of a heavy white pill. */ .calc-cta { padding: clamp(48px, 7vw, 84px) 0; } .calc-cta__inner { max-width: 640px; margin: 0 auto; text-align: center; } .calc-cta .display { font-size: clamp(26px, 3.4vw, 38px); font-style: italic; } .calc-cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .calc-cta .btn-ghost { background: oklch(1 0 0 / 0.10); border-color: oklch(1 0 0 / 0.34); color: oklch(0.98 0.005 200); } .calc-cta .btn-ghost:hover { background: oklch(1 0 0 / 0.20); border-color: oklch(1 0 0 / 0.62); } /* ========================================================================== Empty state ========================================================================== */ .empty { margin: 40px 0 90px; padding: 72px 30px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-3); } .empty .display { color: var(--ink); font-size: 30px; margin-bottom: 10px; } /* ========================================================================== Article page ========================================================================== */ .article-hero { padding: 60px 0 66px; } .article-hero__inner { max-width: 820px; } .article-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-size: 12.5px; color: oklch(0.97 0.005 200 / 0.86); margin-bottom: 22px; } .article-hero .tag { color: #fff; background: color-mix(in oklab, var(--cat, var(--teal)) 58%, oklch(0.22 0.04 210)); border-color: oklch(0.97 0.005 200 / 0.34); } .article-hero__title { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; letter-spacing: 0.004em; text-wrap: balance; margin: 0; } .article-hero__sub { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.45; margin-top: 22px; max-width: 660px; color: oklch(0.97 0.005 200 / 0.9); } .article-figure { background: var(--surface-2); border-bottom: 1px solid var(--line); } .article-figure__inner { max-width: var(--maxw); margin: 0 auto; } .article-figure__inner > img, .article-figure__inner > .hero-svg, .article-figure__inner > .hero-svg > svg { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; } .article-layout { display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) 304px; padding: 56px 0 40px; } @media (max-width: 940px) { .article-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 44px; } } .article-body { min-width: 0; } .source-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 6px; } .source-note a { color: var(--teal-ink); text-underline-offset: 2px; } /* ========================================================================== Prose ========================================================================== */ .prose { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 20px; line-height: 1.72; color: var(--ink); max-width: var(--measure); } .prose > * + * { margin-top: 1.35em; } .prose h2 { font-weight: 400; font-size: 1.55em; line-height: 1.18; letter-spacing: 0.002em; margin-top: 2.1em; margin-bottom: 0.1em; color: var(--ink); } .prose h3 { font-weight: 500; font-size: 1.2em; line-height: 1.25; margin-top: 1.7em; margin-bottom: 0.1em; color: var(--ink); } .prose h2 + p, .prose h3 + p { margin-top: 0.55em; } .prose p { text-wrap: pretty; } .prose a { color: var(--teal-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--teal) 40%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s var(--ease); } .prose a:hover { text-decoration-color: var(--teal); } .prose strong { font-weight: 600; color: var(--ink); } .prose em { font-style: italic; } .prose mark, .prose .w-highlight { background: var(--teal-wash); color: var(--teal-ink); padding: 0.06em 0.28em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-top: 0.5em; padding-left: 0.25em; } .prose li::marker { color: var(--teal); } .prose blockquote { margin-left: 0; margin-right: 0; padding: 0.2em 0 0.2em 1.25em; border-left: 2px solid var(--teal); font-style: italic; color: var(--ink-2); } .prose blockquote p { margin: 0; } .prose code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.08em 0.4em; } .prose pre { font-family: ui-monospace, 'SF Mono', Menlo, monospace; background: oklch(0.24 0.03 222); color: oklch(0.93 0.01 200); border-radius: var(--radius-sm); padding: 20px 22px; overflow-x: auto; font-size: 14.5px; line-height: 1.6; } .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; } .prose img { border-radius: var(--radius-sm); border: 1px solid var(--line); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; } /* Tables */ .prose table { width: 100%; border-collapse: collapse; font-family: 'Instrument Sans', sans-serif; font-size: 15px; margin: 0.4em 0; } .prose thead th { text-align: left; font-weight: 600; color: var(--ink); background: var(--surface-2); padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; letter-spacing: 0.02em; } .prose tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .table-wrap table { margin: 0; } /* ========================================================================== In-article CTA + tags + back ========================================================================== */ .cta-card { margin-top: 52px; max-width: var(--measure); border-radius: var(--radius); padding: 30px 32px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--teal) 16%, transparent), transparent 60%), var(--surface); border: 1px solid color-mix(in oklab, var(--teal) 24%, var(--line)); } .cta-card__title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 25px; line-height: 1.22; margin: 0; color: var(--ink); } .cta-card__sub { font-size: 15px; color: var(--ink-3); margin: 8px 0 0; } .btn-primary { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; text-decoration: none; color: oklch(0.98 0.005 200); padding: 13px 24px; border-radius: 999px; background: var(--teal-deep); transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .btn-primary:hover { background: var(--teal-ink); transform: translateY(-1px); } .tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 38px; } .tags a { font-size: 12.5px; color: var(--ink-3); text-decoration: none; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .tags a:hover { border-color: var(--line-2); color: var(--ink); } .back-row { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); } .back-link { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; text-decoration: none; color: var(--ink-3); display: inline-flex; align-items: center; gap: 10px; transition: color 0.2s var(--ease); } .back-link:hover { color: var(--ink); } /* ========================================================================== Sidebar ========================================================================== */ .sidebar { display: flex; flex-direction: column; gap: 22px; } @media (min-width: 941px) { .sidebar { position: sticky; top: 90px; align-self: start; } } .side-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; background: var(--surface); } .side-card__h { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; } .side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 17px; } .side-list a { text-decoration: none; color: inherit; display: block; } .side-list__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .side-list__date { font-size: 11px; color: var(--ink-3); } .side-list__title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 16px; line-height: 1.3; margin: 0; color: var(--ink); transition: color 0.2s var(--ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .side-list a:hover .side-list__title { color: var(--teal-ink); } .app-card { border-radius: var(--radius); padding: 24px; color: oklch(0.97 0.005 200); position: relative; overflow: hidden; isolation: isolate; } .app-card .band-bg { position: absolute; inset: 0; z-index: -1; } .app-card__h { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-style: italic; font-size: 23px; line-height: 1.2; margin: 0; } .app-card__p { font-size: 13.5px; line-height: 1.5; color: oklch(0.97 0.005 200 / 0.9); margin: 10px 0 0; } .app-card__links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .app-card__link { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; text-decoration: none; color: oklch(0.98 0.005 200); padding: 11px 16px; border-radius: 999px; text-align: center; background: oklch(0.99 0.005 200 / 0.14); border: 1px solid oklch(0.99 0.005 200 / 0.26); transition: background 0.2s var(--ease); } .app-card__link:hover { background: oklch(0.99 0.005 200 / 0.24); } /* ========================================================================== FAQ ========================================================================== */ .faq { padding: 16px 0 88px; } .faq__head { max-width: 640px; margin-bottom: 30px; } .faq__head .display { color: var(--ink); font-size: clamp(28px, 4vw, 40px); } .faq__list { max-width: 820px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 2px; position: relative; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 20px; font-family: 'Instrument Sans', sans-serif; font-size: 22px; font-weight: 400; color: var(--teal-deep); transition: transform 0.3s var(--ease); } .faq__item[open] summary::after { content: "−"; } .faq__answer { padding: 0 2px 24px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: var(--measure); } .faq__answer p { margin: 0 0 0.8em; } .faq__answer p:last-child { margin-bottom: 0; } /* ========================================================================== Footer ========================================================================== */ .foot { margin-top: 0; padding: 64px 0 56px; } .foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; } .foot__brand { max-width: 320px; } .foot__brand .brand { color: oklch(0.97 0.005 200); } .foot__tag { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-style: italic; font-size: 18px; line-height: 1.45; margin: 16px 0 0; color: oklch(0.97 0.005 200 / 0.9); } .foot__cols { display: flex; gap: 56px; flex-wrap: wrap; } .foot__col h2 { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: oklch(0.97 0.005 200 / 0.74); margin: 0 0 14px; } .foot__col a { display: block; font-size: 14px; text-decoration: none; margin-bottom: 9px; color: oklch(0.97 0.005 200 / 0.92); transition: color 0.2s var(--ease); } .foot__col a:hover { color: #fff; } .foot__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid oklch(0.97 0.005 200 / 0.2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 11.5px; letter-spacing: 0.06em; color: oklch(0.97 0.005 200 / 0.74); } /* ========================================================================== Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { .band::before, .band::after { animation: none !important; } * { scroll-behavior: auto !important; } .card, .btn-ghost, .btn-primary { transition: none !important; } }