/* ============================================================================ iDharma — 2026 DESIGN FOUNDATION ---------------------------------------------------------------------------- The surface, type, space, elevation and motion system the site is being rebuilt on. Loaded AFTER ig-theme-oxford.css so it wins on the tokens it restates; everything ig-theme-oxford defines and this file does not touch still applies. THE DIRECTION, IN ONE PARAGRAPH The old page alternated cold white and icy blue — two tones, low contrast, nothing to punctuate the scroll. This system runs a WARM PAPER ground with DEEP INK bands as punctuation: paper for reading, ink for the two moments that should stop you (the hero and the closing CTA). Crimson stays the single accent it has always been. The references are iShruti's editorial warmth and BCG's institutional restraint; the palette is entirely ours. WHY PAPER AND NOT WHITE #F7F3EA is not a new colour — it is the paper the house illustrations already draw on (components/illustrations/*). Moving the page onto it means the document artwork, the report mockups and the page itself finally share one ground instead of the artwork sitting on a colder surface than its own paper. WHAT WE TAKE FROM THE REFERENCE, AND WHAT WE DO NOT iShruti supplies STRUCTURE only: section rhythm, the mounted-image-beside-copy split, the eyebrow/headline/lead header, pill CTAs, the proof ticker. Its DECORATIVE VOCABULARY does not transfer, because it sells a different thing. It is a speaker bureau, so it can mount a photograph like a scrapbook print — tilted, held on with washi tape — and dress sections like tickets and passes. iDharma is law, compliance and audit. In that world the equivalent object is a FIGURE PLATE or an EXHIBIT: square to the grid, ruled, labelled with a reference. Precision is the aesthetic, and a casual tilt reads as the opposite of what the firm sells. Practically, when adapting a section from the reference: · keep the layout, the proportions, the type hierarchy, the motion · replace tape, tilts, ticket stubs, perforations, sticker/pill overlays and any other event-and-souvenir device with document furniture — hairline rules, plate labels, figure references, seals, tabs See .idh-wia__photo--shot in ig-theme-oxford.css for a worked example. CONSTRAINTS THIS SYSTEM IS BUILT UNDER (Doc 33, UI/UX) · clarity over cleverness — the primary action is obvious on every screen · trust is built in, never stickered on. No hollow badges, no fake scarcity, no urgency timers, no confirmshaming. Energy comes from type, surface, photography and motion — never from manufactured pressure. · accessible from the start. Every text pairing below carries its measured ratio; nothing ships under AA. · familiar patterns, consistently applied — hence primitives, not one-offs. ============================================================================ */ :root { /* ---- SURFACES --------------------------------------------------------- Three grounds, in the order the page uses them. --d-paper is the default; --d-paper-2 is the alternating band a shade deeper; --d-ink is punctuation. --d-card is what cards use ON paper — white still reads as "a document on a desk" when the desk is warm, which is the whole point. */ --d-paper: #F7F3EA; /* default ground — the house illustration paper */ --d-paper-2: #F1EADD; /* alternating band, one shade deeper */ --d-card: #FFFFFF; /* cards and panels sitting on paper */ --d-ink: #101820; /* the punctuation band */ --d-ink-2: #1B2530; /* cards and panels sitting on ink */ /* ---- INK ON PAPER (measured on --d-paper) ----------------------------- --d-muted is #5F666D, NOT the older #6A7178. On white that measured 4.95:1 and passed; on warm paper it drops to 4.47:1 and FAILS. Every muted-grey pairing in this system uses the corrected value. */ --d-text: #101820; /* 16.2:1 on paper */ --d-body: #3D444C; /* 8.9:1 on paper */ --d-muted: #5F666D; /* 5.3:1 on paper */ --d-rule: rgba(16,24,32,.12); --d-rule-2: rgba(16,24,32,.07); /* ---- PAPER ON INK (measured on --d-ink) ------------------------------- */ --d-text-i: #FFFFFF; /* 17.9:1 on ink */ --d-body-i: rgba(255,255,255,.80); --d-muted-i: rgba(255,255,255,.62); --d-rule-i: rgba(255,255,255,.16); /* ---- ACCENT ----------------------------------------------------------- One accent, two values. Crimson is 6.9:1 on paper but only 2.36:1 on ink and cannot carry text there — so ink bands use the lightened crimson the hero rule already used, which measures 6.4:1. Same accent, legible ground to ground. Never a third colour. */ --d-accent: #A51C30; /* 6.9:1 on paper */ --d-accent-i: #E8798A; /* 6.4:1 on ink */ --d-accent-soft: #FBEBED; /* ---- THE BANNER AMBER, AT TEXT DEPTH ---------------------------------- --d-amber #E5B567 is the hero's lamp light and the proof ticker's fill. It is a FILL colour only: on paper it measures 1.7:1 and on white 1.9:1, so it can never carry type on a light ground. --d-amber-ink is that same amber taken down to the depth text needs — 5.0:1 on white, 4.9:1 on paper — so a light section can use the banner's accent in TYPE without reaching for a colour from outside the palette. Same relationship as --d-accent / --d-accent-i, in the other direction. */ --d-amber: #E5B567; /* fill only — never type on a light ground */ --d-amber-ink: #8A6A2F; /* 5.0:1 on white, 4.9:1 on paper */ /* ---- ACTION ----------------------------------------------------------- The one primary-button fill, unchanged from the existing system. */ --d-action: #176B8A; --d-action-h: #125A75; /* ---- TYPE ------------------------------------------------------------- Fluid editorial scale. The display size is deliberately large — it is the single biggest thing separating a 2026 editorial page from a 2019 SaaS one — and clamped so it never breaks words on a phone. */ --d-serif: 'Fraunces', 'Georgia', serif; --d-sans: 'Lato', system-ui, -apple-system, sans-serif; --d-display: clamp(2.6rem, 5.4vw, 4.6rem); /* hero only */ --d-h2: clamp(1.95rem, 3.4vw, 3rem); /* section heads */ --d-h3: clamp(1.2rem, 1.7vw, 1.55rem); /* card + block heads */ --d-lead: clamp(1.15rem, 1.35vw, 1.45rem);/* section sub-lines */ --d-copy: 1.1875rem; /* 19px body */ --d-small: .9375rem; /* 15px */ --d-micro: .6875rem; /* 11px tracked caps */ --d-lh-tight: 1.06; --d-lh-head: 1.14; --d-lh-copy: 1.62; /* ---- SPACE ------------------------------------------------------------ One section rhythm, generous. The old page fit too much per screen; the references breathe, and breathing is most of what reads as "modern". */ --d-sec-y: clamp(76px, 9vh, 136px); --d-gutter: 15%; --d-gutter-min: 24px; --d-max: 1240px; /* ---- RADIUS ----------------------------------------------------------- */ --d-r-sm: 10px; --d-r: 16px; --d-r-lg: 24px; --d-r-pill: 999px; /* ---- ELEVATION -------------------------------------------------------- Warm-tinted shadows. A neutral grey shadow on warm paper reads as dirt; shifting the shadow toward the paper's own hue keeps it looking like light falling on a surface rather than a grey halo stuck behind a box. */ --d-e1: 0 2px 8px rgba(38,28,16,.05); --d-e2: 0 10px 28px rgba(38,28,16,.09); --d-e3: 0 22px 48px rgba(38,28,16,.14); /* ---- MOTION ----------------------------------------------------------- One easing curve and two durations, so everything on the site accelerates the same way. Motion is used for arrival and for hover feedback only — never to create pressure (Doc 33 rules out urgency devices). */ --d-ease: cubic-bezier(.2,.7,.2,1); --d-t: .18s; --d-t-in: .62s; } @media (max-width: 768px) { :root { --d-gutter: var(--d-gutter-min); } } /* ============================================================================ 1 · SURFACE PRIMITIVES Three grounds: two paper tones that alternate, and ink as punctuation. Because the homepage assigns them at render time through $idhBand(), re-pointing the class definitions moves every section at once — and the same three classes are what the other pages adopt. The class DECLARATIONS live in the consuming page's own sheet, which loads last and is therefore the source of truth; this file does not fight it with !important. What lives HERE is everything that must be true of an ink band wherever one appears. ========================================================================== */ /* Everything inside an ink band reverses out. Declared once here rather than per-section, so any block dropped into an ink band is legible by default. */ .idh-secbg--ink h1, .idh-secbg--ink h2, .idh-secbg--ink h3, .idh-secbg--ink h4, .idh-secbg--ink .idh-h2 { color: var(--d-text-i); } .idh-secbg--ink p, .idh-secbg--ink li, .idh-secbg--ink .idh-lead { color: var(--d-body-i); } .idh-secbg--ink .idh-eyebrow { color: var(--d-accent-i); } .idh-secbg--ink .idh-h2 .hl { color: var(--d-accent-i); } .idh-secbg--ink hr { border-color: var(--d-rule-i); } /* ============================================================================ 2 · SECTION + HEADER PRIMITIVES ========================================================================== */ .d-sec { padding-block: var(--d-sec-y); } .d-wrap { width: 100%; max-width: var(--d-max); margin-inline: auto; padding-inline: var(--d-gutter-min); box-sizing: border-box; } /* full-bleed variant — the band spans the window, the content stays measured */ .d-wrap--wide { max-width: none; padding-inline: var(--d-gutter); } /* the three-part section head used site-wide: tracked eyebrow, serif headline with one accent word, optional lead. Centred by default; .d-head--left opts out for asymmetric sections. */ .d-head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(36px, 4vw, 60px); } .d-head--left { margin-inline: 0; text-align: left; } .d-head__eyebrow { display: block; font-family: var(--d-sans); font-size: var(--d-micro); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--d-accent); margin: 0 0 14px; } .d-head__title { font-family: var(--d-serif); font-size: var(--d-h2); font-weight: 600; line-height: var(--d-lh-head); letter-spacing: -.02em; color: var(--d-text); margin: 0; text-wrap: balance; } .d-head__title em { font-style: italic; color: var(--d-accent); } .d-head__lead { font-size: var(--d-lead); line-height: var(--d-lh-copy); color: var(--d-body); margin: 16px auto 0; max-width: 56ch; } .d-head--left .d-head__lead { margin-inline: 0; } /* ============================================================================ 3 · BUTTON PRIMITIVES Pill CTAs, per the reference. Two on paper, two reversed for ink bands. ========================================================================== */ .d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 30px; border-radius: var(--d-r-pill); font-family: var(--d-sans); font-size: 1rem; font-weight: 700; text-decoration: none !important; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent; transition: background var(--d-t) var(--d-ease), color var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease), transform var(--d-t) var(--d-ease); } .d-btn:hover { transform: translateY(-2px); } .d-btn--primary { background: var(--d-action); color: #fff; border-color: var(--d-action); } .d-btn--primary:hover { background: var(--d-action-h); border-color: var(--d-action-h); color: #fff; } .d-btn--ghost { background: transparent; color: var(--d-text); border-color: var(--d-rule); } .d-btn--ghost:hover { background: rgba(16,24,32,.05); border-color: var(--d-text); color: var(--d-text); } /* on ink */ .d-btn--light { background: var(--d-paper); color: var(--d-ink); border-color: var(--d-paper); } .d-btn--light:hover { background: #fff; border-color: #fff; color: var(--d-ink); } .d-btn--outline-i { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); } .d-btn--outline-i:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; } /* ============================================================================ 4 · CARD PRIMITIVE One card, three grounds. Cards on paper are white with a hairline; cards on ink are the lighter ink with a light hairline. Hover is the same 3px lift used everywhere else on the site. ========================================================================== */ .d-card { display: flex; flex-direction: column; background: var(--d-card); border: 1px solid var(--d-rule-2); border-radius: var(--d-r); padding: clamp(22px, 2.2vw, 30px); box-shadow: var(--d-e1); transition: transform var(--d-t) var(--d-ease), box-shadow var(--d-t) var(--d-ease); } .d-card:hover { transform: translateY(-3px); box-shadow: var(--d-e2); } .d-card__title { font-family: var(--d-serif); font-size: var(--d-h3); font-weight: 600; line-height: 1.25; color: var(--d-text); margin: 0 0 10px; } .d-card__body { font-size: var(--d-small); line-height: var(--d-lh-copy); color: var(--d-body); margin: 0; } .idh-secbg--ink .d-card { background: var(--d-ink-2); border-color: var(--d-rule-i); box-shadow: none; } .idh-secbg--ink .d-card__title { color: var(--d-text-i); } .idh-secbg--ink .d-card__body { color: var(--d-body-i); } /* ============================================================================ 5 · MOTION — arrival One reveal, one curve. Opt-in per element via .d-rv; the .in class is added by the page's existing IntersectionObserver. Disabled wholesale under prefers-reduced-motion, and never applied to the hero (LCP text must paint immediately). ========================================================================== */ html.idh-js .d-rv { opacity: 0; transform: translateY(22px); transition: opacity var(--d-t-in) var(--d-ease), transform var(--d-t-in) var(--d-ease); } html.idh-js .d-rv.in { opacity: 1; transform: none; } html.idh-js .d-rv--d1 { transition-delay: .07s; } html.idh-js .d-rv--d2 { transition-delay: .14s; } html.idh-js .d-rv--d3 { transition-delay: .21s; } @media (prefers-reduced-motion: reduce) { html.idh-js .d-rv { opacity: 1; transform: none; transition: none; } .d-btn:hover, .d-card:hover { transform: none; } } /* ============================================================================ 6 · PAGE-WIDE COLOUR CORRECTIONS FOR THE PAPER GROUND The page was built on white and icy blue. Two things break on warm paper and are corrected here rather than in twelve places. ========================================================================== */ /* (a) --hf-muted #6A7178 measures 4.47:1 on paper and fails AA. Re-point the token inside .idh so every existing muted string on the homepage clears it, without editing each rule. */ .idh { --hf-muted: #5F666D; } /* (b) White cards on a white band relied on a border to exist at all. On paper they separate on their own, so the border can soften and the shadow can carry the lift instead — which is what stops the page reading as a grid of boxes. */ .idh .hf-card, .idh .idh-principle { border-color: var(--d-rule-2); box-shadow: var(--d-e1); } /* ============================================================================ 7 · DARK CINEMATIC THEME — the page-wide pass ---------------------------------------------------------------------------- Tokens below are EXTRACTED from the three approved sections, which are the single source of truth. Note for the brief: it named the ochre as "#B48A3C-family", but the approved sections do not use #B48A3C — the hero and the dimensions band run #E5B567 and the Our-Method band runs #8A6A2F. Those approved values are what is registered here. #B48A3C is the OLD site gold and is not used on this page. ONE ACCENT, TWO DEPTHS. Ochre cannot be a single value: #E5B567 is 9.5:1 on the ink band and 1.9:1 on cream; #8A6A2F is 5.0:1 on cream and 2.6:1 on ink. So --idh-ochre is band-scoped and every accent reads it, which means a component can be dropped on either band and stay legible without a variant. ========================================================================== */ .idh{ --idh-band-dark: #0B1219; /* hero + dimensions band */ --idh-card-dark: #16202B; /* dimension card fill */ --idh-hair-dark: rgba(247,243,234,.10); /* dimension card border */ --idh-ochre: #8A6A2F; /* accent on cream — 5.0:1 */ --idh-on-dark: #F7F3EA; /* display type on dark — 16.2:1 */ --idh-on-dark-2: rgba(240,229,210,.80); /* body on dark — 9.6:1 */ --idh-on-dark-3: rgba(240,229,210,.62); /* muted on dark — 6.4:1 */ /* CRIMSON IS RETIRED FROM THE ACCENT ROLE ON THIS PAGE. Re-pointing the two tokens converts every var()-driven crimson in one move; the literal-#A51C30 rules are listed explicitly further down. The seal and the severity chips are restored to crimson immediately after — see the exceptions block. */ --hf-crimson: var(--idh-ochre); --idh-crimson: var(--idh-ochre); } /* ---- BUTTONS, RE-POINTED TO THE THEME ----------------------------------- Every filled button on this page was --hf-action #176B8A, a deep petrol teal chosen for the old cold palette. It is now the only cold thing left on a warm page: on --d-paper it reads as a foreign colour rather than as the brand's, and the hero's own primary is already a paper pill on ink, so the page was running two unrelated button languages at once. THE SYSTEM, two buttons and one rule for each ground. primary ink #101820 fill, paper #F7F3EA text - 16.2:1. On a light band this is the hero's pill inverted, which is why the two now read as the same control. On a dark band the existing --dark rules below flip it back to paper-on-ink, so one class covers both grounds. outline no fill, ink text, ink hairline. It was white-filled with teal text and a #D5DEE3 border - a white pill on cream reads as a mis-set primary, and the border is the icy-palette grey. WHY NOT OCHRE FILLS. --idh-ochre is the page's accent and it is rationed: eyebrows, accent words, numerals, rules. Filling every button with it would spend the accent on the most repeated element on the page and leave the headline accents competing with the buttons. Ink is the theme's other pole, it is already the hero's button ground, and it is the higher contrast of the two. Ochre stays where it earns attention. Scoped to .idh so only pages that opt into this foundation are affected. THE `html body` PREFIX IS LOAD-BEARING. ig-theme-oxford.css states these same buttons as `body.home-page .idh-btn--outline` etc., all !important - that is (0,2,1), and a plain `.idh .idh-btn--outline` is only (0,2,0), so it LOSES on element count no matter which file loads last. `html body .idh …` takes these to (0,2,2) and wins outright rather than depending on link order, which on this page is decided by where a stylesheet happens to sit in a different file. Do not shorten these selectors. */ html body .idh .idh-btn--primary, html body .idh .idh-btn--dark, html body .idh .idha-rc__btn--solid, html body .idh #rcStart{ background:var(--d-ink) !important; color:var(--d-paper) !important; border-color:var(--d-ink) !important; box-shadow:none !important; } html body .idh .idh-btn--primary:hover, html body .idh .idh-btn--dark:hover, html body .idh .idha-rc__btn--solid:hover, html body .idh #rcStart:hover{ background:var(--d-ink-2) !important; color:#FFFFFF !important; border-color:var(--d-ink-2) !important; } html body .idh .idh-btn--primary:active, html body .idh .idh-btn--dark:active{ background:#000000 !important; color:var(--d-paper) !important; } html body .idh .idh-btn--outline{ background:transparent !important; color:var(--d-text) !important; border:1px solid rgba(16,24,32,.24) !important; box-shadow:none !important; } html body .idh .idh-btn--outline:hover{ background:rgba(16,24,32,.05) !important; color:var(--d-text) !important; border-color:rgba(16,24,32,.45) !important; } /* ---- CHIP ROW (restored) ------------------------------------------------ REGRESSION FIX, not new work. is rendered in three places — the engagement clauses, the dimensions schedule and the domains register — and its CSS lived in ig-theme-oxford.css until commit c94fec8 rewrote that block and dropped it. Since then every chip has rendered as bare running text, which is why the six framework names read as one sentence. Recovered from c94fec8^:public/assets/css/ig-theme-oxford.css and re-pointed from the retired navy to the current tokens; nothing else about it changed. margin-top:auto pins the row to the bottom of any flex-column card, so a row of cards lands its chips on one line however long the copy above them runs. Chips are outline, never filled and never a severity colour — they name frameworks, not risk levels. */ .idh-chiprow{ margin-top:auto; padding-top:14px; } .idh-chiprow__label{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--d-muted); margin-bottom:8px; } .idh-chiprow__items{ display:flex; flex-wrap:wrap; gap:6px; } .idh-chiprow__chip{ font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.35; color:var(--d-body); border:1px solid rgba(16,24,32,.24); border-radius:999px; padding:3px 9px; white-space:nowrap; } /* 'cream' is the supplied paper swatch. It resolves to --d-paper, the approved cream the Our-Method band already uses - a fourth near-identical off-white would fragment a palette that has three creams in it already. If the swatch is a specific hex rather than "our cream", change this one value. */ .idh .idh-secbg--cream{ background-color:var(--d-paper) !important; background-image:none !important; } /* ---- WHAT EVERY ENGAGEMENT INCLUDES ------------------------------------- The supplied reference's STRUCTURE, in this firm's language: copy left, one mounted photograph right, wide cream ground, generous air. What is deliberately NOT carried over — the corner pins, the tilt, the ribbon label stuck over the picture. Those are scrapbook devices for an events brand and they do not belong on a law/compliance/audit page. The frame is mounted the way a plate is mounted in a report instead: white mat, hairline, soft drop shadow, ruled caption beneath. Palette is ours throughout — cream ground, ink type, one ochre accent. The reference's dark green and its red ribbon are not used. */ /* The plate column is the wider of the two. The reference gives the photograph real presence, and the plate here is square rather than portrait, so it needs the extra width to carry the same weight against a four-entry index. */ /* ── the header, now a full-width row above the two columns ──────────────── It used to live inside .idh-engs__panel, which meant the headline was capped at the copy column's width and the plate beside it began level with the eyebrow rather than with the list it illustrates. */ /* ── the header, a stepped three-line block ──────────────────────────────── The sketch steps the headline IN from the eyebrow rather than stacking all three flush left: eyebrow at the margin, headline indented, standfirst back at the margin. That stagger is the whole shape of the block - it reads as a masthead rather than as three stacked paragraphs. The indent is a clamp, not a fixed value or a percentage. Fixed, it would be a third of the column on a small laptop; a percentage would keep stepping on a phone, where the block is one narrow column and any indent just looks like a broken margin. It resolves to 0 below 900px (see the responsive step). */ .idh-engs__head{ margin:0 0 clamp(32px,3.4vw,48px); max-width:none; --engs-step:clamp(0px,9vw,148px); } .idh-engs__head .idh-engs__title{ max-width:26ch; margin-left:var(--engs-step); } /* the standfirst moved into .idh-engs__panel, so the header's own rule for it is gone. Its spacing is now the gap to the first index row. */ .idh-engs__panel .idh-engs__lead{ max-width:46ch; margin:0 0 clamp(26px,2.6vw,34px); } /* align-items:stretch, NOT center. Centring left the shorter column floating against the taller one - the four index rows and the plate began and ended at different heights, which is what read as misaligned. Stretch makes both columns the row's full height; the plate then fills it (see .idh-engs__mount below) instead of sitting centred in dead space. */ .idh-engs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(40px,4.4vw,68px); align-items:stretch; } .idh-engs__panel{ min-width:0; display:flex; flex-direction:column; justify-content:center; } /* the plate's own stretch is set on .idh-engs__plate further down - it carries an align-self that overrides anything set here on the container */ /* --- the copy side --- */ /* The eyebrow takes the reference's outlined capsule rather than this page's bare tracked line — that capsule is structure, sitting in the flow, not a sticker laid over artwork, so it is on the right side of the rule. */ .idh-engs__eyebrow{ display:inline-block; margin:0 0 22px; padding:7px 16px; font-family:'Lato',sans-serif; font-size:11.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; line-height:1; color:var(--idh-ochre); /* 5.0:1 */ border:1px solid rgba(138,106,47,.42); border-radius:999px; } .idh-engs__title{ margin:0 0 18px; font-family:'Fraunces','Georgia',serif; font-size:clamp(2.2rem,3.4vw,3.2rem); font-weight:600; line-height:1.07; letter-spacing:-.022em; color:var(--d-text); } .idh-engs__title em{ font-style:italic; color:var(--idh-ochre); } .idh-engs__lead{ margin:0 0 clamp(28px,3.2vw,40px); font-size:17.5px; line-height:1.62; color:var(--d-body); max-width:46ch; } /* 8.9:1 */ .idh-engs__index{ list-style:none; margin:0; padding:0; } .idh-engs__item{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(16px,1.6vw,24px); align-items:start; padding:clamp(17px,1.8vw,22px) 0; border-top:1px solid rgba(16,24,32,.13); } .idh-engs__item:last-child{ border-bottom:1px solid rgba(16,24,32,.13); } /* the numeral carries the scale; tabular figures so 01–04 stack on one axis */ .idh-engs__n{ font-family:'Fraunces','Georgia',serif; font-size:clamp(1.7rem,2.2vw,2.15rem); font-weight:600; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--idh-ochre); opacity:.85; transition:opacity var(--d-t,.2s) ease, transform var(--d-t,.2s) ease; } .idh-engs__txt{ min-width:0; } .idh-engs__term{ margin:0 0 6px; font-family:'Lato',sans-serif; font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; color:var(--d-text); } /* 16.2:1 */ .idh-engs__body{ margin:0; font-size:16px; line-height:1.6; color:var(--d-body); max-width:54ch; } /* 8.9:1 */ .idh-engs__item .idh-chiprow{ margin-top:13px; padding-top:0; } @media(hover:hover){ .idh-engs__item:hover .idh-engs__n{ opacity:1; transform:translateY(-2px); } } @media(prefers-reduced-motion:reduce){ .idh-engs__n{ transition:none; } .idh-engs__item:hover .idh-engs__n{ transform:none; } } /* --- the plate --- */ /* align-self:STRETCH, not center. This was the rule actually holding the plate at its natural height while the index beside it ran 166px taller - the grid's align-items:stretch could never reach it, because align-self on the item wins over align-items on the container by definition. Stretched, the plate's top and foot land on the index's. */ .idh-engs__plate{ margin:0; align-self:stretch; display:flex; } .idh-engs__plate .idh-engs__mount{ display:flex; width:100%; } .idh-engs__plate .idh-engs__mount img{ width:100%; height:100%; object-fit:cover; } .idh-engs__mount{ display:block; padding:14px; background:#FFFFFF; border:1px solid rgba(16,24,32,.10); border-radius:6px; box-shadow:0 26px 56px rgba(38,28,16,.16), 0 4px 12px rgba(38,28,16,.07); } .idh-engs__mount img{ display:block; width:100%; height:auto; border-radius:2px; } /* the caption is ruled and referenced, the way a figure is captioned in a report */ .idh-engs__cap{ display:flex; gap:12px; align-items:baseline; margin-top:16px; padding-top:11px; border-top:1px solid rgba(16,24,32,.16); } .idh-engs__cap-ref{ flex:none; font-family:'Lato',sans-serif; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--idh-ochre); } /* 5.0:1 */ .idh-engs__cap-txt{ font-size:13.5px; line-height:1.5; color:var(--d-muted); } /* 6.0:1 */ /* --- responsive --- */ /* 980: the two columns stop holding a readable measure side by side. Copy first, plate after — it illustrates the copy, so it follows it once they stack. */ @media(max-width:980px){ .idh-engs__grid{ grid-template-columns:1fr; gap:clamp(38px,6vw,56px); } /* stacked, the stagger has nothing to step away from and reads as a stray indent, so the header goes flush left */ .idh-engs__head{ --engs-step:0px; } .idh-engs__plate{ max-width:520px; } } @media(max-width:560px){ .idh-engs__item{ grid-template-columns:1fr; gap:6px; } .idh-engs__n{ font-size:1.6rem; } .idh-engs__mount{ padding:10px; } } /* on any dark band the accent steps up to the approved on-ink ochre */ .idh .idh-secbg--dark, .idh .idh-secbg--ink, .idh .idh-dimband{ --idh-ochre:#E5B567; } /* ---- EXCEPTIONS: crimson stays, per the brief --------------------------- Listed for Brijesh's review rather than converted. All are either the iDharma identity mark or audit-data severity, neither of which is an accent. */ .idh .idh-vision-seal{ color:#A51C30 !important; } /* the seal */ .idh .idha-rc em.high{ color:#A51C30 !important; } /* severity HIGH */ .idh .idh-report__stat div:nth-child(2) b{ color:#A51C30; } /* report figure */ .idh .idh-cmp__col--bad li i{ color:#A51C30; } /* negative mark */ .idh .idh-hiw__finding{ } /* see report */ /* ---- literal-#A51C30 rules the token re-point cannot reach --------------- */ /* the accent word is ITALIC serif, matching the hero's "checked" and Our Method's "evidence" — one per headline, audited */ .idh .idh-h2 .hl, .idh .idh-experts__head h2 .hl{ font-style:italic; } .idh .idh-eyebrow, .idh .idh-h2 .hl, .idh .idh-hero__eyebrow, .idh .idh-experts__head h2 .hl, .idh .idh-expert__tag, .idh .idh-fcta__eyebrow, .idh .idh-pillar a, .idh .idh-cc__job, .idh .idh-pc__days, .idh .idh-prod__card--a .idh-prod__tag, .idh .idh-artifact__note b, .idh .idh-whyd__link:hover, .idh .idh-join-btn{ color:var(--idh-ochre); } .idh .idh-h2.c::after, .idh .idh-fcta__eyebrow::before, .idh .idh-whyd__item .dash, .idh .idh-proof-ico{ background:var(--idh-ochre); } .idh .idh-fcta__trust-item svg, .idh .idh-expert__list li svg{ stroke:var(--idh-ochre); } .idh .idh-fcta .fb__linkedin{ border-color:var(--idh-ochre); color:var(--idh-ochre); } .idh .idh-fcta .fb__linkedin:hover{ background:var(--idh-ochre); } /* the cycling card accents lose their crimson slot to ochre */ .idh .idh-flow--a{ --fc-ink:var(--idh-ochre); } .idh .idh-principle:nth-child(3){ --pr:var(--idh-ochre); } /* (the .idh-chaps card cycle is gone — that section is the engagement letter now) */ /* ---- THE DARK BAND ------------------------------------------------------ One treatment, applied by adding --dark to a section's band class. Everything below is the dimensions band's own vocabulary generalised, so a section moved onto dark inherits the approved look without per-section CSS. */ .idh .idh-secbg--dark{ background-color:var(--idh-band-dark) !important; background-image:none !important; } .idh .idh-secbg--dark h2, .idh .idh-secbg--dark h3, .idh .idh-secbg--dark h4, .idh .idh-secbg--dark .idh-h2, .idh .idh-secbg--dark .idh-sechd h2{ color:var(--idh-on-dark); } .idh .idh-secbg--dark p, .idh .idh-secbg--dark li, .idh .idh-secbg--dark .idh-lead{ color:var(--idh-on-dark-2); } .idh .idh-secbg--dark .idh-eyebrow{ color:var(--idh-ochre); } .idh .idh-secbg--dark .idh-h2 .hl{ color:var(--idh-ochre); } .idh .idh-secbg--dark .idh-h2.c::after{ background:var(--idh-ochre); } /* cards on dark take the dimension card exactly */ .idh .idh-secbg--dark .hf-card, .idh .idh-secbg--dark .idh-artifact, .idh .idh-secbg--dark .idh-principle, .idh .idh-secbg--dark .idh-note, .idh .idh-secbg--dark .idh-ptier, .idh .idh-secbg--dark .idh-flow__card{ background:var(--idh-card-dark) !important; border-color:var(--idh-hair-dark) !important; box-shadow:none !important; } .idh .idh-secbg--dark .hf-card__title, .idh .idh-secbg--dark .idh-artifact__title, .idh .idh-secbg--dark .idh-principle h4, .idh .idh-secbg--dark .idh-flow__txt b{ color:var(--idh-on-dark) !important; } .idh .idh-secbg--dark .hf-card__body, .idh .idh-secbg--dark .idh-artifact__body, .idh .idh-secbg--dark .idh-flow__txt span{ color:var(--idh-on-dark-2) !important; } .idh .idh-secbg--dark .idh-artifact__num, .idh .idh-secbg--dark .idh-muted{ color:var(--idh-on-dark-3) !important; } /* line icons go gold on dark, matching .idh-sched__ico */ .idh .idh-secbg--dark .hf-chip-icon svg, .idh .idh-secbg--dark .idh-artifact__ico svg, .idh .idh-secbg--dark .idh-principle__ico svg{ stroke:var(--idh-ochre) !important; } .idh .idh-secbg--dark .hf-chip-icon{ background:rgba(229,181,103,.12) !important; } /* the artifact cards' drawn details are currentColor, so one colour flips them all */ .idh .idh-secbg--dark .idh-artifact__seal, .idh .idh-secbg--dark .idh-artifact__mini, .idh .idh-secbg--dark .idh-artifact__sig{ color:var(--idh-on-dark) !important; } /* chips on dark take the approved framework-mark style */ .idh .idh-secbg--dark .idh-chiprow__chip, .idh .idh-secbg--dark .hf-chip{ color:var(--idh-on-dark) !important; border-color:rgba(247,243,234,.26) !important; background:transparent !important; } .idh .idh-secbg--dark .idh-chiprow__label{ color:var(--idh-on-dark-3) !important; } /* Buttons on dark: light-on-dark primary, outline secondary. --ink is listed alongside --dark because the primary is now an INK fill on light bands, and an ink button on the ink closing-CTA band would be invisible. Both dark grounds therefore invert it to paper the same way. These are (0,3,0) and so still outrank the light-band rules at (0,2,2) - class count dominates element count - which is what lets one class serve both grounds. */ .idh .idh-secbg--dark .idh-btn--primary, .idh .idh-secbg--ink .idh-btn--primary{ background:var(--d-paper) !important; color:var(--idh-band-dark) !important; border-color:var(--d-paper) !important; } .idh .idh-secbg--dark .idh-btn--primary:hover, .idh .idh-secbg--ink .idh-btn--primary:hover{ background:#FFFFFF !important; color:var(--idh-band-dark) !important; border-color:#FFFFFF !important; } .idh .idh-secbg--dark .idh-btn--outline, .idh .idh-secbg--ink .idh-btn--outline{ background:transparent !important; color:var(--idh-on-dark) !important; border:1px solid rgba(247,243,234,.42) !important; } .idh .idh-secbg--dark .idh-btn--outline:hover, .idh .idh-secbg--ink .idh-btn--outline:hover{ background:rgba(247,243,234,.10) !important; color:#FFFFFF !important; border-color:rgba(247,243,234,.7) !important; } .idh .idh-secbg--dark .idh-btn--ghost-dark{ color:var(--idh-on-dark-2) !important; } /* hairlines and dividers */ .idh .idh-secbg--dark hr, .idh .idh-secbg--dark .idh-divider{ border-color:var(--idh-hair-dark); } /* (c) THE SKY BANDS OVERRIDE — this is the one that mattered most, and it was silently losing. ig-theme-oxford.css carries, under its "SKY BANDS" heading: .idh .idh-secbg--wash, .idh-experts, .idh-dimband { background-color: var(--hf-sky-wash, #D9F5FD) !important; } That !important beat the paper value the homepage's own sheet declares for .idh-secbg--wash, so EVERY alternating --wash band on this page was still painting the old icy blue while the --white bands painted warm paper. The page was running two palettes at once and only looked right on the sections that happened to land on --white. Re-declared here with !important, scoped to .idh, and NOT fixed by editing the theme: ig-theme-oxford.css is loaded by /ai-audit, /about, /trust and the policy pages, and .idh-experts / .idh-dimband are unscoped in that rule, so changing it there would re-theme pages that have not moved to paper yet. The five dimension-card frames were tuned to read on the sky wash at 1.60–2.00:1. Re-measured on paper they run 1.65–2.06:1 — the ratio holds. */ .idh .idh-secbg--wash { background-color: var(--d-paper-2) !important; } /* THE SELF-PAINTING SECTIONS GIVE UP THEIR GROUND. .idh-experts, .idh-domains and .idh-dimband each declared a background of their own - paper-2, white and ink respectively - which meant three sections sat outside the alternation and set their own colour. The page now runs a strict white / cream sequence below the hero, so all three defer to the band class they already carry. `transparent` rather than a value, so there is one place that decides a section's ground and it is $idhBand(). Still !important, because the sky-bands rule quoted above is !important and unscoped, and it would otherwise repaint .idh-experts and .idh-dimband icy blue on this page. */ /* .idh-wia-sec painted #fff in the theme sheet and now takes a band class like everything else; listed with the others so no section sets its own ground. */ .idh .idh-experts, .idh .idh-domains, .idh .idh-wia-sec { background-color: transparent; } /* ---- THE DIMENSIONS BAND, CONVERTED TO LIGHT --------------------------- FLAGGED: this undoes the approved dark-lane treatment of that section. It was built from a supplied dark reference - ink ground #0B1219, cards #16202B, reversed type, ochre at its on-dark value #E5B567 - and it was the only section on the page still painting its own ground. A strict white/cream sequence cannot accommodate one dark band in the middle of it, so the band gives up its ink and everything tuned for ink is re-pointed for paper. Every value below is the SAME token at its on-light depth, not a new colour: #F7F3EA -> --d-text #101820 headline and question, 16.2:1 .76 white-> --d-body #3D444C description, 8.9:1 .42 white-> --d-muted #5F666D the reference numeral, 5.3:1 #E5B567 -> --idh-ochre #8A6A2F eyebrow, accent, name, icons, 5.0:1 The cards go white with an ink hairline, which is the same card treatment the proof tiles and the engagement plate already use on a light ground. The photograph behind the band was a boardroom shot at low opacity under a heavy ink scrim; on paper that scrim has nothing to darken, so it is hidden rather than left as a grey haze. Say the word and it can come back as a light-side treatment instead. */ .idh .idh-dimband__photo{ display:none !important; } .idh .idh-dimband{ --idh-ochre:#8A6A2F; } .idh .idh-dimband__eyebrow{ color:var(--idh-ochre) !important; } .idh .idh-dimband__title{ color:var(--d-text) !important; } .idh .idh-dimband__title .hl{ color:var(--idh-ochre) !important; } .idh .idh-dimband .idh-sched__row{ background:var(--d-card) !important; border-color:rgba(16,24,32,.12) !important; } .idh .idh-dimband .idh-sched__ico svg{ stroke:var(--idh-ochre) !important; } .idh .idh-dimband .idh-sched__num{ color:var(--d-muted) !important; } .idh .idh-dimband .idh-sched__name{ color:var(--idh-ochre) !important; } .idh .idh-dimband .idh-sched__q{ color:var(--d-text) !important; } .idh .idh-dimband .idh-sched__desc{ color:var(--d-body) !important; } /* THE FRAMEWORKS STRIP IS NO LONGER PART OF THIS LIGHT-SIDE BLOCK. It is an ink pill with a gold edge now (see "the frameworks strip" further down this file), so the three values that used to live here - muted label, ink chip type, dark chip hairline - would all be invisible on it. They are not merely overridden by source order; they are deleted, because a rule that only works because it happens to come first is a trap for whoever reorders this file next. */ @media(hover:hover){ .idh .idh-dimband .idh-sched__row:hover{ border-color:rgba(138,106,47,.55) !important; } } /* .idh-wia-sec is the page's one FULL-BLEED WHITE band. It used to be a white panel inset inside a paper section, which left cream showing down both sides and read as a floating card rather than as a band; the white now runs edge to edge and the content sits on the page gutter like every other section's does. White, not paper, is deliberate here: this band is the page's brightest surface and it is where the figure plate lives, so the plate reads as a document on a lit desk. It also gives the band real separation from the paper-2 strips either side of it, which a paper-on-paper section could not. */ .idh .idh-wia-sec { background: #FFFFFF; } /* ============================================================================ 9 · WE SHOW OUR WORK — copy left, boardroom plate right, register below ---------------------------------------------------------------------------- REBUILT ON THE SUPPLIED MOCKUP. The previous build was a split header over five bare ruled columns. The mockup is a different composition, and this is that composition with this section's own content in every slot: ochre eyebrow + tick rule <- "We show our work", unchanged serif headline, ochre italic <- "Evidence over promises", unchanged standfirst <- unchanged, moved out of its own column two buttons <- unchanged, moved up from the section foot chip row with ochre marks <- the frameworks strip, restated as chips photograph bleeding right <- new, see below raised card of five cells <- the 01-05 register, moved into a card NOT ONE STRING WAS WRITTEN FOR THIS. Every word in the section survives the rebuild. The frameworks strip is the only piece that changes shape - from a rounded pill bar to the mockup's chip row - and it keeps its own label. THE PHOTOGRAPH is assets/custom_image/proof-evidence-*.{webp,jpg}, resized and compressed from the 1536x1024 / 2.4MB source in assets/theme-images. Two widths, WebP first with a JPEG fallback: 1400w at 92KB/165KB, 800w at 35KB/60KB. The source PNG is left where it was. It replaced the boardroom frame (proof-boardroom-*), which is still on disk and unreferenced. IT IS CROPPED FROM THE CENTRE, and the anchor moves at @1040 only - see the note in that block. The predecessor was pinned to 68% because it was shot as a full-bleed background, empty near-black across its left third, so a centred crop filled this panel with dead space. The ledger still life is composed for a frame instead: papers left, seal and glasses right, the label plate across the middle, and the card seated below it. Nothing in it is expendable enough to crop toward, so the horizontal anchor stays centred at every width. THE SECTION'S OWN PADDING COMES OFF, but the gutter goes straight back on at the stage and the register - see the note on .idh-proof__stage. The plate no longer bleeds off the right window edge: it stops on the page gutter, so the section's left and right insets are the ones every other band uses. ========================================================================== */ .idh-proof *{ box-sizing:border-box; } /* THE GROUND IS THE BAND'S, whatever $idhBand() hands this section. The rule here used to be `background:#FFFFFF`, written before the page went to the strict white/cream alternation; .idh-secbg--cream carries !important, so that declaration had been losing for some time and described a colour this section no longer had. Removed rather than fought - the mockup grounds this composition on cream, which is what the alternation gives it anyway. */ .idh .idh-proof{ padding:0 !important; } /* how far the register card rides up into the plate above it */ .idh-proof{ --pf-lift:clamp(38px,4.6vw,74px); } /* ---- the stage: copy left, plate right ---------------------------------- THE GUTTER IS ON THE STAGE, NOT ON THE COLUMN INSIDE IT, and that is the whole point of this rule. --hf-gutter is a PERCENTAGE (15% on the homepage), and a percentage padding resolves against its own containing block - so on the copy column, a grid item ~774px wide at a 1440 viewport, it computed to 116px while every other section on the page was sitting at 216px. Same token, same declaration, different answer. Declared here it resolves against the section, which is full width, so it agrees with .idh-wrap's. */ /* EQUAL COLUMNS, AND THE GAP MOVED OFF THE COPY. Was 1.12fr / .88fr with the gap living as the copy column's right padding - which meant the copy's content box was narrower than its column by that padding while the plate filled its own column edge to edge, so the two rectangles could not be the same width by construction. 1fr/1fr plus a real column-gap makes both content boxes exactly equal, which is the whole point: the plate is now the copy block's twin, not a panel beside it. Same total gap, same page gutter. */ .idh-proof__stage{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(24px,2.8vw,46px); align-items:stretch; padding-inline:var(--hf-gutter,10%); } /* the horizontal padding here is only the gap to the plate; the page gutter is the stage's. The bottom clears --pf-lift plus a gap, or the card would ride up over the chip row. */ /* the right padding is the stage's column-gap now, so this is vertical only. These two values are restated as the plate's margins - if you change either one, change it there too or the two rectangles stop lining up. */ .idh-proof__copy{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(54px,6vw,100px) 0 calc(var(--pf-lift) + clamp(34px,3.6vw,58px)) 0; } .idh-proof__eyebrow{ display:block; margin:0 0 12px; font-family:var(--d-sans); font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--idh-ochre,#8A6A2F); /* 5.0:1 */ } .idh-proof__rule{ width:40px; height:2px; border:0; border-radius:2px; margin:0 0 26px; background:var(--idh-ochre,#8A6A2F); } .idh-proof__title{ margin:0 0 20px; font-family:var(--d-serif); font-size:clamp(2.2rem,3.5vw,3.5rem); font-weight:500; line-height:1.07; letter-spacing:-.026em; color:#101820; text-wrap:balance; /* 17.9:1 */ } .idh-proof__title em{ font-style:italic; color:var(--idh-ochre,#8A6A2F); } /* the rule and left padding are gone with the split header - this sits under the headline now, so a measure is what keeps it readable, not a divider */ .idh-proof__stand{ margin:0 0 32px; max-width:46ch; font-size:17.5px; line-height:1.72; color:var(--d-body,#3D444C); /* 9.9:1 */ } .idh-proof__stand a{ color:#101820; text-decoration:underline; text-decoration-color:rgba(138,106,47,.55); text-underline-offset:3px; text-decoration-thickness:1px; } .idh-proof__stand a:hover{ text-decoration-color:var(--idh-ochre,#8A6A2F); } /* ---- the plate ---------------------------------------------------------- The image is absolutely positioned so the cell can take its height from the copy column beside it rather than from the picture's own aspect ratio - the two halves stay flush top and bottom at every width. min-height is the floor for when the copy is the shorter of the two. */ /* THE MARGINS STILL CLEAR THE REGISTER CARD - the card is inset from the right window edge, so a plate running the full row height showed a strip of photograph down its right side and notched the corner - but they are no longer tuned to that alone; see the sizing note below. The 20px radius is still the SAME radius as .idh-proof__cols under it, so the two objects are cut from the same shape even now that they no longer touch. */ /* ---- THE FRAME: a solid brass surround, not a hairline ------------------ The first pass drew this as a 1px lip and an offset outline. Correct in palette, invisible at reading distance - two hairlines on a 600px plate is not a frame, it is a border. This is the frame: a real band of brass with the sheen a milled edge has. THE GRADIENT IS THE PALETTE'S OWN BRASS RUN, no new hue. #E5B567 is --d-amber, the banner brass and the lamp light in both photographs on this page; #8A6A2F is --idh-ochre, the light-band half of that same accent and the exact value of this section's eyebrow and its 40px rule. The frame is that rule continued around the plate at weight. #F0D9A8 and #C9A05A are the two only in service of the sheen - a flat band of either endpoint reads as a coloured border, and the run light-dark-light across the diagonal is what makes it read as metal. TWO 1px LINES DO THE SEPARATING. A dark one on the photograph's own edge (rgba(11,18,25,.5), drawn OUTWARD into the band, so the near-black does not bleed into the brass) and a deep one around the outside (rgba(90,68,28,.55)) so the frame has an edge against cream instead of fading into it. THE BAND IS PADDING, NOT A BORDER, which is why the photo does not have to move: the img is inset:0 absolute, and an absolute box resolves against its containing block's PADDING box, so the picture sits inside the band for free. The two radii are concentric - 20px outer, 11px inner - which is the one detail that separates a frame from a coloured rectangle. The lift shadow is the warm rgba(38,28,16,...) every other plate on this page uses; a neutral grey shadow on warm paper reads as dirt. */ /* THE PLATE IS NOW SIZED TO THE COPY BLOCK BESIDE IT, not to the column. The margins are the copy column's own top and bottom padding restated, so the photograph's top edge lands on the eyebrow and its bottom edge on the chip row - the two halves are the same rectangle, which is what the column split below makes them the same width. WHAT THIS COSTS, flagged: the plate used to stop exactly on the register card's top edge, and the copy's bottom padding carries an extra clamp(34px,3.6vw,58px) past the lift. Matching the copy block means the photograph now stops that much short of the card. The two read as separate objects on a shared gutter rather than one stacked one. min-height is a floor only, and deliberately well under the copy's natural height - it must never be the thing driving the row, or the copy's justify-content:center would slide the text out of alignment with the plate. */ .idh-proof__shot{ position:relative; margin-top:clamp(54px,6vw,100px); margin-bottom:calc(var(--pf-lift) + clamp(34px,3.6vw,58px)); min-height:clamp(280px,20vw,380px); overflow:hidden; border-radius:20px; padding:clamp(9px,.85vw,14px); background:linear-gradient(150deg, #F0D9A8 0%, #E5B567 13%, #A98045 34%, #8A6A2F 50%, #C9A05A 68%, #8A6A2F 85%, #E5B567 100%); box-shadow:0 0 0 1px rgba(90,68,28,.55), 0 34px 72px -26px rgba(38,28,16,.50); } .idh-proof__shot img{ position:absolute; inset:0; width:100%; height:100%; /* CENTRE, not 68%. The 68% was tuned for the old boardroom frame, whose subject sat hard right and whose left third was empty wall - pushing the crop right was the only way to keep the people in shot. The ledger still life is composed the opposite way: the papers anchor the left, the seal and the card the right, and the label plate runs across the middle. Holding 68% here would crop the papers off entirely and leave the plate hanging. */ object-fit:cover; object-position:center; display:block; border-radius:11px; box-shadow:0 0 0 1px rgba(11,18,25,.50); } /* THE SEAM GRADIENT IS GONE, and the frame is why. It existed for one reason - a dark photograph meeting a cream band on its bare left edge - and softened that by darkening the left 22% of the picture. There is no bare edge now: the brass band is the seam, on all four sides, and the gradient was left doing nothing but dimming a third of the photograph. Its @1040 display:none override went with it. */ /* ---- the actions -------------------------------------------------------- NOT in the mockup, which carries no CTA. Kept because the sample report and the teardowns are this section's only routes and dropping a navigation path to match a picture is not a design decision. Left-aligned under the standfirst now, where the mockup puts its own button pair. */ .idh-proof__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 34px; } .idh-proof__btn{ display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 28px; border-radius:10px; font-family:var(--d-sans); font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:background var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease), color var(--d-t) var(--d-ease); } .idh-proof__btn svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .idh-proof__btn--solid{ background:#0B1219; color:var(--d-paper,#F7F3EA); border-color:#0B1219; } /* 17.0:1 */ .idh-proof__btn--solid:hover{ background:#1B2530; border-color:#1B2530; color:#FFFFFF; } .idh-proof__btn--line{ background:#FFFFFF; color:#101820; border-color:rgba(16,24,32,.50); } /* 3.4:1 boundary */ .idh-proof__btn--line:hover{ background:var(--d-paper,#F7F3EA); border-color:rgba(16,24,32,.68); color:#101820; } /* ---- the frameworks chips ---------------------------------------------- Was a rounded pill bar across the foot of the section. The mockup runs a row of small marked chips under its buttons, so the same four names take that shape. The label the strip carried is kept above them - without it the four read as features rather than as what every gap is mapped to. */ .idh-proof__chiplabel{ display:block; margin:0 0 14px; font-family:var(--d-sans); font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--d-muted,#5F666D); /* 5.9:1 */ } .idh-proof__chips{ display:flex; flex-wrap:wrap; gap:14px 26px; margin:0; padding:0; list-style:none; } .idh-proof__chips li{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--d-body,#3D444C); /* 8.9:1 */ } .idh-proof__chip-ico{ flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(138,106,47,.12); } .idh-proof__chip-ico svg{ width:16px; height:16px; fill:none; stroke:var(--idh-ochre,#8A6A2F); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ---- the register card -------------------------------------------------- The mockup's straddling panel: a raised card that rides up over the bottom of the plate. It ran wider than the copy column on a 4% inset until the gutters were squared up; it is on the page gutter now, so its edges line up with every other section's content. That costs it ~300px of width, which is what the centred cells below are for. */ .idh-proof__registerwrap{ position:relative; z-index:2; margin-top:calc(-1 * var(--pf-lift)); padding:0 var(--hf-gutter,10%) clamp(54px,6vw,92px); } .idh-proof__cols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:clamp(20px,2.2vw,30px) clamp(8px,1vw,16px); background:#FFFFFF; border:1px solid rgba(16,24,32,.08); border-radius:20px; box-shadow:0 24px 60px rgba(38,28,16,.10), 0 2px 6px rgba(38,28,16,.045); } /* Ruled apart, never boxed - the border-left sits BETWEEN cells, which is what keeps this a register and not a row of cards inside a card. */ /* MARK ON TOP, CENTRED - not the mockup's mark-left cells, and the gutter is why. The mockup's own bar is ~1560px wide, which gives its five cells 312px each and room to set a mark beside the copy. On the page gutter this card is 1008px, so a cell is 202px: a 46px mark and its gap would leave about 130px of measure, which breaks "Mapped to which rule?" over four lines. Centred stacks hand the text the full cell. */ .idh-proof__col{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(4px,.6vw,10px) clamp(10px,1.2vw,18px); border-left:1px solid var(--d-rule-2,rgba(16,24,32,.08)); } .idh-proof__col:first-child{ border-left:0; } /* OUTLINED, not filled. The old disc was a filled cream circle, which on a white card would have been invisible; the mockup outlines its marks in the accent and that reads on either ground. */ .idh-proof__disc{ flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 0 18px; border-radius:50%; border:1px solid rgba(138,106,47,.42); background:rgba(138,106,47,.06); } .idh-proof__disc svg{ width:26px; height:26px; fill:none; stroke:var(--idh-ochre,#8A6A2F); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .idh-proof__body{ min-width:0; width:100%; } /* the mockup's figure slot. Ours is an ordinal rather than a statistic, so it is set at 1.5rem instead of the mockup's display size - large enough to hold the slot, not so large that an index number outweighs the term under it. */ .idh-proof__n{ display:block; margin:0 0 4px; font-family:var(--d-serif); font-size:1.5rem; font-weight:600; line-height:1; letter-spacing:-.01em; color:var(--idh-ochre,#8A6A2F); /* 5.0:1 */ } .idh-proof__term{ display:block; margin:0 0 9px; font-family:var(--d-sans); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:#101820; /* 17.9:1 */ } /* the question, in the italic serif this page uses for every accented phrase. min-height is two lines of this leading and it is doing real work: the questions run to one line or two depending on the cell, and without a floor the substance lines started at five different heights across the register. */ .idh-proof__q{ display:block; margin:0 0 10px; min-height:2.72em; font-family:var(--d-serif); font-style:italic; font-size:15.5px; line-height:1.36; color:#101820; /* 17.9:1 */ } .idh-proof__say{ display:block; margin:0; font-size:13.5px; line-height:1.58; color:var(--d-muted,#5F666D); /* 5.9:1 */ } /* ---- responsive --------------------------------------------------------- The stage stacks before the register does. Below 1040 the copy column has nowhere left to go, so the plate drops beneath it and the whole section runs as one gutter-width column. */ /* 1360, not 1240. On the page gutter the card is 70% of the viewport, so five cells are 190px at 1360 and 174px at 1240 - the second is under the width a two-line question and a three-line substance line need. The register goes three-up as soon as five stops holding. */ @media (max-width:1360px){ .idh-proof__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; } .idh-proof__col{ border-left:0; } .idh-proof__col + .idh-proof__col{ border-left:1px solid var(--d-rule-2,rgba(16,24,32,.08)); } .idh-proof__col:nth-child(3n+1){ border-left:0; } .idh-proof__q{ min-height:0; } } @media (max-width:1040px){ .idh-proof__stage{ grid-template-columns:1fr; } .idh-proof__copy{ justify-content:flex-start; padding:clamp(46px,6vw,72px) 0 clamp(38px,4.4vw,56px); } /* stacked, there is no copy block to match, so the alignment margins come off and the plate goes back to sitting under the copy on the lift alone. The floor rises because the row height is the picture's own now. The frame narrows and the shadow softens: a 14px band and a 34px lift are drawn for a half-width plate and read as heavy across a full-width one. */ .idh-proof__shot{ min-height:clamp(260px,42vw,380px); margin-top:0; margin-bottom:var(--pf-lift); padding:clamp(7px,1.4vw,10px); box-shadow:0 0 0 1px rgba(90,68,28,.55), 0 20px 44px -20px rgba(38,28,16,.40); } /* THE CROP ANCHOR DROPS ONLY HERE. Stacked, the plate spans the full column against a min-height floor, so the box goes from portrait at desktop to as wide as 2.2:1 - and a 1.5:1 photograph in a 2.2:1 box is cropped top and bottom. Centred, that cut lands straight through the card and prints "EVIDENCE OVER PRO". 58% pushes the visible band down just far enough to seat the card whole; past ~65% it starts shaving the ledger's top edge, which is the other thing this frame cannot lose. */ .idh-proof__shot img{ object-position:center 58%; } } /* the page's own gutter floor. Every other container swaps the percentage for a fixed 24px here (ig-theme-oxford, "24px floor below 768px"), because 15% of a 380px phone spends a fifth of the screen on margin - this section has to make the same swap or it stops matching them at exactly the width where it matters most. */ @media (max-width:768px){ .idh-proof__stage, .idh-proof__registerwrap{ padding-inline:var(--hf-gutter-min,24px); } } @media (max-width:880px){ .idh-proof__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } .idh-proof__col:nth-child(3n+1){ border-left:1px solid var(--d-rule-2,rgba(16,24,32,.08)); } .idh-proof__col:nth-child(2n+1){ border-left:0; } } @media (max-width:600px){ /* one up. The cells stop being columns, so the rule goes back to the top edge and the whole thing reads as a list, which is what it is at this width. The lift comes off too - a card cannot straddle a stack. */ .idh-proof{ --pf-lift:0px; } .idh-proof__cols{ grid-template-columns:1fr; row-gap:0; padding:clamp(16px,4vw,24px); } .idh-proof__col{ border-left:0 !important; padding:22px 6px; border-top:1px solid var(--d-rule-2,rgba(16,24,32,.08)); } .idh-proof__col:first-child{ border-top:0; padding-top:6px; } .idh-proof__cta{ flex-direction:column; align-items:stretch; width:100%; } .idh-proof__btn{ width:100%; justify-content:center; } .idh-proof__registerwrap{ margin-top:clamp(30px,6vw,44px); } } @media (prefers-reduced-motion:reduce){ .idh-proof__btn{ transition:none; } } /* ============================================================================ 10 · FIVE DIMENSIONS — the register ---------------------------------------------------------------------------- The supplied reference, applied to the band it actually depicts: split header, five ruled columns each carrying a disc, a numeral, a tracked term, a hairline, an italic question and one line of substance, then a rounded strip naming the frameworks. NO MARKUP WAS RESTRUCTURED to get here. already emits the reference's exact order - icon, numeral, name, question, description - so this block only restyles it. The two additions to the Blade are the standfirst and the seal on the strip; everything else is CSS. CARDS OUT, RULES IN. The band's rows were white cards on a light ground (see "THE DIMENSIONS BAND, CONVERTED TO LIGHT" above, which this supersedes for layout while keeping its colour work). The reference divides its columns with hairlines and boxes nothing, so the card fill, border and radius come off and a single border-left carries the division. !important throughout because the block it overrides uses it. TWO COLOUR SWAPS against that block, both to match the reference: the numeral goes ochre and the term goes ink. It had them the other way round. ========================================================================== */ /* CREAM, not white. --d-paper is the page's own ground, so this band now sits on the same paper as the sections either side of it rather than reading as a sheet laid on top of them. TWO THINGS WERE TUNED AGAINST THE WHITE and had to move with it, both below: the frameworks strip and the icon discs were BOTH filled --d-paper, i.e. cream on white. On a cream band that is cream on cream and each would have vanished. See their own notes. */ .idh .idh-dimband{ background:var(--d-paper,#F7F3EA) !important; background-image:none !important; padding-block:var(--d-sec-y) !important; } .idh .idh-dimband__inner{ max-width:var(--d-max,1240px); } /* ---- the split header --------------------------------------------------- */ .idh .idh-dimband__head{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:start; margin:0 0 clamp(48px,5.4vw,86px); } .idh .idh-dimband__eyebrow{ font-size:13px !important; letter-spacing:.2em !important; margin:0 0 12px !important; color:var(--idh-ochre) !important; /* 5.0:1 */ } /* the short rule the reference sets under its kicker */ .idh .idh-dimband__eyebrow::after{ content:""; display:block; width:40px; height:2px; border-radius:2px; margin:14px 0 0; background:var(--idh-ochre); } /* ONE LINE, on instruction. "The five ways your AI gets judged" was breaking after "your", and the break was not a wrapping accident - the ceiling was 3.9rem in a column that is 1.15fr of a 1240px inner, so the line simply did not fit and there was nowhere else for it to go. THE FIX IS THE CEILING, NOT nowrap. text-wrap:nowrap would hold the line and then push it straight out of the column on any narrower viewport, which trades a wrap for an overflow. Dropping the ceiling to 3.1rem makes the line fit the column it is actually in, and text-wrap:balance comes off with it - balance exists to even out a multi-line headline and has nothing to do on a single one. THE MEDIA QUERY IS THE OTHER HALF. Below ~1240px the head goes one-column and the string genuinely cannot hold one line at a readable size, so the clamp is allowed to break again there rather than being shrunk to nothing. Single line is a desktop instruction; at phone width it would mean 14px display type. */ .idh .idh-dimband__title{ font-size:clamp(1.85rem,3.05vw,3.1rem) !important; font-weight:500 !important; line-height:1.08 !important; letter-spacing:-.026em !important; margin:0 0 18px !important; text-wrap:nowrap; white-space:nowrap; } @media (max-width:1240px){ .idh .idh-dimband__title{ text-wrap:balance; white-space:normal; } } /* the italic is gone sitewide (idh-type-2026.css section 9); the accent word still separates on colour, which it always also carried */ .idh .idh-dimband__title .hl{ font-style:normal; } .idh .idh-dimband__stand{ margin:0; padding-left:clamp(20px,2.4vw,36px); border-left:1px solid rgba(138,106,47,.38); font-family:var(--d-sans); font-size:17.5px; line-height:1.72; color:var(--d-body) !important; /* 9.9:1 */ } /* ---- the register ------------------------------------------------------- */ .idh .idh-dimband .idh-sched{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:0 !important; align-items:stretch !important; } .idh .idh-dimband .idh-sched__row{ background:transparent !important; border:0 !important; border-left:1px solid var(--d-rule-2,rgba(16,24,32,.07)) !important; border-radius:0 !important; padding:0 clamp(14px,1.6vw,26px) !important; text-align:center; transform:none !important; transition:none !important; } .idh .idh-dimband .idh-sched__row:first-child{ border-left:0 !important; } /* the hover lift went with the cards - there is nothing to lift now */ .idh .idh-dimband .idh-sched__row:hover{ border-color:var(--d-rule-2,rgba(16,24,32,.07)) !important; transform:none !important; } /* NOT CURRENTLY RENDERED. The discs were removed from this band on instruction and the partial no longer passes :icon or :icon-src, so the component emits no mark and every .idh-sched__ico rule here and in the breakpoints below is inert. They are kept rather than deleted for the same reason the partial keeps the 'img' and 'ico' data: going back is re-adding two props, not rebuilding a glyph set and its three responsive sizes. The disc is the supplied artwork, cropped INSIDE its own cream circle - so the radius here clips to pure cream and never reaches the near-white the sheet was drawn on. The paper background stays as the fallback: if a file 404s the disc still reads as a disc rather than as a hole. */ .idh .idh-dimband .idh-sched__ico{ display:flex !important; align-items:center; justify-content:center; width:78px !important; height:78px !important; margin:0 auto 26px !important; border-radius:50%; overflow:hidden; background:var(--d-paper,#F7F3EA); } .idh .idh-dimband .idh-sched__ico img{ display:block; width:100%; height:100%; object-fit:cover; } .idh .idh-dimband .idh-sched__ico svg{ width:36px !important; height:36px !important; stroke-width:1.4 !important; } /* numeral ochre, term ink - the reference's arrangement, and the way round the light-conversion block above had them */ .idh .idh-dimband .idh-sched__num{ display:block; font-family:var(--d-sans) !important; font-size:16px !important; font-weight:600; letter-spacing:.14em !important; line-height:1; color:var(--idh-ochre) !important; margin:0 0 10px !important; /* 5.0:1 */ } .idh .idh-dimband .idh-sched__name{ position:relative; font-size:13.5px !important; letter-spacing:.15em !important; line-height:1.4 !important; color:var(--d-text) !important; /* 17.9:1 */ margin:0 0 18px !important; padding-bottom:18px; } .idh .idh-dimband .idh-sched__name::after{ content:""; position:absolute; left:50%; bottom:0; translate:-50% 0; width:26px; height:1px; background:rgba(138,106,47,.55); } .idh .idh-dimband .idh-sched__detail{ display:block !important; } /* TWO LINES WERE RESERVED, and reserving a fixed count is what broke this row. min-height:2.76em holds exactly two lines of the question. Four of the five questions fit; "Does it treat everyone the same?" and "Would it pass a regulator's review?" wrap to THREE at this column width, and the third line overran the reservation and printed straight through the description under it. The taller a column got, the worse it collided — the failure was invisible at the width the number was picked at and total at any other. The reservation stays only as the no-subgrid fallback; the block below removes it where subgrid is available and aligns the four bands properly. */ .idh .idh-dimband .idh-sched__q{ min-height:2.76em; font-size:17px !important; line-height:1.38 !important; color:var(--d-text) !important; margin:0 0 14px !important; /* 17.9:1 */ } /* ---- BALANCED COLUMNS, on instruction ------------------------------------ A guessed min-height cannot balance five columns whose copy is not the same length. Subgrid can: the schedule declares four rows — numeral, term, question, description — and every column opts into the parent's row track instead of stacking its own. Each band is then as tall as the tallest cell in it, ALL five columns share that height, and the description line starts at one baseline across the row however the questions above it wrap. Two levels are needed because the question and the description are nested inside .idh-sched__detail: the row spans four tracks and passes them down, and the detail spans the last two and passes those down again. Subgrid only inherits one level at a time. Guarded, not assumed. Where subgrid is unsupported the rule never applies and the reserved-height version above is what renders — the same layout the band has had, unchanged. */ @supports (grid-template-rows: subgrid){ .idh .idh-dimband .idh-sched{ grid-template-rows:auto auto auto auto !important; } .idh .idh-dimband .idh-sched__row{ display:grid !important; grid-row:span 4 !important; grid-template-rows:subgrid !important; } .idh .idh-dimband .idh-sched__detail{ display:grid !important; grid-row:span 2 !important; grid-template-rows:subgrid !important; } /* the reservation is what the subgrid replaces — leaving it would put a two-line floor under a band that now measures itself */ .idh .idh-dimband .idh-sched__q{ min-height:0; } /* ROW-GAP HAS TO GO TO ZERO, and this is the subgrid trap worth naming. Once a column's internal bands ARE the parent's row tracks, the parent's row-gap falls between them too — so the 44px the three-up breakpoint uses to separate the two LINES of columns would also open 44px between every numeral, term, question and description. The separation moves to padding on the row, which only ever falls where a row ends. */ .idh .idh-dimband .idh-sched{ row-gap:0 !important; } } @supports (grid-template-rows: subgrid){ @media (max-width:1240px){ .idh .idh-dimband .idh-sched{ row-gap:0 !important; } .idh .idh-dimband .idh-sched__row{ padding-bottom:44px !important; } } @media (max-width:600px){ .idh .idh-dimband .idh-sched__row{ padding-bottom:0 !important; } } } .idh .idh-dimband .idh-sched__desc{ font-size:14.5px !important; line-height:1.6 !important; color:var(--d-muted) !important; margin:0 !important; /* 5.9:1 */ } /* ---- the frameworks strip ----------------------------------------------- */ /* ON INSTRUCTION: the theme's DARK ground with a gold edge, not the deeper paper it used to sit on. WHY IT NEEDED IT. The strip carried --d-paper-2 #F1EADD on a cream band - a nine-level step off its own ground. That was enough to stop it disappearing, which was the problem it was solving at the time, but not enough to make it an object: at the foot of a section whose register is five columns of cream, a slightly-deeper cream pill reads as a gap in the page rather than as the thing the section closes on. --idh-band-dark #0B1219 is the same ink the hero and the five-dimensions band already use, so this is the page's existing dark, not a new one. The 1.5px #8A6A2F edge is the sweep's gold, and at 3.75:1 against that ink it clears the 3:1 floor a component boundary needs. The glow under it is the warm rgba(38,28,16,...) every other plate on this page casts. EVERY VALUE INSIDE IT INVERTS WITH THE GROUND, and this is the part that had to be done properly rather than by flipping the background alone: - the label was --d-text, near-black, which would have been 1.2:1. It takes --d-paper at 16:1. - the chips were #FFFFFF pills with --d-body type. A white pill on ink is the brightest thing in the section and would have pulled every eye at the bottom of the page; they are a 6% paper wash with a gold hairline and cream type instead - 14.9:1, and they read as inset rather than applied. - the mark and the chip dots were --idh-ochre #8A6A2F, which is the ON-LIGHT depth of the accent and goes muddy here. They take #E5B567, the on-ink half of the same accent, at 6.4:1. Same rule as everywhere else in this file: one accent, the ground picks the depth. */ .idh .idh-dimband__marks{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(46px,5vw,74px) !important; padding:24px clamp(24px,2.6vw,40px); background:var(--idh-band-dark,#0B1219); border-radius:999px; border:1.5px solid #8A6A2F; box-shadow:0 22px 48px -18px rgba(38,28,16,.42); } .idh .idh-dimband__marks-mark{ display:flex; flex:none; } .idh .idh-dimband__marks-mark svg{ width:34px; height:34px; fill:none; stroke:#E5B567; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .idh .idh-dimband__marks-label{ flex:none; font-size:13px !important; letter-spacing:.15em !important; color:var(--d-paper,#F7F3EA) !important; margin-right:0 !important; } .idh .idh-dimband__mark{ display:inline-flex; align-items:center; gap:9px; padding:9px 20px !important; border-radius:999px; border:1px solid rgba(229,181,103,.42) !important; background:rgba(247,243,234,.06) !important; font-size:14.5px !important; font-weight:600; color:var(--d-paper,#F7F3EA) !important; /* 14.9:1 */ } .idh .idh-dimband__mark::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; background:#E5B567; } /* ---- responsive --------------------------------------------------------- Same steps as the proof register: five columns need roughly 200px each to hold a term and a two-line question, so they go three-up, two-up, then one-up with the rules turning horizontal. */ @media (max-width:1240px){ .idh .idh-dimband .idh-sched{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; row-gap:44px !important; } .idh .idh-dimband .idh-sched__row:nth-child(3n+1){ border-left:0 !important; } .idh .idh-dimband .idh-sched__ico{ width:70px !important; height:70px !important; margin-bottom:22px !important; } } @media (max-width:880px){ .idh .idh-dimband__head{ grid-template-columns:1fr; gap:26px; } .idh .idh-dimband__stand{ padding-left:0; border-left:0; padding-top:22px; border-top:1px solid rgba(138,106,47,.38); } .idh .idh-dimband .idh-sched{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .idh .idh-dimband .idh-sched__row:nth-child(3n+1){ border-left:1px solid var(--d-rule-2,rgba(16,24,32,.07)) !important; } .idh .idh-dimband .idh-sched__row:nth-child(2n+1){ border-left:0 !important; } .idh .idh-dimband__marks{ border-radius:26px; } } @media (max-width:600px){ .idh .idh-dimband .idh-sched{ grid-template-columns:1fr !important; row-gap:0 !important; } /* the two :nth-child rules above have to be named again to be undone. Both they and this are !important, so !important cannot break the tie - specificity does, and :nth-child outranks the bare class. Without these, row 04 kept the left border it was given as the first item of the three-up row. */ .idh .idh-dimband .idh-sched__row, .idh .idh-dimband .idh-sched__row:nth-child(3n+1), .idh .idh-dimband .idh-sched__row:nth-child(2n+1){ border-left:0 !important; padding:26px 0 !important; border-top:1px solid var(--d-rule-2,rgba(16,24,32,.07)) !important; } .idh .idh-dimband .idh-sched__row:first-child{ border-top:0 !important; padding-top:0 !important; } .idh .idh-dimband .idh-sched__ico{ width:62px !important; height:62px !important; margin-bottom:18px !important; } .idh .idh-dimband .idh-sched__ico svg{ width:29px !important; height:29px !important; } .idh .idh-dimband__marks{ border-radius:20px; padding:20px; } } /* ============================================================================ 12 · THE GOLD BUTTON SYSTEM — one fill for every button on the site ---------------------------------------------------------------------------- ON INSTRUCTION, and it deliberately reverses the "WHY NOT OCHRE FILLS" note in section 7 above. That note argued the accent should stay rationed to eyebrows, numerals, accent words and rules, and that buttons should carry ink instead. The direction now is the opposite one: the header CTA, the footer CTAs and every button on the homepage carry the page's own gold, so the whole site reads as one control language rather than as ink-here / paper-there / teal-in- the-modals. #8A6A2F IS THE FILL NOW, ON INSTRUCTION, and this reverses the paragraph that used to sit here. That paragraph argued for #E5B567 as the fill because ink type on it is 9.5:1 on every ground, and noted #8A6A2F "passes, but it is a brown, not gold". The instruction is #8A6A2F for every button and link, so the arithmetic runs the other way round and the type on the fill inverts with it: #8A6A2F fill + #FFFFFF type = 5.03:1 — AA on paper AND on the ink bands #8A6A2F fill + #F7F3EA type = 4.45:1 — just UNDER AA, so cream is out That second line is the one detail worth keeping in view. The site's default light type is the cream --d-paper, and on this fill it misses 4.5:1 by six hundredths. Every filled button therefore carries #FFFFFF specifically, not the cream it would inherit. --idh-gold-ink is what enforces that. ONE VALUE, EVERY GROUND. --idh-gold and --idh-gold-deep are now the same colour. They stay as two names because they still mean different things: one is the fill, one is type-and-hairline-on-light. If a future direction splits them again, the selectors below already know which is which. ON DARK, #8A6A2F CANNOT BE TYPE. It is 3.75:1 against #0B1219, which clears the 3:1 floor for a hairline or a button edge but fails for a label. So the dark-band outline button keeps a cream label and takes the gold in its BORDER only. Filled buttons are unaffected: their gold is a ground, not type. These same literals are restated in header-new.blade.php and footer.blade.php, which render on pages that never load this stylesheet. Change all three together. NOT INCLUDED, and deliberately: the three price-tier cards (.idh-ptier__go). Those pills read --pt-pill, the deepest stop of each card's own two-stop gradient, and the tiers were built to a supplied per-tier reference. A gold pill on the teal and blue cards would clash with the card it sits in rather than tie into the page. Say the word and they go gold too — it is one line. SPECIFICITY. Every selector is prefixed `html body`, and the hero and dark-band ones carry a third class, for the reasons documented in section 7: this file's own dark-band rules are (0,3,0), and index.blade.php's inline hero rules are (0,3,1) AND load after this file. (0,3,2) clears both without depending on source order. Do not shorten these selectors. ========================================================================== */ .idh{ --idh-gold: #8A6A2F; /* the fill — white type on it is 5.03:1 */ --idh-gold-hover: #75592A; /* one step down — white on it is 6.4:1 */ --idh-gold-deep: #8A6A2F; /* gold as TYPE or hairline on a light ground */ --idh-gold-ink: #FFFFFF; /* the type that rides the fill — NOT the cream */ } /* ---- filled: gold ground, ink type. One rule, every ground. -------------- */ html body .idh .idh-btn--primary, html body .idh .idh-btn--dark, html body .idh .idh-btn--light, html body .idh .idha-rc__btn--solid, html body .idh .idh-proof__btn--solid, html body .idh .idh-join-btn, html body .idh #rcStart, /* the quick-lookup "Go". It was the last teal control on the homepage - it read --hf-action from ig-theme-oxford and was simply missed when this system was written, so it sat in the old palette directly under a gold hero. Added here rather than given a gold of its own, so it tracks the tokens above. */ html body .idh .idh-bsearch__go, html body .idh .idh-secbg--dark .idh-btn--primary, html body .idh .idh-secbg--ink .idh-btn--primary, html body.home-page .idh-hero__cta .idh-btn--primary{ background:var(--idh-gold,#E5B567) !important; color:var(--idh-gold-ink,#0B1219) !important; border-color:var(--idh-gold,#E5B567) !important; box-shadow:none !important; } html body .idh .idh-btn--primary:hover, html body .idh .idh-btn--dark:hover, html body .idh .idh-btn--light:hover, html body .idh .idha-rc__btn--solid:hover, html body .idh .idh-proof__btn--solid:hover, html body .idh #rcStart:hover, html body .idh .idh-bsearch__go:hover, html body .idh .idh-secbg--dark .idh-btn--primary:hover, html body .idh .idh-secbg--ink .idh-btn--primary:hover, html body.home-page .idh-hero__cta .idh-btn--primary:hover{ background:var(--idh-gold-hover,#D3A254) !important; color:var(--idh-gold-ink,#0B1219) !important; border-color:var(--idh-gold-hover,#D3A254) !important; } html body .idh .idh-btn--primary:active, html body .idh .idh-bsearch__go:active, html body .idh .idh-btn--dark:active{ background:#5F4722 !important; color:var(--idh-gold-ink,#FFFFFF) !important; border-color:#5F4722 !important; } /* the solid proof/rc buttons carry an inline SVG or icon that inherits colour */ html body .idh .idh-proof__btn--solid svg{ stroke:var(--idh-gold-ink,#FFFFFF); } /* ---- outlined on LIGHT: gold type, gold hairline, no fill ---------------- */ /* the hairline was rgba(211,162,84,.85) - a tint of the OLD light gold. It is the flat instruction colour now, at full strength: a 15% tint of a value that is only 5:1 to begin with is not a visible edge. */ html body .idh .idh-btn--outline, html body .idh .idh-proof__btn--line{ background:transparent !important; color:var(--idh-gold-deep,#8A6A2F) !important; border:1px solid var(--idh-gold-deep,#8A6A2F) !important; box-shadow:none !important; } html body .idh .idh-btn--outline:hover, html body .idh .idh-proof__btn--line:hover{ background:rgba(138,106,47,.12) !important; color:var(--idh-gold-deep,#8A6A2F) !important; border-color:var(--idh-gold-hover,#75592A) !important; } /* ---- outlined on DARK: CREAM type, gold hairline ------------------------- */ /* the label used to be the gold itself. It cannot be: #8A6A2F on #0B1219 is 3.75:1 and fails AA for a label. The border keeps the gold - 3.75:1 clears the 3:1 floor a UI component boundary needs - and the label reverts to the cream it reads at 16:1. This is the one place in the sweep where the instruction colour is a border and not the text. */ html body .idh .idh-btn--ghost, html body .idh .idh-btn--outline-light, html body .idh .idh-secbg--dark .idh-btn--outline, html body .idh .idh-secbg--ink .idh-btn--outline, html body.home-page .idh-hero__cta .idh-btn--outline-light{ background:transparent !important; color:var(--d-paper,#F7F3EA) !important; border:1.5px solid var(--idh-gold,#8A6A2F) !important; box-shadow:none !important; } html body .idh .idh-btn--ghost:hover, html body .idh .idh-btn--outline-light:hover, html body .idh .idh-secbg--dark .idh-btn--outline:hover, html body .idh .idh-secbg--ink .idh-btn--outline:hover, html body.home-page .idh-hero__cta .idh-btn--outline-light:hover{ background:rgba(138,106,47,.28) !important; color:#FFFFFF !important; border-color:#A5813A !important; } /* ---- focus ring, re-pointed so it reads against a gold control ----------- */ html body .idh .idh-btn:focus-visible, html body .idh .idh-proof__btn:focus-visible{ outline:2px solid var(--idh-gold-deep,#8A6A2F) !important; outline-offset:3px; box-shadow:none !important; } /* ---- the floating scroll-to-top button ---------------------------------- Last teal thing on the page, and it sits directly beside the (now gold) social discs in the footer's bottom-right corner, so the mismatch was unmissable. Same fill as every other button here. THE ARROW GOES BACK TO WHITE. It is an pointing at a hardcoded-WHITE svg (assets/img/icon/top-icon.svg), and under the old light-gold fill white was 1.9:1 and all but vanished, so it was painted black with filter:brightness(0). On #8A6A2F white is 5.03:1 and black would be the wrong one, so the filter comes off and the asset renders as authored. BOTH SELECTORS ARE NEEDED. ig-theme-oxford.css states this button as `body.home-page .scroll-top` (0,2,0) with !important, so the plain `html body .scroll-top` (0,1,2) loses to it on class count no matter which file loads last; the .home-page variant at (0,2,1) wins on element count. LITERALS, NOT THE TOKENS. The button is rendered by mainlayout as a sibling of the content, OUTSIDE the .idh wrapper the --idh-gold family is declared on, so a var() here would only ever resolve to its fallback. */ html body .scroll-top, html body.home-page .scroll-top{ background:#8A6A2F !important; color:#FFFFFF !important; border:none !important; box-shadow:0 8px 20px rgba(138,106,47,.34) !important; } html body .scroll-top:hover, html body.home-page .scroll-top:hover{ background:#75592A !important; } html body .scroll-top img, html body.home-page .scroll-top img{ filter:none !important; opacity:.95; } html body .scroll-top span, html body.home-page .scroll-top span, html body .scroll-top span i, html body.home-page .scroll-top span i{ color:#FFFFFF !important; } /* ============================================================================ 12b · THE SAME GOLD FOR EVERY LINK ON THE HOMEPAGE ---------------------------------------------------------------------------- ON INSTRUCTION, and the other half of section 12: that section made every BUTTON #8A6A2F, this one makes every LINK the same value, so a reader cannot tell from the colour whether a thing is a control or a route - which is the point of a single control language. THE SPLIT IS BY GROUND, NOT BY COMPONENT. #8A6A2F is 5.0:1 on this page's cream and white and 3.75:1 on its ink bands, so it can be a label on the light bands and cannot on the dark ones. The dark-band links keep the palette's own on-ink half of the accent, #E5B567 at 6.4:1 - the same --d-accent / --d-accent-i relationship documented in section 7. One accent, two grounds, which is what this palette has always done. WHAT IS DELIBERATELY NOT SWEPT, so the next reader does not think it was missed: - .idh-qa__btn, the FAQ disclosure rows. They are full-width headings that happen to be buttons; a gold label on every one of them would read as a page of links, not a page of questions. - card-wrapper anchors (.idh-domain-card, .idh-hiw__*), where the anchor is the whole card and its colour belongs to the card's own type scale. - the three price-tier pills (.idh-ptier__go), for the reason already recorded at the head of section 12. SPECIFICITY. Same rule as section 12: index.blade.php's inline