/*
* 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: Plus Jakarta Sans via Google Fonts CDN (400-800).
* Add this link tag BEFORE this stylesheet in any :
*
*
*
*
* Light mode only. No italic. No serif. No emoji. No em dashes.
* British English in chrome text.
*/
/* ============================================================
SECTION 1: TOKEN MAP
All custom properties. Everything visual is derived from here.
============================================================ */
:root {
/* Canvas */
--canvas: #FAF7F2; /* warm off-white body background */
--canvas-card: #FFFFFF; /* card / surface fill */
--canvas-muted: #F4F0E8; /* subtle inset backgrounds */
/* Accent: one ocean teal, two shades */
--accent: #0EA5A0; /* primary CTA, active states, highlights */
--accent-deep: #0F766E; /* text-on-light, deep borders, secondary emphasis */
--accent-soft: rgba(14,165,160,0.08); /* tinted hover backgrounds */
/* Peach: pill labels and status indicators only */
--peach: #FED7B9; /* peach pill background */
--peach-ink: #7C3F00; /* copper text on peach pills */
/* Ink: warm near-black palette */
--ink: #2A1F14; /* primary text */
--ink-soft: #5C4D3C; /* secondary text */
--ink-mute: #7A6B5C; /* muted / placeholder text */
--ink-hairline: rgba(42,31,20,0.06); /* hairline borders */
--ink-line: rgba(42,31,20,0.12); /* visible borders */
/* 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: shadow tinted with warm ink */
--shadow-sm: 0 2px 8px rgba(42,31,20,0.05), 0 1px 2px rgba(42,31,20,0.03);
--shadow-card: 0 4px 20px rgba(42,31,20,0.05), 0 1px 4px rgba(42,31,20,0.04);
--shadow-raised: 0 7px 24px rgba(42,31,20,0.08), 0 2px 6px rgba(42,31,20,0.05);
/* Shape */
--radius-card: 18px;
--radius-input: 12px;
--radius-pill: 999px;
--radius-sm: 8px;
/* Type */
--font: 'Plus Jakarta Sans', system-ui, sans-serif;
/* 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);
}
@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: BLOB BACKGROUND
Fixed body::before with 5 overlapping radial gradients.
Atmospheric at 4-9% opacity. Never a hard gradient.
Applied automatically by this stylesheet; no extra markup needed.
============================================================ */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 65% 55% at 10% 15%, rgba(14,165,160,0.07) 0%, transparent 65%),
radial-gradient(ellipse 50% 45% at 88% 12%, rgba(200,230,200,0.09) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 65% 82%, rgba(14,165,160,0.05) 0%, transparent 58%),
radial-gradient(ellipse 40% 38% at 3% 72%, rgba(254,215,185,0.06) 0%, transparent 52%),
radial-gradient(ellipse 48% 42% at 92% 58%, rgba(14,165,160,0.04) 0%, transparent 55%);
}
/* ============================================================
SECTION 4: FOCUS STYLES
============================================================ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ============================================================
SECTION 5: NAVIGATION
Soft backdrop-filter nav so the blobs show through on scroll.
============================================================ */
.wo-nav {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
background: rgba(250,247,242,0.82);
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: 800;
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;
transition: color var(--dur-fast) var(--easing);
}
.wo-nav-links a:hover {
color: var(--accent-deep);
}
/* ============================================================
SECTION 6: CARDS
White surface, 18-20px radius, soft warm shadow, hover lift 3px.
============================================================ */
.wo-card {
background: var(--canvas-card);
border-radius: var(--radius-card);
border: 1px solid var(--ink-hairline);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-med) var(--easing), transform var(--dur-med) var(--easing);
}
.wo-card:hover {
box-shadow: var(--shadow-raised);
transform: translateY(-3px);
}
/* Variant: no hover lift (for form cards, modals) */
.wo-card-static {
background: var(--canvas-card);
border-radius: var(--radius-card);
border: 1px solid var(--ink-hairline);
box-shadow: var(--shadow-card);
}
/* 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: accent teal fill */
.wo-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-pill);
padding: 12px 24px;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
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: var(--accent-deep);
box-shadow: 0 4px 16px rgba(14,165,160,0.3);
}
.wo-btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Secondary: outline teal */
.wo-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--accent-deep);
border: 1.5px solid var(--accent);
border-radius: var(--radius-pill);
padding: 10.5px 22.5px;
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);
white-space: nowrap;
}
.wo-btn-secondary:hover {
background: var(--accent-soft);
color: var(--accent-deep);
}
.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-pill);
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(--accent);
color: var(--accent-deep);
}
/* Icon-only circular button */
.wo-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
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-size: 12px;
font-weight: 600;
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: PEACH PILLS
Status and label indicators only, not a second accent.
============================================================ */
.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-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* Teal pill variant: for active/selected states */
.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(--accent);
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: 800;
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-size: 11px;
font-weight: 700;
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;
}