/* ============================================================ EVORRAH V15 — palette system Linen is the world. Onyx is the structure. Bordeaux is the signature. Deep Crimson is the spark. Alabaster is the depth. Black Cherry is tonal only. Scoped to / — does not touch brand.css tokens. ============================================================ */ /* ── metric-matched fallbacks · the home page's 0.128 CLS ──────────────────── Both families come from Google Fonts with `display=swap`, so a first-time visitor is shown the fallback and then the real face swaps in. Measured on / at 1440x900: the swap lands at ~290ms and `.rc__sub` — the hero lede — REFLOWS FROM THREE LINES TO TWO, 113px to 75px, which moved the whole vertically-centred hero and scored 0.0888 of a 0.128 CLS. The

is immune only because each of its lines is wrapped in its own .rv-line span; ordinary flowing copy is not. ⚠ IT IS A WIDTH PROBLEM, NOT A LINE-HEIGHT ONE, which is why measuring the h1 said nothing was wrong — its height never changed. Times New Roman sets the lede's own sentences about 1% wider than Crimson Pro, and that 1% was enough to push the line past the plate and wrap it. So the numbers below are taken from THE ACTUAL STRINGS THAT REFLOW ("From invitation to arrival," and "Evorrah handles the work behind your event.", the lede until 2026-09-15) rather than from a pangram: an A-Z/0-9 sample gives the serif 0.922 instead of 0.991, and matching the fallback to that would leave the prose still wrapping wrong. size-adjust makes the fallback occupy the width the real face will; the ascent/descent overrides are the font's own metrics divided by that same figure, so the line box does not move either. Nothing about the loaded typography changes — this only shapes the ~290ms before it arrives. */ @font-face{ font-family:"Crimson Pro fallback"; src:local("Times New Roman"),local("Times"); size-adjust:99.10%;ascent-override:90.82%;descent-override:21.19%;line-gap-override:0%; } @font-face{ font-family:"Inter fallback"; src:local("Arial"),local("Helvetica"); size-adjust:106.53%;ascent-override:91.06%;descent-override:22.53%;line-gap-override:0%; } :root{ --linen: #F8F1E7; --onyx: #141414; --bordeaux: #4C061D; /* ⚠ THE ACCENT IS TWO STOPS ON ONE FAMILY, NOT ONE COLOUR — 2026-08-31. Step 1 fixed the HUE. #AA1515 sat at hue 0deg while --bordeaux sits at 340deg: a 40deg gap at high saturation reads as a near-miss rather than a contrast, which is what "the red doesn't match the burgundy" was. Both stops below sit in the 353-356deg band — on top of Black Cherry (#6B0410 = 353) and within sixteen of bordeaux — one family. Step 2 fixed the CONTRAST, which one stop cannot do. Measured against the three grounds, a single mid red is always failing one end: #CC242F linen 4.85 alabaster 4.26 onyx 3.39 The accent is not decoration — it carries "Most chosen", the part counts and the companion prices at --fs-label (11px), where AA wants 4.5:1. So the light grounds take the deep stop and onyx takes the lifted one, and each clears 4.5:1 on the ground it is actually used on: --mahogany #9D0617 linen 7.58 · alabaster 6.65 --accent-lift #EB3743 onyx 4.53 Step 3 fixed the SATURATION of the lifted stop, and it is why that stop is 82% and not the 70% it was first drawn at. 4.5:1 on a #141414 ground can only be bought with LIGHTNESS, and a light red reads ROSE unless saturation comes up with it — 82% sits inside the band the rest of the family occupies (bordeaux 85%, cherry 93%) and stops short of the vivid range where small red text on near-black starts to buzz. Step 4 replaced the DEEP stop: #C81420 -> #9D0617, owner, 2026-08-31. A wine red at 353deg/93%/32% instead of a mahogany at 356/82/43 — the same hue and saturation as Black Cherry, two stops lighter, so on the light grounds the accent now reads as part of the bordeaux/cherry family rather than beside it. It buys contrast instead of spending it: 7.58 on linen and 6.65 on alabaster, AA at 11px with room over. The cost is all at the dark end — 2.17:1 on onyx, 1.83:1 on bordeaux — which is exactly why the ground rebinds below exist and why no rule may read --mahogany directly. NOTE the two stops are no longer one hue at two exposures: 353/93 deep against 356/82 lifted. They are close enough to read as one accent and they never appear on the same ground, so nothing compares them side by side. Rebound per ground below; every rule reads --accent, never a stop directly, so a ground change can never strand a colour on the wrong one. Comparison rig: app/red-9d0617-test.html. */ --mahogany: #9D0617; --accent-lift: #EB3743; --alabaster: #E7E3DD; --cherry: #6B0410; /* portal-only accents (live inside the device frame, nowhere else) */ --portal-green: #3D7A2E; --portal-red: #C0281C; --serif: "Crimson Pro", "Crimson Pro fallback", "Times New Roman", serif; --sans: "Inter", "Inter fallback", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---------- type tokens ---------- Serif = Crimson Pro, the voice. Sans = Inter, the infrastructure. Display steps above 36px are one-off moments and each keeps its own job. Everything from 36px down is on the scale: three serif steps, three sans steps, one label. The portal mock inside the device frame runs its own 4.6-11px micro-system and is deliberately exempt. */ --fs-d1: clamp(44px,7.2vw,118px); /* the one headline per page */ --fs-mega: clamp(38px,6.4vw,104px); /* full-bleed statements */ --fs-plan: clamp(34px,5.4vw,84px); /* plan names, the "handled" line */ --fs-d2: clamp(34px,5vw,80px); --fs-stat: clamp(40px,4.6vw,72px); /* counted numbers */ --fs-d3: clamp(26px,3.2vw,48px); --fs-d4: clamp(24px,2.6vw,36px); --fs-d5: clamp(21px,2.2vw,28px); --fs-lede: clamp(18px,1.6vw,23px); --fs-read: 16px; /* long-form prose pages only */ --fs-body: 15px; /* every running paragraph */ --fs-cap: 13px; /* list rows, meta, secondary */ --fs-label: 11px; --ls-label: .2em; --fs-label-lg: clamp(11px,1.2vw,14px); /* the two display labels */ --ls-label-lg: .28em; /* ---- weight (owner, 2026-08-31: "where you feel things could be bolder, make it bolder") ------------------------------------------------------- The serif is untouched. Crimson Pro 300 above 20px IS the Evorrah voice and it only loads 200/300/400, so there is nothing to gain there. What was genuinely too faint is the SANS layer: 11px uppercase at .2em tracking, often at 56-66% opacity, rendered at the same 400 as the paragraph next to it. Two knobs, both real Inter faces already in every page's font request — nothing here costs a byte more to load. --fw-label the micro-label idiom (--fs-label + --ls-label): eyebrows, plan specs, buttons, nav, column heads, figcaptions. --fw-emph inline / inside running prose. The site carries emphasis in ACCENT COLOUR rather than weight and that stays true; 500 just stops the marked words dissolving back into the sentence, which at 15px/400 they did. 500 is the ceiling on purpose: "Most chosen" is the one 600 on the site (§plans) and outranking every label is its whole job. */ --fw-label: 500; --fw-emph: 500; --gutter: clamp(20px, 5vw, 72px); --maxw: 1480px; /* the accent as used: rebound per ground, never referenced as a stop */ --accent: var(--mahogany); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{background:var(--linen)} body{ font-family:var(--sans); color:var(--onyx); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} /* ---------- placeholders ---------- ⚠ AN UNSTYLED PLACEHOLDER IS NOT NEUTRAL, IT IS #757575 — Chrome's own grey, which measures 4.11 on --linen and fails AA at every size these forms use. It is also the one piece of text on the site no ordinary sweep reaches, being a pseudo-element on an element that has no text node of its own; it surfaced only when the rig grew a ::placeholder pass (contact's four fields, begin's "Tell us the occasion"). currentColor rather than a fixed grey: the same declaration then holds on the dark grounds, where the input's own colour is --linen and a hard-coded grey would be the identical mistake pointing the other way. 64% measures 5.29 on linen, 5.02 on alabaster, 7.21 for a linen input on onyx. The explicit opacity:1 is for Firefox, which dims placeholders to .54 by default and would take 5.29 back down to about 3. */ ::placeholder{color:color-mix(in srgb,currentColor 64%,transparent);opacity:1} /* ---------- selection ---------- ⚠ ::selection IS NOT INHERITED FROM AN ANCESTOR'S RULE. It is matched against the element the selected text lives in, so a dark ground needs its own DESCENDANT rule — rebinding a token on .g-bordeaux does nothing here. Without the two below, a drag across the bordeaux section painted bordeaux on bordeaux and left the text linen: the words really were selected and copied, and nothing on screen said so, which reads as "I cannot select this". Every dark ground therefore inverts: linen highlight, ground-coloured text. */ ::selection{background:var(--bordeaux);color:var(--linen)} .g-bordeaux::selection,.g-bordeaux ::selection, .mnav::selection,.mnav ::selection{background:var(--linen);color:var(--bordeaux)} .g-onyx::selection,.g-onyx ::selection{background:var(--linen);color:var(--onyx)} /* The footer used to be listed on the line above. It is alabaster now (see §footer), so it takes the DEFAULT bordeaux-on-linen selection like every other light ground; the one exception inside it is .capture__go, which is still a dark plate and inverts for itself at .capture__go::selection. */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* ---------- type scale ---------- Serif runs weight 300 above 20px and weight 400 below it. Crimson Pro Light was drawn for display; at text size, faded against linen, it turns to grey mush. Anything serif under 20px carries .srf-sm. */ .d1{font-family:var(--serif);font-weight:300;font-size:var(--fs-d1);line-height:1.02;letter-spacing:-0.015em} .d2{font-family:var(--serif);font-weight:300;font-size:var(--fs-d2);line-height:1.05;letter-spacing:-0.01em} .d3{font-family:var(--serif);font-weight:300;font-size:var(--fs-d3);line-height:1.12} .d4{font-family:var(--serif);font-weight:300;font-size:var(--fs-d4);line-height:1.15} .d5{font-family:var(--serif);font-weight:300;font-size:var(--fs-d5);line-height:1.2} .eyebrow{ font-family:var(--sans);font-size:var(--fs-label);font-weight:var(--fw-label); letter-spacing:var(--ls-label);text-transform:uppercase; display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)} .lede{font-family:var(--serif);font-weight:300;font-size:var(--fs-lede);line-height:1.5} .small{font-size:var(--fs-cap);letter-spacing:.02em} em.mh{font-style:normal;color:var(--accent)} .srf{font-family:var(--serif);font-weight:300} .srf-sm{font-family:var(--serif);font-weight:400} /* serif below 20px */ /* ---------- nav ---------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:0 var(--gutter);height:76px; /* ⚠ THE BAR IS BLACK CHERRY, WHICH MAKES IT A DARK GROUND — owner, 2026-08-31, picked in app/hero-ground-lab.html. IT WAS --bordeaux UNTIL THAT DATE and the reasoning below is unchanged by the swap, because cherry (353deg) and bordeaux (340deg) are the same family at two depths. Everything inked on it flips with it, and --accent is the one that is not obvious: the link underline is 1px of --mahogany, which measures 1.6:1 on the burgundy plate, i.e. an underline nobody can see. It goes linen here for exactly the reason .g-bordeaux does further down the file — any red on bordeaux is a near-miss rather than a contrast. 94%, NOT THE 86% THE LINEN PLATE CARRIED. A pale plate can be that sheer because whatever scrolls under it is darker and reads as depth; a dark plate at the same transparency takes the colour of the section beneath it, so the bar shifts from burgundy to plum to near-black as the page moves. 94% keeps the blur and stops the bar from changing its mind. ⚠ CHERRY IS THE LIGHTER OF THE TWO, SO EVERY RATIO ON THIS BAR DROPPED — measured over linen, the worst case, at the real 94% blend (#73121d against bordeaux's #561429): linen text 12.26 → 10.22, and .nav__login's 72% mix 6.68 → 5.69. Both still clear AA at 11px with room, which is why nothing below needed re-tuning. Anything NEW inked on this bar must be measured against #73121d, not against the bordeaux figure. */ background:color-mix(in srgb, var(--cherry) 94%, transparent); color:var(--linen);--accent:var(--linen); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:background .4s, transform .45s cubic-bezier(.4,0,.2,1); } .nav.is-hidden{transform:translateY(-100%)} /* ⚠ THE MERGED NAV. Past the first screen the bar does not slide away — it COLLAPSES INTO THE MARK: the strip loses its linen plate, the links and the CTA fade out, the wordmark closes leftward, and the seven-circle mark (brand/EVORRAH_BRAND_SYSTEM_V15.html §01) rises inside a round pill sitting exactly where the E of EVORRAH was. Hovering it — or tabbing into the bar — plays the whole thing backwards, so the navigation is one gesture away and never actually leaves. Four constraints hold this together and none of them is decoration: 1. NO MARKUP CHANGED. The header is hand-copied into ~75 pages, so the mark is a CSS mask on .nav__mark::after, not a second per page. The SVG paints currentColor, which an cannot inherit — a mask can. 2. ⚠ THE PILL CLOSES, NOT THE IMAGE. max-width on the looks equivalent and is not: the image carries height:20px with width:auto, so clamping its width SQUASHES the letterforms — EVORRAH condensing as it goes, which is the wordmark drawn wrong. So the ANCHOR's max-width closes (280px → 52px) while the image keeps its true width behind overflow:hidden, and the letters fade out well before the closing edge could reach them. 3. LEFT-ALIGNED, NOT CENTRED. justify-content:flex-start pins the wordmark's left edge to the pill's, so the pill closes onto the E rather than sliding inward from both sides — the logo does not move on the page, it just loses its word. 4. THE STRIP IS pointer-events:none WHEN MERGED, so a transparent 76px band does not eat clicks across the top of every page. The mark and the burger opt back in, and :hover restores the strip itself so the cursor can travel from the pill to the links without falling through the gap between them. TIMING. A transition reads the timing of the state it moves TO, so closing times live on .is-merged and opening times on the base and :hover rules — which is what makes the two directions differently paced rather than one played in rewind. Closing: letters go first (.22s), pill shuts under them (.5s), mark arrives last (.26s at +.2s). Opening: mark goes first, then the pill opens, then the letters land — always the outgoing thing before the incoming one, so the two never overlap in the same 52px. */ .nav__mark{ position:relative;display:flex;align-items:center;justify-content:flex-start; flex:0 0 auto; /* the wordmark must never be flex-shrunk into the clip */ /* ⚠ border-radius:0 AT REST, 50% ONLY WHEN MERGED (2026-09-10, owner: "this is cut still"). At rest this box is the wordmark's own 207x52, and 50% of a 207x52 box is an ELLIPSE: with overflow:hidden it cut the top and bottom off the E's stem and the H's right leg on every page (hit-tested on evorrah.com). EVR-087 measured only the merged 52x52 seal, where 50% is a true circle — so the 50% lives on .nav.is-merged .nav__mark. */ height:52px;min-width:52px;max-width:280px;border-radius:0;overflow:hidden; transition:max-width .5s cubic-bezier(.22,.61,.36,1) .06s, background .4s,box-shadow .4s; } .nav__mark img{ /* ⚠ max-width:none UNDOES THE GLOBAL img{max-width:100%} ON LINE 99, which otherwise re-clamps the wordmark to the closing pill and SQUASHES the letterforms as it shuts (measured: 207.4px → 48.9px). flex:0 0 auto keeps flexbox from doing the same thing by a different route. The wordmark must keep its true width and be CLIPPED — a condensed EVORRAH is the wordmark drawn wrong, and it would be drawn wrong on every scroll. */ height:20px;width:auto;max-width:none;flex:0 0 auto;transform-origin:left center; /* The wordmark SVG paints currentColor, and an resolves that against its OWN document — black — not ours, so it cannot be recoloured by inheritance. Invert the black to white and let brightness hold it there. Safe to apply unconditionally — the only state that puts this image on a pale plate is the merged pill, where it is already opacity:0 and the ::after mask is the visible mark. (This used to point at .foot__mark img as the same case. It is the OPPOSITE case now: the footer is alabaster since 2026-08-31 and carries no filter at all.) */ filter:invert(1) brightness(2); transition:opacity .3s cubic-bezier(.22,.61,.36,1) .22s, transform .45s cubic-bezier(.22,.61,.36,1) .18s; } .nav__mark::after{ content:"";position:absolute;left:26px;top:50%;width:21px;height:23px; transform:translate(-50%,-50%) scale(.5) rotate(-25deg);opacity:0;pointer-events:none; background:var(--onyx); -webkit-mask:url(/assets/brand/evorrah-mark.svg) center/contain no-repeat; mask:url(/assets/brand/evorrah-mark.svg) center/contain no-repeat; transition:opacity .2s,transform .3s cubic-bezier(.4,0,1,1); } .nav.is-merged{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none} .nav.is-merged .nav__mark, .nav.is-merged .nav__burger{pointer-events:auto} .nav.is-merged .nav__mark{ max-width:52px;border-radius:50%; background:color-mix(in srgb, var(--linen) 92%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 12%, transparent); transition:max-width .5s cubic-bezier(.65,0,.35,1) .04s, background .4s .1s,box-shadow .4s .1s; } .nav.is-merged .nav__mark img{ opacity:0;transform:translateX(-10px) scale(.94); transition:opacity .22s cubic-bezier(.4,0,1,1),transform .4s cubic-bezier(.65,0,.35,1); } .nav.is-merged .nav__mark::after{ opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg); transition:opacity .26s .2s,transform .5s cubic-bezier(.34,1.28,.64,1) .18s; } /* ⚠ THE BOOKING BUTTON DOES NOT MERGE AWAY — it is the only thing on the bar that earns money, so it survives the collapse as a round arrow at the right edge. Hence the links fade INDIVIDUALLY (a:not(.btn-cta)) rather than the .nav__links row fading as a block: a faded parent cannot hold a solid child. The row's gap closes to 0 with them — on the timing set out below — or the collapsed links would leave six 30px holes and push the arrow off the gutter. font-size:0 is what removes "Start Your Event": the label is a bare text node inside the anchor, so it cannot be selected — but .arr is an element and can take its size back. Nothing is display:none anywhere here, because a link that is not in the layout cannot animate back into it. */ /* ⚠ THE FADE LEADS THE GEOMETRY, AND UNTIL 2026-09-04 IT DID NOT. Both the labels and the row's gap used to run on the base rule below — opacity .35s after a .12s delay — while `gap:0` carried no transition at all and so snapped on the first frame of the merge. Measured at 1440px: for the first ~220ms the row sat at gap 0 with every label still full width and fully opaque, which ran "How It Works What We've Handled Pricing About" together into one unbroken line of words before any of it began to fade. The labels now go out FIRST (.22s, no delay — the same beat the wordmark keeps three rules up), and the widths and the gap close under them from .18s, by which point there is nothing left to read. The gap is transitioned rather than snapped for the reason the pill closes rather than jumps; a browser that will not interpolate `gap` still gets the fix, because the fade is over before the snap. */ .nav.is-merged .nav__links{gap:0;transition:gap .45s cubic-bezier(.65,0,.35,1) .18s} .nav.is-merged .nav__links a:not(.btn-cta){ opacity:0;transform:translateY(-8px);max-width:0;pointer-events:none;overflow:hidden; transition:opacity .22s cubic-bezier(.4,0,1,1), transform .45s cubic-bezier(.65,0,.35,1) .18s, max-width .45s cubic-bezier(.65,0,.35,1) .18s; } .nav__links a:not(.btn-cta){max-width:220px;transition:opacity .35s .12s,transform .45s cubic-bezier(.22,.61,.36,1) .12s,max-width .45s cubic-bezier(.22,.61,.36,1) .12s} .nav__links .btn-cta{ overflow:hidden; transition:background .35s,color .35s,border-color .35s, width .5s cubic-bezier(.22,.61,.36,1) .06s, padding .5s cubic-bezier(.22,.61,.36,1) .06s, font-size .3s cubic-bezier(.22,.61,.36,1) .1s, box-shadow .4s; } .nav.is-merged .nav__links .btn-cta{ width:52px;height:52px;padding:0;gap:0;font-size:0; background:var(--onyx);border-color:var(--onyx);color:var(--linen); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 16%, transparent); pointer-events:auto; transition:background .35s,color .35s,border-color .35s, width .5s cubic-bezier(.65,0,.35,1) .04s, padding .5s cubic-bezier(.65,0,.35,1) .04s, font-size .22s cubic-bezier(.4,0,1,1), box-shadow .4s .1s; } .nav.is-merged .nav__links .btn-cta .arr{font-size:var(--fs-label);line-height:1} .nav.is-merged .nav__links .btn-cta:hover{background:var(--cherry);border-color:var(--cherry)} .nav.is-merged .nav__burger{ background:color-mix(in srgb, var(--linen) 92%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 12%, transparent); /* 15px, not 14: the three 1.5px bars plus two 5px gaps measure 14.5px, so 14px padding gives a 43px pill — under the 44px minimum touch target, and this is the ONLY way to open the menu on a phone once the bar has merged. */ border-radius:50%;padding:15px 14px; transition:background .4s .1s,box-shadow .4s .1s, padding .5s cubic-bezier(.65,0,.35,1) .04s; } .nav__links{transition:opacity .35s .12s,transform .45s cubic-bezier(.22,.61,.36,1) .12s,gap .45s cubic-bezier(.22,.61,.36,1) .12s} /* ⚠ THE HOVER RE-OPEN IS DESKTOP-ONLY, BEHIND @media(hover:hover). A phone has no hover — it has a tap that STICKS as :hover on whatever was last touched, which would leave the bar jammed open over the page after any tap near it. Touch re-opens the bar the way it always has: the burger, which survives the merge as its own pill. :focus-within is deliberately NOT gated — it is how a keyboard reaches the bar, and it works the same on both. */ @media(hover:hover){ /* Unmerge on hover / keyboard focus — the bar comes back exactly as it was. ⚠ "EXACTLY AS IT WAS" IS LITERAL: this blend must stay identical to the one on .nav itself, or the bar changes colour the moment you hover it. Both moved bordeaux → cherry together on 2026-08-31; change them together or not at all. */ .nav.is-merged:hover, .nav.is-merged:focus-within{ background:color-mix(in srgb, var(--cherry) 94%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); pointer-events:auto; } .nav.is-merged:hover .nav__mark, .nav.is-merged:focus-within .nav__mark{ max-width:280px;border-radius:0;background:transparent;box-shadow:none; /* square again, or the ellipse clips the returning wordmark */ transition:max-width .5s cubic-bezier(.22,.61,.36,1) .06s,background .35s,box-shadow .35s; } .nav.is-merged:hover .nav__mark img, .nav.is-merged:focus-within .nav__mark img{ opacity:1;transform:none; transition:opacity .3s cubic-bezier(.22,.61,.36,1) .22s, transform .45s cubic-bezier(.22,.61,.36,1) .18s; } .nav.is-merged:hover .nav__mark::after, .nav.is-merged:focus-within .nav__mark::after{ opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-25deg); transition:opacity .18s,transform .3s cubic-bezier(.4,0,1,1); } /* ⚠ THE OPENING TIMING IS RESTATED ON BOTH OF THESE, and deleting it does not restore the base rule — it hands the re-open to the CLOSING one. A transition is read from the state being moved TO, and in the hovered state the .nav.is-merged rules above still match and out-specify plain .nav__links, so the numbers they carry would run the bar backwards out of the pill: labels back at .22s, before the row has the width to hold them. The values below are the base rule's, unchanged — keep the three in step. */ .nav.is-merged:hover .nav__links, .nav.is-merged:focus-within .nav__links{ gap:clamp(13px,1.9vw,30px); transition:opacity .35s .12s,transform .45s cubic-bezier(.22,.61,.36,1) .12s, gap .45s cubic-bezier(.22,.61,.36,1) .12s; } .nav.is-merged:hover .nav__links a:not(.btn-cta), .nav.is-merged:focus-within .nav__links a:not(.btn-cta){ opacity:1;transform:none;max-width:220px;pointer-events:auto; transition:opacity .35s .12s,transform .45s cubic-bezier(.22,.61,.36,1) .12s, max-width .45s cubic-bezier(.22,.61,.36,1) .12s; } .nav.is-merged:hover .nav__links .btn-cta, .nav.is-merged:focus-within .nav__links .btn-cta{ width:auto;height:auto;padding:14px 34px 14px 36px;gap:14px;font-size:var(--fs-label); background:transparent;border-color:var(--linen);color:var(--linen);box-shadow:none; } /* Fill can no longer be --bordeaux: the bar it sits on IS bordeaux, so the hover state would erase the button and leave floating linen text. It inverts instead, which is what .btn-cta--linen already does everywhere else on a dark ground. */ .nav.is-merged:hover .nav__links .btn-cta:hover, .nav.is-merged:focus-within .nav__links .btn-cta:hover{background:var(--linen);border-color:var(--linen);color:var(--onyx)} /* The opening timing again, restated for the reason it is restated on .nav__links above: .nav.is-merged .nav__burger out-specifies the base rule and would otherwise run the re-open on the closing numbers. */ .nav.is-merged:hover .nav__burger, .nav.is-merged:focus-within .nav__burger{ background:transparent;box-shadow:none;padding:8px; transition:background .4s,box-shadow .4s,padding .5s cubic-bezier(.22,.61,.36,1) .06s; } /* ⚠ AND THE BARS COME BACK LINEN EVEN WITH NO GROUND RESOLVED. The stand-down further down the file is written as [data-ground], but motion.js only sets that attribute once it has found a section under the bar — before it does, and on any page with no ground section beneath the strip, the reopened burgundy bar was wearing the merged pill's onyx bars. Measured at (0,4,1), which clears the (0,3,1) restore next to the base rule and loses to the (0,5,1) ground rules, so the tinted pills still win where they should. */ .nav.is-merged:hover .nav__burger i, .nav.is-merged:focus-within .nav__burger i{background:var(--linen)} } /* ⚠ !important IS LOAD-BEARING HERE, NOT SLOPPINESS. Without it this block is DEAD: every state rule above is a compound selector — .nav.is-merged .nav__mark is (0,3,0), .nav.is-merged:hover .nav__mark is (0,4,0) — so a plain .nav__mark{transition:none} at (0,1,0) loses on specificity no matter where it sits in the file. Measured before the fix: with the rule appended LAST, .nav.is-merged .nav__mark still reported 0.5s, 0.4s, 0.4s — a visitor who has asked their system for less motion was getting the whole animation. The same pattern at the .rv block below holds for the same reason. */ @media(prefers-reduced-motion:reduce){ .nav,.nav__mark,.nav__mark img,.nav__mark::after, .nav__links,.nav__links a,.nav__links .btn-cta,.nav__burger{transition:none!important} } /* ⚠ THE MERGED PILL WEARS THE GROUND IT IS ON. nav[data-ground] is written by motion.js from the section actually behind the pill (.g-linen / .g-alab / .g-onyx / .g-bordeaux). The pill is then that ground's own colour with the mark flipped for contrast — so on the bordeaux acts the logo IS burgundy, and on the onyx acts it is black, instead of a cream disc riding over both. Two rules that are not style choices: · THE MARK ALWAYS FLIPS WITH THE PILL. A linen mark on a linen pill is an invisible logo, and this is the only navigation on screen once merged. · THE BUTTON FLIPS TOO, IN THE OPPOSITE DIRECTION. The collapsed CTA is onyx by default and would vanish into an onyx section; on both dark grounds it goes linen with an onyx arrow. It is the buy path — it can never be the thing that disappears. These apply ONLY while merged: the full bar carries its own linen plate, and the wordmark on it is already onyx-on-linen at every scroll position. */ .nav.is-merged[data-ground="alab"] .nav__mark{background:color-mix(in srgb, var(--alabaster) 92%, transparent)} .nav.is-merged[data-ground="bordeaux"] .nav__mark, .nav.is-merged[data-ground="bordeaux"] .nav__burger{ background:color-mix(in srgb, var(--bordeaux) 92%, transparent); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 26%, transparent); } .nav.is-merged[data-ground="onyx"] .nav__mark, .nav.is-merged[data-ground="onyx"] .nav__burger{ background:color-mix(in srgb, var(--onyx) 92%, transparent); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 34%, transparent); } .nav.is-merged[data-ground="bordeaux"] .nav__mark::after, .nav.is-merged[data-ground="onyx"] .nav__mark::after{background:var(--linen)} .nav.is-merged[data-ground="bordeaux"] .nav__burger i, .nav.is-merged[data-ground="onyx"] .nav__burger i{background:var(--linen)} .nav.is-merged[data-ground="bordeaux"] .nav__links .btn-cta, .nav.is-merged[data-ground="onyx"] .nav__links .btn-cta{ background:var(--linen);border-color:var(--linen);color:var(--onyx); box-shadow:0 2px 20px color-mix(in srgb, var(--onyx) 30%, transparent); } .nav.is-merged[data-ground="bordeaux"] .nav__links .btn-cta:hover, .nav.is-merged[data-ground="onyx"] .nav__links .btn-cta:hover{ background:var(--cherry);border-color:var(--cherry);color:var(--linen); } /* ⚠ ≤1000px THE MERGED NAV KEEPS A PLATE, because below that width the two floating discs stop clearing the content column and start covering it. Measured on the live page at the Fully Handled row (2026-09-04, owner asked for the fix), pill x-range against the row it sits over: 1280 mark 64–116, title at 121 → clear; only .prow__num is grazed 768 mark 38–90, title at 82 → title covered 9×30, and the BURGER takes 50×26 of it plus 50×9 of the price 375 mark 20–72, title at 53 → title covered 19×22 by the mark and 50×18 by the burger, plus 50×8 of the price THE DESIGN IS RIGHT AT DESKTOP and wrong only where the gutter is too narrow to hold the pill outside the column, so the fix is scoped to those widths and nothing above 1000px changes. It is also why this reads as a rendering bug rather than a floating logo: the pill is deliberately the ground's OWN colour (see the [data-ground] block above), so a reader does not see a disc over the words — they see the words cut in half, with nothing to explain the cut. The plate wears that same ground, so "merged" still means merged INTO the section rather than a bar bolted onto it; and the discs give up their own plates here, because a disc on a plate of the identical colour is only a shadow. THE PLATE IS SOLID, not the pill's 92%-plus-blur: at 52px that reads as frosted glass, but across the full width the 8% that comes through is a legible smear of the words underneath — measured on the first cut of this fix. Solid ground is also the only value that makes the bar vanish into the section, which is the whole point of calling it merged. The mark glyph and the burger bars keep the contrast flips the [data-ground] rules already give them, so nothing needs re-checking there. ⚠ [data-ground] IS IN THE LAST SELECTOR TO MATCH SPECIFICITY, NOT FOR EFFECT. The tint rules above are (0,4,0) compound selectors, so a plain .nav.is-merged .nav__mark at (0,3,0) would lose to them wherever it sat in the file — the same trap the prefers-reduced-motion block documents. */ @media (max-width:1000px){ .nav.is-merged{background:var(--linen)} .nav.is-merged[data-ground="alab"]{background:var(--alabaster)} .nav.is-merged[data-ground="bordeaux"]{background:var(--bordeaux)} .nav.is-merged[data-ground="onyx"]{background:var(--onyx)} .nav.is-merged[data-ground] .nav__mark, .nav.is-merged[data-ground] .nav__burger, .nav.is-merged .nav__mark, .nav.is-merged .nav__burger{background:transparent;box-shadow:none} } /* Re-opening the bar brings its own linen plate back, so the ground tints must stand down — a bordeaux pill would then be sitting on linen. Split in two on purpose: the :hover half is gated to hover-capable pointers for the same reason as the block above (a sticky tap-hover would otherwise clear the pill colour and leave a dark mark on a dark section, i.e. no visible logo on a phone), the :focus-within half is not, because a keyboard has no pointer. */ @media(hover:hover){ .nav.is-merged[data-ground]:hover .nav__mark, .nav.is-merged[data-ground]:hover .nav__burger{background:transparent;box-shadow:none} .nav.is-merged[data-ground]:hover .nav__mark::after{background:var(--onyx)} .nav.is-merged[data-ground]:hover .nav__burger i{background:var(--linen)} /* ⚠ AND THE BUTTON HAS TO BE SAID TWICE. The ground rule and the hover rule both weigh (0,5,0), so the later one — the ground — would win and leave a linen button with a linen border on the reopened linen bar, i.e. an invisible Start Your Event. Naming both in one selector outweighs both. */ .nav.is-merged[data-ground]:hover .nav__links .btn-cta{ background:transparent;border-color:var(--linen);color:var(--linen);box-shadow:none; } .nav.is-merged[data-ground]:hover .nav__links .btn-cta:hover{ background:var(--linen);border-color:var(--linen);color:var(--onyx); } } .nav.is-merged[data-ground]:focus-within .nav__mark, .nav.is-merged[data-ground]:focus-within .nav__burger{background:transparent;box-shadow:none} .nav.is-merged[data-ground]:focus-within .nav__mark::after{background:var(--onyx)} .nav.is-merged[data-ground]:focus-within .nav__burger i{background:var(--onyx)} .nav.is-merged[data-ground]:focus-within .nav__links .btn-cta{ background:transparent;border-color:var(--onyx);color:var(--onyx);box-shadow:none; } /* ⚠ AND THE FOCUS HALF FLIPS ONLY WHERE THE BAR ACTUALLY REOPENS. The three rules above are deliberately ungated (a keyboard has no pointer), but the reopen they are standing down FOR lives inside @media(hover:hover) — so on a touch device focusing the merged nav clears the ground tint without ever bringing the burgundy plate back. Flipping their ink to linen up there would put a linen border on a transparent button over a LINEN section: an invisible buy path on a phone. So the flip is added here, gated, at equal specificity and later in the file, and the ungated onyx stays correct for the state it actually describes. */ @media(hover:hover){ .nav.is-merged[data-ground]:focus-within .nav__burger i{background:var(--linen)} .nav.is-merged[data-ground]:focus-within .nav__links .btn-cta{ background:transparent;border-color:var(--linen);color:var(--linen);box-shadow:none; } } /* ⚠ THE GAP AND THE BREAKPOINT ARE SIZED TO THE LINK COUNT, AND THE COUNT CHANGED. The bar carried four links; Pricing and Client login make six, and at the old clamp(18px,3vw,44px) the six links measured 951px against a 1280px viewport — the row began at x=265 and the wordmark ended at x=265, i.e. they met at exactly zero gap, with "What We Solve" (renamed "Why Evorrah") and "Events, Handled" wrapping to two lines to fit. Hence a tighter gap, nowrap so a label can never break mid-phrase, an explicit floor between mark and links, and a handoff to the burger at 1080px instead of 900px — the range where six links stop fitting is above 900, so the old breakpoint left the crowded state on screen. */ /* ⚠ THE BAR IS SPLIT, NOT ONE RIGHT-HAND CLUSTER (owner, 2026-08-31: "it doesn’t make sense that About is on the right side"). The four site links ride with the wordmark on the LEFT; only the account pair — Login and the booking CTA — sits at the right gutter, so "who we are" is no longer shoulder-to-shoulder with the buy button. flex:1 here + margin-left:auto on .nav__login (below) is the whole mechanism: NO MARKUP CHANGED, because the merged-nav machinery above addresses .nav__links as one element and the header is stamped into 80+ pages by scripts/v15-shell.mjs. */ .nav__links{display:flex;align-items:center;gap:clamp(13px,1.9vw,30px);margin-left:36px;flex:1 1 auto} .nav__links a{white-space:nowrap} /* The bar's CTA is an outline button and the outline was --onyx: 1.4:1 on burgundy, a button you can only find by hovering it. On the bar it wears the .btn-cta--linen treatment instead — linen outline, inverting to a linen fill with onyx text. Left at (0,3,0) on purpose: every .nav.is-merged rule above is (0,4,0) or higher, so the collapsed arrow keeps its own onyx/ground colours and only the OPEN bar is restyled here. */ .nav__links .btn-cta{border-color:var(--linen);color:var(--linen)} .nav__links .btn-cta:hover{background:var(--linen);border-color:var(--linen);color:var(--onyx)} .nav__links a:not(.btn-cta){ font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:var(--ls-label);text-transform:uppercase; position:relative;padding:6px 0; } .nav__links a:not(.btn-cta)::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--accent);transition:width .35s cubic-bezier(.4,0,.2,1); } .nav__links a:not(.btn-cta):hover::after, .nav__links a:not(.btn-cta)[aria-current]::after{width:100%} /* ⚠ THREE RADII EXIST — 0, 2px, 50% — AND NOTHING ELSE (EVR-087, brand book §"Rounded corners", brand.json tokens.radius). Until 2026-09-09 thirteen rules in this file drew a 999px stadium; the homepage alone rendered seven of them as buttons. Engraving has square corners, so the rule now reads: · A TEXT BUTTON OR CHIP IS SQUARE — radius 0, the book's default. Swept: .btn-cta (here), .chaos__words span, .ecard__plan, .hcard__plan, .mod-tier, .mod-inc, .pf-chip, .made span, .ck__btn, .efm__go, .coll__ex a. 2px is the INPUT radius and is deliberately NOT used on a button — a 2px button and a 2px field would read as the same control. · A CIRCULAR CONTROL IS 50% — the merged .nav__mark (52x52, a seal carrying the E) and the merged .nav__burger, the two discs the comment above already calls "one gesture". 50% is the only radius that keeps being a disc when the box changes size, which both of those do. The portal DRAWING further down (.p*, the mock inside .device__screen) is left alone on purpose: it depicts software on a screen, not stationery. */ .btn-cta{ display:inline-flex;align-items:center;justify-content:center;gap:14px; font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:var(--ls-label);text-transform:uppercase; border:1px solid var(--onyx);border-radius:0; padding:14px 34px 14px 36px;color:var(--onyx); transition:background .35s,color .35s,border-color .35s; white-space:nowrap;line-height:1; /* WCAG 1.4.10 · nowrap plus 70px of horizontal padding makes the longest CTA ("Start with Fully Handled →") 300px wide, which overran a 280px column at 320px and had its arrow CLIPPED by the plan panel's overflow:hidden. max-width lets the button shrink instead; the narrow-screen rule at the end of this file lifts the nowrap and trims the padding once even that is not enough. */ max-width:100%; } .btn-cta .arr{letter-spacing:0} .btn-cta .arr{transition:transform .35s} .btn-cta:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--linen)} .btn-cta:hover .arr{transform:translateX(4px)} .btn-cta--solid{background:var(--onyx);color:var(--linen)} .btn-cta--solid:hover{background:var(--cherry);border-color:var(--cherry)} .btn-cta--linen{border-color:var(--linen);color:var(--linen)} .btn-cta--linen:hover{background:var(--linen);border-color:var(--linen);color:var(--onyx)} /* mobile nav */ .nav__burger{display:none;flex-direction:column;gap:5px;padding:8px; /* The merged pill below computes its padding to clear 44px explicitly. The UNMERGED burger did not, and measured 38x31 — the same control, the same job, under the Evorrah minimum on every phone before the bar merges. The min-* pair holds the floor without touching the padding, so the merged rule and the :hover rule that resets padding to 8px both stay at 44. */ min-width:44px;min-height:44px;align-items:center;justify-content:center;box-sizing:border-box; /* ⚠ THE BURGER IS HALF OF A PAIR AND HAS TO MOVE LIKE IT. It carried no transition of its own until 2026-09-04 — only its three bars did — so every merge jumped it in a single frame while the mark beside it eased: the box 8px → 15px/14px (44 → 50 wide, measured), and between 1001 and 1080px the plate and the shadow arrived at full strength on frame one while the mark's plate faded in over .4s. Two discs meant to read as one gesture, one of them popping. These are the mark's OPENING numbers; the closing ones sit on .nav.is-merged with the rest of the closing timing. Below 1000px the discs are transparent (the ground rules further down), so only the padding is doing anything there — which is the frame the finger is resting on. */ transition:background .4s,box-shadow .4s,padding .5s cubic-bezier(.22,.61,.36,1) .06s} /* Linen on the burgundy bar; back to onyx once the bar has merged, because the burger is then a pale pill on the page rather than three bars on the plate. The [data-ground] rules for the bordeaux and onyx acts are (0,4,1) and still win over the restore, which is what keeps the pill's bars flipping with it. */ .nav__burger i{display:block;width:22px;height:1.5px;background:var(--linen);transition:transform .3s,opacity .3s} .nav.is-merged .nav__burger i{background:var(--onyx)} /* ⚠ THE OVERLAY FOLLOWS THE BAR, bordeaux → cherry with it on 2026-08-31. It is not a separate colour decision: .mnav IS the bar on a phone, and the rule below drops the bar's plate on the stated grounds that "both are now the same" colour. Leave one bordeaux and the other cherry and that sentence becomes false, the bar and its own menu become two near-miss reds, and the seam the rule exists to remove comes back as a colour step instead. */ .mnav{ position:fixed;inset:0;z-index:190;background:var(--cherry);color:var(--linen); display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter); opacity:0;pointer-events:none;transition:opacity .4s; } .mnav.open{opacity:1;pointer-events:auto} /* ⚠ THE BAR DROPS ITS PLATE WHILE THE MENU IS OPEN. The bar sits at z-index 200 over the overlay's 190, and both are now the same burgundy — so the bar's own 94% plate and its backdrop-filter buy nothing and cost a faint seam across the top of the menu, where the blur samples past the top edge. This mattered the other way round when the bar was linen: a pale strip over a bordeaux overlay was a deliberate divider. It is not one any more. */ body.mnav-open .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .mnav a{font-family:var(--serif);font-weight:300;font-size:clamp(34px,9vw,56px);line-height:1.3;border-bottom:1px solid color-mix(in srgb,var(--linen) 16%, transparent)} .mnav a:last-of-type{border-bottom:none} /* ⚠ THE MENU MUST FIT, OR SCROLL, ON A PHONE HELD SIDEWAYS — measured 2026-09-10, Launch Hub check 02-04 (scripts/launch-readiness/ws02-04-device-matrix.mjs). `justify-content:center` in a fixed box that does not scroll centred six 56px links (9vw of a 667–838px-wide screen hits the 56px cap) in a 320–390px-tall screen: the list overflowed BOTH ends, the first link sat 26–61px above the screen under the bar and the last below it, and nothing could scroll to either. Three to five of the six links were unreachable on every phone measured on its side (iPhone SE, 16, 16 Pro Max; Galaxy S9+, S24; Pixel 7); every upright phone and every tablet was fine. Three moves, each needed: · auto margins on the first and last link centre the list exactly as before when it fits (so an upright phone and a tablet render unchanged) and collapse to zero when it does not, so an overflowing list starts at the top of the box instead of above it; · the box scrolls (overscroll contained, so the page behind does not move); · a short screen reserves the 76px the bar (z-index 200) covers, and the type steps down to 8.5vh (27–40px) — six links then fit a 320px screen with room to spare, and the scroll is only the safety net for a larger text setting. */ /* ⚠ AND IT SCROLLS ABOVE THE CONSENT BAR (owner, 2026-09-10): the tap that opens the menu is also the tap that shows #cookieBanner (site.js), and on a phone on its side the bar sat over the last two or three links until answered. site.js publishes the bar's measured height as --ck-h while it is up (0 once answered); the menu pads its bottom by it, so the list centres in, and scrolls within, the space above the bar. */ /* ⚠ justify-content MUST BE flex-start WHERE THE LIST CAN OVERFLOW — and ONLY there. Corrected 2026-09-11 (02-04), then SCOPED the same day (WS02 close), and both halves matter. The correction: the first version of the comment above was wrong about why the auto margins were enough. With free space the auto margins centre the list and justify-content is ignored; with NEGATIVE free space the auto margins resolve to 0 and justify-content applies again, so `center` split the overflow and put the first link ABOVE the scroll origin, where no scroll reaches. The consent-bar padding made the list overflow on a 360px-tall Android held sideways and "How It Works" sat at 20-62px, under the bar, on the Galaxy S24, S9+ and Pixel 7. The scoping: that correction was written as an UNCONDITIONAL declaration on .mnav, which also changed an upright phone — where it renders identically (the auto margins take the free space) but the computed value is no longer `center`, which is what test/v15-mobile-menu-short-screen.test.mjs case 2 measures, and it went red on the merge. Deleting the peer's fix would put the 360px-tall Android back, so the declaration MOVED into a height query instead of going away. 620px is measured, not guessed: six links cap at 56px above ~622px of width and stack to 442px, and the real consent bar measures 75px on a wide screen and 132-152px on a narrow one (app/live served through Playwright, 2026-09-11), so the list can overflow up to ~574px of height. 620px clears that with room for a larger text setting, and every upright phone (667px and up) keeps `center`. */ .mnav{overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--ck-h,0px)} .mnav a:first-of-type{margin-top:auto} .mnav a:last-of-type{margin-bottom:auto} @media (max-height:620px){ .mnav{justify-content:flex-start} } /* ⚠ A PHONE ON ITS SIDE IS 390px TALL, AND THE MENU IS TALLER THAN THAT (2026-09-10, check 02-03). Six links at clamp(34px,9vw,56px) × 1.3 stack to ~444px. Centred by justify-content:center in a fixed overlay that could not scroll, the overflow spilled off BOTH ends: "How It Works" sat at y=-26, under the 76px bar, and could not be reached — measured in Chrome, WebKit and Firefox at 844×390 (scripts/launch-readiness/ws02-2c-device-browser-matrix.mjs). On a short screen the list now starts below the bar and the overlay scrolls; a tall screen still centres it (the first link of an upright 390×844 phone measures 283px with or without this block). ⚠ ORDER IS THE RESOLUTION (WS02 close, 2026-09-11). Checks 02-03 and 02-04 found the SAME defect and fixed it twice. This 520px block is kept for the 501–520px band that 02-04 never measured — there it is the whole fix, and the menu scrolls from under the 88px it reserves. At 500px and below the 02-04 block underneath SUPERSEDES it: it was retested 66/66 on six phones on their side, and it reserves the bar's MEASURED 76px (pinned to `.nav`'s own height by test/website-phone-menu-scrolls.test.mjs) and steps the type to 8.5vh so the six links FIT instead of only scrolling. Padding is not doubled — the later block overrides the same two declarations — and `justify-content:flex-start` here now restates what the 620px block above already sets (it is the same declaration, not a second one): it is kept because this block is the one 02-03 measured, and a reader who opens it should see the value it was measured with. ⚠ It is NOT inert, which an earlier version of this sentence claimed: the auto margins take the free space only when there IS free space, and this whole block exists for screens where there is none. Keep the 02-04 block LAST. */ @media (max-height:520px){ .mnav{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding-top:88px;padding-bottom:24px} } @media (max-height:500px){ .mnav{padding-top:76px;padding-bottom:max(16px,var(--ck-h,0px))} .mnav a{font-size:clamp(26px,8.5vh,40px)} } @media(max-width:1080px){ .nav__links{display:none} .nav__burger{display:flex} body.mnav-open{overflow:hidden} body.mnav-open .nav__burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--linen)} body.mnav-open .nav__burger i:nth-child(2){opacity:0} body.mnav-open .nav__burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--linen)} } /* ---------- section grounds ---------- */ /* ⚠ THE GROUND DECIDES WHICH STOP OF THE ACCENT IS LEGIBLE ON IT. onyx takes the lifted stop (--accent-lift, 4.53:1 — the base is 3.15 there); bordeaux takes linen outright, because ANY red on bordeaux is 2.9:1 or worse and a 1px accent hairline on it is invisible rather than subtle. */ .g-onyx{--accent:var(--accent-lift)} .g-bordeaux{--accent:var(--linen)} .g-linen{background:var(--linen);color:var(--onyx)} .g-alab{background:var(--alabaster);color:var(--onyx)} .g-onyx{background:var(--onyx);color:var(--linen)} .g-bordeaux{background:var(--bordeaux);color:var(--linen)} section{position:relative} .sec-pad{padding-top:clamp(80px,11vh,150px);padding-bottom:clamp(80px,11vh,150px)} /* ---------- reveal motion ---------- */ .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,.6,.2,1),transform .9s cubic-bezier(.22,.6,.2,1)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s} .rv-line{display:block;overflow:hidden} .rv-line span{display:block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.22,.6,.2,1)} .in .rv-line span{transform:none} .rv-line:nth-child(2) span{transition-delay:.1s} .rv-line:nth-child(3) span{transition-delay:.2s} @media(prefers-reduced-motion:reduce){ .rv,.rv-line span{opacity:1!important;transform:none!important;transition:none!important} html{scroll-behavior:auto} } /* ---------- footer ---------- */ /* ============================================================ THE FOOTER IS ALABASTER — 2026-08-31 (owner: "linen or grey background … no black background"). It was onyx from v15's first commit, which meant every page ended in a black slab. This is the SAME migration #plans took (style.css §#plans.g-alab) and it obeys the same two rules: 1. ⚠ THE ALPHA STOPS ARE NOT THE OLD NUMBERS INVERTED. On onyx a linen mix at 56% measures 7.4:1; 56% of onyx over #E7E3DD is 3.92:1 and FAILS AA at --fs-label (11px), which is what the column headings, the newsletter label, the consent line and the legal row are all set in. 62% is the 4.5:1 floor on this ground, so the muted stop is 64% (5.00) and the body stops sit at 86-88% (10.2-10.8). Re-measure before lowering any of them. Hairlines follow the light-ground convention: 14% for rules, 50% for the one control border that owes 3:1 (1.4.11). 2. THE GROUND REBINDS THE ACCENT, so --accent is no longer forced to the lifted stop here: :root's --mahogany is 6.65:1 on alabaster, and --accent-lift would be 2.9:1. The consent bar is still onyx and keeps the rebind for itself. The