/* * warm-organic.css * Shared design system for Workshopmatic. * * Blend of the Warm + Organic directions. Self-contained: defines all * custom-property tokens, reusable component classes, and the blob * background layer. Link this file in the marketing site, legal pages, * and the app shell before any page-specific overrides. * * Real brand name is TBD. Swap BRAND.name in site/brand.js when ready. * That file is the single source; nothing here needs to change. * * Fonts: Instrument Sans (display + body) + Geist Mono (chrome, meta, counters, * tabular-nums), self-hosted latin-subset woff2 from /assets/fonts, so no Google * Fonts link tag is needed in any . Plus Jakarta Sans is retired on the * marketing surface (Double Act port, OPE-123 P2). * * Light mode only. No italic. No serif. No emoji. No em dashes. * British English in chrome text. * * CHANGELOG * - v2.0: Double Act port (OPE-123 P2, 2026-07-13). Marketing surface flipped from * Warm Craft (teal/cream/Jakarta) to Double Act (neutral canvas #FDFDFC, single * coral accent, Instrument Sans + Geist Mono). --accent is now the TEXT-SAFE coral * #B3372B; the vivid chrome coral moved to --accent-chrome #E4574A (non-text only: * dots, rules, glows). --peach is a light coral pill fill. Cards are flat (hairline * border, no soft drop shadow); the atmospheric blob mesh and washi decorations are * retired to a clean flat canvas. Double Act aliases added (--coral, --coral-ink, * --faint, --near-black, --ease, --mono). Class names unchanged. * - v-next: Warm Craft alignment (2026-07-02). Accent flip: --accent is now * the deep teal #0F766E (was the hover shade), new --accent-hover holds * #0EA5A0 (the old primary, now hover only). Added --accent-tint, * --shadow-accent, --shadow-note / --shadow-note-hover, --radius-note, and * the 6-tint sticky-note palette (--note-1..6, --facedown) for board * stickies elsewhere on the site. .wo-btn-primary hover now uses * --accent-hover instead of --accent-deep. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/InstrumentSans-latin.woff2) format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/GeistMono-latin.woff2) format('woff2'); } /* ============================================================ SECTION 1: TOKEN MAP All custom properties. Everything visual is derived from here. ============================================================ */ :root { /* Canvas (Double Act canon: neutral, no cream) */ --canvas: #FDFDFC; /* neutral off-white body background */ --canvas-card: #FFFFFF; /* card / surface fill */ --canvas-muted: #F4F4F2; /* neutral inset backgrounds, no yellow cast */ /* Accent: text-safe coral primary; vivid chrome coral is a SEPARATE non-text key (Double Act, OPE-123 P2). --accent = coral-ink 5.9:1 on canvas. */ --accent: #B3372B; /* primary text accent, links, active states (5.9:1) */ --accent-hover: #9C2F25; /* darker coral hover (text-safe) */ --accent-deep: #8F2B21; /* deepest coral, borders, emphasis */ --accent-soft: rgba(228,87,74,0.14); /* tinted hover / active backgrounds */ --accent-tint: rgba(228,87,74,0.08); /* subtle background tint */ --accent-chrome: #E4574A; /* NON-TEXT ONLY: dots, rules, glows, decorative fills (3.58:1) */ /* Peach: light coral label-pill fill (name kept for stability; coral text on it 4.8:1) */ --peach: #F9DDD9; /* light coral pill background */ --peach-ink: #B3372B; /* coral text on peach pills */ /* Ink: neutral near-black palette */ --ink: #141311; /* primary text (18.2:1 on canvas) */ --ink-soft: #3B3A36; /* body prose (12.5:1) */ --ink-mute: #4A4843; /* smallest functional text (8.98:1) */ --ink-hairline: rgba(20,19,17,0.10); /* Double Act hairline */ --ink-line: rgba(20,19,17,0.16); /* Double Act strong hairline */ /* Double Act aliases (used directly by page-specific Double Act component CSS) */ --coral: #E4574A; /* = --accent-chrome, vivid chrome coral */ --coral-ink: #B3372B; /* = --accent, text coral */ --coral-wash: rgba(228,87,74,0.12); --coral-soft: rgba(228,87,74,0.10); --coral-ring: rgba(228,87,74,0.22); --faint: #67635C; /* quietest text tier, decorative meta (5.87:1) */ --near-black: #1A1A1A; /* CTA fill (white 17.4:1) */ /* Feedback: amber for warnings, green for success */ --amber-bg: #FFF7ED; --amber-border: #C57A00; --green: #166534; --green-bg: #F0FDF4; --error-bg: #FEF2F2; --error-border: #B91C1C; /* Elevation: flat by default (Double Act). Tokens kept (neutral ink tint) for the few explicit drop-shadow surfaces; cards use a hairline border, not a soft shadow. */ --shadow-sm: 0 2px 8px rgba(20,19,17,0.05), 0 1px 2px rgba(20,19,17,0.03); --shadow-card: 0 4px 20px rgba(20,19,17,0.05), 0 1px 4px rgba(20,19,17,0.04); --shadow-raised: 0 7px 24px rgba(20,19,17,0.08), 0 2px 6px rgba(20,19,17,0.05); --shadow-accent: 0 6px 22px rgba(20,19,17,0.10), 0 1px 3px rgba(20,19,17,0.05); /* Sticky note tints (used ONLY inside board mockups) */ --note-1: #FFF4D6; --note-2: #DBF3EE; --note-3: #FFE2D1; --note-4: #E6E9FF; --note-5: #F3E5FF; --note-6: #E2F4D7; --facedown: #F1EAE0; --shadow-note: 0 10px 20px -14px rgba(20,19,17,0.30), 0 2px 6px rgba(20,19,17,0.08); --shadow-note-hover: 0 14px 24px -14px rgba(20,19,17,0.36), 0 4px 8px rgba(20,19,17,0.10); /* Shape (Double Act radii 10/16) */ --radius-card: 16px; --radius-note: 10px; --radius-input: 10px; --radius-pill: 999px; --radius-sm: 8px; /* Type */ --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Motion: pair every transition with prefers-reduced-motion guard */ --dur-fast: 0.15s; --dur-med: 0.25s; --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease: cubic-bezier(.16, 1, .3, 1); /* Double Act expo-out */ --micro: 140ms; --reveal: 640ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-med: 0ms; } } /* ============================================================ SECTION 2: RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--canvas); scroll-behavior: smooth; } body { font-family: var(--font); background: var(--canvas); color: var(--ink); line-height: 1.6; min-width: 375px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Every direct child of body must sit above the blob layer (z-index: 0) */ body > * { position: relative; z-index: 1; } /* ============================================================ SECTION 3: FLAT CANVAS (Double Act, OPE-123 P2) The Warm Craft atmospheric blob mesh (teal/green/peach radial gradients) is retired. Double Act is a clean flat canvas; the only warm glow lives under the hero window, page-scoped. `body > *` z-index rules below are harmless with no blob layer. ============================================================ */ /* ============================================================ SECTION 4: FOCUS STYLES ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ============================================================ SECTION 5: NAVIGATION Thin sticky nav on a neutral translucent canvas. The per-link SHUTTER hover + Double Act refinements are injected once by site-chrome.js (SHUTTER_CSS), so every surface shares one nav. ============================================================ */ .wo-nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); background: rgba(253,253,252,0.86); border-bottom: 1px solid var(--ink-hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; min-height: 56px; } @supports not (backdrop-filter: blur(1px)) { .wo-nav { background: var(--canvas); } } .wo-nav-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .wo-nav-mark { display: block; width: 30px; height: 30px; flex: none; } .wo-nav-links { display: flex; align-items: center; gap: 24px; list-style: none; } .wo-nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; } /* Hover/focus is governed by the shared SHUTTER (site-chrome.js SHUTTER_CSS); no colour transition here so the two mechanisms never fight. */ /* ============================================================ SECTION 6: CARDS Double Act: flat white surface, 16px radius, 1px hairline border, NO soft drop shadow. Hover firms the border to coral, no lift. ============================================================ */ .wo-card { background: var(--canvas-card); border-radius: var(--radius-card); border: 1px solid var(--ink-line); box-shadow: none; transition: border-color var(--dur-med) var(--easing); } .wo-card:hover { border-color: var(--coral); } /* Variant: no hover reaction (for form cards, modals) */ .wo-card-static { background: var(--canvas-card); border-radius: var(--radius-card); border: 1px solid var(--ink-line); box-shadow: none; } /* Variant: muted inset panel, lower visual weight */ .wo-card-muted { background: var(--canvas-muted); border-radius: var(--radius-sm); border: 1px solid var(--ink-hairline); } /* ============================================================ SECTION 7: BUTTONS ============================================================ */ /* Primary CTA: Double Act near-black fill (white text 17.4:1) */ .wo-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--near-black); color: #fff; border: none; border-radius: var(--radius-input); padding: 12px 24px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); white-space: nowrap; } .wo-btn-primary:hover { background: #000; box-shadow: 0 4px 16px rgba(20,19,17,0.18); } .wo-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } /* Secondary: calm neutral outline */ .wo-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--canvas-card); color: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius-input); padding: 11px 23px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing); white-space: nowrap; } .wo-btn-secondary:hover { border-color: var(--ink); color: var(--ink); } .wo-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; } /* Ghost: hairline border, muted text */ .wo-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-input); padding: 10px 20px; font-family: var(--font); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast); white-space: nowrap; } .wo-btn-ghost:hover { border-color: var(--ink); color: var(--accent); } /* Icon-only circular button */ .wo-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--canvas-muted); border: 1px solid var(--ink-hairline); color: var(--ink-soft); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); flex-shrink: 0; } .wo-btn-icon:hover { background: var(--accent-soft); color: var(--accent-deep); } /* ============================================================ SECTION 8: FORM INPUTS Radius 12px per spec. ============================================================ */ .wo-input, .wo-textarea, .wo-select { width: 100%; background: var(--canvas-card); border: 1px solid var(--ink-line); border-radius: var(--radius-input); padding: 10px 14px; font-family: var(--font); font-size: 14px; color: var(--ink); line-height: 1.5; outline: none; transition: border-color var(--dur-fast); } .wo-input:focus, .wo-textarea:focus, .wo-select:focus { border-color: var(--accent); } .wo-textarea { resize: vertical; min-height: 80px; } .wo-select { cursor: pointer; appearance: none; } .wo-field { display: flex; flex-direction: column; gap: 6px; } .wo-label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); } .wo-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.45; } /* ============================================================ SECTION 9: LABEL PILLS Status and label indicators only, not a second accent. Double Act: light coral fill, coral text, Geist Mono. ============================================================ */ .wo-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--peach); color: var(--peach-ink); border-radius: var(--radius-pill); padding: 3px 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* Solid coral pill variant: for active/selected states (coral-ink, white 6:1) */ .wo-pill-accent { background: var(--accent); color: #fff; } /* Muted pill: hairline border, no fill */ .wo-pill-muted { background: transparent; border: 1px solid var(--ink-line); color: var(--ink-mute); } /* ============================================================ SECTION 10: PROGRESS DONUT Reusable SVG-based donut. Rendered via the .wo-donut container with a CSS custom property --donut-pct (0-100). Usage in HTML:
72%
Set --donut-pct to control the arc. The stroke-dashoffset is computed via the CSS calc below. Circumference for r=16: 2 * pi * 16 = 100.53 (approx 101). ============================================================ */ .wo-donut { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .wo-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .wo-donut-track { fill: none; stroke: var(--ink-hairline); stroke-width: 3.5; } .wo-donut-fill { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: calc(100.53 - (100.53 * var(--donut-pct, 0) / 100)); transition: stroke-dashoffset var(--dur-med) var(--easing); } .wo-donut-label { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: var(--accent-deep); line-height: 1; font-variant-numeric: tabular-nums; } /* Larger 64px variant */ .wo-donut-lg { width: 64px; height: 64px; } .wo-donut-lg .wo-donut-label { font-size: 13px; } /* ============================================================ SECTION 11: FEEDBACK BANNERS ============================================================ */ .wo-banner { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; line-height: 1.5; border-left: 3px solid var(--ink-line); background: var(--canvas-card); color: var(--ink-soft); } .wo-banner-warn { border-left-color: var(--amber-border); background: var(--amber-bg); color: #7C4A03; } .wo-banner-error { border-left-color: var(--error-border); background: var(--error-bg); color: #7F1D1D; } .wo-banner-success { border-left-color: var(--green); background: var(--green-bg); color: var(--green); } .wo-banner-accent { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } /* ============================================================ SECTION 12: TYPOGRAPHY HELPERS ============================================================ */ .wo-h1 { font-family: var(--font); font-weight: 700; font-size: clamp(28px, 5vw, 48px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); } .wo-h2 { font-family: var(--font); font-weight: 700; font-size: clamp(22px, 3.5vw, 34px); letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); } .wo-h3 { font-family: var(--font); font-weight: 700; font-size: clamp(16px, 2.5vw, 22px); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); } .wo-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .wo-accent-text { color: var(--accent-deep); } .wo-muted { color: var(--ink-mute); } /* ============================================================ SECTION 13: UTILITY CLASSES ============================================================ */ .wo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Tabular numbers for stats */ .wo-tabular { font-variant-numeric: tabular-nums; } /* Chip: small inline info tag */ .wo-chip { display: inline-block; background: var(--canvas-muted); border: 1px solid var(--ink-hairline); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; } /* Section spacing */ .wo-section { padding: 64px 24px; } @media (max-width: 600px) { .wo-section { padding: 40px 16px; } } /* Container max-width */ .wo-container { max-width: 900px; margin: 0 auto; } /* Divider */ .wo-divider { height: 1px; background: var(--ink-hairline); border: none; }