/* Marga v3 design system ========================================================================================== Ported from the v3 handoff on 2026-08-01. Phase 1 of the migration: this file exists and nothing links it yet. The homepage is the first page to use it, in Phase 2. WHAT CHANGED FROM THE HANDOFF, AND WHY. The v3 token table sets bronze #9A742F for "eyebrows, links and accents on light backgrounds" and three muted alphas for secondary text. Measured on a real page load, that produced 24 contrast failures out of 62 text nodes on the homepage alone, all of them token-level, so they would have repeated on all nine pages. bronze #9A742F as text 3.27 to 3.97:1 across the four light grounds rgba(22,20,15,.40) 2.55:1 rgba(22,20,15,.45) 2.94:1 rgba(22,20,15,.50) 3.32 to 3.41:1 rgba(241,233,219,.35) 2.87:1 rgba(241,233,219,.40) 3.36:1 AA wants 4.5:1 for anything under 24px, and every one of those is used at 10 to 15px. Five values move and the design does not. Bronze stays exactly as it is for fills, rules, borders and the left-border callout; it simply stops being a text colour, which is what the brand has said since 28 July. The alphas rise to the lowest step that clears on the WORST ground of each family, so no page can inherit a failure by sitting on sand rather than card. WHAT DID NOT NEED CHANGING, and this is most of the palette. Gold on the dark grounds measures 6.93 to 7.99:1, so v3's gold eyebrows on dark are correct and are left alone. Body text on dark at .72 measures 7.77 to 8.53:1. Advantage and Detractor in the scorecard clear at 6.46 and 5.02:1. The only scorecard colour that failed was Neutral, which is bronze again. ========================================================================================== */ /* Border-box everywhere. Every page on the current site already does this and the system assumed it rather than stating it, so `width:calc(100% - 40px)` plus 28px of padding overflowed its parent, which inflated the fixed nav, which widened the document, which widened the fixed nav again. One missing line, 44px of horizontal scroll on a phone. */ *,*::before,*::after{box-sizing:border-box} :root{ /* ---- ground colours. Unchanged from the handoff. ---- */ --ink:#16140F; /* primary text on light, solid dark buttons */ --ink2:#14120E; /* dark section background, nav capsule */ --ink3:#221D15; /* warmer dark, separates two adjacent dark sections */ --footer:#0F0E0B; --cream:#F1E9DB; /* default page background, and text on dark */ --sand:#EBE0CC; /* alternate section background */ --card:#FBF6EC; --card2:#F6F0E3; /* ---- three grounds the v4 design adds. Measured, not eyeballed. ---- */ --sand2:#E3D8BE; /* the thesis band. The darkest light ground on the site, which is why the accent below had to move. */ --card3:#F4EEE1; /* the lens section behind the three cards */ --proof:#F4EBD9; /* the proof block inside a card */ /* ---- accents. Both unchanged, but only one of them may be text. ---- */ --gold:#C7A24B; /* PRIMARY CTA FILL. On dark it is also safe as text, 6.93:1+ */ --gold-hover:#D4B45F; --bronze:#9A742F; /* FILL, RULE AND BORDER ONLY. 3.27:1 as text on sand. Never text. */ /* ---- text colours. These are the only tokens a text rule may use. ---- */ --text:var(--ink); /* body and headings on light */ --text-body:#4A4435; /* long-form body on light, 7.4:1 on sand */ /* THE ACCENT DARKENED, AND THE DESIGN IS WHY. #7A5A20 cleared every ground the site had. v4 adds --sand2 #E3D8BE, and #7A5A20 measures 4.48:1 on it, which misses AA by two hundredths. The v4 prototype uses #6B4F1C for exactly this text and it clears everywhere, so the design's own value is the fix rather than a compromise: ground #FBF6EC #F6F0E3 #F4EEE1 #F4EBD9 #F1E9DB #EBE0CC #E3D8BE #7A5A20 5.89 5.59 5.49 5.36 5.26 4.85 4.48 <- fails #6B4F1C 7.06 6.70 6.58 6.42 6.31 5.82 5.37 Darkening only ever raises contrast, so no existing page can regress on this. */ --text-accent:#6B4F1C; /* eyebrows and links on light, all seven grounds */ --text-muted:rgba(22,20,15,.62); /* was .40/.45/.50, all failing. 4.67:1 on sand */ --text-numeral:rgba(22,20,15,.5); /* the 01/02/03 card index. The design draws these at .26, which is 1.77:1 and unreadable. .50 is the faintest that clears the 3:1 large-text bar on every ground: 3.19 on sand2 to 3.41 on card. */ --text-on-dark:var(--cream); --text-on-dark-body:rgba(241,233,219,.72);/* 7.77:1 on ink3, the lightest dark ground */ --text-on-dark-muted:rgba(241,233,219,.55);/* was .35/.40, both failing. 5.0:1 on ink3 */ --text-accent-dark:var(--gold); /* gold IS safe as text on dark. 6.93:1 on ink3 */ /* ---- semantic, scorecard only ---- */ --advantage:#1A6640; /* 6.46:1 on card */ --neutral:#7A5A20; /* the handoff said #9A742F, which is 3.97:1 and fails */ --detractor:#B4463C; /* 5.02:1 on card */ /* ---- rules and grid gaps ---- */ --line:rgba(22,20,15,.18); --line-dark:rgba(241,233,219,.16); /* ---- type ---- */ --serif:'Newsreader',Georgia,serif; /* display and headings, all weights */ --sans:'Manrope',system-ui,sans-serif; /* body, UI, buttons, nav */ --mono:'Spline Sans Mono',ui-monospace,monospace; /* eyebrows, metadata, numerics */ /* ---- layout ---- */ /* 1280, not 1240. The v4 prototype puts no max width on the content and simply pads the section by 64, so at a 1280 viewport its column is 1152. At 1240 ours came out 1112 and every measured alignment in the design was 40px out. 1280 reproduces the prototype exactly at 1280 and still caps the line length on a wide display, which the prototype does not do at all. */ --col:min(1280px,100%); --col-narrow:min(900px,100%); --pad-y:clamp(60px,8vw,88px); --pad-x:clamp(22px,5vw,64px); --pad-hero-top:clamp(126px,13vw,160px); /* clears the fixed nav */ --pad-card:clamp(26px,3.4vw,42px); /* ---- radius. The design is deliberately square. ---- */ --r-pill:40px; --r-nav:44px; --r-panel:20px; --r-tag:24px; } /* ========================================================================================== Type scale, from the handoff's table. Fluid at every size, so intermediate widths need no extra work. ========================================================================================== */ /* THE DOCUMENT NEEDS A FACE OF ITS OWN. The scale below is entirely class driven, and the system set no font on the root, so any element that carried neither a t- class nor a font shorthand fell through to the browser's default serif. One did: the callout paragraph on the homepage was rendering in Times. A base declaration makes the worst case a wrong brand face rather than no brand face, which matters more with every page Phase 3 onward adds. Manrope because CLAUDE.md assigns it body and UI, and headings set --serif explicitly. */ /* margin:0 is not housekeeping. The browser's default body margin is 8px, the system never removed it, and every full-bleed section was therefore inset by 8px with a 16px-narrower content column than the design draws. It showed up as the hero mark's right edge landing at 1208 instead of 1216, which is the sort of thing that reads as "close enough" until every alignment in the design is measured against it. */ body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .t-h1{font:400 clamp(44px,6.4vw,92px)/.96 var(--serif);letter-spacing:-.03em;text-wrap:balance} .t-h2{font:400 clamp(32px,4.2vw,50px)/1.04 var(--serif);letter-spacing:-.01em;text-wrap:balance} .t-statement{font:300 clamp(34px,4.4vw,54px)/1.1 var(--serif);letter-spacing:-.015em; text-wrap:balance} .t-h3{font:400 clamp(26px,2.6vw,34px)/1.08 var(--serif);letter-spacing:-.01em} .t-lead{font:400 clamp(17px,1.6vw,20px)/1.58 var(--sans)} .t-body{font:400 16px/1.62 var(--sans)} .t-small{font:500 13px/1.5 var(--sans)} .t-eyebrow{font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase; color:var(--text-accent)} .t-label{font:600 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase; color:var(--text-muted)} .t-dek{font:italic 400 15px/1.5 var(--serif);color:var(--text-accent)} /* On a dark ground the same roles take the dark-safe values. Applied by putting .on-dark on any section, so a component does not need to know which ground it landed on. */ .on-dark{color:var(--text-on-dark)} .on-dark .t-eyebrow{color:var(--text-accent-dark)} .on-dark .t-label,.on-dark .t-muted{color:var(--text-on-dark-muted)} .on-dark .t-body,.on-dark .t-lead{color:var(--text-on-dark-body)} .on-dark .t-dek{color:var(--gold)} .t-muted{color:var(--text-muted)} /* ========================================================================================== The hairline grid. The signature layout device of v3: a 1px gap over a rule-coloured background, with each cell filled, so dividers are a single pixel rather than two abutting borders. ========================================================================================== */ .hair{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .hair>*{background:var(--card)} .hair.on-dark,.on-dark .hair{background:var(--line-dark);border-color:var(--line-dark)} .hair.on-dark>*,.on-dark .hair>*{background:var(--ink2)} .hair-2{grid-template-columns:repeat(2,1fr)} .hair-3{grid-template-columns:repeat(3,1fr)} .hair-4{grid-template-columns:repeat(4,1fr)} /* The single breakpoint. Every multi-column grid goes to one column, which the handoff specifies and which the first draft of this file did not implement: a three-up hairline grid held its three columns at 375px and scrolled 103px past the viewport. Subgrid is released at the same time, since there is nothing left to align against. */ @media(max-width:980px){ .hair-2,.hair-3,.hair-4{grid-template-columns:1fr} .hair>*{grid-row:auto !important;grid-template-rows:none !important} } /* ========================================================================================== Buttons. Every variant carries a 44px minimum height, which the prototype does not: 13 of 20 interactive elements on the v3 homepage measured under 44px at 375px, and the footer links measured 13px. Apple and Google both publish 44px as the floor. ========================================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:15px 28px;border-radius:var(--r-pill);font:700 14.5px/1 var(--sans); text-decoration:none;cursor:pointer;border:1px solid transparent; transition:background .15s,border-color .15s,color .15s} .btn-primary{background:var(--gold);color:var(--ink); box-shadow:0 14px 28px -12px rgba(22,20,15,.5)} .btn-primary:hover{background:var(--gold-hover)} .btn-square{border-radius:0} .btn-outline{border-color:rgba(22,20,15,.48);color:var(--ink);background:transparent} .btn-outline:hover{border-color:var(--ink)} /* .40, not v4's .34. A control's boundary is the only thing saying it is a control, and AA asks 3:1 for that. .34 measures 2.78:1 on ink. The light-ground twin above was raised for the same reason on 1 August and this one was missed, because nothing had measured a border on a dark ground until the v4 hero put two buttons there. */ .on-dark .btn-outline{border-color:rgba(241,233,219,.4);color:var(--cream)} .on-dark .btn-outline:hover{border-color:var(--cream)} .btn-dark{background:var(--ink);color:var(--cream)} .btn-dark:hover{background:#000} /* The text link with its rule and arrow. Given real padding so the target is not 21px. */ .link-arrow{display:inline-flex;align-items:center;gap:.4em;min-height:44px; font:700 13.5px/1 var(--sans);color:var(--text-accent);text-decoration:none; border-bottom:1px solid rgba(122,90,32,.4);padding-bottom:6px;align-self:flex-start} .link-arrow:hover{border-bottom-color:var(--text-accent)} .on-dark .link-arrow{color:var(--gold);border-bottom-color:rgba(199,162,75,.4)} .on-dark .link-arrow:hover{border-bottom-color:var(--gold)} /* ========================================================================================== The callout: a panel with a 2px gold left border. Used for the homepage thesis and the Exchange statement. ========================================================================================== */ /* The same component on a light ground, which is where v4 puts it. The gold left border is a rule and not text, so it stays gold. */ .callout-light{background:var(--card);border-left:2px solid var(--gold)} .callout-light p{color:var(--text-body)} .callout-light .link-arrow{color:var(--text-accent)} .callout{background:rgba(241,233,219,.09);border-left:2px solid var(--gold); padding:34px 36px} .callout p{font-size:21px;line-height:1.5;color:var(--text-on-dark-body);margin:0 0 18px} /* ========================================================================================== Sections and rhythm. Backgrounds alternate deliberately and two identical grounds never meet; where two darks must, the second takes ink3. ========================================================================================== */ .section{padding:var(--pad-y) 0} .section>.inner{width:var(--col);margin:0 auto;padding:0 var(--pad-x)} .section.narrow>.inner{width:var(--col-narrow)} .bg-cream{background:var(--cream)} .bg-sand{background:var(--sand)} .bg-sand2{background:var(--sand2)} .bg-card2{background:var(--card3)} .bg-ink{background:var(--ink2)} .bg-ink3{background:var(--ink3)} .hero{padding-top:var(--pad-hero-top)} /* The eyebrow sits well clear of the headline. v4 leaves 50px between the two boxes at 1280 and the hero was inheriting 14px from the heading's own margin, which read as the label being stuck to the first line. Fluid, so it tightens with the headline rather than leaving a hole above a 44px h1 on a phone: 50px at 1280 and 26px at 375. */ .hero .t-eyebrow{margin:0 0 clamp(26px,4vw,50px)} /* ---- the hero mark ---------------------------------------------------------------------- A large watermark of the Marga mark, behind the hero text. Three measurements off the v4 prototype at 1280px define it: left edge 630 and right edge 1216, so it spans from the nav's "Who we serve" pill to the right edge of the content column, and its top sits on the cap line of the headline. It is decorative, so it is aria-hidden in the markup and it never sits above text: the mark layer is z-index 0 and the content is z-index 1. Without both, a 5% watermark still captures clicks across half the hero. */ .mark-layer{position:absolute;inset:0;padding:0 var(--pad-x);pointer-events:none;z-index:0} .mark-col{position:relative;width:var(--col);height:100%;margin:0 auto} /* The fallback lands the mark just under where the eyebrow sits, which is close enough that the hero is composed with JavaScript off. marga-v3-nav.js then measures the headline and sets --mark-top exactly, because cap height depends on the rendered font and no CSS length can stand in for it. */ .hero-mark{position:absolute;right:0;top:var(--mark-top,calc(var(--pad-hero-top) + 72px)); width:min(586px,51%);height:auto;opacity:.05;fill:var(--cream)} .hero>.inner{position:relative;z-index:1} /* The rule under the hero, with the lead on the left and the buttons on the right. The headline carries no bottom margin, so without margin-top here the rule sat hard against the descenders of "wins" and read as an underline on the headline rather than a divider under the banner. The space belongs above the border, not in padding-top, which would only move the text and leave the line where it was. */ .hero-foot{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between; align-items:flex-end;margin-top:clamp(38px,5vw,72px); border-top:1px solid rgba(241,233,219,.2);padding-top:44px} /* The lead takes the slack and the buttons never shrink. At 56ch the lead measured 683px, which with a 436px button row and a 36px gap came to 1155 in a 1136 column, so the row wrapped and the design's single line broke. 52ch is the prototype's own measure. */ .hero-foot .lead{flex:1 1 auto;max-width:52ch;margin:0} /* 0 1 auto with min-width:0, not 0 0 auto. The row wraps its own buttons, but a flex item whose basis is max-content and which is forbidden to shrink never gets narrow enough for that wrap to trigger: at 375px the two buttons stayed side by side and pushed 84px of horizontal scroll onto the page. min-width:0 removes the automatic minimum that would otherwise hold it at max-content anyway. */ .hero-foot .cta-row{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:12px} @media(max-width:720px){ /* No rule on a phone. In one column the lead sits directly under the headline with nothing to its right, so the border is not dividing two things, it is drawing a line across the copy. The gap separates them instead. */ .hero-foot{gap:24px;margin-top:clamp(22px,6vw,32px);border-top:0;padding-top:0} /* Centred on a phone rather than pinned to a corner. The desktop mark is anchored to the right edge of the content column and the headline's cap line, which is a relationship between two things that both exist on a wide screen. Neither survives a single column, so the mark centres in the section instead. right:auto and bottom:auto are needed to release the desktop anchors, or the offsets fight. */ .hero-mark{top:50%;left:50%;right:auto;bottom:auto; transform:translate(-50%,-50%);width:78%;opacity:.045} } .hero-gradient{background: radial-gradient(70% 70% at 84% 10%,#F0E4C8 0%,rgba(240,228,200,0) 52%), linear-gradient(158deg,#F1E9DB 0%,#EBE0CC 62%,#E4D8BF 100%)} .hero-gradient-dark{background: radial-gradient(72% 70% at 84% 8%,rgba(199,162,75,.18) 0%,rgba(199,162,75,0) 55%), linear-gradient(150deg,#14120E 0%,#191510 60%,#1E1913 100%)} /* ========================================================================================== Focus. The prototype specifies no focus state at all. Every interactive element gets a visible one, on both grounds. ========================================================================================== */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--text-accent);outline-offset:3px;border-radius:2px} .on-dark :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline-color:var(--gold)} /* Skip link. Off screen until focused, then a real target at the top left. Done in CSS rather than with inline onfocus/onblur handlers, which is what the first draft used: those depend on script and do not survive a page where JS has not run yet, which is exactly the moment a keyboard user is tabbing. */ .skip{position:absolute;left:-9999px;top:0;z-index:99} .skip:focus,.skip:focus-visible{left:16px;top:16px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* ========================================================================================== NAVIGATION ------------------------------------------------------------------------------------------ Fixed and floating over the page. The wrapper ignores pointer events so it does not block the content beneath it; the capsule re-enables them. The handoff notes that the prototype opens the dropdown on hover and says plainly that this "is not sufficient on its own". It is a real