/* * theme.css — Deskside's design-system values. * Cream paper, clay and moss ink, hairline rules — warm-craft mixed with * editorial. Opens light; the dark set below is a different, warmer-dark * palette, not an inversion. */ :root { --canvas: #faf6ef; --surface: #fdfbf8; --surface-2: #f1e8d9; --border: #e5d9c5; --border-strong: #cdb897; --ink: #26221d; --muted: #686460; --accent: #a2492b; --accent-hover: #8a3c22; --accent-ink: #fff9f4; --accent-text: #a2492b; --accent-strong: #a2492b; --accent-soft: #f3ded0; --accent-border: #dcb79f; --success: #4b6a3a; --success-ink: #ffffff; --success-soft: #e3e9d7; --success-strong: #3c5730; --warning: #a9720f; --warning-ink: #ffffff; --warning-soft: #f1e3c7; --warning-strong: #8c5e0c; --danger: #a13a29; --danger-ink: #ffffff; --danger-soft: #f2ddd5; --danger-strong: #872f21; --chart-1: #a2492b; --chart-2: #4b6a3a; --chart-3: #a9720f; --chart-4: #6a5789; --chart-5: #2f6f68; --chart-6: #8a5a3c; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-weight: 500; --display-tracking: -0.01em; --eyebrow-tracking: 0.07em; --radius-btn: 10px; --radius-card: 10px; --radius-input: 10px; --radius-lg: 10px; --radius-xl: 14px; --border-w: 1px; --border-strong-w: 1px; --card-pad: 1.75rem; --caps: none; --caps-tracking: 0.01em; --btn-weight: 600; --measure: 66ch; --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--ink) 16%, transparent); --shadow-raised: 0 16px 40px -12px color-mix(in srgb, var(--ink) 26%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ink) 14%, transparent); --shadow-btn: 0 1px 1px color-mix(in srgb, var(--ink) 14%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 32%, transparent); } html[data-theme="dark"] { --canvas: #211c15; --surface: #2a241b; --surface-2: #332b1f; --border: #423727; --border-strong: #5c4c35; --ink: #f5efe1; --muted: #b8ac96; --accent: #d1794c; --accent-hover: #dd8a5f; --accent-ink: #241205; --accent-text: #e2925f; --accent-strong: #e2925f; --accent-soft: #3c2818; --accent-border: #5c3d26; --success: #8bab74; --success-ink: #12210b; --success-soft: #24361d; --success-strong: #a4c78c; --warning: #d29a4c; --warning-ink: #251705; --warning-soft: #3a2c14; --warning-strong: #e3b06a; --danger: #cd7660; --danger-ink: #250d06; --danger-soft: #3c1f16; --danger-strong: #e0917c; --chart-1: #d1794c; --chart-2: #8bab74; --chart-3: #d29a4c; --chart-4: #9d8bc0; --chart-5: #5aa39b; --chart-6: #b08160; } /* * app.css — Deskside's own rules: the hero's stagger-in (the one moment on * the whole page that moves) and a couple of small touches no primitive * covers. Everything here reads tokens only. */ /* ---- stagger-grid: the hero's three role cards ---------------------------- * Rests fully visible with no JS and no motion — see the header note in * app.js. Once "stagger-ready" lands on (immediately, before the * visitor can scroll) the cards wait in an offset state until the grid * itself (".role-grid", carrying data-inview) reports app:inview — the * platform's own viewport mechanism — and gets ".in" added, then animate in * with a short stagger. */ html.stagger-ready .role-grid .stagger-item { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } html.stagger-ready .role-grid.in .stagger-item { opacity: 1; transform: none; } html.stagger-ready .role-grid .stagger-item:nth-child(1) { transition-delay: 0ms; } html.stagger-ready .role-grid .stagger-item:nth-child(2) { transition-delay: 110ms; } html.stagger-ready .role-grid .stagger-item:nth-child(3) { transition-delay: 220ms; } html.reduced-motion .role-grid .stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; } /* A hairline seam between the cream page and a photograph, so the media frame reads as placed rather than pasted. */ .media { box-shadow: 0 0 0 1px var(--border); }