/* ============================================================ JOHNSTON, MOORE & WESTON — Creative Variable System "Treat these as knobs." Palette/type/knobs swap via data-attrs set by the Tweaks panel on . ============================================================ */ :root { /* ---------- KNOBS (live, tweak-driven) ---------- */ --knob-hero: 0.8; /* 0..1.2 hero drama */ --knob-motion: 0.7; /* 0..1 motion energy */ --density-mult: 1; /* 0.72 / 1 / 1.28 */ --visual-chaos: 0.8; /* reserved: texture/overlay */ --glow-strength: 0.55; /* ambient lab-light intensity */ --trust-weight: 1; /* credibility section scale */ --premium-authority: 1; /* hairline + serif discipline */ /* ---------- DERIVED ---------- */ --hero-scale: calc(0.82 + var(--knob-hero) * 0.38); --hero-drama: clamp(0.25, var(--knob-hero), 1.1); --motion-dur: calc(0.9s - var(--knob-motion) * 0.35s); --motion-rise: calc(10px + var(--knob-motion) * 26px); --marquee-dur: calc(60s - var(--knob-motion) * 38s); /* ---------- SPACING (8px base, density-aware) ---------- */ --sp-1: calc(4px * var(--density-mult)); --sp-2: calc(8px * var(--density-mult)); --sp-3: calc(16px * var(--density-mult)); --sp-4: calc(24px * var(--density-mult)); --sp-5: calc(32px * var(--density-mult)); --sp-6: calc(48px * var(--density-mult)); --sp-7: calc(64px * var(--density-mult)); --sp-8: calc(96px * var(--density-mult)); --sp-9: calc(128px * var(--density-mult)); --sp-10: calc(176px * var(--density-mult)); --section-pad: clamp(calc(56px * var(--density-mult)), 9vw, var(--sp-9)); /* ---------- GEOMETRY ---------- */ --radius-0: 0px; --radius-1: 2px; --radius-2: 6px; --hairline: 1px; --rule-strong: 3px; --diamond-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* ---------- SHADOWS (warm, ink-derived) ---------- */ --shadow-1: 0 1px 2px rgba(20, 14, 10, 0.10); --shadow-2: 0 6px 18px rgba(20, 14, 10, 0.14); --shadow-3: 0 18px 48px rgba(20, 14, 10, 0.22); --shadow-crimson: 0 14px 40px rgba(140, 22, 48, 0.32); /* ---------- PHOTO GRADE (hero-photo doctoring) ---------- */ --photo-grade: grayscale(0.32) sepia(0.18) contrast(1.05) brightness(0.92) saturate(0.92); --photo-wash-strength: 0.85; /* ---------- EASING ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- TYPE SCALE (1.333 modular, hero-aware) ---------- */ --text-xs: 12px; --text-sm: 13.5px; --text-base: 17px; --text-md: 21px; --text-lg: 28px; --text-xl: 37px; --text-2xl: clamp(40px, 4.6vw, 56px); --text-3xl: clamp(48px, 6vw, 74px); --text-display: clamp(calc(44px * var(--hero-scale)), calc(7.2vw * var(--hero-scale)), calc(108px * var(--hero-scale))); --tracking-eyebrow: 0.22em; --tracking-display: -0.018em; --lh-display: 1.06; --lh-body: 1.65; } /* ============================================================ PALETTES — data-palette on ============================================================ */ /* 01 · DOCKET — ink, aged paper, logo crimson, earned brass */ :root, html[data-palette="docket"] { --color-ink: #16100C; --color-ink-soft: #2B221C; --color-paper: #F4EFE5; --color-paper-deep: #E9E1D2; --color-surface: #FCF9F1; --color-primary: #9E1B3C; --color-primary-deep: #701129; --color-accent: #A8854C; --color-muted: #574536; --color-line: rgba(22, 16, 12, 0.16); --color-line-inv: rgba(244, 239, 229, 0.18); --color-paper-rgb: 244, 239, 229; --color-ink-rgb: 22, 16, 12; --color-primary-rgb: 158, 27, 60; --color-glow: #E07A3C; --color-glow-rgb: 224, 122, 60; --color-accent-2: #A8854C; --color-white-pop: #FFFCF4; } /* 02 · MIDNIGHT VERDICT — cold ink-navy, sharper crimson, steel */ html[data-palette="midnight"] { --color-ink: #0E121C; --color-ink-soft: #1B2230; --color-paper: #EDEFF2; --color-paper-deep: #DEE2E8; --color-surface: #F8FAFC; --color-primary: #B12243; --color-primary-deep: #7C152E; --color-accent: #64788F; --color-muted: #43506B; --color-line: rgba(14, 18, 28, 0.16); --color-line-inv: rgba(237, 239, 242, 0.18); --color-paper-rgb: 237, 239, 242; --color-ink-rgb: 14, 18, 28; --color-primary-rgb: 177, 34, 67; --color-glow: #5B7FD4; --color-glow-rgb: 91, 127, 212; --color-accent-2: #64788F; } /* 03 · VALLEY HERITAGE — oxblood, warm cream, tobacco brass */ html[data-palette="heritage"] { --color-ink: #221710; --color-ink-soft: #38271C; --color-paper: #F6EEDC; --color-paper-deep: #ECDFC5; --color-surface: #FDF8EC; --color-primary: #84142B; --color-primary-deep: #5C0D1F; --color-accent: #8F6E3E; --color-muted: #5C4A33; --color-line: rgba(34, 23, 16, 0.18); --color-line-inv: rgba(246, 238, 220, 0.18); --color-paper-rgb: 246, 238, 220; --color-ink-rgb: 34, 23, 16; --color-primary-rgb: 132, 20, 43; --color-glow: #D8923F; --color-glow-rgb: 216, 146, 63; --color-accent-2: #8F6E3E; } /* 04 · EMBER — lit-up umber, molten amber glow, fire-brick crimson */ html[data-palette="ember"] { --color-ink: #221208; --color-ink-soft: #3A2210; --color-paper: #F7ECDC; --color-paper-deep: #EFDFC4; --color-surface: #FDF7EB; --color-primary: #AD2424; --color-primary-deep: #7C1717; --color-accent: #C98A3B; --color-muted: #66482A; --color-line: rgba(34, 18, 8, 0.18); --color-line-inv: rgba(247, 236, 220, 0.2); --color-paper-rgb: 247, 236, 220; --color-ink-rgb: 34, 18, 8; --color-primary-rgb: 173, 36, 36; --color-glow: #FF9C45; --color-glow-rgb: 255, 156, 69; --color-accent-2: #D8923F; } /* 05 · OXIDE — green-black ink, verdigris contrast, acid-clean paper */ html[data-palette="oxide"] { --color-ink: #0F1714; --color-ink-soft: #1C2B25; --color-paper: #EFF2EA; --color-paper-deep: #E2E8DC; --color-surface: #F8FAF4; --color-primary: #A31D38; --color-primary-deep: #731226; --color-accent: #4E8C72; --color-muted: #41584B; --color-line: rgba(15, 23, 20, 0.16); --color-line-inv: rgba(239, 242, 234, 0.18); --color-paper-rgb: 239, 242, 234; --color-ink-rgb: 15, 23, 20; --color-primary-rgb: 163, 29, 56; --color-glow: #58B894; --color-glow-rgb: 88, 184, 148; --color-accent-2: #4E8C72; } /* ============================================================ TYPE PAIRINGS — data-type on ============================================================ */ :root, html[data-type="caslon"] { --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif; --font-body: "Archivo", "Helvetica Neue", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --weight-display: 400; } html[data-type="modern"] { --font-display: "Instrument Serif", Georgia, serif; --font-body: "Public Sans", "Helvetica Neue", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --weight-display: 400; } html[data-type="bodoni"] { --font-display: "Bodoni Moda", "Didot", Georgia, serif; --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --weight-display: 500; } /* ============================================================ CTA PRESSURE — data-cta on (soft | confident | urgent) ============================================================ */ :root, html[data-cta] { --cta-bg: var(--color-ink); --cta-fg: var(--color-paper); --cta-border: var(--color-ink); } html[data-cta="confident"], html[data-cta="urgent"] { --cta-bg: var(--color-primary); --cta-fg: #FFF8EE; --cta-border: var(--color-primary); } html[data-cta="urgent"] { --cta-bg: var(--color-primary-deep); --cta-border: var(--color-primary-deep); }