/* ============================================================================ dept.css — "The Marketing Automat" design system Shared stylesheet for deptmatic.com (homepage + briefing re-skin) Concept: dept + -matic -> the AUTOMAT. Nickel-and-glass compartment doors, made ready for you automatically. Modern Deco, luminous, premium, confident. THEME SYSTEM ------------ Set data-theme on . Three coherent Automat variants, all WCAG AA: "night" (default) — deep petrol-enamel, milk-glass text, amber/jade lit. "milk" — warm milk-glass paper, deep-enamel text (light mode). "ink" — neutral near-black, max legibility, brighter accents. Every text/bg pairing below meets AA: body >= 4.5:1, large/UI >= 3:1. Accents that fail as text on a given surface are used for GLOW/FILL/BORDER only; the actual text uses a color that passes (see --a-text / --b-text). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,900&family=Archivo:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap'); /* ---------------------------------------------------------------------------- Brand constants (raw Automat palette — reference, theme-independent) ---------------------------------------------------------------------------- */ :root{ --enamel:#12181F; --enamel-2:#1A2430; --enamel-3:#22303C; --nickel:#A7B2B8; --nickel-dim:#6E7B84; --milk:#ECE6D8; --milk-dim:#C6C2B6; --amber:#E8A63C; --jade:#4FB59A; /* Type families (portable, with system fallbacks for FOUT) */ --f-display:'Fraunces','Georgia','Times New Roman',serif; --f-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'Space Mono','SFMono-Regular',ui-monospace,Menlo,monospace; /* Fluid type scale */ --step--1:clamp(.78rem,.74rem + .2vw,.86rem); --step-0:clamp(1rem,.96rem + .2vw,1.09rem); --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem); --step-2:clamp(1.5rem,1.3rem + 1vw,2rem); --step-3:clamp(2rem,1.6rem + 2vw,3.2rem); --step-4:clamp(2.7rem,2rem + 3.6vw,5.2rem); --pad:clamp(1.15rem,4vw,2.5rem); --maxw:1180px; --ease:cubic-bezier(.2,.7,.2,1); } /* ---------------------------------------------------------------------------- THEME: night (default) — deep petrol-enamel Key ratios on --bg #12181F: text 14.5:1 · text-2 8.1:1 · text-3 6.1:1 a-text 8.6:1 · b-text 7.2:1 ---------------------------------------------------------------------------- */ :root, [data-theme="night"]{ --bg:#12181F; --bg-image: radial-gradient(60% 45% at 22% 6%, rgba(232,166,60,.07), transparent 70%), radial-gradient(60% 45% at 82% 5%, rgba(79,181,154,.06), transparent 70%), linear-gradient(180deg,#10161C 0%, #12181F 34%, #0E141A 100%); --surface:#1A2430; /* enamel-2 panel */ --surface-2:#22303C; /* enamel-3 */ --text:#ECE6D8; /* milk — body 14.5:1 */ --text-2:#A7B2B8; /* nickel — secondary 8.1:1 */ --text-3:#8C97A0; /* nickel-dim+ — meta/eyebrow 6.1:1 */ --frame:#A7B2B8; /* nickel frame */ --frame-hi:#D6DCE0; /* nickel highlight edge */ --frame-lo:#788289; /* nickel shadow stop (metallic depth) */ --frame-edge:rgba(255,255,255,.06); /* outer hairline (lift) */ --line:rgba(167,178,184,.18); --a-text:#E8A63C; /* amber as text 8.6:1 */ --b-text:#4FB59A; /* jade as text 7.2:1 */ --a-glow:#E8A63C; /* amber light/glow/border */ --b-glow:#4FB59A; /* jade light/glow/border */ /* Automat compartment glass */ --glass:rgba(236,230,216,.045); --glass-edge:rgba(236,230,216,.10); --card:rgba(18,24,31,.55); /* engraved label card */ --sel:rgba(232,166,60,.28); color-scheme:dark; } /* ---------------------------------------------------------------------------- THEME: milk — warm milk-glass paper (light) Key ratios on --bg #ECE6D8: text 13.9:1 · text-2 7.5:1 · text-3 5.0:1 a-text 5.0:1 · b-text 5.0:1 · frame 3.7:1 ---------------------------------------------------------------------------- */ [data-theme="milk"]{ --bg:#ECE6D8; --bg-image: radial-gradient(55% 42% at 20% 4%, rgba(199,127,30,.09), transparent 70%), radial-gradient(55% 42% at 82% 4%, rgba(31,138,116,.08), transparent 70%), linear-gradient(180deg,#F1ECE0 0%, #ECE6D8 40%, #E4DDCC 100%); --surface:#F6F2E9; --surface-2:#FBF8F1; --text:#141B22; /* deep enamel — body 13.9:1 */ --text-2:#3A4650; /* secondary 7.5:1 */ --text-3:#55606A; /* meta/eyebrow 5.0:1 */ --frame:#7A8590; /* nickel frame (dark enough) 3.4:1 */ --frame-hi:#B4BDC4; --frame-lo:#4C5660; /* dark nickel stop — real metal edge */ --frame-edge:rgba(38,46,54,.42); /* dark outer ring so door doesn't dissolve into the paper */ --line:rgba(60,70,80,.22); --a-text:#8A4E10; /* burnt amber as text 5.0:1 */ --b-text:#0E6B58; /* deep teal as text 5.0:1 */ --a-glow:#C77F1E; /* vivid amber for glow/slot/border */ --b-glow:#1F8A74; --glass:rgba(255,253,247,.72); /* a LIT frosted panel on paper */ --glass-edge:rgba(20,27,34,.10); --card:rgba(255,253,247,.82); --sel:rgba(199,127,30,.24); color-scheme:light; } /* ---------------------------------------------------------------------------- THEME: ink — TRUE deep warm black, maximum legibility Key ratios on --bg #0B0A0A: text 16.6:1 · text-2 10.3:1 · text-3 6.5:1 a-text 10.4:1 · b-text 9.4:1 A warm near-black (slight red bias over blue) so it reads as intentional black — not petrol/navy — and the amber/jade door glows sit gorgeously on it. ---------------------------------------------------------------------------- */ [data-theme="ink"]{ --bg:#0B0A0A; --bg-image: radial-gradient(60% 46% at 22% 4%, rgba(240,178,74,.11), transparent 72%), radial-gradient(60% 46% at 82% 3%, rgba(92,199,171,.09), transparent 72%), linear-gradient(180deg,#100E0D 0%, #0B0A0A 42%, #060505 100%); --surface:#191614; /* warm charcoal glass base */ --surface-2:#221E1A; --text:#F5F1E7; /* warm milk body 16.6:1 */ --text-2:#BBC0C0; /* secondary 10.3:1 */ --text-3:#909597; /* meta/eyebrow 6.5:1 */ --frame:#BEC4C2; /* bright warm-nickel frame */ --frame-hi:#ECEBE6; --frame-lo:#8B8F8B; /* nickel shadow stop */ --frame-edge:rgba(255,246,232,.08); /* faint warm outer lift */ --line:rgba(190,196,194,.20); --a-text:#F0B24A; /* bright amber as text 10:1 */ --b-text:#5CC7AB; /* bright jade as text 9.2:1 */ --a-glow:#F0B24A; --b-glow:#5CC7AB; --glass:rgba(244,240,230,.05); --glass-edge:rgba(244,240,230,.12); --card:rgba(10,12,14,.6); --sel:rgba(240,178,74,.30); color-scheme:dark; } /* ============================================================================ Base ============================================================================ */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--f-ui); font-size:var(--step-0); line-height:1.62; color:var(--text); background:var(--bg); background-image:var(--bg-image); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .4s var(--ease), color .4s var(--ease); } ::selection{background:var(--sel);color:var(--text);} a{color:inherit;text-decoration:none;} img,svg{display:block;max-width:100%;} h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.02;margin:0;color:var(--text);} .mono{ font-family:var(--f-mono);font-size:var(--step--1); letter-spacing:.16em;text-transform:uppercase;color:var(--text-2); } .eyebrow{ font-family:var(--f-mono);font-size:var(--step--1); letter-spacing:.28em;text-transform:uppercase;color:var(--text-3); } .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);} .rule{height:1px;background:var(--line);border:0;margin:0;} /* ============================================================================ Buttons / links (shared) ============================================================================ */ .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--f-ui);font-weight:600;font-size:var(--step--1); letter-spacing:.02em;padding:.72em 1.25em;border-radius:2px; border:1px solid var(--line);color:var(--text);background:transparent; cursor:pointer; transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease); } .btn:hover{border-color:var(--a-glow);color:var(--a-text);} .btn--jade:hover{border-color:var(--b-glow);color:var(--b-text);} .link-mono{ font-family:var(--f-mono);font-size:var(--step--1); letter-spacing:.14em;text-transform:uppercase;color:var(--text-2); border-bottom:1px solid transparent;padding-bottom:2px; transition:color .25s var(--ease),border-color .25s var(--ease); } .link-mono:hover{color:var(--text);border-color:var(--a-glow);} /* Focus — visible accent ring (Automat coin-slot light) */ :focus-visible{outline:2px solid var(--a-glow);outline-offset:3px;border-radius:2px;} /* ============================================================================ Footer (shared) ============================================================================ */ .dept-footer{ border-top:1px solid var(--line); margin-top:clamp(3rem,8vw,6rem); padding-block:clamp(2.4rem,6vw,3.6rem); color:var(--text-3); } .dept-footer a{color:var(--text-2);} .dept-footer a:hover{color:var(--text);} /* ============================================================================ Reduced motion — global guard (pages add specifics) ============================================================================ */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important;} }