/* ============================================================ the-bakery — theme.css (design-tokens foundation) The "Loaf & Co." system: palette + fluid type scale + spacing. This is the BASE LAYER the whole site is built on. Component styles (buttons, cards, the order-ticket) land with the real build; this file only defines tokens + a minimal base so everything stays consistent. Fonts are loaded via in the HTML (preconnect), NOT @import here — faster first paint, keeps this file portable. Families referenced by the tokens below: Fraunces (display) · Inter (body) · JetBrains Mono (numerals) ============================================================ */ :root { color-scheme: light; /* -- colour ------------------------------------------------ */ --paper: #F7F1E6; /* main background */ --paper-alt: #EFE6D3; /* image slots / 2nd surfaces */ --ink: #2B2119; /* primary text */ --ink-soft: #6B5D4F; /* secondary text, captions */ --kraft: #4A3826; /* headers, nav, brand */ --kraft-dark: #2E2116; /* hero / deepest surfaces */ --oxblood: #7A2E2E; /* THE ONE primary-CTA accent */ --oxblood-dark: #5E2222; /* CTA hover / pressed */ --oxblood-tint: #FBEDEA; /* active-pill tint fill */ --mustard: #C08A2E; /* highlights, progress */ --sage: #6E7B5C; /* success / positive */ --border: #DCCFB6; /* hairlines, dividers */ --card: #FFFDF8; /* card & ticket surface */ /* -- type: families --------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* -- type: fluid scale (mobile min -> desktop max) --------- the mockup sizes were the SMALL end; these grow with the viewport so the site reads as a full website, not a phone mockup blown up. */ --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem); /* 11 -> 13 */ --fs-body: clamp(0.9375rem, 0.90rem + 0.20vw, 1.125rem); /* 15 -> 18 */ --fs-price: clamp(1rem, 0.95rem + 0.28vw, 1.25rem); /* 16 -> 20 */ --fs-card-title: clamp(1.0625rem, 1.00rem + 0.40vw, 1.375rem); /* 17 -> 22 */ --fs-section: clamp(1.375rem, 1.18rem + 1.0vw, 2rem); /* 22 -> 32 */ --fs-hero: clamp(2rem, 1.35rem + 3.0vw, 3.75rem); /* 32 -> 60 */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.6; --tracking-eyebrow: 0.07em; /* -- spacing scale ---------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* -- shape ------------------------------------------------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 18px; --radius-pill: 999px; /* -- elevation: soft, warm-tinted shadows for a modern-app depth -- (the design pivoted from flat/paper to layered surfaces) */ --shadow-xs: 0 1px 2px rgba(43, 33, 25, 0.05); --shadow-sm: 0 1px 2px rgba(43, 33, 25, 0.05), 0 4px 10px -3px rgba(43, 33, 25, 0.08); --shadow-md: 0 6px 16px -6px rgba(43, 33, 25, 0.14), 0 10px 30px -12px rgba(43, 33, 25, 0.12); --shadow-lg: 0 14px 40px -12px rgba(43, 33, 25, 0.22); --shadow-drawer: 0 20px 40px -24px rgba(43, 33, 25, 0.35); /* -- gradients: give the flat colours some life -------------- */ --grad-oxblood: linear-gradient(180deg, #8A3636 0%, #6E2929 100%); --grad-kraft: linear-gradient(165deg, #55432E 0%, #2E2116 100%); --grad-mustard: linear-gradient(180deg, #CE9A3E 0%, #B07E28 100%); --grad-paper: linear-gradient(180deg, #FFFDF8 0%, #F7F1E6 100%); /* -- TACTILE MATERIAL SYSTEM --------------------------------- Every big surface is a physical SLAB lit from above: 1. top inner highlight 2. darker inner bottom 3. an extruded solid bottom EDGE (thickness) 4. a soft ambient shadow Slab gradients are radial (light pools top-left), and each colour has a matching edge + full shadow recipe token. */ --slab-kraft: radial-gradient(120% 140% at 15% 0%, #5A462E 0%, #3A2B1B 55%, #2E2116 100%); --slab-ox: radial-gradient(120% 130% at 25% 0%, #8F3B3B 0%, #642424 80%); --slab-mus: radial-gradient(120% 130% at 25% 0%, #D29A3E 0%, #AF7C26 80%); --slab-paper: linear-gradient(180deg, #FFFDF8 0%, #F3EBDB 100%); --edge-paper: #D9CBAE; --edge-kraft: #1C140C; --edge-ox: #4E1D1D; --edge-mus: #7E5A1B; --mat-paper: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(43, 33, 25, 0.08), 0 4px 0 var(--edge-paper), 0 16px 26px -16px rgba(43, 33, 25, 0.4); --mat-kraft: inset 0 2px 0 rgba(255, 235, 200, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 5px 0 var(--edge-kraft), 0 20px 36px -20px rgba(28, 20, 12, 0.6); --mat-ox: inset 0 2px 0 rgba(255, 220, 210, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32), 0 5px 0 var(--edge-ox), 0 20px 36px -20px rgba(94, 34, 34, 0.55); --mat-mus: inset 0 2px 0 rgba(255, 240, 200, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 5px 0 var(--edge-mus), 0 20px 36px -20px rgba(176, 126, 40, 0.5); /* springy easing for presses & lifts (upgraded below where linear() exists) */ --spring: cubic-bezier(0.2, 0.9, 0.3, 1.25); /* -- layout ------------------------------------------------ */ --container-max: 72rem; /* ~1152px */ --container-pad: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* -- product image slot: LOCK the aspect ratio so an icon stub and a real photo occupy the exact same box (zero reflow when photos swap in later). */ --img-ratio: 4 / 3; } /* real spring physics where the browser supports linear() easing */ @supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0, .35 12%, .78 24%, 1.03 38%, 1.06 46%, 1 62%, .99 74%, 1); } } /* -- minimal base (foundation only) -------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; /* sticky footer: main grows, footer sits at the bottom */ font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background-color: var(--paper); /* colour washes + a faint hand-drawn "greaseproof paper" bakery pattern (wheat / croissant / cake slice / rolling pin) + grain — so the page background reads as printed wrapping paper, never a plain colour */ background-image: radial-gradient(1300px 340px at 50% -70px, rgba(46, 33, 22, 0.18), transparent 72%), radial-gradient(1000px 620px at 85% 3%, rgba(192, 138, 46, 0.20), transparent 60%), radial-gradient(900px 560px at -6% 102%, rgba(122, 46, 46, 0.13), transparent 58%), radial-gradient(760px 720px at 12% 42%, rgba(110, 123, 92, 0.08), transparent 62%), radial-gradient(circle, rgba(74, 56, 38, 0.07) 1.5px, transparent 1.6px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%234A3826' stroke-width='1.6' stroke-linecap='round' opacity='0.045'%3E%3Cg transform='translate(38 22) rotate(8)'%3E%3Cpath d='M0 44 V10'/%3E%3Cpath d='M0 36 L-7 30 M0 36 L7 30'/%3E%3Cpath d='M0 27 L-7 21 M0 27 L7 21'/%3E%3Cpath d='M0 18 L-5 13 M0 18 L5 13'/%3E%3C/g%3E%3Cg transform='translate(152 62) rotate(-14)'%3E%3Cpath d='M-20 6 A22 22 0 0 1 20 6'/%3E%3Cpath d='M-13 3 A15 15 0 0 1 13 3'/%3E%3Cpath d='M-8 -6 L-8 4 M0 -10 L0 2 M8 -6 L8 4'/%3E%3C/g%3E%3Cg transform='translate(52 152) rotate(-6)'%3E%3Cpath d='M0 26 L13 0 L26 26 Z'/%3E%3Cpath d='M6 15 H20'/%3E%3Ccircle cx='13' cy='-4' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(162 178) rotate(20)'%3E%3Crect x='-16' y='-5' width='32' height='10' rx='5'/%3E%3Cpath d='M-16 0 H-26 M16 0 H26'/%3E%3C/g%3E%3Ccircle cx='120' cy='120' r='1.8'/%3E%3Ccircle cx='222' cy='30' r='1.8'/%3E%3Ccircle cx='20' cy='222' r='1.8'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: auto, auto, auto, auto, 24px 24px, 240px 240px, 160px 160px; background-attachment: fixed, fixed, fixed, fixed, fixed, scroll, scroll; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* typography roles — driven by the fluid scale above */ .h-hero { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0; } .h-section { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-section); line-height: var(--lh-snug); margin: 0; } .h-card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title); line-height: var(--lh-snug); margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-soft); } .price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-price); color: var(--kraft); } /* generic max-width container */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* honour reduced-motion for anything that animates later */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }