/* === WET ROLLER DESIGN SYSTEM === Shared tokens + base components used by /recipes/*.html. Source of truth for tokens: /design.md. See /design.html for the full system showcase. FONT LOADING: each HTML must include a preconnect + stylesheet link to Google Fonts (Vina Sans + Space Grotesk + Inter + JetBrains Mono). We do NOT @import fonts here — @import triggers a slow waterfall and causes Vina to render with the fallback before swapping in. See any recipe head for the exact link tags. */ :root { /* COLOR */ --color-accent: #FF90E8; --color-accent-ink: #000000; --color-ink: #000000; --color-ink-muted: #3D3D3D; --color-surface: #FFFFFF; --color-surface-alt: #F4F4F0; --color-surface-raised: #FFFFFF; --color-divider: #EEEEEE; --color-focus: #FF90E8; --color-disabled-bg: #EDEDE8; --color-disabled-ink: #9A9A95; --color-success: #23A094; --color-success-surface: #E4F4F2; --color-warning: #FFC900; --color-warning-surface: #FFF6CC; --color-danger: #DC341E; --color-danger-surface: #FDE4E0; /* TYPE */ --font-display: "Vina Sans", "Bebas Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-heading: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3rem; --text-display: 6rem; --line-height-tight: 0.95; --line-height-snug: 1.15; --line-height-base: 1.55; /* SPACE */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --container-max: 1200px; --gutter: clamp(16px, 4vw, 32px); /* BREAKPOINTS (reference) */ --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1200px; /* Z-INDEX */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ICON */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* SHAPE */ --border-width: 2px; --border-width-thick: 3px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* SHADOW */ --shadow-sm: 2px 2px 0 0 var(--color-ink); --shadow-md: 4px 4px 0 0 var(--color-ink); --shadow-lg: 8px 8px 0 0 var(--color-ink); --shadow-hover: 6px 6px 0 0 var(--color-ink); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height-base); color: var(--color-ink); background: var(--color-surface); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0 0 var(--space-3); letter-spacing: -0.02em; line-height: var(--line-height-snug); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); letter-spacing: 0; } /* Display utility — Vina Sans, hero use only */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: var(--line-height-tight); } p { margin: 0 0 var(--space-3); max-width: 60ch; } .muted { color: var(--color-ink-muted); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-alt); padding: 2px 6px; border-radius: var(--radius-sm); } a { color: var(--color-ink); } /* Layout */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .band { padding: var(--space-8) 0; border-bottom: var(--border-width-thick) solid var(--color-ink); } .band--accent { background: var(--color-accent); } .band--alt { background: var(--color-surface-alt); } .band--warn { background: var(--color-warning); } .band--ink { background: var(--color-ink); color: #fff; } .band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; } /* Skip link + a11y utility */ .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; } .skip-link { position: absolute; top: -100px; left: var(--space-3); z-index: var(--z-toast); background: var(--color-ink); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-weight: 700; text-decoration: none; } .skip-link:focus { top: var(--space-3); } /* Nav */ .nav { background: var(--color-surface); border-bottom: var(--border-width-thick) solid var(--color-ink); padding: var(--space-1) 0; position: sticky; top: 0; z-index: var(--z-sticky); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .nav__brand { display: flex; align-items: center; text-decoration: none; color: var(--color-ink); } .nav__logo { width: 100px; height: 100px; display: block; } .nav__links { display: flex; gap: var(--space-5); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; } .nav__links a { color: var(--color-ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: var(--border-width-thick) solid transparent; } .nav__links a:hover { border-bottom-color: var(--color-ink); } .nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); } .nav__links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); border-radius: var(--radius-sm); } /* === Mobile nav (hamburger + right-side drawer) === Rule: any .nav with 3+ links collapses to a hamburger below 768px. Markup pattern: see brand/preview/mobile-nav.html or any recipe. Behavior in nav.js. */ .nav__toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-surface); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-md); cursor: pointer; padding: 0; } .nav__toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; } .nav__toggle__bars span { width: 20px; height: 2px; background: var(--color-ink); transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), opacity 150ms; } .nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); } .nav__scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity 150ms; } .nav__scrim[data-open="true"] { opacity: 1; pointer-events: auto; } .nav__drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; background: var(--color-surface); border-left: var(--border-width-thick) solid var(--color-ink); z-index: var(--z-modal); transform: translateX(100%); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .nav__drawer[data-open="true"] { transform: translateX(0); } .nav__drawer__head { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-ink); display: flex; align-items: center; justify-content: space-between; } .nav__drawer__close { background: transparent; border: none; cursor: pointer; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); padding: var(--space-2); } .nav__drawer__list { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; overflow-y: auto; } .nav__drawer__list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); } .nav__drawer__list a:hover { background: var(--color-surface-alt); } .nav__drawer__list a[aria-current="page"] { background: var(--color-ink); color: #fff; } .nav__drawer__list a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); } @media (max-width: 768px) { .nav__links { display: none; } .nav__toggle { display: inline-flex; } .nav__logo { width: 72px; height: 72px; } } @media (min-width: 769px) { .nav__drawer, .nav__scrim { display: none !important; } } /* Buttons */ .btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); line-height: 1; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: var(--border-width-thick) solid var(--color-ink); cursor: pointer; transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); text-decoration: none; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-md); } .btn--secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-md); } .btn--warn { background: var(--color-warning); color: var(--color-ink); box-shadow: var(--shadow-md); } .btn--success { background: var(--color-success); color: var(--color-ink); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; border-color: transparent; box-shadow: none; padding: var(--space-3) var(--space-2); } .btn--ghost:hover { text-decoration: underline; } .btn:not(.btn--ghost):hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); } .btn:not(.btn--ghost):active { transform: translate(2px,2px); box-shadow: 0 0 0 0 transparent; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); transform: none; } .btn[disabled], .btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-ink); border-color: var(--color-disabled-ink); box-shadow: none; cursor: not-allowed; pointer-events: none; } /* Card */ .card { background: var(--color-surface-raised); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); } .card--interactive { transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); cursor: pointer; outline: none; } .card--interactive:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); } .card--interactive:focus-visible { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); } /* Input */ .input { font-family: var(--font-body); font-size: var(--text-base); background: var(--color-surface); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-md); padding: var(--space-3); width: 100%; outline: none; transition: box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); } .input:focus-visible { outline: none; box-shadow: 2px 2px 0 0 var(--color-focus); } /* Pill */ .pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs); background: var(--color-accent); color: var(--color-accent-ink); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; } .pill--warn { background: var(--color-warning); } .pill--success { background: var(--color-success-surface); color: var(--color-ink); } .pill--ghost { background: var(--color-surface); } /* Footer */ .footer { background: var(--color-ink); color: #fff; padding: var(--space-6) 0; } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .footer__brand { display: flex; align-items: center; } .footer__logo { width: 100px; height: 100px; display: block; } .footer__meta { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.7; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .btn:hover, .card--interactive:hover { transform: none !important; } }