/* ========================================================================== Alexandria / Hyperion — redesign stylesheet Editorial-archival system: literary serif display (Newsreader) + system sans body + IBM Plex Mono for technical labels. Warm-paper light theme, cool-ink dark theme. Navy primary, ochre/ember accent. Order: tokens -> base/type -> layout -> components -> responsive -> motion. Variable names identical across themes; toggle flips data-theme on . ========================================================================== */ /* ========================================================================== 1. THEME TOKENS ========================================================================== */ :root { /* warm archival paper */ --color-bg: #fcfbf8; --color-bg-subtle: #f4f2ec; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-text: #1d1b16; --color-text-muted: #595449; --color-text-faint: #8b8474; /* navy primary (brand) */ --color-accent: #24387c; --color-accent-hover: #1a2b62; --color-accent-contrast:#fbf6ec; --color-accent-soft: #eceffb; --color-accent-border: #cdd5ef; /* ember / ochre — archival accent, used sparingly */ --color-ember: #b06a26; --color-ember-strong: #8f5417; --color-ember-soft: #f6ecdc; --color-ember-border: #e8d4b4; /* lines (warm) */ --color-border: #ebe6dc; --color-border-strong: #ddd6c8; --shadow-sm: 0 1px 2px rgba(40,34,22,.05), 0 1px 1px rgba(40,34,22,.03); --shadow-md: 0 2px 6px rgba(40,34,22,.05), 0 14px 30px -16px rgba(40,34,22,.18); --shadow-lg: 0 4px 10px rgba(40,34,22,.06), 0 30px 60px -28px rgba(40,34,22,.28); --shadow-focus: 0 0 0 3px rgba(36,56,124,.32); --plate-base: #fcfbf8; /* paper — duotone book blends seamlessly */ color-scheme: light; } [data-theme="dark"] { --color-bg: #101216; --color-bg-subtle: #16181d; --color-surface: #1a1d23; --color-surface-raised: #1a1d23; --color-text: #eef0f5; --color-text-muted: #aeb4bf; --color-text-faint: #7e8794; --color-accent: #9db0ff; --color-accent-hover: #bccaff; --color-accent-contrast:#0d1326; --color-accent-soft: #1a2236; --color-accent-border: #36426a; --color-ember: #e2a35c; --color-ember-strong: #f0b977; --color-ember-soft: #271d10; --color-ember-border: #4a3a22; --color-border: #292d36; --color-border-strong: #3a3f4b; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); --shadow-lg: 0 30px 60px -28px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4); --shadow-focus: 0 0 0 3px rgba(157,176,255,.40); --plate-base: #101216; /* ink — duotone book blends seamlessly */ color-scheme: dark; } /* Fonts: self-hosted (no Google Fonts / CDN). Serif display, system sans body, mono labels. */ :root { --font-serif: "Newsreader", Georgia, "Times New Roman", "Noto Serif CJK SC", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans CJK SC", sans-serif; --font-mono: "IBM Plex Mono", "DejaVu Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans CJK SC", monospace; } /* Spacing & layout (8px base) */ :root { --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem; --content-max:73rem; --content-narrow:42rem; --gutter:var(--space-5); --radius-sm:7px; --radius-md:11px; --radius-lg:16px; --radius-pill:999px; } /* Motion */ :root { --ease:cubic-bezier(.2,.6,.2,1); --dur-fast:120ms; --dur:200ms; } /* ========================================================================== 2. BASE / TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.62; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; color: var(--color-text); font-family: var(--font-serif); } h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); font-weight: 500; line-height: 1.02; letter-spacing: -.018em; text-wrap: balance; } h1 em { font-style: italic; font-weight: 500; color: var(--color-accent); } h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -.014em; text-wrap: balance; } h2 em { font-style: italic; color: var(--color-accent); } h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } p { margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-faint); display: inline-flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 1.7em; height: 1px; background: var(--color-ember); flex: none; } small, .caption { font-size: .875rem; line-height: 1.5; } code { font-family: var(--font-mono); font-size: .86em; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .12em .42em; color: var(--color-text); } ::selection { background: var(--color-ember-soft); color: var(--color-text); } /* ========================================================================== 3. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-9); } .section--alt { background: var(--color-bg-subtle); } /* collapse seam between two adjacent same-bg sections (#how -> #what-we-ship) */ #how { padding-bottom: var(--space-6); } #what-we-ship { padding-top: var(--space-7); } .grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: card; } .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100; padding: .625rem 1rem; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); } /* Section head block */ .section__head { margin-bottom: var(--space-7); max-width: 40rem; } .section__head .eyebrow { margin-bottom: var(--space-4); } .section__head h2 { margin: 0; } .section__intro { color: var(--color-text-muted); max-width: 44rem; margin-top: var(--space-4); font-size: 1.12rem; } /* ========================================================================== 4. COMPONENTS ========================================================================== */ :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); box-shadow: var(--shadow-focus); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: inherit; font-weight: 600; font-size: 1rem; line-height: 1; padding: .9rem 1.45rem; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--color-accent); color: var(--color-accent-contrast); text-decoration: none; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 8px 18px -10px var(--color-accent); transition: background-color .15s ease, transform .12s ease, box-shadow .2s ease; } .btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 14px 26px -12px var(--color-accent); } .btn:active { transform: translateY(0); } .btn-secondary { background: transparent; color: var(--color-accent); border: 1px solid var(--color-border-strong); box-shadow: none; } .btn-secondary:hover { border-color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); } /* Arrow text link */ a.link { color: var(--color-accent); text-decoration: none; font-weight: 550; display: inline-flex; align-items: center; gap: .45em; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); transition: border-color .15s ease, gap .18s ease; } a.link:hover { border-bottom-color: var(--color-accent); gap: .7em; } /* ---- NAV ---- */ .nav { position: sticky; top: 0; z-index: 50; height: 68px; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .nav.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .nav__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .nav__mark { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; } .nav__wordmark { font-family: var(--font-serif); font-weight: 600; font-size: 1.26rem; letter-spacing: -.01em; color: var(--color-text); text-decoration: none; } .nav__tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-faint); padding-left: .6rem; margin-left: .1rem; border-left: 1px solid var(--color-border-strong); } .nav__actions { display: flex; align-items: center; gap: var(--space-4); } .lang-switch { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: .78rem; color: var(--color-text-muted); } .lang-switch a { color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-sm); padding: .15rem .35rem; transition: color .15s ease, background-color .15s ease; } .lang-switch a:hover { color: var(--color-text); background: var(--color-bg-subtle); } .lang-switch a[aria-current="page"] { color: var(--color-text); } .lang-switch__sep { color: var(--color-text-faint); user-select: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); } .theme-toggle svg { width: 19px; height: 19px; display: block; } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } /* ---- HERO ---- */ .hero { padding-block: var(--space-9) var(--space-8); } .hero__eyebrow { margin-bottom: var(--space-5); } .hero h1 { margin-bottom: var(--space-5); } .hero__subhead { font-size: 1.24rem; line-height: 1.55; color: var(--color-text-muted); margin-bottom: var(--space-7); max-width: 34em; } .hero__subhead strong { color: var(--color-text); font-weight: 600; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } .hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; } .hero__copy { max-width: var(--content-narrow); } /* framed photographic plate — anchors the visual (no longer floating) */ .hero__media { display: flex; flex-direction: column; gap: var(--space-3); } .hero__visual { width: 100%; aspect-ratio: 7 / 5; border-radius: var(--radius-lg); background: var(--plate-base) center right / cover no-repeat url("assets/book-duo-light.webp"); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); position: relative; } [data-theme="dark"] .hero__visual { background-image: url("assets/book-duo-dark.webp"); border-color: var(--color-border-strong); } /* animated canvas variant (homepage) — no photo, particles drawn live */ .hero__visual--canvas { background-image: none; background-color: var(--color-bg); overflow: hidden; } [data-theme="dark"] .hero__visual--canvas { background-image: none; background-color: var(--color-bg); } .hero__visual--canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* per-page hero plates (paths resolve relative to this stylesheet, so they work from every page depth) */ .hero__visual--data { background-image: url("assets/book2-duo-light.webp"); } [data-theme="dark"] .hero__visual--data { background-image: url("assets/book2-duo-dark.webp"); } /* transparent dissolve — floats on the page in both themes, no plate frame */ .hero__visual--multi { background: transparent; border: none; box-shadow: none; background-image: url("assets/books-duo-light.webp"); background-position: center; background-size: contain; background-repeat: no-repeat; aspect-ratio: 1 / 1; } .hero__visual--multi + .hero__cap { justify-content: center; } /* dark variant must match the [data-theme] specificity to win over the default */ [data-theme="dark"] .hero__visual--multi { background: transparent; border: none; box-shadow: none; background-image: url("assets/books-duo-dark.webp"); background-position: center; background-size: contain; background-repeat: no-repeat; } .hero__cap { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--color-text-faint); display: inline-flex; align-items: center; gap: .6em; padding-left: .1rem; } .hero__cap::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--color-ember); box-shadow: 0 0 0 4px var(--color-ember-soft); flex: none; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.04fr 1fr; gap: var(--space-9); } .hero__copy { max-width: none; } } /* ---- PIPELINE (How it works) ---- */ .pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; counter-reset: pipe; } .pipeline__step { position: relative; display: grid; gap: var(--space-2); grid-template-rows: auto auto auto 1fr; padding: var(--space-5) var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); counter-increment: pipe; } .pipeline__step:last-child { border-bottom: none; } .pipeline__step::before { content: counter(pipe, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--color-text-faint); } .pipeline__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); } .pipeline__icon svg { width: 21px; height: 21px; display: block; } .pipeline__step h3 { margin: 0; font-family: var(--font-sans); font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; } .pipeline__step p { margin: 0; color: var(--color-text-muted); font-size: .92rem; line-height: 1.5; } @media (min-width: 880px) { .pipeline { grid-template-columns: repeat(5, 1fr); } .pipeline__step { border-bottom: none; border-right: 1px solid var(--color-border); min-height: 210px; } .pipeline__step:last-child { border-right: none; } /* flow arrow over each divider */ .pipeline__step:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: -7px; z-index: 2; width: 12px; height: 12px; background: var(--color-surface); border-top: 1.5px solid var(--color-border-strong); border-right: 1.5px solid var(--color-border-strong); transform: rotate(45deg); } } /* ---- WHAT WE SHIP ---- */ .ship__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } @media (min-width: 900px) { .ship__grid { grid-template-columns: .92fr 1.08fr; gap: var(--space-8); align-items: center; } } .bundle { list-style: none; margin: var(--space-6) 0 var(--space-5); padding: 0; display: grid; } .bundle li { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--space-5); align-items: baseline; padding-block: var(--space-4); border-top: 1px solid var(--color-border); } .bundle li:first-child { border-top: none; } .bundle__key { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text); } .bundle__key code { background: var(--color-bg-subtle); } .bundle__icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--color-accent); } .bundle__icon svg { width: 100%; height: 100%; display: block; } .bundle__val { color: var(--color-text-muted); } .bundle__note { color: var(--color-text-muted); margin-top: var(--space-3); display: flex; gap: .65rem; align-items: flex-start; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); font-size: .96rem; } .bundle__note::before { content: "✦"; color: var(--color-ember); flex: none; font-size: .9em; line-height: 1.6; } .ship__copy .bundle, .ship__copy .section__intro, .ship__copy .bundle__note { max-width: none; } /* Sample-data panel */ .sample { margin: 0; display: grid; gap: var(--space-4); } .sample__file { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-md); } .sample__tab { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: .78rem; font-weight: 500; color: var(--color-text-muted); } .sample__tab svg { width: 14px; height: 14px; flex: none; color: var(--color-accent); } .sample__code { margin: 0; padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: .8rem; line-height: 1.75; color: var(--color-text); white-space: pre; overflow-x: hidden; tab-size: 2; } .sample__code--scroll { overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); } .sample__code--scroll::-webkit-scrollbar { height: 6px; } .sample__code--scroll::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 10px; } .sample__code code { font: inherit; background: none; border: 0; border-radius: 0; padding: 0; color: inherit; } .sample__code .tok-key { color: var(--color-accent); } .sample__code .tok-str { color: var(--color-text-muted); } .sample__code .tok-num { color: var(--color-ember-strong); } .sample__caption { color: var(--color-text-faint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; } /* ---- CARDS ---- */ .card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease; } .card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .grid-3 .card { counter-increment: card; } .grid-3 .card::before { content: counter(card, decimal-leading-zero); position: absolute; top: var(--space-6); right: var(--space-6); font-family: var(--font-mono); font-size: .72rem; color: var(--color-text-faint); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-5); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); } .card__icon svg { width: 22px; height: 22px; display: block; } .card h3 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; line-height: 1.12; } .card p { margin: 0 0 var(--space-4); color: var(--color-text-muted); } .card p:last-child { margin-bottom: 0; } .card .link { margin-top: var(--space-1); } /* ---- OVERLAP (privacy protocol) ---- */ .overlap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-sm); } .overlap .eyebrow { color: var(--color-ember-strong); margin-bottom: var(--space-4); } .overlap .eyebrow::before { background: var(--color-ember); } .overlap h2 { margin-bottom: var(--space-4); } .overlap__body { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 52rem; font-size: 1.08rem; } .overlap__body strong { color: var(--color-text); font-weight: 600; } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; counter-increment: step; padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-contrast); font-family: var(--font-mono); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; } @media (min-width: 760px) { .overlap .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .steps li { border-top: 2px solid var(--color-border); padding-top: var(--space-4); } } /* Homepage feature variant: two-column intro + flowcard */ .overlap--feature { padding: 0; background: none; border: none; box-shadow: none; } .overlap__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 900px) { .overlap__grid { grid-template-columns: .96fr 1.04fr; gap: var(--space-8); } } .overlap__intro h2 { margin-bottom: var(--space-4); } .overlap__intro .overlap__body { margin-bottom: 0; } .flowcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .flowcard__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-faint); background: var(--color-bg-subtle); } .flowcard__lock { display: inline-flex; align-items: center; gap: .45em; color: var(--color-ember-strong); background: var(--color-ember-soft); border: 1px solid var(--color-ember-border); padding: .2rem .55rem; border-radius: var(--radius-pill); letter-spacing: .08em; white-space: nowrap; } .flowcard__lock svg { width: 12px; height: 12px; } .flowstep { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-bottom: 1px solid var(--color-border); } .flowstep:last-child { border-bottom: none; } .flowstep__n { width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-contrast); font-family: var(--font-mono); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; } .flowstep h4 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; } .flowstep p { margin: .2rem 0 0; color: var(--color-text-muted); font-size: .94rem; line-height: 1.5; } .flowstep p .chip { font-family: var(--font-mono); font-size: .78em; color: var(--color-ember-strong); background: var(--color-ember-soft); padding: .08em .5em; border-radius: var(--radius-sm); white-space: nowrap; } /* ---- CLOSING CTA ---- */ .cta-band { text-align: center; } .cta-band .eyebrow { justify-content: center; margin-bottom: var(--space-4); } .cta-band .eyebrow::before { display: none; } .cta-band h2 { margin-bottom: var(--space-4); font-size: clamp(2.1rem, 4vw, 3.1rem); } .cta-band__support { color: var(--color-text-muted); max-width: var(--content-narrow); margin-inline: auto; margin-bottom: var(--space-6); font-size: 1.12rem; } /* ---- FOOTER ---- */ .footer { border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); padding-block: var(--space-8); color: var(--color-text-muted); font-size: .9rem; } .footer a { color: var(--color-text-muted); text-decoration: none; transition: color .15s ease; } .footer a:hover { color: var(--color-text); } .footer__grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; } @media (min-width: 720px) { .footer__grid { grid-template-columns: 1.6fr 1fr; gap: var(--space-8); align-items: start; } } .footer__brandcol { display: grid; gap: var(--space-3); max-width: 40rem; } .footer__brandcol > p { margin: 0; } .footer__brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--color-text); display: inline-flex; align-items: center; gap: .55rem; } .footer__brand .nav__mark { width: 24px; height: 24px; } .footer__meta { color: var(--color-text-faint); } .footer__explore { display: grid; gap: var(--space-2); align-content: start; } .footer__explore-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-2) !important; } .footer__explore p { margin: 0; } /* ---- BREADCRUMB ---- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-5); } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color .15s ease; } .breadcrumb a:hover { color: var(--color-text); } .breadcrumb span[aria-hidden] { color: var(--color-border-strong); } .breadcrumb [aria-current] { color: var(--color-text-faint); } /* ---- PROSE GRID (editorial two-column lead) ---- */ .prose-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .prose-grid .section__head { margin-bottom: 0; } .prose-grid__body > p { color: var(--color-text-muted); margin: 0; } .prose-grid__body > p + p { margin-top: var(--space-4); } .prose-grid__body .steps { margin-top: 0; } @media (min-width: 880px) { .prose-grid { grid-template-columns: .82fr 1.18fr; gap: var(--space-8); align-items: start; } } /* ---- FAQ (FAQPage) ---- */ .faq { display: grid; gap: 0; max-width: 52rem; } .faq__item { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); } .faq__item:first-child { border-top: none; padding-top: 0; } .faq__q { font-family: var(--font-serif); font-weight: 600; font-size: 1.24rem; letter-spacing: -.01em; line-height: 1.2; color: var(--color-text); margin: 0 0 var(--space-2); } .faq__a { color: var(--color-text-muted); margin: 0; max-width: 62ch; } .faq__a code { background: var(--color-bg-subtle); } /* ========================================================================== 5. RESPONSIVE ========================================================================== */ @media (max-width: 639px) { .nav { height: 58px; } .nav__tag { display: none; } .lang-switch { display: none; } .section { padding-block: var(--space-8); } .bundle li { grid-template-columns: 1fr; gap: var(--space-1); } .hero__actions { gap: var(--space-4); } } @media (min-width: 640px) { :root { --gutter: var(--space-6); } } @media (min-width: 1024px) { :root { --gutter: var(--space-7); } } /* ========================================================================== 6. MOTION ========================================================================== */ html, body, .nav, .card, .overlap, .flowcard, code, .btn, .footer, .theme-toggle, .pipeline { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================================== Self-hosted web fonts (Newsreader variable + IBM Plex Mono). No Google Fonts — GDPR: zero external requests, CSP-safe. latin subset; CJK via system fonts. ========================================================================== */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ibm-plex-mono-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/ibm-plex-mono-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(assets/fonts/newsreader-400-600-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/newsreader-400-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }