/* * EVE docs — shared page hero (photo band + frosted copy panel) * ------------------------------------------------------------------------ * Applied to every docs page by scripts/apply_docs_hero.py. Each page links this * sheet and sets ONE custom property, --docs-hero-img, to its section's photo; * everything else lives here so the rules exist once rather than ~50 duplicated * lines in 130+ files. * * Short by design: a 220px band, against the 420px used by the docs home and the * CoreGuard API Reference and the 300px on /start-here. These pages carry only a * section label and a title, so a taller band is mostly empty photo pushing the * actual documentation below the fold. * * TWO invariants worth knowing before editing: * * 1. The frosted panel covers the middle of the band, so every hero PHOTO must be * evenly distributed texture running edge to edge. A single centred subject gets * bisected by the panel and reads as a broken crop. * * 2. The copy is forced to light ink in BOTH themes. The band behind it is always a * dark photo, and these docs pages default to the light theme, so inheriting the * page ink would put near-black text on a near-black picture. */ .eve-docs-shell { position: relative; /* Content column is left comparatively open; the first two stops are in PIXELS so they always cover the 246px sidebar rail whatever the viewport width. In light theme the rail has no backing of its own, and its #9aa6bd links are hard to read against a busy photo. */ --docs-hero-scrim: linear-gradient(90deg, rgba(6, 9, 17, .80) 0px, rgba(6, 9, 17, .56) 300px, rgba(6, 9, 17, .30) 52%, rgba(6, 9, 17, .18) 100%); } /* The band hangs off the SHELL, which is the only full-width, viewport-centred box in the layout. The obvious alternative — painting it on .docs-hero::before — cannot work at desktop widths: the full-bleed calc(50% - 50vw) trick assumes the element is centred in the viewport, and the content column is pushed right by the 246px sidebar, so the band lands ~140px off and overflows the right edge. */ .eve-docs-shell::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 220px; z-index: 0; pointer-events: none; border-bottom: 1px solid rgba(255, 255, 255, .08); /* Solid base so the band reads instantly instead of flashing the page background while the photo loads. */ background-color: #0a0e18; background-image: var(--docs-hero-scrim), var(--docs-hero-img); background-repeat: no-repeat; /* center, not 55%: scripts/optimize_docs_heroes.py already crops each photo to the strip this band shows, anchored at the old 55%, so the framing is baked in. */ background-position: center center; background-size: cover; } .eve-docs-shell > .eve-docs-nav { position: sticky !important; top: 74px !important; z-index: 1; } html:not([data-theme="light"]) .eve-docs-shell > .eve-docs-nav { background: #06080f; } .eve-docs-shell > .eve-docs-body { position: relative; z-index: 1; } /* The content column's ~140px top pad existed to clear the sticky header; the band now occupies that space, so the column starts flush with the top of the shell. The background reset is load-bearing, not tidiness. .doc-article has no background of its own, but /faq, /api, /architecture and /aims paint an opaque light one on their content column — which covered the band and left the frosted panel on white, reading as a flat grey box. Clearing it lets the band show through the top 220px; everything below the band falls on the background, which those pages already set. main.content / main.main-content are matched as DESCENDANTS, not direct children: /api nests its column inside a
wrapper, so the child combinator missed it and that page shipped with the band covered. Both are page-level content columns, so the looser match is safe; .container and .page-wrap stay as direct children because those class names also appear on inner sections. */ .eve-docs-body > .doc-article, .eve-docs-body > article, .eve-docs-body > main, .eve-docs-body main.content, .eve-docs-body main.main-content, .eve-docs-body > .container, .eve-docs-body > .container > .doc-layout, .eve-docs-body > .page-wrap { padding-top: 0 !important; background: transparent !important; } /* Same reason, one level deeper: /architecture nests .doc-main inside .container, and /aims puts its sections directly in .container. */ .eve-docs-body .doc-main, .eve-docs-body > .container > .doc-layout > .doc-main { background: transparent !important; } .docs-hero { min-height: 220px; box-sizing: border-box; display: flex; flex-direction: column; /* 14px above AND below the panel, on every page. Two earlier attempts got this wrong: centring made the top gap a function of panel height (10px on a three-line title, 49px on a one-liner), and top-aligning fixed the top but left the bottom varying 10-84px, because the band is a fixed height while panel height tracks title length. The fix is to let the PANEL stretch to fill the band (flex:1 below) — then both gaps are the hero's padding, 14px, regardless of how the title wraps. */ padding: 14px 0; margin-bottom: 40px; } .docs-hero-glass { align-self: stretch; width: 100%; box-sizing: border-box; /* Fill the band so the 14px gaps above and below are exact; centre the copy inside. */ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 20px 28px; background: rgba(10, 14, 26, .46); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .34); } /* --- copy: light ink in BOTH themes (see invariant 2) --------------------- */ /* Absorbed from pages that carried one above their title; it would otherwise be stranded on the page background above the band. */ .docs-hero .doc-breadcrumb, .docs-hero .breadcrumb, html[data-theme="light"] .docs-hero .doc-breadcrumb, html[data-theme="light"] .docs-hero .breadcrumb { color: #a9bcd8 !important; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; font-family: 'IBM Plex Mono', 'Consolas', monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } .docs-hero .doc-breadcrumb a, .docs-hero .breadcrumb a, html[data-theme="light"] .docs-hero .doc-breadcrumb a, html[data-theme="light"] .docs-hero .breadcrumb a { color: #a9bcd8 !important; text-decoration: none; } .docs-hero .doc-breadcrumb a:hover, .docs-hero .breadcrumb a:hover { color: #ffffff !important; } .docs-hero .docs-hero-kick, html[data-theme="light"] .docs-hero .docs-hero-kick { font-family: 'IBM Plex Mono', 'Consolas', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #bfe0ff !important; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; } .docs-hero .docs-hero-kick .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } /* Smaller than the typical article h1 (clamp 1.9-2.8rem) to keep the band short. */ .docs-hero h1, html[data-theme="light"] .docs-hero h1 { font-size: clamp(1.5rem, 2.7vw, 2.1rem) !important; font-weight: 700; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 1.22; letter-spacing: -.01em; } .docs-hero h1 a, html[data-theme="light"] .docs-hero h1 a { color: #ffffff !important; text-decoration: none; } /* Optional sub-line. The generated block does not emit one — most docs pages get just a section label and a title, which is what keeps the band short. It exists for the few hand-fitted pages that already carried a subtitle worth keeping. */ .docs-hero .docs-hero-lead, html[data-theme="light"] .docs-hero .docs-hero-lead { color: #e6edf7 !important; font-size: 1.05rem; line-height: 1.6; max-width: 820px; margin: 12px 0 0 !important; } .docs-hero .docs-hero-lead a, html[data-theme="light"] .docs-hero .docs-hero-lead a { color: #bfe0ff !important; } @media (prefers-reduced-motion: no-preference) { .docs-hero .docs-hero-kick .dot { animation: docsHeroPulse 2.6s ease-out infinite; } } @keyframes docsHeroPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* --- mobile --------------------------------------------------------------- The band already tracks the hero's height everywhere, so mobile only drops the 300px floor (a fixed height overflows once the title wraps) and relaxes the rail scrim, which has no rail to cover below 981px. */ @media (max-width: 980px) { .eve-docs-shell { --docs-hero-scrim: linear-gradient(90deg, rgba(6, 9, 17, .62) 0%, rgba(6, 9, 17, .40) 52%, rgba(6, 9, 17, .24) 100%); } /* No rail below 981px, so the band no longer has to sit behind a sibling column and can move onto the hero, where it sizes to the copy. A fixed height overflows here once the title wraps — the docs home shipped that bug (395px panel, 340px band). */ .eve-docs-shell::before { display: none; } .docs-hero { min-height: 0; position: relative; z-index: 0; padding: 14px 0; margin-bottom: 32px; } .docs-hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; border-bottom: 1px solid rgba(255, 255, 255, .08); background-color: #0a0e18; background-image: var(--docs-hero-scrim), var(--docs-hero-img); background-repeat: no-repeat; background-position: center center; background-size: cover; } .docs-hero-glass { padding: 20px 18px; border-radius: 14px; } }