/* Commonhouse webfonts. Erode (display, Fontshare) · Atkinson Hyperlegible (UI + body — low-vision legibility is part of the trust story) · Martian Mono (annotations). */ @import url("https://api.fontshare.com/v2/css?f[]=erode@400,500,600,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Martian+Mono:wght@300;400;500&display=swap"); /* ---- Commonhouse color system ---- Two surfaces, one house: NIGHT — the original 1c "Nightshift" blues. Where we sell. Default scope. DAY — plaster daylight. Where we explain (case studies, audit, legal). Scope day pages with (or any wrapper). Rules: no dusk gradients (they drift purple). Amber belongs to light sources + the CTA only. Text never glows. */ :root { /* Base — night palette (1c) */ --night-sky: #0A1420; /* page ground */ --night-deep: #060D17; /* footers, far distance */ --night-raised: #0E1A2B; /* raised panels */ --night-scene: #0B1524; /* room-card scene strip */ --night-well: #081020; /* deepest wells (house cross-section) */ --night-plaster: #F4EDE0; /* warm-white text / line work */ --night-mist: #B9C5D9; /* ledes on dark scenes */ --night-bluegrey: #93A3BE; /* secondary text */ --night-steel: #7183A0; /* tertiary text, annotations */ --night-faint: #51617D; /* faintest wayfinding */ --night-slate: #5E6C82; /* furniture, quiet detail */ --night-hairline: #1E2F49; /* 1px structure */ --night-frame: #3A4C6B; /* stronger frames */ --night-amber: #F0A050; /* lamp / action — light sources + CTA only */ --night-lamp: #FFD9A0; /* hover warmth, lit windows */ --night-star: #C8D4E8; /* stars */ --night-black: #000000; /* Base — day palette */ --day-plaster: #F3EDE0; --day-paper: #FAF5EA; --day-ink: #211A10; --day-warmgrey: #6F6551; --day-umber: #8A7E66; --day-hairline: #D9CFB9; --day-doororange: #D9541E; --day-cream: #FFF8EC; --day-hedge: #2E6B4A; /* positive / confirmation (day only) */ /* Semantic — night defaults */ --surface-page: var(--night-sky); --surface-sunken: var(--night-deep); --surface-raised: var(--night-raised); --text-primary: var(--night-plaster); --text-secondary: var(--night-bluegrey); --text-tertiary: var(--night-steel); --text-faint: var(--night-faint); --border-hairline: var(--night-hairline); --border-frame: var(--night-frame); --line-work: var(--night-plaster); --accent: var(--night-amber); --on-accent: var(--night-sky); --interactive-hover:var(--night-lamp); --shadow-press: var(--night-black); --annotation: var(--night-steel); --annotation-accent:var(--night-amber); /* Lamplight — the only blur in the system */ --glow-cta: 0 0 28px rgba(240, 160, 80, 0.30); --glow-cta-hover: 0 0 48px rgba(240, 160, 80, 0.55); } [data-surface="day"] { --surface-page: var(--day-plaster); --surface-sunken: var(--day-plaster); --surface-raised: var(--day-paper); --text-primary: var(--day-ink); --text-secondary: var(--day-warmgrey); --text-tertiary: var(--day-umber); --text-faint: var(--day-umber); --border-hairline: var(--day-hairline); --border-frame: var(--day-ink); --line-work: var(--day-ink); --accent: var(--day-doororange); --on-accent: var(--day-cream); --interactive-hover:var(--day-doororange); --shadow-press: var(--day-ink); --annotation: var(--day-umber); --annotation-accent:var(--day-doororange); } /* ---- Commonhouse type — one scale, both surfaces ---- Erode 600 = the voice of the house. Display + room titles ONLY. Never paragraphs. Atkinson = everything spoken plainly. UI 700, body 400 — low-vision legibility as trust story. Martian Mono = annotations: room numbers, the night log, field labels. Never body copy, never headlines — and NEVER an eyebrow kicker above a heading (banned pattern). */ :root { --font-display: "Erode", "Iowan Old Style", serif; --font-display-weight: 600; --font-ui: "Atkinson Hyperlegible", "Helvetica Neue", sans-serif; --font-mono: "Martian Mono", "Courier New", monospace; /* Display — hero only */ --type-hero-size: clamp(72px, 7.5vw, 96px); --type-hero-leading: 1.02; /* H2 — room titles, still Erode */ --type-h2-size: clamp(32px, 3vw, 40px); --type-h2-leading: 1.15; /* H3 + UI — Atkinson 700 */ --type-h3-size: 19px; /* range 17–22 */ --type-h3-leading: 1.3; /* Body — Atkinson 400 */ --type-body-size: 16.5px; /* minimum, never smaller */ --type-body-leading: 1.6; --measure-body: 66ch; /* 60–70ch */ /* Annotations — Martian Mono (already wide: keep tracking light) */ --type-mono-size: 12px; /* range 10–13 */ --type-mono-tracking: 1px; /* +0.5–1px — Martian is wide */ /* Button / nav label */ --type-label-size: 13px; --type-label-weight: 700; --type-label-tracking:1px; } /* ---- Commonhouse spacing & structure ---- Everything sits on hard edges: radius 0 everywhere, 1px hairlines, 1.5px structural frames, 2–2.5px logo line work. No rounded corners, ever (the only circles in the system are the doorknob and smoke dots). */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 44px; /* page gutter */ --space-8: 72px; /* section gap */ --space-9: 88px; --space-10: 120px; --page-max: 1440px; --radius: 0px; --border-w-hair: 1px; --border-w-frame:1.5px; --border-w-mark: 2px; /* Hard press shadow (buttons) — offset, no blur, ever */ --press-offset: 4px; --press-offset-active: 1px; } /* ---- Commonhouse motion — four verbs, nothing else ---- SETTLE — parts land like placed hardware. One overshoot max. LIGHT — windows/fields turn on when state is real. DRIFT — chimney smoke while workflows run. One dot at a time. FLY — scroll-scrubbed camera between rooms; 1200ms when teleporting. No idle loops anywhere on the real site (smoke = state, not decoration). */ :root { --ease-settle: cubic-bezier(0.3, 0.7, 0, 1); --dur-settle: 500ms; --ease-light: ease-out; --dur-light: 400ms; --dur-drift: 4s; --ease-fly: cubic-bezier(0.16, 1, 0.3, 1); /* exponential */ --dur-fly: 1200ms; --lamp-glow: 0 0 30px 6px rgba(240, 160, 80, 0.5); } @keyframes ch-drift { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 0.85; } 100% { transform: translateY(-16px); opacity: 0; } } @keyframes ch-settle-in { 0% { transform: translateY(10px); opacity: 0; } 70% { transform: translateY(-2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* Window flicker for scenes — only while workflows actually run */ @keyframes ch-window { 0% { opacity: 0.07; } 10%, 90% { opacity: 1; } 100% { opacity: 0.07; } } @keyframes ch-light-on { from { opacity: 0; box-shadow: none; } to { opacity: 1; box-shadow: var(--lamp-glow); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Base element defaults — both surfaces */ body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-leading); } a { color: var(--text-primary); text-decoration: none; } a:hover { color: var(--interactive-hover); } ::selection { background: var(--accent); color: var(--on-accent); } /* Interactive state classes used by Commonhouse components. (Hover/press/focus can't be inline — these are the only class rules in the system.) */ /* Primary action. NIGHT: a lit window — flat amber, glow widens on hover (the only glow that isn't a window). DAY: hardware — hard press shadow. */ .ch-primary { box-shadow: var(--glow-cta); transition: box-shadow var(--dur-light) var(--ease-light); } .ch-primary:hover { box-shadow: var(--glow-cta-hover); } [data-surface="day"] .ch-primary { box-shadow: var(--press-offset) var(--press-offset) 0 var(--shadow-press); transition: box-shadow var(--dur-settle) var(--ease-settle), transform var(--dur-settle) var(--ease-settle); } [data-surface="day"] .ch-primary:hover, [data-surface="day"] .ch-primary:active { box-shadow: var(--press-offset-active) var(--press-offset-active) 0 var(--shadow-press); transform: translate(3px, 3px); } /* Secondary — outline warms on hover. 1px at night, 1.5px ink by day. */ .ch-outline { border: 1px solid var(--line-work); color: var(--text-primary); transition: border-color var(--dur-light) var(--ease-light), color var(--dur-light) var(--ease-light); } [data-surface="day"] .ch-outline { border-width: 1.5px; } .ch-outline:hover { border-color: var(--interactive-hover); color: var(--interactive-hover); } /* Tertiary — underlined text link */ .ch-link { color: var(--text-secondary); border-bottom: 1px solid var(--border-frame); transition: color var(--dur-light) var(--ease-light), border-color var(--dur-light) var(--ease-light); } .ch-link:hover { color: var(--interactive-hover); border-bottom-color: var(--interactive-hover); } /* Nav link — wide-tracked wayfinding caps */ .ch-navlink { color: var(--text-secondary); text-decoration: none; transition: color var(--dur-light) var(--ease-light); } .ch-navlink:hover { color: var(--interactive-hover); } .ch-navlink[aria-current] { color: var(--text-primary); } /* Nav CTA — outlined lamp; fills on hover */ .ch-ctacell { border: 1px solid var(--accent); color: var(--accent); background: transparent; transition: background var(--dur-light) var(--ease-light), color var(--dur-light) var(--ease-light); } .ch-ctacell:hover { background: var(--accent); color: var(--on-accent); } /* Field — lights up when focused (the LIGHT verb) */ .ch-field { border: 1px solid var(--border-frame); transition: border-color var(--dur-light) var(--ease-light), box-shadow var(--dur-light) var(--ease-light); } [data-surface="day"] .ch-field { border-width: 1.5px; } .ch-field:focus-within { border-color: var(--accent); box-shadow: 0 0 18px 2px rgba(240, 160, 80, 0.3); } [data-surface="day"] .ch-field:focus-within { box-shadow: none; } .ch-field input, .ch-field textarea, .ch-field select { background: transparent; border: 0; outline: 0; width: 100%; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); } .ch-field input::placeholder, .ch-field textarea::placeholder { color: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════════════ Commonhouse shared page CSS. Import AFTER styles.css (tokens). Everything reusable across pages lives here: nav, footer, night scene, sections, buttons, FAQ, and the proof components. Page-specific one-offs stay in the page's own