/* ============================================================================ HENRY JAMES LEGAL — Brand system · "Plain words. Fierce advocacy." One stylesheet shared by the marketing site, the product demo and the brand guide, so everything is provably one brand. Type : Newsreader (editorial serif, expressive italics) for display & quotes Instrument Sans for body, UI and tracked labels Colour : warm bone paper · warm near-black ink · signature "Henry Red" claret forest green + ochre carry functional meaning only Motif : editorial numbered index · hairline rules · the "signature rule" Load Google Fonts before this file. ========================================================================== */ /* ============================================================================ THEME ARCHITECTURE Colour lives entirely in the three [data-theme] blocks below. Everything non-colour (type, geometry, spacing, motion, shadow recipes) lives in :root once. Set data-theme on to switch the whole brand at the token level: (none) / claret → Theme 1 · Claret (default — editorial red + bone) chancery → Theme 2 · Chancery (navy + brass, heritage modern) amethyst → Theme 3 · Amethyst (violet + lilac, a fresh world) Only the colour world changes — layout, type and copy are identical. ========================================================================== */ :root { /* ---- type families ---- */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- geometry: sharp, editorial ---- */ --r-sm: 5px; --r: 9px; --r-lg: 14px; --r-pill: 999px; /* ---- spacing (4px base) ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px; --s12:128px; /* ---- layout ---- */ --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); --topbar-h: 70px; /* ---- motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: 160ms var(--ease); --t: 280ms var(--ease); --t-slow: 600ms var(--ease-out); /* ---- shadow recipe — tint (--sh-a/b/c) is set per theme ---- */ --sh-sm: 0 1px 2px var(--sh-a); --sh-md: 0 4px 18px var(--sh-b), 0 1px 3px var(--sh-a); --sh-lg: 0 18px 48px var(--sh-c), 0 4px 12px var(--sh-b); /* theme switch is instant + crisp */ color-scheme: light; } /* ============================ THEME 1 · CLARET (default) ================ */ /* warm bone paper · warm near-black ink · signature "Henry Red" claret */ :root, [data-theme="claret"] { --paper:#F1E9DA; --paper-2:#FBF6EC; --paper-3:#E7DCC8; --ink:#221B14; --ink-deep:#19130D; --ink-2:#4B3F32; --muted:rgba(34,27,20,.60); --subtle:rgba(34,27,20,.42); --faint:rgba(34,27,20,.24); --line:rgba(34,27,20,.16); --hair:rgba(34,27,20,.085); --on-ink:#F1E9DA; --on-ink-muted:rgba(241,233,218,.62); --on-ink-faint:rgba(241,233,218,.32); --on-ink-line:rgba(241,233,218,.16); --on-ink-hair:rgba(241,233,218,.10); --red:#A6321D; --red-deep:#7C2413; --red-bright:#C24227; --red-soft:rgba(166,50,29,.10); --green:#2F6A48; --green-soft:rgba(47,106,72,.12); --ochre:#9A6B16; --ochre-soft:rgba(154,107,22,.12); --sh-a:rgba(34,27,20,.05); --sh-b:rgba(34,27,20,.08); --sh-c:rgba(34,27,20,.14); --btn-red-fg:#ffffff; } /* ============================ THEME 2 · CHANCERY (navy + brass) ========= */ /* the firm's heritage navy & gold, rebuilt cool, modern and considered */ [data-theme="chancery"] { --paper:#ECEEF2; --paper-2:#F8FAFC; --paper-3:#DCE1EA; --ink:#15233A; --ink-deep:#0D1626; --ink-2:#3B4A62; --muted:rgba(21,35,58,.62); --subtle:rgba(21,35,58,.44); --faint:rgba(21,35,58,.26); --line:rgba(21,35,58,.16); --hair:rgba(21,35,58,.085); --on-ink:#EEF1F6; --on-ink-muted:rgba(238,241,246,.64); --on-ink-faint:rgba(238,241,246,.34); --on-ink-line:rgba(238,241,246,.18); --on-ink-hair:rgba(238,241,246,.10); --red:#A87C24; --red-deep:#6E5012; --red-bright:#CBA255; --red-soft:rgba(168,124,36,.13); --green:#2E7D57; --green-soft:rgba(46,125,87,.12); --ochre:#A9761B; --ochre-soft:rgba(169,118,27,.12); --sh-a:rgba(21,35,58,.06); --sh-b:rgba(21,35,58,.10); --sh-c:rgba(21,35,58,.16); --btn-red-fg:#0D1626; /* navy text on gold reads premium + legible */ } /* ============================ THEME 3 · AMETHYST (violet + lilac) ======= */ /* a fresh, unexpected world — deep aubergine ink, soft lilac paper, royal violet */ [data-theme="amethyst"] { --paper:#EDEAF1; --paper-2:#F9F7FC; --paper-3:#E0D9E8; --ink:#251C32; --ink-deep:#190F24; --ink-2:#50455E; --muted:rgba(37,28,50,.60); --subtle:rgba(37,28,50,.42); --faint:rgba(37,28,50,.24); --line:rgba(37,28,50,.16); --hair:rgba(37,28,50,.085); --on-ink:#EFEAF4; --on-ink-muted:rgba(239,234,244,.64); --on-ink-faint:rgba(239,234,244,.34); --on-ink-line:rgba(239,234,244,.18); --on-ink-hair:rgba(239,234,244,.10); --red:#6B3FA0; --red-deep:#57308A; --red-bright:#9266C8; --red-soft:rgba(107,63,160,.12); --green:#2F7D55; --green-soft:rgba(47,125,85,.12); --ochre:#9A6B16; --ochre-soft:rgba(154,107,22,.12); --sh-a:rgba(37,28,50,.06); --sh-b:rgba(37,28,50,.09); --sh-c:rgba(37,28,50,.15); --btn-red-fg:#ffffff; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01"; } ::selection { background: var(--red); color: var(--paper-2); } img { max-width: 100%; display: block; } a { color: inherit; } /* theme switch: kill transitions for one frame so var()-driven colours re-resolve instantly (works around a Chromium transition+var bug) */ html.hj-theming, html.hj-theming *, html.hj-theming *::before, html.hj-theming *::after { transition: none !important; } /* =============================== TYPE =================================== */ .serif { font-family: var(--serif); } .italic { font-style: italic; } /* Display — Newsreader, the editorial voice */ .d1 { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 8.2vw, 116px); line-height: .98; letter-spacing: -0.02em; } .d2 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.018em; } .d3 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.015em; } .h4 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -0.01em; } .lede { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.4; letter-spacing: -0.01em; } h1,h2,h3,h4 { margin: 0; font-weight: 500; } p { margin: 0; } /* tracked label / eyebrow — Instrument Sans caps */ .label { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .label.red { color: var(--red-deep); } .tnum { font-variant-numeric: tabular-nums; } /* editorial index numeral */ .numeral { font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums; letter-spacing: -0.02em; } /* body helpers */ .body { font-size: 17px; line-height: 1.62; } .small { font-size: 15px; line-height: 1.55; } .measure { max-width: 60ch; } .muted { color: var(--muted); } /* =============================== ATOMS ================================== */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } /* the signature rule — claret underline like a line you sign on */ .sig-rule { display: block; height: 2px; width: 64px; background: var(--red); border: none; } .hair-rule { height: 1px; background: var(--line); border: none; width: 100%; } /* buttons */ .btn { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.005em; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .btn:active { transform: translateY(1px); } .btn-sm { height: 44px; padding: 0 18px; font-size: 14px; } .btn-primary { background: var(--ink); color: var(--paper-2); } .btn-primary:hover { background: #000; } .btn-red { background: var(--red); color: var(--btn-red-fg); } .btn-red:hover { background: var(--red-bright); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); background: rgba(34,27,20,.04); } .btn-on-ink { background: var(--paper-2); color: var(--ink); } .btn-on-ink:hover { background: #fff; } .btn-ghost-ink { background: transparent; color: var(--on-ink); border-color: var(--on-ink-line); } .btn-ghost-ink:hover { border-color: var(--on-ink); background: rgba(241,233,218,.06); } /* link with animated underline */ .ulink { position: relative; text-decoration: none; font-weight: 600; color: var(--ink); } .ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .ulink:hover::after { transform: scaleX(1); } /* pill / chip */ .pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .04em; white-space: nowrap; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .pill.live { color: var(--green); border-color: rgba(47,106,72,.3); background: var(--green-soft); } .pill.live .dot { background: var(--green); } /* status word (mono-ish tracked caps) */ .stat-word { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* ============================ WORDMARK ================================= */ .wordmark { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; color: inherit; } .wordmark .wm-name { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: -0.01em; line-height: 1; } .wordmark .wm-name .amp { color: var(--red); } .wordmark .wm-tag { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); transform: translateY(-1px); } /* monogram mark — HJ in a signature ruled box */ .monogram { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.04em; color: var(--paper-2); background: var(--ink); border-radius: var(--r-sm); position: relative; } .monogram::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 9px; height: 1.5px; background: var(--red); } .monogram.on-paper { background: transparent; color: var(--ink); border: 1px solid var(--line); } /* ============================ REVEAL ================================== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============================ SECTIONS ================================ */ .section { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); } .section-ink { background: var(--ink-deep); color: var(--on-ink); } .section-ink .label { color: var(--on-ink-muted); } .section-ink .muted { color: var(--on-ink-muted); } .section-tint { background: var(--paper-3); } /* a section header lockup: eyebrow + signature rule */ .eyebrow-row { display: flex; align-items: center; gap: 14px; } .eyebrow-row .sig-rule { width: 40px; } /* ============================ FLOATING THEME SWITCHER ================== */ /* Always-visible, dependency-free colourway picker (bottom-left). */ .hj-switch { position: fixed; left: 16px; bottom: 16px; z-index: 2147483640; font-family: var(--sans); } .hj-switch-pill { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .005em; cursor: pointer; box-shadow: var(--sh-md); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .hj-switch-pill:hover { border-color: var(--ink); transform: translateY(-1px); } .hj-switch-pill:active { transform: translateY(0); } .hj-switch-pill:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .hj-pill-sw { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; background: var(--red); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .hj-pill-caret { color: var(--muted); transition: transform var(--t-fast); } .hj-switch.is-open .hj-pill-caret { transform: rotate(180deg); } .hj-switch-pop { position: absolute; left: 0; bottom: calc(100% + 10px); width: 232px; padding: 8px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--sh-lg); display: flex; flex-direction: column; gap: 4px; transform-origin: bottom left; animation: hj-pop .22s var(--ease-out); } .hj-switch-pop[hidden] { display: none; } @keyframes hj-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } } .hj-switch-head { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); padding: 6px 8px 4px; } .hj-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 9px; border-radius: var(--r); cursor: pointer; text-align: left; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; transition: background var(--t-fast), border-color var(--t-fast); } .hj-opt:hover { background: var(--paper-3); } .hj-opt[aria-checked="true"] { border-color: var(--ink); background: var(--paper-3); } .hj-opt-sw { display: flex; flex: 0 0 auto; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .hj-opt-sw i { display: block; width: 15px; height: 26px; } .hj-opt-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .hj-opt-txt b { font-size: 13.5px; font-weight: 600; } .hj-opt-txt small { font-size: 11px; color: var(--muted); margin-top: 1px; } .hj-opt-chk { margin-left: auto; color: var(--red); opacity: 0; flex: 0 0 auto; display: flex; } .hj-opt[aria-checked="true"] .hj-opt-chk { opacity: 1; } @media print { .hj-switch { display: none !important; } }