/* ============================================================ Shared design system — pizza + doughnut storefronts Clean & modern, spacious, photo-led. Type: Schibsted Grotesk (display) + Hanken Grotesk (text) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); /* ---- Color themes ----------------------------------------- Each theme overrides the same token set. Default theme is set per-brand on ; the Tweaks panel can switch it. Accents defined in oklch; whites/blacks subtly toned, low chroma. */ :root, [data-theme="warm"] { /* tomato / terracotta — pizza default */ --bg: oklch(0.984 0.008 75); --surface: oklch(0.997 0.004 75); --surface-2: oklch(0.962 0.010 70); --text: oklch(0.205 0.018 50); --muted: oklch(0.520 0.020 50); --line: oklch(0.905 0.012 65); --accent: oklch(0.620 0.170 33); --accent-2: oklch(0.560 0.150 33); --accent-ink:oklch(0.99 0 0); --accent-soft:oklch(0.945 0.040 40); } [data-theme="cream"] { /* soft strawberry pastel — doughnut default */ --bg: oklch(0.982 0.012 50); --surface: oklch(0.998 0.005 50); --surface-2: oklch(0.961 0.016 35); --text: oklch(0.235 0.020 25); --muted: oklch(0.540 0.022 25); --line: oklch(0.910 0.016 35); --accent: oklch(0.700 0.130 8); --accent-2: oklch(0.640 0.120 8); --accent-ink:oklch(0.99 0 0); --accent-soft:oklch(0.948 0.035 10); } [data-theme="ink"] { /* near-black & white, minimal accent */ --bg: oklch(0.980 0.002 250); --surface: oklch(1 0 0); --surface-2: oklch(0.958 0.003 250); --text: oklch(0.180 0.004 250); --muted: oklch(0.500 0.006 250); --line: oklch(0.905 0.004 250); --accent: oklch(0.240 0.010 250); --accent-2: oklch(0.180 0.008 250); --accent-ink:oklch(0.99 0 0); --accent-soft:oklch(0.945 0.004 250); } [data-theme="forest"] { /* fresh herb green — bright appetizing */ --bg: oklch(0.984 0.010 130); --surface: oklch(0.998 0.005 130); --surface-2: oklch(0.960 0.014 135); --text: oklch(0.215 0.020 145); --muted: oklch(0.520 0.022 145); --line: oklch(0.905 0.014 135); --accent: oklch(0.560 0.130 150); --accent-2: oklch(0.500 0.120 150); --accent-ink:oklch(0.99 0 0); --accent-soft:oklch(0.945 0.040 150); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; } /* ---- Layout primitives ------------------------------------ */ .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } .wrap-narrow { max-width: 760px; } .section { padding-block: clamp(56px, 9vw, 128px); } /* ---- Eyebrow / labels ------------------------------------- */ .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin: 0; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); display: inline-block; } .eyebrow.center::before { display: none; } .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; font-size: 12px; letter-spacing: 0.02em; } /* ---- Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding-inline: 26px; border: none; border-radius: 999px; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: 15.5px; letter-spacing: 0.01em; cursor: pointer; transition: transform .18s cubic-bezier(.3,.7,.4,1), background .18s, box-shadow .18s, opacity .18s; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 10px 26px -10px var(--accent); } .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); transform: translateY(-2px); } .btn-dark { background: var(--text); color: var(--bg); } .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px var(--text); } .btn-sm { height: 42px; padding-inline: 18px; font-size: 14px; } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* ---- Image placeholder (no real photos yet) ---------------- */ .ph { position: relative; background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, color-mix(in oklch, var(--accent) 9%, transparent) 0 2px, transparent 2px 13px); display: flex; align-items: flex-end; color: var(--muted); } .ph::after { content: attr(data-label); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); background: color-mix(in oklch, var(--surface) 84%, transparent); backdrop-filter: blur(2px); padding: 5px 9px; margin: 12px; border-radius: 6px; } .ph.center { align-items: center; justify-content: center; } .ph.center::after { margin: 0; } .ph.has-img { background-color: var(--surface-2); background-position: center; background-size: cover; } .ph-art { display: none; } .ph-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .ph.has-img::after { content: none; } /* ---- Cards / surfaces ------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; } .config-error { min-height: 100vh; display: grid; place-content: center; gap: 12px; padding: 32px; text-align: center; } .config-error p { color: var(--muted); } /* ---- Utility ---------------------------------------------- */ .stack { display: flex; flex-direction: column; } .row { display: flex; } .muted { color: var(--muted); } .tabnum { font-variant-numeric: tabular-nums; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }