/* ─────────────────────────────────────────────────────────────── Sitehouse — colour tokens Every palette value in the product resolves through these. Light is the default; dark applies when the visitor picks it, or when their system asks for it and they have not chosen otherwise. One accent, and it is the green from the logo mark. It earns its place on buttons, links, figures and the drawn underline — nowhere else. Everything behind it is paper, ink and a hairline. Channels are space-separated RGB so Tailwind can apply its own alpha (rgb(var(--c-ink) / 0.7)). ─────────────────────────────────────────────────────────────── */ :root { --c-paper: 247 246 243; --c-surface: 255 255 255; --c-ink: 20 22 26; --c-ink-mid: 67 72 79; --c-ink-soft: 104 110 118; --c-line: 228 226 220; --c-line-firm: 205 202 194; --c-accent: 201 32 39; --c-accent-hi: 170 22 30; --c-accent-tint: 252 236 236; /* Accent used as *text* on the page ground — a shade down so it clears 4.5:1 against paper. */ --c-accent-text: 173 26 33; --c-shadow: 20 22 26; --c-on-accent: 255 255 255; } /* Dark: the ground drops away and the panels lift. The green comes up in lightness so it stays legible instead of turning to sludge. */ :root[data-theme="dark"] { --c-paper: 16 18 21; --c-surface: 24 27 31; --c-ink: 242 241 238; --c-ink-mid: 186 191 198; --c-ink-soft: 142 148 157; --c-line: 41 46 53; --c-line-firm: 62 68 77; --c-accent: 226 58 62; --c-accent-hi: 240 86 88; --c-accent-tint: 48 22 24; --c-accent-text: 252 133 133; --c-shadow: 0 0 0; --c-on-accent: 255 255 255; } :root[data-theme="dark"] { --c-paper: 16 18 21; --c-surface: 24 27 31; --c-ink: 242 241 238; --c-ink-mid: 186 191 198; --c-ink-soft: 142 148 157; --c-line: 41 46 53; --c-line-firm: 62 68 77; --c-accent: 226 58 62; --c-accent-hi: 240 86 88; --c-accent-tint: 48 22 24; --c-accent-text: 252 133 133; --c-shadow: 0 0 0; --c-on-accent: 255 255 255; } /* Accent-as-ink is a touch lighter in dark mode than accent-as-panel. */ :root[data-theme="dark"] .text-accent, :root[data-theme="dark"] .arrow, :root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .btn-light { color: rgb(var(--c-accent-text)); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid rgb(var(--c-line)); border-radius: 999px; background: rgb(var(--c-surface)); color: rgb(var(--c-ink-mid)); cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .theme-toggle:hover { border-color: rgb(var(--c-line-firm)); color: rgb(var(--c-ink)); background: rgb(var(--c-accent-tint)); } .theme-toggle:active { transform: scale(0.93); } .theme-toggle svg { display: block; width: 17px; height: 17px; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .theme-toggle:hover svg { transform: rotate(-20deg); } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* The drawer version is a full-width row, so it keeps the drawer's radius rather than the pill the header uses. */ .m-drawer .theme-toggle { width: 100%; height: 52px; gap: 0.6rem; margin-top: 1rem; font-weight: 600; border-radius: 0.5rem; } .m-drawer .theme-toggle:hover svg { transform: none; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: border-color 200ms ease, color 200ms ease; } .theme-toggle:active { transform: none; } .theme-toggle:hover svg { transform: none; } } .m-drawer .theme-toggle span { font-size: 0.9375rem; } /* Colour-scheme hint so form controls and scrollbars follow the theme */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* A white button sits on white whatever the theme, so it keeps the darker green rather than the lifted one used against the page ground. */ :root[data-theme="dark"] .bg-white.text-accent { color: rgb(173 26 33); } :root[data-theme="dark"] .bg-white.text-accent { color: rgb(173 26 33); } /* The skip link inverts against the page, so it has to follow the theme */ .skip { background: rgb(var(--c-ink)) !important; color: rgb(var(--c-paper)) !important; } /* ─────────────────────────────────────────────────────────────── Type Two faces and a label face. Outfit on its weight axis carries the headlines — the same letterform the sign-in pages use, so the whole site reads as one thing. Inter does everything that has to be read or clicked, IBM Plex Mono is reserved for eyebrows, tags and figures. ─────────────────────────────────────────────────────────────── */ .h-display, h1.h-display, .h-section.sec-title, .h-section.doc-title, h2.sec-title, h1.doc-title { font-family: 'Outfit', 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-variation-settings: 'wght' 584; letter-spacing: -0.06em; } .h-display, h1.h-display { line-height: 1.0; } .h-section.sec-title, h2.sec-title { line-height: 1.04; } .h-section.doc-title, h1.doc-title { line-height: 1.02; } /* Headings that live inside interface — cards, rows, list items — stay on Inter so the page does not read as one long magazine feature. */ .h-section { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -0.017em; line-height: 1.25; } /* Strong, not enormous. The serif carries more width per character, so the ceiling comes down and small screens come down further. */ .hero-title { font-size: clamp(2.5rem, 5.4vw, 4.1rem); } .sec-title { font-size: clamp(1.8rem, 3.1vw, 2.4rem); } .doc-title { font-size: clamp(2rem, 4.2vw, 2.8rem); } @media (max-width: 640px) { .hero-title { font-size: clamp(2.1rem, 8.6vw, 2.5rem); line-height: 1.12; } .sec-title { font-size: clamp(1.6rem, 6.6vw, 1.95rem); } .doc-title { font-size: clamp(1.75rem, 7.2vw, 2.15rem); } } /* One drawn mark: an off-kilter underline under a single word in the headline. Deliberately not a straight rule — it should look like it was done by hand. */ .marked { position: relative; white-space: nowrap; } .marked::after { content: ""; position: absolute; left: -1%; right: -2%; bottom: -0.05em; height: 0.3em; background-image: url("data:image/svg+xml;utf8,\ \ \ \ "); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; } /* ── Language and currency ───────────────────────────────────── Lives in the menu and in account settings, never in the bar. Two native selects on purpose: a menu is not the place for a bespoke dropdown that has to reinvent keyboard support and a scroll lock. */ .i18n { display: grid; gap: 0.6rem; } .i18n-field { display: grid; gap: 0.3rem; } .i18n-field > span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-ink-soft)); } .i18n-field select { width: 100%; min-height: 44px; padding: 0 2rem 0 0.75rem; border: 1px solid rgb(var(--c-line)); border-radius: 0.5rem; background-color: rgb(var(--c-surface)); color: rgb(var(--c-ink)); font-family: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color 180ms ease; } .i18n-field select:hover { border-color: rgb(var(--c-line-firm)); } .i18n-field select:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; } .i18n-note { margin: 0; font-size: 0.75rem; line-height: 1.5; color: rgb(var(--c-ink-soft)); } /* In the menu it sits under the theme switch and shares its rhythm. */ .i18n--compact { margin-top: 0.85rem; } .m-drawer .i18n--compact { margin-top: 1rem; } /* In account settings it can spread out. */ .i18n:not(.i18n--compact) { gap: 1.25rem; } @media (min-width: 640px) { .i18n:not(.i18n--compact) { grid-template-columns: 1fr 1fr; } .i18n:not(.i18n--compact) .i18n-note { grid-column: 1 / -1; } } /* ── The mark ────────────────────────────────────────────────── Inlined rather than linked so the ring can take currentColor and follow the theme, while the play holds the accent in both. Sized in em so it tracks whatever it is set beside. */ .brand-mark { width: 1.55em; height: 1.55em; flex: none; display: block; } .brand-mark--nav { width: 1.5em; height: 1.5em; margin-right: 0.15rem; } /* ── The mark ────────────────────────────────────────────────── Cut from gallery/logo of sitehouse.png at its own proportions — 345 × 205, so 1.683 : 1. Two files rather than one recoloured by filter: the artwork is white, and a white mark is invisible on a light page, so the ink cut is a real asset rather than an effect. */ .brand-mark { width: 2.61em; height: 1.55em; flex: none; display: block; background: url("brand/sitehouse-mark-ink.png") center / contain no-repeat; } :root[data-theme="dark"] .brand-mark { background-image: url("brand/sitehouse-mark.png"); } .brand-mark--nav { width: 2.52em; height: 1.5em; }