/* ============================================================ OnlyPotsByNina — shared design tokens Two variations select their palette via data-variant on : data-variant="linen" → Soft Linen Studio (editorial) data-variant="clay" → Warm Clay Journal (earthy, magazine-ish) ============================================================ */ :root { /* type */ --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-sans: 'Inter Tight', 'DM Sans', -apple-system, sans-serif; --font-script: 'Caveat', cursive; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* scale (fluid) */ --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem); --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem); --step-1: clamp(1.15rem, 1.10rem + 0.25vw, 1.30rem); --step-2: clamp(1.45rem, 1.38rem + 0.35vw, 1.70rem); --step-3: clamp(1.85rem, 1.75rem + 0.5vw, 2.25rem); --step-4: clamp(2.5rem, 2.3rem + 1vw, 3.25rem); --step-5: clamp(3.5rem, 3.1rem + 2vw, 5.5rem); --step-6: clamp(5rem, 4.2rem + 4vw, 9rem); /* space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; --sp-10: 10rem; /* radii */ --r-sm: 2px; --r-md: 4px; --r-lg: 10px; --r-xl: 20px; /* motion */ --ease: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.5,0,.75,0); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms; --dur-4: 900ms; } /* ——— Linen variant (default) ——— */ :root, :root[data-variant="linen"] { --bg: #f7f2e9; /* cream linen */ --bg-alt: #ede4d3; /* warmer cream */ --bg-card: #fdfaf4; --ink: #2b2116; /* deep brown near-black */ --ink-soft: #5c4e3d; --ink-mute: #8a7d6a; --line: #d8cdb8; --accent: #8b6b4a; /* stoneware brown */ --accent-deep:#5a4430; --terracotta:#b8715a; --sage: #8b9b7e; --shadow-1: 0 1px 2px rgba(60,40,20,.05); --shadow-2: 0 8px 28px rgba(60,40,20,.08); } /* ——— Clay variant ——— */ :root[data-variant="clay"] { --bg: #1f1812; /* deep fired clay */ --bg-alt: #2b2218; --bg-card: #2f2519; --ink: #f4ead8; --ink-soft: #d4c3a6; --ink-mute: #9e8a6f; --line: #4a3a28; --accent: #d4a373; /* warm terracotta highlight */ --accent-deep:#b8814a; --terracotta:#c97b5c; --sage: #a8b088; --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 16px 40px rgba(0,0,0,.4); } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } body { margin: 0; } h1, h2, h3, h4, .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } h4 { font-size: var(--step-2); } .eyebrow { font-family: var(--font-sans); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute); font-weight: 500; } a { color: inherit; } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.6em; font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 999px; cursor: pointer; transition: all var(--dur-2) var(--ease); } .btn:hover { background: transparent; color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-soft); } .btn-quiet:hover { border-color: var(--ink); color: var(--ink); } /* hairlines */ .hair { height: 1px; background: var(--line); border: 0; } /* layout utils */ .wrap { width: min(1280px, 100% - 48px); margin-inline: auto; } .wrap-wide { width: min(1600px, 100% - 48px); margin-inline: auto; } .wrap-narrow { width: min(780px, 100% - 48px); margin-inline: auto; } /* selection */ ::selection { background: var(--accent); color: var(--bg); } /* scrollbar (subtle) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; }