/* WygodnySchowek — Design tokens Premium-but-approachable. Warm whites, deep evergreen, amber accent. Tokens describe palette + 3 density modes + radii + shadows. */ :root { /* ── Brand neutrals (warm) ───────────────────────────────────────────── */ --ws-bg: #FAFAF7; /* page */ --ws-surface: #FFFFFF; /* cards */ --ws-sand-50: #F7F3EB; --ws-sand-100: #F5F1EA; /* warm panel */ --ws-sand-200: #EDE6D8; --ws-sand-300: #DCD2BE; --ws-line: #E8E2D4; /* hairlines on sand */ --ws-line-soft: #ECE6D8; --ws-line-strong: #C9BFA8; /* ── Ink (text) ───────────────────────────────────────────────────────── */ --ws-ink: #1A1A1A; /* primary text */ --ws-ink-2: #3A3A36; /* body, soft */ --ws-ink-3: #6B655B; /* meta, captions */ --ws-ink-4: #9A9286; /* placeholder */ /* ── Primary: deep evergreen (palette option 0) ───────────────────────── */ --ws-primary-900: #14271F; --ws-primary-800: #1E3A2F; /* base */ --ws-primary-700: #294A3D; --ws-primary-600: #355C4D; --ws-primary-500: #4A7361; --ws-primary-300: #93B0A2; --ws-primary-100: #DCE6E0; --ws-primary-50: #EEF3F0; /* ── Accent: burnt amber (CTA) ────────────────────────────────────────── */ --ws-accent-900: #6B3320; --ws-accent-800: #94462C; --ws-accent-700: #B85838; --ws-accent-600: #D97757; /* base CTA */ --ws-accent-500: #E08D70; --ws-accent-300: #EFC4B2; --ws-accent-100: #F8E3D8; --ws-accent-50: #FBEFE7; /* ── Status (subdued) ─────────────────────────────────────────────────── */ --ws-success: #2F7A4A; --ws-warning: #C58A1E; --ws-danger: #B04A3A; /* ── Radii ────────────────────────────────────────────────────────────── */ --ws-r-sm: 6px; --ws-r: 10px; --ws-r-lg: 14px; --ws-r-xl: 20px; --ws-r-pill: 999px; /* ── Shadows (very subtle) ────────────────────────────────────────────── */ --ws-sh-0: 0 0 0 0.5px rgba(20,20,20,0.06); --ws-sh-1: 0 1px 2px rgba(20,20,20,0.04), 0 0 0 0.5px rgba(20,20,20,0.06); --ws-sh-2: 0 4px 14px rgba(20,20,20,0.05), 0 1px 2px rgba(20,20,20,0.04), 0 0 0 0.5px rgba(20,20,20,0.05); --ws-sh-3: 0 18px 40px rgba(20,20,20,0.10), 0 4px 12px rgba(20,20,20,0.06); --ws-sh-hi: 0 24px 60px rgba(20,40,30,0.18); /* ── Type ─────────────────────────────────────────────────────────────── */ --ws-serif: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif; --ws-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ws-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale (desktop). Mobile downsizes via clamp() per usage. */ --ws-fs-display: clamp(48px, 6.2vw, 88px); --ws-fs-h1: clamp(40px, 5vw, 64px); --ws-fs-h2: clamp(30px, 3.6vw, 48px); --ws-fs-h3: clamp(22px, 2.2vw, 28px); --ws-fs-h4: 18px; --ws-fs-lg: 19px; --ws-fs-body: 17px; --ws-fs-sm: 15px; --ws-fs-cap: 13px; --ws-fs-eyebrow: 12px; /* Density (mutated by Tweaks) */ --ws-space-unit: 8px; --ws-section-y: clamp(72px, 9vw, 128px); --ws-container: 1240px; --ws-gutter: clamp(20px, 4vw, 48px); /* Spacing scale */ --ws-s-1: 4px; --ws-s-2: 8px; --ws-s-3: 12px; --ws-s-4: 16px; --ws-s-5: 24px; --ws-s-6: 32px; --ws-s-7: 48px; --ws-s-8: 64px; --ws-s-9: 96px; --ws-s-10: 128px; } /* Density modes — applied to */ body[data-density="compact"] { --ws-section-y: clamp(56px, 7vw, 96px); --ws-s-7: 36px; --ws-s-8: 48px; --ws-s-9: 72px; } body[data-density="comfy"] { --ws-section-y: clamp(96px, 11vw, 160px); --ws-s-7: 56px; --ws-s-8: 80px; --ws-s-9: 120px; } /* ── Base reset ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: var(--ws-bg); color: var(--ws-ink); font-family: var(--ws-sans); font-size: var(--ws-fs-body); line-height: 1.55; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ws-accent-100); color: var(--ws-accent-900); } /* ── Containers + sections ────────────────────────────────────────────── */ .ws-container { width: 100%; max-width: var(--ws-container); margin: 0 auto; padding-inline: var(--ws-gutter); } .ws-section { padding-block: var(--ws-section-y); } .ws-section--tight { padding-block: calc(var(--ws-section-y) * 0.65); } /* ── Type helpers ─────────────────────────────────────────────────────── */ .ws-serif { font-family: var(--ws-serif); font-optical-sizing: auto; font-variation-settings: "opsz" 28, "SOFT" 50; } .ws-display { font-family: var(--ws-serif); font-size: var(--ws-fs-display); line-height: 0.98; letter-spacing: -0.025em; font-weight: 360; } .ws-h1 { font-family: var(--ws-serif); font-size: var(--ws-fs-h1); line-height: 1.02; letter-spacing: -0.022em; font-weight: 380; margin: 0; } .ws-h2 { font-family: var(--ws-serif); font-size: var(--ws-fs-h2); line-height: 1.05; letter-spacing: -0.018em; font-weight: 400; margin: 0; } .ws-h3 { font-family: var(--ws-serif); font-size: var(--ws-fs-h3); line-height: 1.15; letter-spacing: -0.012em; font-weight: 420; margin: 0; } .ws-h4 { font-family: var(--ws-sans); font-size: var(--ws-fs-h4); line-height: 1.25; letter-spacing: -0.006em; font-weight: 600; margin: 0; } .ws-lead { font-size: var(--ws-fs-lg); line-height: 1.5; color: var(--ws-ink-2); } .ws-body { font-size: var(--ws-fs-body); color: var(--ws-ink-2); } .ws-sm { font-size: var(--ws-fs-sm); color: var(--ws-ink-3); } .ws-cap { font-size: var(--ws-fs-cap); color: var(--ws-ink-3); } .ws-eyebrow { font-size: var(--ws-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ws-primary-700); font-weight: 600; } /* Italic-emphasis flourish for serif headings */ .ws-serif em, .ws-h1 em, .ws-h2 em, .ws-display em { font-style: italic; font-variation-settings: "opsz" 24, "SOFT" 100; color: var(--ws-primary-800); font-weight: 320; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .ws-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: var(--ws-r-pill); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; } .ws-btn:active { transform: translateY(1px); } .ws-btn--primary { background: var(--ws-accent-600); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(217,119,87,0.28); } .ws-btn--primary:hover { background: var(--ws-accent-700); } .ws-btn--secondary { background: transparent; color: var(--ws-primary-800); box-shadow: inset 0 0 0 1.25px var(--ws-primary-800); } .ws-btn--secondary:hover { background: var(--ws-primary-800); color: #fff; } .ws-btn--dark { background: var(--ws-primary-800); color: #fff; } .ws-btn--dark:hover { background: var(--ws-primary-900); } .ws-btn--ghost { background: transparent; color: var(--ws-ink); padding-inline: 14px; } .ws-btn--ghost:hover { background: var(--ws-sand-100); } .ws-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } .ws-btn--lg { height: 60px; padding: 0 28px; font-size: 17px; } .ws-btn--block { width: 100%; justify-content: center; } /* ── Inputs ───────────────────────────────────────────────────────────── */ .ws-label { display: block; font-size: 13px; font-weight: 500; color: var(--ws-ink-3); margin-bottom: 8px; letter-spacing: 0.01em; } .ws-input, .ws-textarea, .ws-select { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ws-ink); background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-r); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .ws-input::placeholder, .ws-textarea::placeholder { color: var(--ws-ink-4); } .ws-input:focus, .ws-textarea:focus, .ws-select:focus { border-color: var(--ws-primary-700); box-shadow: 0 0 0 4px var(--ws-primary-50); } .ws-textarea { height: auto; padding: 14px 16px; resize: vertical; min-height: 100px; } /* ── Chips ────────────────────────────────────────────────────────────── */ .ws-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-r-pill); font-size: 15px; color: var(--ws-ink-2); transition: all .12s ease; cursor: pointer; user-select: none; } .ws-chip:hover { border-color: var(--ws-primary-500); color: var(--ws-ink); } .ws-chip[aria-pressed="true"] { background: var(--ws-primary-800); color: #fff; border-color: var(--ws-primary-800); } /* ── Cards ────────────────────────────────────────────────────────────── */ .ws-card { background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: var(--ws-r-lg); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ws-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--ws-sh-2); border-color: var(--ws-line-strong); } /* ── Misc ─────────────────────────────────────────────────────────────── */ .ws-divider { height: 1px; background: var(--ws-line); border: 0; margin: 0; } @keyframes ws-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ws-fade-up { animation: ws-fade-up .6s cubic-bezier(.2,.7,.2,1) both; } /* Focus ring */ :where(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--ws-primary-700); outline-offset: 2px; border-radius: 6px; } /* Scrollbar (subtle) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--ws-sand-200); border: 3px solid var(--ws-bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--ws-sand-300); }