/* ─────────────────────────────────────────────────────────── Cyboflow — the forest/gold theme Everything that is true of the design on EVERY page it is applied to: the palette, the canopy behind the page, the button language, and the shared chrome (header, nav drawer, footer, colophon, consent bar). Opt a page in with `class="forest"` on , loaded after tokens.css + site.css. Nothing here is homepage-specific — the homepage's own sections live in home.css, which layers on top and shares these variables. The `--hp-` prefix is historical: this system was built for the homepage first and js/home.js writes several of these names directly. It is the theme's prefix now, not a scope. ─────────────────────────────────────────────────────────── */ .forest { /* ─── Palette ───────────────────────────────────────────── */ --hp-ground: #1c3a2b; /* the page; every section is transparent onto it */ --hp-bar: #193527; /* header + footer bands only, one step darker */ --hp-ink: #173324; /* text/borders INSIDE light surfaces */ --hp-sand: #f7f7ee; /* primary text on green */ --hp-sand-surf: #fafaf1; /* light panel fill; light chips */ --hp-sage: #a9bcae; /* body copy on green */ --hp-sage-dim: #9ab3a4; /* meta / footer links */ --hp-sage-mut: #c8d6c6; /* second headline line */ --hp-border: #437057; /* ghost-button borders */ --hp-hair: #2f5642; /* dividers inside the opaque dark bands */ --hp-gold: #d9a441; /* the single accent on dark; primary button fill */ --hp-gold-lift: #e6b558; /* the same gold, hover only */ --hp-brass: #8a6a1e; /* gold's light-surface twin */ --hp-paper-line:#c0b799; /* window borders on light surfaces */ --hp-ink-body: #3d5142; /* body copy inside light surfaces */ /* ─── Content surfaces ────────────────────────────────────── Translucent, not a fixed green: the canopy behind them is a gradient, so a hex card would read as a different lift over each pool. They tint DOWN, not up. A card that lightens its patch of ground also lightens it unevenly — the canopy's bright pools push a lifted card to #43553a, where sage-dim, gold and coral all fall under 4.5:1. A dark scrim moves every text colour the other way AND compresses the pools underneath it, so a card reads the same wherever it lands on the page. It also puts cards in the same family as --hp-well: panes cut into the canopy at different depths, rather than paper floating on it. */ --hp-card: rgba(9, 22, 16, .28); /* card fill on dark */ --hp-card-2: rgba(9, 22, 16, .40); /* hover — presses in further */ --hp-rule: rgba(247, 247, 238, .13); /* hairline on dark */ --hp-rule-soft: rgba(247, 247, 238, .075); /* secondary hairline */ --hp-well: #12281c; /* code blocks — the deepest cut */ /* Two more hues, only where meaning needs a third and fourth signal (change kinds, pass/fail). Both clear AA on the ground, including its brightest point. */ --hp-mint: #7ee39b; --hp-coral: #efa07f; --hp-head-h: 56px; --hp-ease: 120ms cubic-bezier(.2, 0, .2, 1); /* The canopy itself, named so a surface that has to sit ON the page and still look like the page can restate it exactly. body.forest below is its first user; the features page's sheet is the second, and any drift between two hand-copied gradients would read as a seam. */ --hp-canopy-bg: radial-gradient(120% 90% at 82% -14%, rgb(226 180 84 / calc(.20 * var(--hp-canopy))), transparent 60%), radial-gradient(70% 55% at 6% 20%, rgb(226 180 84 / calc(.10 * var(--hp-canopy))), transparent 62%), radial-gradient(58% 48% at 97% 56%, rgb(226 180 84 / calc(.09 * var(--hp-canopy))), transparent 62%), radial-gradient(82% 62% at 28% 86%, rgb(226 180 84 / calc(.11 * var(--hp-canopy))), transparent 64%), radial-gradient(48% 44% at 60% 44%, rgb(226 180 84 / calc(.06 * var(--hp-canopy))), transparent 66%), #1c3a2b; color: var(--hp-sand); font-family: 'Archivo', system-ui, -apple-system, sans-serif; } /* ─── The canopy ────────────────────────────────────────────── Five soft pools read as light through a forest canopy. This is load-bearing: every section is transparent onto it, so nothing ever paints its own green and no section edge reads as a divider. The only opaque surfaces are the header and footer bands. */ html:has(body.forest) { background: var(--hp-ground); } body.forest { background: var(--hp-canopy-bg); background-attachment: fixed; } /* How hard the pools burn. At full strength the canopy peaks at #3a4d32 — fine behind the homepage's 46px sand headlines, and much too bright behind 13px body copy, where it drags sage-dim, gold and coral under 4.5:1. The content pages get half, which holds the peak at #2b432e and every token above AA; the homepage keeps the atmosphere it was designed with. */ .forest { --hp-canopy: .5; } .forest.hp { --hp-canopy: 1; } .forest ::selection { background: rgba(217, 164, 65, .28); } .forest .skip-link { background: var(--hp-gold); color: var(--hp-ink); border-color: var(--hp-gold); } /* ─── Buttons ───────────────────────────────────────────────── .hp-btn is the theme's own button; .btn is the shared one from site.css, still used by the consent bar and the page CTAs. They are painted and measured alike so the site reads as one system. */ .hp-btn, .forest .btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Archivo', system-ui, sans-serif; text-decoration: none; white-space: nowrap; border-radius: 0; text-transform: none; letter-spacing: 0; transition: background var(--hp-ease), color var(--hp-ease), border-color var(--hp-ease); } .hp-btn--solid, .forest .btn--primary, .forest .btn--inverse { font-size: 14px; font-weight: 600; padding: 14px 24px; background: var(--hp-gold); color: var(--hp-ink); border: 1px solid var(--hp-gold); } .hp-btn--solid:hover, .forest .btn--primary:hover, .forest .btn--inverse:hover { background: var(--hp-gold-lift); border-color: var(--hp-gold-lift); color: var(--hp-ink); } .hp-btn--ghost, .forest .btn--outline { font-size: 14px; font-weight: 500; padding: 14px 22px; border: 1px solid var(--hp-border); color: var(--hp-sand); background: transparent; } .hp-btn--ghost:hover, .forest .btn--outline:hover { border-color: var(--hp-sage); color: var(--hp-sand); } .hp-btn--sm { font-size: 13px; padding: 8px 15px; } .forest .btn:focus-visible, .hp-btn:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; } /* ─── Eyebrow ─────────────────────────────────────────────── */ .forest .eyebrow { color: var(--hp-sage-dim); } .forest .eyebrow::before { background: var(--hp-gold); } .forest .eyebrow b { color: var(--hp-gold); } /* ─── Header ────────────────────────────────────────────────── The band is a real full-width element here (the prototype needed a ring-shadow bleed only because its host wrapped the page in a fixed 1280px column), so there is no scrollbar-width overflow to dodge. */ .forest .site-head { position: sticky; top: 0; z-index: 40; background: var(--hp-bar); border-bottom: 0; } .forest .site-head-row { height: var(--hp-head-h); gap: 20px; } .forest .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .forest .brand-word { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; letter-spacing: -.5px; color: var(--hp-sand); } .forest .brand-word--sm { font-size: 15px; } .forest .site-head .nav-link { font-family: 'Archivo', system-ui, sans-serif; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--hp-sage); text-decoration: none; transition: color var(--hp-ease); } .forest .site-head .nav-link:hover { color: var(--hp-sand); } .forest .site-head .nav-link:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; color: var(--hp-sand); } /* The page you are already on, marked in the nav. */ .forest .site-head .nav-link[aria-current="page"] { color: var(--hp-sand); font-weight: 500; } .forest .site-nav { display: flex; gap: 24px; } .forest .rev { color: var(--hp-sage-dim); } .forest .rev b { color: var(--hp-sand); } /* The shared hamburger and drawer are painted for the cream pages, and site.css scopes them under `html.js-anim ...` — which outspecifies a plain `.forest ...`, so the drawer stayed cream on a green header and the bars stayed dark. Restating them one level deeper puts them on this palette. Confined to the drawer's own breakpoint: above it .site-nav is the inline desktop row, and a background there would paint a bar behind the links. */ @media (max-width: 560px) { html.js-anim .forest .nav-toggle span { background: var(--hp-sand); } html.js-anim .forest .nav-toggle:focus-visible { outline-color: var(--hp-gold); } html.js-anim .forest .site-nav { background: var(--hp-bar); border-bottom: 1px solid var(--hp-hair); box-shadow: 0 14px 30px rgba(0,0,0,.34); } html.js-anim .forest .site-nav .nav-link { display: flex; align-items: center; min-height: 44px; padding: 12px 20px; font-size: 15px; border-top: 1px solid var(--hp-hair); } html.js-anim .forest .site-nav .nav-link:first-child { border-top: 0; } } /* ─── Footer ──────────────────────────────────────────────── */ .forest .site-foot { background: var(--hp-bar); border-top: 0; padding: 30px 0 34px; } .forest .site-foot-row { gap: 20px; } .forest .foot-link { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-sage-dim); text-decoration: none; transition: color var(--hp-ease); } .forest .foot-link:hover { color: var(--hp-sand); } .forest .foot-link:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; color: var(--hp-sand); } .forest .foot-meta { color: var(--hp-sage-dim); } .forest .colophon { margin-top: 22px; border-top: 1px solid var(--hp-hair); padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 13px; } .forest .colophon-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: var(--hp-sage-dim); } .forest .colophon .heart { color: var(--hp-gold); } .forest .colophon-legal { display: flex; align-items: center; gap: 14px; } .forest .colophon-legal a { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-sage-dim); text-decoration: none; transition: color var(--hp-ease); } .forest .colophon-legal a:hover { color: var(--hp-sand); } .forest .colophon-legal a:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; color: var(--hp-sand); } .forest .consent-link { border: 1px solid var(--hp-border); background: transparent; padding: 4px 10px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--hp-sand); text-transform: none; letter-spacing: 0; transition: border-color var(--hp-ease), color var(--hp-ease); } .forest .consent-link:hover { border-color: var(--hp-sage); } .forest .colophon-legal .consent-link:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; } /* ─── Consent bar ───────────────────────────────────────────── The shared bar is painted on the cream system's --cf-surface, which reads distinctly yellow against the new paper. It's the page's third chrome band, so it takes the header and footer's treatment rather than the paper's. */ .forest .consent { background: var(--hp-bar); border-top: 1px solid var(--hp-hair); box-shadow: 0 -16px 44px rgba(0,0,0,.30); } .forest .consent-text { color: var(--hp-sage); } .forest .consent-text a { color: var(--hp-sand); } .forest .consent-text a:hover { color: var(--hp-gold); } /* The bar keeps the mono micro-label the shared .btn was built with, rather than the page's sentence-case Archivo: it is transient system chrome, and sounding like the page's own calls to action is exactly what it shouldn't do. Restated because the rules above put every other .btn on Archivo. */ .forest .consent-actions .btn { font-family: var(--cf-font); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 16px 30px; border-width: 1px; } /* Accept stays sand, not gold, for the same reason: two gold fills on screen would have the banner competing with Download for the only accent the design spends. */ .forest .consent-actions .btn--primary { background: var(--hp-sand); color: var(--hp-ground); border-color: var(--hp-sand); } .forest .consent-actions .btn--primary:hover { background: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-ground); } .forest .consent-actions .btn--outline { background: transparent; color: var(--hp-sand); border-color: var(--hp-border); } .forest .consent-actions .btn--outline:hover { border-color: var(--hp-sage); } @media (max-width: 560px) { .forest .consent-actions .btn { padding: 15px 20px; font-size: 11px; } } @media (max-width: 720px) { /* fixed attachment is a jank/rendering trap on mobile Safari and the pools are soft enough that scrolling them is indistinguishable */ body.forest { background-attachment: scroll; } } /* ─── Touch targets ───────────────────────────────────────── */ @media (max-width: 760px) { .hp-btn, .forest .btn { min-height: 44px; } .forest .foot-link, .forest .colophon-legal a { min-height: 44px; display: inline-flex; align-items: center; } .forest .consent-link { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .hp-btn, .forest .btn, .forest .nav-link, .forest .foot-link, .forest .colophon-legal a, .forest .consent-link { transition: none; } }