/* Theme base styles — the one stylesheet (SYSTEM.md §13). Order matters: * tokens, then the document, then the band and the layouts a module stands * on, then the components. Partials are concatenated by HubL at render. */ /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Design tokens: the app's first (verbatim from Rotario/TMM), then the * site-only layer. See css/tokens/ and SYSTEM.md §13. */ /* Hanken Grotesk (variable, OFL): the one typeface, self-hosted from * fonts/ (same subsets and unicode ranges as the app). font-display: swap; * base.html preloads the upright latin file. */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('https://144736776.fs1.hubspotusercontent-eu1.net/hubfs/144736776/raw_assets/public/TMM_Quiet/fonts/HankenGrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('https://144736776.fs1.hubspotusercontent-eu1.net/hubfs/144736776/raw_assets/public/TMM_Quiet/fonts/HankenGrotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('https://144736776.fs1.hubspotusercontent-eu1.net/hubfs/144736776/raw_assets/public/TMM_Quiet/fonts/HankenGrotesk-Italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('https://144736776.fs1.hubspotusercontent-eu1.net/hubfs/144736776/raw_assets/public/TMM_Quiet/fonts/HankenGrotesk-Italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* The fallback while the woff2 loads: Arial (Liberation Sans on Linux) * scaled to Hanken Grotesk's advance widths and line metrics, so a line * wraps where Hanken will wrap it and the swap moves nothing (CLS). Measured * 2026-10-14 on a 200-character sample: Hanken / Arial width 1.003 at * 400 and 0.948 at 700; Hanken ascent 1.00, descent 0.30. Listed second in * --font-sans (tokens/_site.css). */ @font-face { font-family: 'Hanken Grotesk Fallback'; font-style: normal; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); size-adjust: 100.3%; ascent-override: 99.7%; descent-override: 29.9%; line-gap-override: 0%; } @font-face { font-family: 'Hanken Grotesk Fallback'; font-style: normal; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); size-adjust: 94.8%; ascent-override: 105.5%; descent-override: 31.6%; line-gap-override: 0%; } /* tokens/_app.css: the TrackMyMachines app's design-token NAMES (Rotario/TMM, * app/assets/stylesheets/application.tailwind.css :root), kept so anything * written in the app's vocabulary still resolves. Since 2026-10-13 every app * colour is an ALIAS onto the site's colour scale (css/tokens/_site.css): no * hex here, and an app name that is also a scale name (canvas, surface, rule, * rule-strong, danger, success, warning, warning-wash, star, dark-accent, * dark-danger) is declared once, in the scale. Site CSS never uses these * aliases (the color-scale lint); it writes the band variables or the scale. * Non-colour tokens (shadows, radii, motion, type) are the app's values, with * color-mix() shadows pre-resolved to rgba. Radii from the app's tailwind.config.js. * This file is HubL-parsed: never put template syntax in it, even in comments. */ :root { /* Surfaces */ --color-surface-variant: var(--color-paper); --color-settings-ground: var(--color-paper); --color-surface-tint: var(--color-rule); --color-hover: var(--color-paper); --color-hover-strong: var(--color-canvas); --color-tint: var(--color-rule-strong); --color-tint-hover: var(--color-rule-strong); --color-field: var(--color-surface); --color-row-hover: var(--color-accent-wash); /* Text ladder */ --color-text-primary: var(--color-ink); --color-text-secondary: var(--color-ink-2); --color-text-muted: var(--color-ink-muted); --color-text-meta: var(--color-ink-muted); --color-text-faint: var(--color-ink-faint); --color-text-inverse: var(--color-dark-ink); /* Nav (dark chrome) */ --color-nav-ground: var(--color-charcoal); --color-nav-hover: var(--color-charcoal); --color-nav-rule: var(--color-dark-ink-faint); --color-nav-ink: var(--color-dark-ink); --color-nav-muted: var(--color-dark-ink-2); /* Brand */ --color-brand: var(--color-accent); --color-brand-hover: var(--color-accent-strong); --color-brand-deep: var(--color-accent-strong); --color-brand-tint: var(--color-accent-wash); --color-brand-tint-strong: var(--color-accent-wash); --color-info-bg: var(--color-accent-wash); --color-info-bg-strong: var(--color-accent-wash); --color-approved-bg: var(--color-accent-wash); --color-approved: var(--color-accent-strong); /* Rules */ --color-rule-inner: var(--color-rule); /* Status */ --color-danger-hover: var(--color-danger); --color-danger-bg: var(--color-warning-wash); --color-danger-bg-strong: var(--color-warning-wash); --color-danger-strong: var(--color-danger); --color-success-bg: var(--color-success-wash); --color-success-strong: var(--color-signal); --color-success-soft: var(--color-success-wash); --color-warning-bg: var(--color-warning-wash); --color-warning-bg-strong: var(--color-warning-wash); /* Dark family */ --color-dark-canvas: var(--color-black); --color-dark-surface: var(--color-dark); --color-dark-surface-raised: var(--color-charcoal); --color-dark-surface-elevated: var(--color-charcoal); --color-dark-surface-overlay: var(--color-dark-ink-faint); --color-dark-rule: var(--color-charcoal); --color-dark-rule-strong: var(--color-dark-ink-faint); --color-dark-rule-stronger: var(--color-dark-ink-faint); --color-dark-text-muted: var(--color-dark-ink-muted); --color-dark-text-secondary: var(--color-dark-ink-2); --color-dark-text-bright: var(--color-dark-ink); --color-dark-accent-strong: var(--color-dark-accent); --color-dark-surface-recessed: var(--color-black); --color-dark-text-primary: var(--color-dark-ink-body); --color-dark-text-faint: var(--color-dark-ink-faint); --color-dark-accent-fill: var(--color-accent); --color-dark-accent-fill-hover: var(--color-accent-strong); --color-dark-on-accent: var(--color-surface); /* Card, elevation, motion */ --pop-duration: 150ms; --pop-ease: ease-out; --card-ring: var(--color-rule-strong); --shadow-card: 0 1px 2px rgba(35,33,30,.05), 0 8px 24px -8px rgba(35,33,30,.09); --card-radius: 20px; --card-radius-sm: 16px; --shadow-pop: 0 0 0 1px rgba(35,33,30,.12), 0 1px 2px rgba(35,33,30,.06), 0 18px 44px -12px rgba(35,33,30,.22); --shadow-rail: 2px 0 8px rgba(35, 33, 30, .05); --shadow-hairline: inset 0 0 0 1px rgba(35,33,30,0.12); --shadow-hairline-strong: inset 0 0 0 1px rgba(35,33,30,0.18); --shadow-hairline-soft: inset 0 0 0 1px rgba(35,33,30,0.09); --shadow-lift: 0 1px 2px rgba(18,75,147,0.35), 0 3px 8px -2px rgba(18,75,147,0.25); --shadow-lift-hover: 0 1px 2px rgba(18,75,147,0.4); --shadow-focus: inset 0 0 0 1px var(--color-brand), 0 0 0 3px rgba(26,115,232,0.16); --shadow-focus-strong: inset 0 0 0 1px var(--color-brand), 0 0 0 3px rgba(26,115,232,0.35); --shadow-focus-soft: 0 0 0 3px rgba(26,115,232,0.16); --shadow-tooltip: 0 8px 15px rgba(35,33,30,0.08); --color-shadow-ink: var(--color-ink); --radius-md: 10px; --radius-lg: 12px; --radius-pop: 14px; --radius-xl: 16px; --radius-2xl: 20px; /* Type */ --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --type-micro: 12px; --type-caption: 13px; --type-dense: 14px; --type-body: 15px; --type-callout: 16px; --type-heading: 18px; --type-title: 24px; --type-stat: 30px; } /* tokens/_site.css: marketing-site-only tokens. Everything the app has no * equivalent for: page rhythm, container, stack gaps. Radius, elevation and * motion come from _app.css and are never redefined here. The type sizes are * the one exception: the site's ramp (Rowan, 2026-10-13, type round variant 2) * restates the app's size tokens below, so _app.css stays verbatim. * HubL-parsed: no template syntax in this file, even in comments. */ :root { --container-max: 1280px; /* The app's stack with the metric-matched fallback second * (generic/_fonts.css), so the swap to Hanken Grotesk shifts no line. */ --font-sans: 'Hanken Grotesk', 'Hanken Grotesk Fallback', ui-sans-serif, system-ui, sans-serif; /* Section vertical padding: one fluid scale, six steps. Drives .section / * .section--sm and the editor section-padding preset (render_section). */ --section-pad-none: 0px; --section-pad-xs: clamp(20px, 0.94rem + 1.33vw, 32px); --section-pad-sm: clamp(40px, 1.88rem + 2.65vw, 64px); --section-pad-md: clamp(56px, 2.46rem + 4.42vw, 96px); --section-pad-lg: clamp(72px, 3.05rem + 6.19vw, 128px); --section-pad-xl: clamp(104px, 4.22rem + 9.72vw, 192px); /* Space below a .section__header; modules never add their own. */ --section-header-gap: clamp(32px, 1.17rem + 3.54vw, 64px); /* Card inner padding: the app card's p-7 (CardComponent padding: :md), * fixed; a compact tile is 24 (the chart card's p-6). Grid gap, fluid. */ --card-padding: 28px; --bento-gap: clamp(16px, 0.59rem + 1.77vw, 32px); /* Stack rhythm (SYSTEM.md §5): xs paired-tight, sm paired, md group, * lg section break, xl biggest break. */ --text-gap-xs: clamp(8px, 0.4rem + 0.44vw, 12px); --text-gap-sm: clamp(12px, 0.65rem + 0.44vw, 16px); --text-gap-md: clamp(20px, 1.15rem + 0.44vw, 24px); --text-gap-lg: clamp(28px, 1.44rem + 1.33vw, 40px); --text-gap-xl: clamp(44px, 2.23rem + 2.2vw, 64px); /* The site's type ramp (SYSTEM.md §4 › Typography; Rowan, 2026-10-13: the * type round's variant 2, "Stripe ramp, TMM weight"). Stripe's steps on * Hanken: hero 56, section 32, sub-title 26, card 22, lead 20, copy 16 to * 18, small 14, the 12 label. Phone first; the steps at 768 and 1024 are * the blocks after :root. The app's size tokens (_app.css) are restated * here so the whole site reads one ramp; _app.css stays verbatim. */ --type-display: clamp(34px, 1.6rem + 2.4vw, 56px); --type-h1: clamp(34px, 1.6rem + 1.6vw, 48px); /* The step between h1 and h2 (Rowan, 2026-10-13: more heading sizes on the * same scale): 29 on a phone, 31 at 768, 40 at 1440. */ --type-h1-5: clamp(29px, 1.3rem + 1.4vw, 40px); --type-h2: clamp(24px, 1rem + 1.2vw, 32px); --type-h3: 20px; --type-lead: 18px; /* The lead one step up, for Text size Large (.section--text-large .t-body-xl, * _typography.css): the ramp's next size above the lead at each width, * 20 on a phone and at 768, 22 from 1024 (the lead is 18 / 18 / 20). */ --type-lead-lg: 20px; --type-title: 18px; --type-heading: 16px; --type-callout: 16px; --type-body: 16px; --type-dense: 16px; --type-caption: 14px; --type-micro: 12px; --type-stat: 28px; /* Buttons keep the app's control sizes (13 / 15 / 16), whatever the copy * ramp does: a button is a control, not copy. */ --type-button-sm: 13px; --type-button-md: 15px; --type-button-lg: 16px; /* The figure role (.t-figure): one oversized number standing alone beside * its proof, the ROI page's +5 (Rowan, 2026-10-12). Fixed, above the display. */ --type-figure: 120px; /* The large stat (render_stat size lg), fluid like the headings; a bead * centres it on its cell's rule by half this height (_layouts.css). */ --type-stat-lg: clamp(36px, 1.6rem + 1.6vw, 52px); --radius-full: 9999px; /* The chart bar's top corners (the ROI page's cumulative chart), the * smallest step on the radius ladder. */ --radius-xs: 4px; /* Every button's corner, all sizes (Rowan, 2026-10-14: the square corner, * buttons round v1). Icon buttons stay round. */ --radius-btn: var(--radius-xs); /* Motion: the app's one popup curve, applied to hover states. Never * transition: all. Theme fades stay slow so section switches feel calm. */ --transition-hover: background-color var(--pop-duration) var(--pop-ease), color var(--pop-duration) var(--pop-ease), border-color var(--pop-duration) var(--pop-ease), box-shadow var(--pop-duration) var(--pop-ease); --transition-theme: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; /* The opening curve as one timing, for anything that opens or swaps * (a tab panel, a drawer, a toast): transition: opacity var(--transition-pop). */ --transition-pop: var(--pop-duration) var(--pop-ease); /* ── The colour scale (SYSTEM.md §3 › Colour; Rowan, 2026-10-13) ────────── * The only colour values in the theme. Roles, not shades: five grounds * and black, the ink ladder on light and on dark, two rules, the accent's * three steps and the dark accent, the status colours in use. Everything * else is derived in _band.css (the dark rules, the on-brand ladder, the * washes, the raised and sunken plates) or is a state below. The app's own * names (_app.css) are aliases onto these. A new colour token fails the * color-scale lint: merge into the nearest step instead. * Contrast, measured: ink 14.4, ink-2 7.0, ink-muted 4.8, accent-strong * 6.2 on the canvas; dark-ink 15.2, dark-ink-body 12.0, dark-ink-2 6.9, * dark-ink-muted 4.7, dark-accent 8.4 on the dark ground. --ink-faint * and --dark-ink-faint are never text; the accent is 4.03 on the canvas, * so small accent text is --accent-strong. */ /* Grounds */ --color-canvas: #F4F2EF; --color-paper: #F8F6F1; /* the paper band (2026-10-12) and the light well */ --color-surface: #FFFFFF; /* the white band, cards, plates, ink on a brand fill */ --color-dark: #1A1815; --color-charcoal: #23211E; /* the chrome's ground (nav, footer) and the card on dark */ --color-black: #000000; /* the video letterbox; the dark wells mix it */ /* Ink, light grounds */ --color-ink: #23211E; --color-ink-2: #55524A; /* secondary and body */ --color-ink-muted: #6F6A60; --color-ink-faint: #C6C1B6; /* Ink, dark grounds */ --color-dark-ink: #F1EDE6; --color-dark-ink-body: #D9D4CB; /* body copy on dark (Rowan, 2026-10-13: kept) */ --color-dark-ink-2: #A8A196; --color-dark-ink-muted: #8A8378; --color-dark-ink-faint: #6B655B; /* Rules, light grounds (the band's --rule is derived in _band.css: the ink at * 18% on light, the dark ink at 36 / 12% on dark, white at 40 / 28% on brand) */ --color-rule-strong: #DCD7CC; /* the card edge */ --color-rule: #EEECE7; /* --rule-soft: rows inside a component */ /* Accent */ --color-accent: #1A73E8; --color-accent-strong: #1257B5; /* small accent text, the primary button's hover */ --color-accent-wash: #E2EBFA; --color-dark-accent: #8AB4F8; /* Status */ --color-danger: #96291E; --color-dark-danger: #F28B82; --color-success: #1B5A2F; --color-success-wash: #DFEEDF; --color-warning: #75490C; --color-warning-wash: #F4E8CE; --color-star: #E0A200; /* the rating star, the amber status dot */ --color-signal: #2E8B4F; /* the green status dot (never text: 3.8 on the canvas) */ /* ── States (SYSTEM.md §3 › Colour › States) ─────────────────────────────── * Hover, press and select are the ground's own tone laid over whatever is * underneath, never a per-ground solid: the band's --ink on light and dark * grounds (darkens light, lightens dark), black on the brand ground * (--state-tone, _band.css). Transparent at rest: background-color: * var(--state-hover). On a fill: color-mix(in oklab, var(--state-tone) * var(--state-hover-amount), ), so the plate or stripe stays * underneath and the change still fades. A custom property resolves where * it is declared, so these are restated on every scope that sets --ink * (the block below). */ --state-hover-amount: 6%; --state-press-amount: 10%; --state-select-amount: 14%; /* Card elevation (SYSTEM.md §7 › Cards). The card's edge is the light rule * (--card-ring, _band.css per ground); the hover retints it to the accent * at 55% (--card-ring-hover) and firms the float to a tighter, softer pair. * --shadow-pop-depth is --shadow-pop without its leading ring, for a * card raised to pop whose ring is already its border (two rings on one * edge strike their corners at different radii). */ --shadow-card-hover: 0 1px 2px rgba(32, 28, 22, 0.05), 0 4px 14px rgba(32, 28, 22, 0.05); --shadow-pop-depth: 0 1px 2px rgba(35, 33, 30, 0.06), 0 18px 44px -12px rgba(35, 33, 30, 0.22); } /* The ramp's steps (variant 2): from 768 and from 1024. */ @media (min-width: 768px) { :root { --type-h3: 22px; --type-title: 20px; --type-callout: 17px; } } @media (min-width: 1024px) { :root { --type-h3: 26px; --type-title: 22px; --type-heading: 18px; --type-lead: 20px; --type-lead-lg: 22px; --type-callout: 18px; --type-stat: 32px; } } /* The states, on every scope that sets --ink or --state-tone (a ground * class can sit on a wrapper that is not a .section, the lookbook's * grounds and the stage among them). */ :root, .section, .section--light, .section--white, .section--paper, .section--dark, .section--charcoal, .section--brand, .card, .tmm-form-wrap--dark, .tmm-socials { --state-hover: color-mix(in oklab, var(--state-tone) var(--state-hover-amount), transparent); --state-press: color-mix(in oklab, var(--state-tone) var(--state-press-amount), transparent); --state-select: color-mix(in oklab, var(--state-tone) var(--state-select-amount), transparent); } /* Objects */ /* The page's content area clips sideways, so a module that bleeds to the screen * edge (feature-split's Full bleed image layout) can reach it without the * scrollbar's width turning into a horizontal scroll. The nav and the footer * sit outside main, so nothing fixed is affected (Rowan, 2026-10-05). */ main.body-container-wrapper { overflow-x: clip; } /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* DnD wrappers are zero-padding passthroughs — modules handle their own container/spacing */ .dnd-section { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .dnd-section > .row-fluid { margin: 0 !important; max-width: 100% !important; width: 100% !important; } .dnd-section .dnd-column { padding: 0 !important; } /* The band: theme variables, rules, slab, container, section header */ /* The band — every section module's ground (SYSTEM.md §14). * * Output of templates/macros/section.html -> render_section / render_band: * * [div.section__card-bg--wide|normal] the slab's air (the conveyor alone, card != none) * section.section.section--{mode}[.section--rules-hug][.section--rule-top[.section--hug-top]] * [.section--rule-bottom[.section--hug-bottom]][.section--card] * div.container * div.section__band the content row; a row line (hug) sits on it * * This file owns: * 1. the theme variables (one set per ground; modules use them and never * the raw dark tokens); * 2. the band rules (frame: on the section's edges; hug: on the content * row; per edge in the spacing model: outside space, line, inside * space), 1px pseudo-elements in the ground's one rule colour (--rule), * never a border; * 3. the slab (.section--card) and its air: the conveyor's alone; * 4. the container and the measures; * 5. the section header anatomy (output of render_section_header). * * HubL is parsed in CSS files: no template syntax here, even in comments. */ /* ── 1. Theme variables ────────────────────────────────────────────────── * The light set is the document default so chrome, the lookbook and anything * outside a band resolve to the light ladder. Each ground restates the set, * from the colour scale (css/tokens/_site.css) only; what the scale does not * hold is derived here with color-mix (the dark rules, the on-brand ladder, * the washes, the raised and sunken plates on dark), so a ground is a recipe * on the scale, not more colours. * --accent-text is the accent as small text (under 24px: the index * numerals, an accent title, a chip; the eyebrow's label is --ink and its * slash, a mark, --accent, 2026-10-12): the strong blue on the light * grounds, where the brand blue measures 4.03 : 1 on the canvas; the accent * itself on the dark and brand grounds. --accent stays for glyphs, fills, * rules and large figures. --link-hover is a resting colour too (the small * link on light, 6.15 : 1): it is the accent text, never a hover wash. * --state-tone is what the states (_site.css) mix: the ink, black on brand. * Hovers are the states; the only per-ground hover solids left are the * primary fill's (--accent-fill-hover, the app's own darker blue: an * overlay of its white label would lighten it) and the card ring's retint. */ :root { --ink: var(--color-ink); --ink-body: var(--color-ink-2); --ink-2: var(--color-ink-2); --ink-muted: var(--color-ink-muted); --ink-faint: var(--color-ink-faint); --ground: var(--color-canvas); --ground-raised: var(--color-surface); --ground-sunken: var(--color-paper); --rule: color-mix(in oklab, var(--color-ink) 18%, transparent); --rule-soft: var(--color-rule); --accent: var(--color-accent); --accent-wash: var(--color-accent-wash); --accent-ink: var(--color-accent-strong); --accent-fill: var(--color-accent); --accent-fill-hover: var(--color-accent-strong); --on-accent: var(--color-surface); --link: var(--color-accent); --link-hover: var(--color-accent-strong); --accent-text: var(--color-accent-strong); --ring: var(--shadow-hairline); --card-ground: var(--color-surface); --card-ring: var(--color-rule-strong); --card-ring-hover: color-mix(in oklab, var(--color-accent) 55%, transparent); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-shadow-pop: var(--shadow-pop-depth); --field-ground: var(--color-surface); --danger: var(--color-danger); --state-tone: var(--ink); /* Where a sticky element pins: under the fixed bar on site pages. 0 where * there is no bar (the lookbook frame, lookbook.css) or where it scrolls * away (the blog templates, _header.css). Every sticky in the theme reads * it, never --nav-height directly (OPERATIONS.md §7 › Content offset). */ --sticky-top: var(--nav-height); } .section--light, .section--white, .section--paper { --ink: var(--color-ink); --ink-body: var(--color-ink-2); --ink-2: var(--color-ink-2); --ink-muted: var(--color-ink-muted); --ink-faint: var(--color-ink-faint); --ground-raised: var(--color-surface); --ground-sunken: var(--color-paper); --rule: color-mix(in oklab, var(--color-ink) 18%, transparent); --rule-soft: var(--color-rule); --accent: var(--color-accent); --accent-wash: var(--color-accent-wash); --accent-ink: var(--color-accent-strong); --accent-fill: var(--color-accent); --accent-fill-hover: var(--color-accent-strong); --on-accent: var(--color-surface); --link: var(--color-accent); --link-hover: var(--color-accent-strong); --accent-text: var(--color-accent-strong); --ring: var(--shadow-hairline); --card-ground: var(--color-surface); --card-ring: var(--color-rule-strong); --card-ring-hover: color-mix(in oklab, var(--color-accent) 55%, transparent); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-shadow-pop: var(--shadow-pop-depth); --field-ground: var(--color-surface); --danger: var(--color-danger); --state-tone: var(--ink); } .section--light { --ground: var(--color-canvas); } .section--white { --ground: var(--color-surface); } /* Paper (Rowan, 2026-10-12): the fifth ground, a little lighter than the * canvas. Its well steps down to the canvas and a plate on it is the white * surface, as on the canvas. */ .section--paper { --ground: var(--color-paper); --ground-sunken: var(--color-canvas); --card-ground: var(--color-surface); } /* The dark grounds. The rules are the dark ink laid over the ground (36% * the band's rule, 12% the soft rule, the card edge and the hairline), so * they read the same on dark and on charcoal; a raised plate is the ground * lifted by the ink at 6% (#24221F on dark, #2D2B28 on charcoal) and the * well is the ground with 20% black. * .section--brand.section--dark: a brand band turned into the stage * (stage_band_class) outranks the brand set below. */ .section--dark, .section--charcoal, .section--brand.section--dark, .card--dark, .card--island-dark, .card--stage, .tmm-form-wrap--dark { --ink: var(--color-dark-ink); --ink-body: var(--color-dark-ink-body); --ink-2: var(--color-dark-ink-2); --ink-muted: var(--color-dark-ink-muted); --ink-faint: var(--color-dark-ink-faint); --ground: var(--color-dark); --ground-raised: color-mix(in oklab, var(--color-dark-ink) 6%, var(--ground)); --ground-sunken: color-mix(in oklab, var(--color-black) 20%, var(--ground)); --rule: color-mix(in oklab, var(--color-dark-ink) 36%, transparent); --rule-soft: color-mix(in oklab, var(--color-dark-ink) 12%, transparent); --accent: var(--color-dark-accent); --accent-wash: color-mix(in oklab, var(--color-dark-accent) 16%, transparent); --accent-ink: var(--color-dark-accent); --accent-fill: var(--color-accent); --accent-fill-hover: var(--color-accent-strong); --on-accent: var(--color-surface); /* pure white on the accent fill: the dark ladder's off-white on the brand blue measured 3.9:1 (2026-10-09) */ --link: var(--color-dark-accent); --link-hover: var(--color-dark-ink); /* ink-only hover: the link is already the light blue */ --accent-text: var(--color-dark-accent); --ring: inset 0 0 0 1px var(--rule-soft); --card-ground: var(--ground-raised); --card-ring: var(--rule-soft); --card-ring-hover: var(--color-dark-accent); --card-shadow: none; --card-shadow-hover: none; --card-shadow-pop: var(--shadow-pop-depth); --field-ground: var(--ground-raised); --danger: var(--color-dark-danger); --state-tone: var(--ink); } /* The brand ground (.section--brand, color_mode: brand) and the brand card * (.card--brand): the whole ladder resolved on the brand blue. Ink in white * and its translucent steps (90 / 80 / 60%); the rules a white hairline at * two strengths (40 / 28%; the focus ring keeps 56%); the accent is the on-brand ink (there is no * second blue on blue, so the accent gesture, the eyebrow's slash and the * ledger numeral turn white); the accent fill is white with the brand as its * ink, so the primary button renders as the inverse (_buttons.css). A plate * on the band is the accent with 27% black (#0D4997, 1.9 : 1 on the band, * as the app's deep blue was). The states darken here: their tone is black * (Rowan, 2026-10-13). */ .section--brand, .card--brand { --ink: var(--color-surface); --ink-body: var(--color-surface); --ink-2: color-mix(in oklab, var(--color-surface) 90%, transparent); --ink-muted: color-mix(in oklab, var(--color-surface) 80%, transparent); --ink-faint: color-mix(in oklab, var(--color-surface) 60%, transparent); --ground: var(--color-accent); --ground-raised: color-mix(in oklab, var(--color-black) 27%, var(--color-accent)); --ground-sunken: var(--color-accent-strong); --rule: color-mix(in oklab, var(--color-surface) 40%, transparent); --rule-soft: color-mix(in oklab, var(--color-surface) 28%, transparent); --accent: var(--color-surface); --accent-wash: color-mix(in oklab, var(--color-surface) 14%, transparent); --accent-ink: var(--color-surface); --accent-fill: var(--color-surface); --accent-fill-hover: var(--color-accent-wash); --on-accent: var(--color-accent); --link: var(--color-surface); --link-hover: var(--color-accent-wash); --accent-text: var(--color-surface); --ring: inset 0 0 0 1px var(--rule); --card-ground: var(--ground-raised); --card-ring: var(--rule-soft); --card-ring-hover: var(--rule); --card-shadow: none; --card-shadow-hover: none; --card-shadow-pop: var(--shadow-pop-depth); --field-ground: var(--ground-raised); --danger: var(--color-surface); --state-tone: var(--color-black); /* The focus ring is the brand's own blue elsewhere: white here. */ --shadow-focus-strong: inset 0 0 0 1px var(--color-surface), 0 0 0 3px color-mix(in oklab, var(--color-surface) 56%, transparent); } /* Charcoal is the chrome's ground (nav, footer): the ink ground. Its band * rule is the dark set's (36%), no longer the soft one: one rule colour per * ground that reads (Rowan, 2026-10-13). */ .section--charcoal { --ground: var(--color-charcoal); } /* ── 2. The band and its rules ──────────────────────────────────────────── */ .section { position: relative; padding-block: var(--section-pad-lg); background-color: var(--ground); color: var(--ink); transition: var(--transition-theme); /* clip, not hidden: it clips the same and is not a scroll container, so a * sticky inside a band (the comparison table's head) pins to the page. * flow-root keeps the block formatting context hidden gave (margins and * floats stay inside the band). */ display: flow-root; overflow: clip; } .section--sm { padding-block: var(--section-pad-md); } /* --section-bg: a module's own CSS may read the band's fill (a mat); the * override from the editor sets it inline. */ .section--light, .section--white, .section--paper, .section--dark, .section--charcoal, .section--brand { --section-bg: var(--ground); } /* A band that bleeds (feature-split's Full picture) must not clip; main * clips sideways instead (css/objects/_layout.css). */ .section--bleed { overflow: visible; } .section--bleed > .container { max-width: none; padding-inline: 0; } /* A bleeding band runs its rules to the screen with the picture (the band * rules below read these); the same distance as .tmm-bleed. Added * 2026-10-08 in the drift sweep, from feature-split's Full layout. */ .section--bleed { --band-rule-left: calc(50% - 50vw); --band-rule-right: calc(50% - 50vw); } .section > .container { position: relative; z-index: 1; } /* Band rules. Frame: the rule is the band's edge (the editor's spacing sits * inside it). Hug: the rule sits on the content row (the spacing sits * outside it, so the rule lands where the content starts and stops). Both * are the same 1px line in the ground's --rule; --band-rule-left / -right let * a bleeding module run the rule to the screen edge. Modules never style * .section::before / ::after themselves. * One rule colour per ground, no tone option (Rowan, 2026-10-13: "We've got * loads of rule colour options on modules; we just want them to be good * contrast with the right colour, not loads of options"): the Rule tone * (default / subtle / strong / brand) is retired and a saved value ignored. Each --rule above is tuned to about the same * weight on its ground (APCA Lc 20 to 24; WCAG 1.43 to 1.44 on the light * grounds, 3.0 on dark and charcoal, 1.9 on brand). */ .section--rule-top::before, .section--rule-bottom::after, .section--rule-top:is(.section--rules-hug, .section--hug-top) .section__band::before, .section--rule-bottom:is(.section--rules-hug, .section--hug-bottom) .section__band::after { content: ''; position: absolute; left: var(--band-rule-left, 0); right: var(--band-rule-right, 0); height: 1px; background: var(--rule); pointer-events: none; } .section--rule-top::before { top: 0; } .section--rule-bottom::after { bottom: 0; } /* In hug mode the section's own rules give way to the row's. */ .section--rule-top:is(.section--rules-hug, .section--hug-top)::before, .section--rule-bottom:is(.section--rules-hug, .section--hug-bottom)::after { display: none; } .section__band { position: relative; } .section:is(.section--rules-hug, .section--hug-top) .section__band::before { top: 0; } .section:is(.section--rules-hug, .section--hug-bottom) .section__band::after { bottom: 0; } /* The spacing model (the sweep, 2026-10; Rowan, 2026-10-13: Frame / Hug retired, each edge is * a line and two spaces; SCHEMA.md 3.2). render_band draws a swept module's edge from the band * inward: the outside space (the section's padding), the line, the inside space, the content. * A line with no space outside sits on the band's edge (.section--rule-top / -bottom, above), * the band's full width, and the inside space is the section's padding. A line with space * outside sits on the content row, the content's width, per edge: .section--hug-top / * .section--hug-bottom move that edge's line onto .section__band, whose inline padding is the * inside space. The old .section--rules-hug is both edges at once with no inside space; an * unswept module still writes it. The line is the same 1px --rule either way. */ /* Inner lines (Rowan, 2026-10-15: "two sets of horizontal lines, inner and outer"; the editor's * Inner lines switch, section_settings.borders.inner_lines, SCHEMA.md 3.2). The outer lines are * the band's edge rules above. The inner lines are every horizontal hairline a layout draws * inside the band: the ruled block, a ledger's rows, the cells' row rules, the figure's rule, * the accordion's rows, a table's row rules, a module's own seam. Each of those reads its * colour as var(--inner-rule, var(--rule)) or var(--inner-rule, var(--rule-soft)): --inner-rule * is never declared, so the fallback draws the line as before, and this one rule blanks them * all by declaring it. Vertical rules (the index and middle rules, cells' column rules, ticks, * dividers) read var(--rule) directly and stay; a card resets the variable (_cards.css), so * its own hairlines stay with its edge; a ticked measure (.tmm-timeline, the pagination) is * one drawing and stays whole. The 1px the line took stays, so nothing moves. */ .section--inner-lines-none { --inner-rule: transparent; } /* The edges' Line inside toggles (the panel standard, Rowan 2026-10-15; render_band through * inner_edge_off): a layout's own line across the top (bottom) of its content, inside the band's * edge line, drawn in module CSS, reads var(--inner-rule-top, var(--inner-rule, var(--rule))) * (--inner-rule-bottom for the foot). Never declared, so the line draws as before; Off declares * it transparent. A .tmm-ruled block takes --no-top / --no-bottom in its module.html instead. */ .section--in-top-off { --inner-rule-top: transparent; } .section--in-bottom-off { --inner-rule-bottom: transparent; } /* ── 3. The slab (.section--card) and its air ─────────────────────────── * The conveyor's alone (Rowan, 2026-10-13: "we won't be using these rounded * corner outer cards anymore … the only one to get a card should be the * conveyor belt module"). render_band draws it only with allow_slab=true, * which conveyor.module alone passes; every other band is plain. * The whole band in a rounded card on the page (section_settings.card: * none | wide | normal, labelled "Slab"; SCHEMA.md 3.5): 32px corners, 64px * from 1024 up; wide sits 40 / 80 in from the viewport, normal in the 1280 * column. The editor's spacing is the air around the card, on the wrapper; * the band's own rules are off. * The slab's surface follows its ground (2026-10-12): on light, white and * paper it is the raised plate (--ground-raised, the white surface) edged by * the card ring, the card edge's selector list in _cards.css (one border in * the theme); on dark and charcoal it is the dark ground itself and on brand * the blue, the edge taking the fill. A slab whose band is the stage * (stage_band_class: a light slab turned dark) reads as dark. */ :root { --slab-radius: 32px; } /* the slab's corners (the conveyor's) */ @media (min-width: 1024px) { :root { --slab-radius: 64px; } } .section__card-bg { box-sizing: border-box; padding-inline: 0; } /* The slab's air is the band's own ground, not the page body behind it * (2026-10-12: a light slab band showed the white body round its card). */ .section__card-bg--on-light { background: var(--color-canvas); } .section__card-bg--on-white { background: var(--color-surface); } .section__card-bg--on-paper { background: var(--color-paper); } .section__card-bg--on-dark { background: var(--color-dark); } .section__card-bg--on-charcoal { background: var(--color-charcoal); } @media (min-width: 768px) { .section__card-bg--wide, .section__card-bg--normal { padding-inline: 40px; } } @media (min-width: 1024px) { .section__card-bg--wide { padding-inline: 80px; } .section__card-bg--normal { padding-inline: 0; max-width: var(--container-max); margin-inline: auto; } } .section.section--card { border-radius: var(--slab-radius); overflow: hidden; padding-block: var(--section-pad-md); } .section--card:is(.section--light, .section--white, .section--paper):not(.section--dark) { --ground: var(--ground-raised); } .section--card:is(.section--dark, .section--charcoal, .section--brand) { border-color: transparent; } @media (min-width: 1024px) { .section.section--card { padding-block: var(--section-pad-lg); } } .section--card.section--rule-top::before, .section--card.section--rule-bottom::after { display: none; } /* ── 4. Container and measures ────────────────────────────────────────── * One measure: 1280 with 32 / 40 / 80 gutters, mobile first. Inner measures * narrow a band's content (a reading column, a centred form) and are the only * max-widths a module may use. */ :root { --gutter: 32px; } @media (min-width: 768px) { :root { --gutter: 40px; } } @media (min-width: 1024px) { :root { --gutter: 80px; } } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .tmm-measure { margin-inline: auto; width: 100%; } .tmm-measure--reading { max-width: 720px; } .tmm-measure--narrow { max-width: 880px; } .tmm-measure--mid { max-width: 1024px; } /* --keep: a measure that sizes an object, not a text column (security's * row of square tiles: four across 880 is 202px a tile, released to the * container they grew to 262, Rowan 2026-10-13 "massive card boxes"). The * page layer's release (_page.css, 4) passes it by. */ /* ── 5. Section header anatomy (render_section_header) ────────────────── * Every gap is a token so the rhythm scales with the type and the padding. * --section-header-gap is the space under the whole block. */ .section__header { text-align: center; margin-bottom: var(--section-header-gap); } .section__header--left { text-align: left; } .section__badge { margin-bottom: var(--text-gap-md); } .section__subheader { margin: 0 0 var(--text-gap-sm); } /* The two-class selectors (0,2,0) hold the centring against the type roles' * margin: 0, which load after this file. */ .section__header .section__heading { margin: 0 auto var(--text-gap-md); max-width: 800px; } .section__header .section__description { margin: 0 auto; max-width: 640px; } /* A richtext description is a div of paragraphs: they take the role's type * and the stack rhythm, not the document's paragraph defaults. The second * gap selector (0,1,1) outranks the margin reset above it, as in * _typography.css's .t-richtext pair. */ .section__description > p, .section__description > ul, .section__description > ol { font: inherit; color: inherit; margin: 0; } .section__description > * + *, .section__description > * + :is(p, ul, ol) { margin-top: var(--text-gap-sm); } .section__header--left .section__heading, .section__header--left .section__description { margin-inline: 0; } .section__header--left .section__heading { margin-bottom: var(--text-gap-md); } /* Header measures: a tighter cap for a heading and its description, in ch * so it follows the type (the hero, the CTA banner, the blog CTA). Three * steps, named after the inner measures and in the same order: * --measure-reading 20ch / 36ch, --narrow 28ch / 42ch, --mid 36ch / 56ch. */ .section__header--measure-reading { --header-heading-max: 20ch; --header-desc-max: 36ch; } .section__header--measure-narrow { --header-heading-max: 28ch; --header-desc-max: 42ch; } .section__header--measure-mid { --header-heading-max: 36ch; --header-desc-max: 56ch; } .section__header[class*="section__header--measure-"] .section__heading { max-width: var(--header-heading-max); } .section__header[class*="section__header--measure-"] .section__description { max-width: var(--header-desc-max); } /* Split header: eyebrow + heading left, copy + optional button right, bottom * aligned to the heading on desktop; one column, top aligned, under 1024. */ .section__header--split { display: grid; grid-template-columns: 1fr; gap: var(--text-gap-md); text-align: left; margin-bottom: var(--section-header-gap); } .section__header--split .section__heading, .section__header--split .section__description { margin-inline: 0; max-width: none; } .section__header--split .section__header-left > :last-child { margin-bottom: 0; } .section__header--split .section__header-left { align-self: start; min-width: 0; } .section__header--split .section__header-right { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; gap: var(--text-gap-sm); } .section__header--split:has(.section__header-right > .section__header-cta:only-child) { gap: var(--text-gap-sm); } .section__header-right--left .section__description { text-align: left; } .section__header-right--left .section__header-cta { align-self: flex-start; } @media (min-width: 1024px) { .section__header--split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 1.65rem + 3.1vw, 64px); } .section__header--split .section__header-right { justify-content: flex-end; } .section__header-right--right .section__description { text-align: right; } .section__header-right--right .section__header-cta { align-self: flex-end; } } /* Elements */ /* Typography: the document defaults and the type roles (.t-*). Sizing, * weight and spacing live here; colour is the theme variables (SYSTEM.md * §3) so every role reads correctly on every ground without a restated * selector. Modules never redefine a role or its colour. * HubL is parsed in CSS files: no template syntax here, even in comments. */ body { font-family: var(--font-sans); line-height: 1.4; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); } html[lang^="ja"] body, html[lang^="zh"] body, html[lang^="ko"] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { font-size: 1rem; margin: 0 0 1.4rem; } /* Anchors: the link ink per ground. Buttons own their own colour (the * .btn--* rules out-rank these at 0,1,0 vs 0,0,1), so no :not() is needed * at rest; the hover rule keeps the guard so a button anchor on a dark band * never repaints. */ a { cursor: pointer; color: var(--link); text-decoration: none; } a:not(.btn):not(.cta_button):hover, a:not(.btn):not(.cta_button):focus { color: var(--link-hover); } /* Headings: bare defaults in the ink, modest sizes so a role class wins. */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-sans); font-weight: 650; color: var(--ink); } h1, .h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; } h2, .h2 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; } h3, .h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; } h4, .h4 { font-size: 20px; line-height: 1.3; } h5, .h5 { font-size: 18px; line-height: 1.3; } h6, .h6 { font-size: 16px; line-height: 1.3; } h1, h2, h3, h4, h5, h6 { margin: 0 0 1.4rem; } /* Lists */ ul, ol { margin: 0 0 1.4rem; } ul ul, ol ul, ul ol, ol ol { margin: 0; } ul.no-list { list-style: none; margin: 0; padding-left: 0; } /* Code */ pre { overflow: auto; } code { vertical-align: bottom; } /* Highlight: the accent wash behind the ground's ink, a tint not a fill * (the solid accent is the current page and the primary button only). * Selection keeps the brand fill with the on-brand ink. */ mark { background-color: var(--accent-wash); color: var(--ink); padding: 0.1em 0.3em; border-radius: 4px; } ::selection { background-color: var(--color-accent); color: var(--color-surface); } ::-moz-selection { background-color: var(--color-accent); color: var(--color-surface); } /* Blockquote and hr defaults (the prose has its own) */ blockquote { border-left: 2px solid var(--rule); margin: 0 0 1.4rem; padding-left: 0.7rem; } hr { border: none; height: 1px; background: var(--inner-rule, var(--rule)); } /* Image alt text */ img { font-size: 0.583rem; word-break: normal; } /* ── The type roles ────────────────────────────────────────────────────── * The sizes are the ramp in tokens/_site.css (Rowan, 2026-10-13: the type * round's variant 2, Stripe's steps with TMM's weight): three fluid sizes at * the top, whole pixels from .t-h3 down. Headings 640 (card titles 620) with * tracking that tightens as the size grows; leading as ratios, never a fixed * pixel, so a size step never strands a line height. */ .t-display, .t-h1, .t-h1-5, .t-h2, .t-h3, .t-card-title { font-family: var(--font-sans); font-weight: 640; margin: 0; color: var(--ink); } .t-display { font-size: var(--type-display); line-height: 1.04; letter-spacing: -0.032em; } .t-h1 { font-size: var(--type-h1); line-height: 1.06; letter-spacing: -0.028em; } /* The 40 step between h1 and h2: leading and tracking halfway between them. */ .t-h1-5 { font-size: var(--type-h1-5); line-height: 1.08; letter-spacing: -0.026em; } .t-h2 { font-size: var(--type-h2); line-height: 1.1; letter-spacing: -0.024em; } .t-h3 { font-size: var(--type-h3); line-height: 1.15; letter-spacing: -0.016em; } /* Card title: the one card-heading role, so the eye never recalibrates. */ .t-card-title { font-size: var(--type-title); font-weight: 620; line-height: 1.22; letter-spacing: -0.012em; } /* Figure: one oversized number alone beside its proof (the ROI page's +5), * fixed at 120, tabular; the colour is the caller's (the band's accent). */ .t-figure { font-family: var(--font-sans); font-size: var(--type-figure); font-weight: 650; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } /* Micro labels stay fixed-size: 12px uppercase overlines do not scale. */ .t-subheader, .t-label-sm { font-family: var(--font-sans); font-size: var(--type-micro); font-weight: 600; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; margin: 0; color: var(--ink-2); } .t-label-sm { line-height: 1.45; } /* A quieter span inside a heading or a line (a heading's continuation), and its * accent twin for a figure that is the point (the price pair's "£0 extra"). Both * sit after the size roles so a span that is both (.t-h1.t-muted) takes the ink. * Every .t-* role here is span-safe: an editor's rich text wraps a label line in * .t-label-sm, a figure in .t-h1 or .t-display, a source in .t-caption. */ .t-muted { color: var(--ink-2); } .t-accent { color: var(--accent-text); } /* A richtext field in a body role: its paragraphs and lists take the role's * type and the stack rhythm, not the document's defaults. The second * selector outranks the reset above (0,1,1), which had zeroed the gap * between paragraphs (narrative, 2026-10-13). */ .t-richtext > p, .t-richtext > ul, .t-richtext > ol, .t-richtext li { font: inherit; color: inherit; margin: 0; } .t-richtext > * + *, .t-richtext > * + :is(p, ul, ol) { margin-top: var(--text-gap-md); } .t-richtext > ul, .t-richtext > ol { padding-left: 24px; } .t-richtext strong { font-weight: 600; color: inherit; } .t-subheader--accent { color: var(--accent-text); } .t-subheader--muted { color: var(--ink-2); } /* Body roles. .t-body-lg is the site's reading voice; .t-body-xl the lead. */ .t-body-lg { font-family: var(--font-sans); font-size: var(--type-callout); font-weight: 400; line-height: 1.5; margin: 0; color: var(--ink-body); } .t-body-xl { font-family: var(--font-sans); font-size: var(--type-lead); font-weight: 400; line-height: 1.45; margin: 0; color: var(--ink-body); } .t-body { font-family: var(--font-sans); font-size: var(--type-body); font-weight: 400; line-height: 1.5; margin: 0; color: var(--ink-body); } .t-body-md { font-family: var(--font-sans); font-size: var(--type-dense); font-weight: 400; line-height: 1.5; margin: 0; color: var(--ink-body); } /* Text size Large (Style > Text on every section module, Rowan 2026-10-15; render_band * text_size='large'): the band's body roles step up one, the lead to the large lead, the reading * voice to the lead and body and dense copy to the reading voice. Headings, labels and captions * keep their size; a heading drawn in the lead role (the cta's Thin bar) is a heading. */ .section--text-large .t-body-xl:not(.section__heading) { font-size: var(--type-lead-lg); } .section--text-large .t-body-lg { font-size: var(--type-lead); line-height: 1.45; } .section--text-large .t-body, .section--text-large .t-body-md { font-size: var(--type-callout); } /* An editor richtext reads at the copy leading of the role it sits in. */ .t-richtext { line-height: 1.5; } /* The caption, 14 at 1.45 in the caption ink: a privacy line, a note under a form. */ .t-caption { font-family: var(--font-sans); font-size: var(--type-caption); font-weight: 400; line-height: 1.45; margin: 0; color: var(--ink-2); } /* Stat: the numeric role (28 to 32, 640, tabular). */ .t-stat { font-family: var(--font-sans); font-size: var(--type-stat); font-weight: 640; line-height: 1.15; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin: 0; } /* ── Section eyebrow ───────────────────────────────────────────────────── * A leading accent slash and an uppercase micro label; the standard section * eyebrow. Markup: p.t-eyebrow > span.t-eyebrow__dot + LABEL (render_eyebrow). * The slash is a graphic mark in --accent (the brand blue on light, the strong * accent on dark, the on-brand ink on brand: 3 : 1 suffices); the label is * text in --ink on every ground (Rowan, 2026-10-12). * .t-eyebrow accent slash, ink label * .t-eyebrow--live the slash pulses (monitoring contexts) * .t-eyebrow--muted accent slash, the caption ink for the label * .t-eyebrow--quiet no slash, the caption ink: a label over a sub-list or * a panel inside a section (feature lists, fact panels) */ .t-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: var(--type-micro); font-weight: 600; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin: 0; } /* The slash pivots at its bottom-left so it leans into the gap, never * overhanging the content line. */ .t-eyebrow__dot { flex-shrink: 0; display: inline-block; width: 4px; height: 19px; background: var(--accent); transform: skewX(-22deg); transform-origin: left bottom; } .t-eyebrow--live .t-eyebrow__dot { animation: t-eyebrow-live-pulse 2s ease-in-out infinite; } body.is-editor .t-eyebrow--live .t-eyebrow__dot { animation: none; } .t-eyebrow--muted { color: var(--ink-2); } .t-eyebrow--quiet { color: var(--ink-2); } .t-eyebrow--quiet .t-eyebrow__dot { display: none; } @keyframes t-eyebrow-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Buttons: the app's button system on the site's editor-facing variant names. * Editors keep primary / secondary / inverse / ghost / accent / link and * sm / md / lg / xl because those names are stored in page content; the look * behind each name is the app's: * primary → app primary (accent fill, lift shadow) * secondary → app outline (raised ground, hairline ring) * inverse → app ink (ink fill, pop shadow) * ghost → app ghost (text, hover wash) * accent → app link (accent text + chevron) * link → app link with the intrinsic underline * Colour comes from the theme variables (SYSTEM.md §3), so a button on a * dark band takes the dark accent fill without a restated selector. Every * :hover is paired with .is-hover and every :focus-visible with .is-focus so * the lookbook can hold a state still. No transform on :active (iOS Safari * drops the tap hit-test mid-transform, verified May 2026). * * HubSpot-system buttons (blog list "Read more", form submits, system pages) * opt in through NAMED classes only; a bare