/* ============================================================ INNOCULATED FARMS — Design System Gold & black, engraved-plate luxury. Fairfield, New Jersey. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Color */ --black: #0B0A07; --charcoal: #12100B; --surface: #1A1710; --surface-2: #211D14; --gold: #C9A43A; --gold-bright: #E8C766; --gold-pale: #F3E0A0; --gold-deep: #8A6D25; /* lines and ornaments only: 3.7-4.1:1 fails AA as text (audit C3) */ --ivory: #F5EFE2; --stone: #B5AB98; --line: rgba(201, 164, 58, 0.22); --line-strong: rgba(201, 164, 58, 0.45); --scrim: rgba(6, 5, 3, 0.55); /* Type */ --font-display: "Playfair Display", Georgia, serif; --font-body: "Karla", "Segoe UI", sans-serif; /* The floor for any label: 11px. Eight label styles rendered at 8-10.5px ("PER ½ LB", "BEST VALUE", the phone ribbon), audit C1. */ --text-2xs: 0.6875rem; --text-xs: 0.72rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: clamp(1.35rem, 2.2vw, 1.75rem); --text-2xl: clamp(1.9rem, 3.4vw, 2.75rem); --text-hero: clamp(2.75rem, 7vw, 5.5rem); /* Space (spacious scale) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px; /* Was clamp(96px, 11vw, 160px): ~320px of black between sections on a desktop, which is what pushed the first product so far down (audit D3). */ --section: clamp(80px, 8vw, 120px); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --t-fast: 200ms; --t-med: 350ms; --t-slow: 800ms; /* Layers */ --z-header: 100; --z-drawer: 200; --z-toast: 300; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--ivory); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select, textarea { font: inherit; } ::selection { background: var(--gold); color: var(--black); } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; } /* ---------- Utilities ---------- */ .container { width: min(1200px, 100% - clamp(40px, 8vw, 128px)); margin-inline: auto; } .container--wide { width: min(1360px, 100% - clamp(32px, 6vw, 96px)); margin-inline: auto; } .section { padding-block: var(--section); position: relative; } /* Snug variant — for glance-and-go sections that shouldn't delay the next thing on the page (e.g. home-delivery's How It Works) */ .section--snug { padding-block: clamp(44px, 6vw, 72px); } .section--tint { background: var(--charcoal); } .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } /* ------------------------------------------------------------------ EYEBROW SYMBOLS Every section label used to open with the same 36×1px gold rule — a generic dash that carried no meaning and repeated 149 times across the site. Each label now opens with a glyph that says something about the section it introduces: a quote mark over reviews, a sprout over the farm story, a dropper over the apothecary. Drawn as MASKS, not images, so the glyph inherits `background: var(--gold)` and stays on-palette if the token ever changes. Set with data-sym on the element; anything unlabelled falls back to the spore trio below, which is the brand default rather than a missing state. ------------------------------------------------------------------ */ .eyebrow::before { content: ""; width: 17px; height: 17px; flex: none; background: var(--gold); opacity: 0.85; /* Default: three drifting spores. */ -webkit-mask: var(--eyebrow-sym, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='15' r='2.4'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3Ccircle cx='19' cy='14' r='2.4'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--eyebrow-sym, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='15' r='2.4'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3Ccircle cx='19' cy='14' r='2.4'/%3E%3C/svg%3E")) center / contain no-repeat; } /* ------------------------------------------------------------------ One glyph per section label — 65 of them, generated (see the block above for how they're drawn). A label that appears on many pages keeps its glyph everywhere: "In Their Words" is the same section on all 14 product pages. Distinct labels never share one. ------------------------------------------------------------------ */ /* In Their Words — quotation marks */ .eyebrow[data-sym="quote"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 13.6c0-4.5 2.6-7.8 6.6-9l.8 2.3c-2.5.9-4 2.6-4.2 4.8h3v6.9H3.4zm10.2 0c0-4.5 2.6-7.8 6.6-9l.8 2.3c-2.5.9-4 2.6-4.2 4.8h3v6.9h-6.2z'/%3E%3C/svg%3E"); } /* Fresh from the Grow Room — a mushroom */ .eyebrow[data-sym="mushroom"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a8 8 0 0 1 16 0z'/%3E%3Cpath d='M10 11v6.5a2 2 0 0 0 4 0V11'/%3E%3C/g%3E%3C/svg%3E"); } /* From Our Farm — a barn */ .eyebrow[data-sym="barn"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-4 8 4v11z'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/g%3E%3C/svg%3E"); } /* From Our Grow Room — fruiting racks */ .eyebrow[data-sym="growroom"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3Cpath d='M7.5 6v12M16.5 6v12'/%3E%3C/g%3E%3C/svg%3E"); } /* How We Grow — humidity */ .eyebrow[data-sym="humidity"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5s5 5.6 5 9a5 5 0 0 1-10 0c0-3.4 5-9 5-9z'/%3E%3Cpath d='M9.6 13.6a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Living Collection — new growth */ .eyebrow[data-sym="leaves"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c0-5 3-8 8-8 0 5-3 8-8 8z'/%3E%3Cpath d='M12 21c0-5-3-8-8-8 0 5 3 8 8 8z'/%3E%3Cpath d='M12 21v-6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Innoculated Standard — a seal */ .eyebrow[data-sym="seal"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10' r='6'/%3E%3Cpath d='M9 15.4L8 22l4-2 4 2-1-6.6'/%3E%3C/g%3E%3C/svg%3E"); } /* Where It Began — the origin point */ .eyebrow[data-sym="origin"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='12' cy='12' r='7.4'/%3E%3Cpath d='M12 2v2.2M12 19.8V22M2 12h2.2M19.8 12H22'/%3E%3C/g%3E%3C/svg%3E"); } /* The Road Here — the winding way */ .eyebrow[data-sym="path"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21c0-4 5-4 5-8s-4-4-4-7 3-3 3-3'/%3E%3Ccircle cx='17' cy='6' r='2.4'/%3E%3Cpath d='M17 8.4V21'/%3E%3C/g%3E%3C/svg%3E"); } /* What We Believe — conviction */ .eyebrow[data-sym="heart"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4l-1.5-1.4C5.2 14.2 2 11.3 2 7.8A4.8 4.8 0 0 1 6.8 3c1.7 0 3.3.8 4.2 2.1h2C13.9 3.8 15.5 3 17.2 3A4.8 4.8 0 0 1 22 7.8c0 3.5-3.2 6.4-8.5 11.2z'/%3E%3C/g%3E%3C/svg%3E"); } /* Our Story — a quill */ .eyebrow[data-sym="quill"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c6-1 10-4 13-9 1.6-2.7 2.3-5 2.5-7-2.6.6-5 1.6-7.2 3C7.6 9.6 5.3 13.9 4 20z'/%3E%3Cpath d='M4 20l6-6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Farm in Pictures — a camera */ .eyebrow[data-sym="camera"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h3.6L8.4 6h7.2l1.8 2.5H21V19H3z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/g%3E%3C/svg%3E"); } /* The 48-Hour Standard — a stopwatch */ .eyebrow[data-sym="stopwatch"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.6' r='7.4'/%3E%3Cpath d='M12 9.6v4h3'/%3E%3Cpath d='M9.6 2.4h4.8'/%3E%3Cpath d='M12 2.4v3.8'/%3E%3C/g%3E%3C/svg%3E"); } /* From the Same Soil — a seed in ground */ .eyebrow[data-sym="soil"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h18M3 19h18'/%3E%3Cpath d='M12 10.5V4'/%3E%3Cpath d='M12 7.5c-2.6 0-4-1.6-4-3.5 2.6 0 4 1.6 4 3.5zM12 8.5c2.6 0 4-1.6 4-3.5-2.6 0-4 1.6-4 3.5z'/%3E%3C/g%3E%3C/svg%3E"); } /* Sub to Soil — the loop back to earth */ .eyebrow[data-sym="recycle"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 8.2L5 12.6l2.6 4.4h4'/%3E%3Cpath d='M12.4 3.6L9.8 8h5.2z' fill='%23000'/%3E%3Cpath d='M16.4 8.2L19 12.6l-2.6 4.4h-4'/%3E%3Cpath d='M9.6 19.4l3-3.6 3 3.6z'/%3E%3C/g%3E%3C/svg%3E"); } /* The Apothecary — a dropper bottle */ .eyebrow[data-sym="bottle"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 2.6h4.8v3.4H9.6z'/%3E%3Cpath d='M8 6h8v3.4c0 .9.3 1.4.9 2.2.8 1.1 1.1 2.3 1.1 3.6v4A1.8 1.8 0 0 1 16.2 21H7.8A1.8 1.8 0 0 1 6 19.2v-4c0-1.3.3-2.5 1.1-3.6.6-.8.9-1.3.9-2.2z'/%3E%3C/g%3E%3C/svg%3E"); } /* Transparency — look closely */ .eyebrow[data-sym="magnify"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.6'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3Cpath d='M8 10.6h5.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Published Research — a microscope */ .eyebrow[data-sym="microscope"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h9'/%3E%3Cpath d='M4 21h16'/%3E%3Cpath d='M11 18a6 6 0 0 0 6-6'/%3E%3Cpath d='M13.6 3.6l3.8 3.8-3 3-3.8-3.8z'/%3E%3Cpath d='M9.4 7.8l3 3'/%3E%3C/g%3E%3C/svg%3E"); } /* In the Kitchen — a skillet */ .eyebrow[data-sym="skillet"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='13' r='6.4'/%3E%3Cpath d='M16.4 13H22'/%3E%3C/g%3E%3C/svg%3E"); } /* Taste the Difference — a fork */ .eyebrow[data-sym="fork"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.6v6a2.4 2.4 0 0 0 4.8 0v-6'/%3E%3Cpath d='M9.4 11v10.4'/%3E%3Cpath d='M17 2.6c-1.6 1.4-2.4 3.4-2.4 5.6 0 1.6.8 2.6 2.4 2.8v10.4'/%3E%3C/g%3E%3C/svg%3E"); } /* The Difference — balance */ .eyebrow[data-sym="scale"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4V21'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M4.6 7.4h14.8'/%3E%3Cpath d='M4.6 7.4L2 13.4h5.2zM19.4 7.4L16.8 13.4H22z'/%3E%3C/g%3E%3C/svg%3E"); } /* In Every Box — an open crate */ .eyebrow[data-sym="box"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.6L12 3l9 4.6v9L12 21l-9-4.4z'/%3E%3Cpath d='M3 7.6L12 12l9-4.4M12 12v9'/%3E%3C/g%3E%3C/svg%3E"); } /* Curated Boxes — a wrapped box */ .eyebrow[data-sym="giftbox"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.4h18V21H3z'/%3E%3Cpath d='M3 9.4L5 5h14l2 4.4'/%3E%3Cpath d='M12 5v16'/%3E%3C/g%3E%3C/svg%3E"); } /* The Ritual — the daily crescent */ .eyebrow[data-sym="moon"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15.2A8.8 8.8 0 0 1 8.8 4 8.9 8.9 0 1 0 20 15.2z'/%3E%3C/g%3E%3C/svg%3E"); } /* The Ritual Ladder — rungs */ .eyebrow[data-sym="ladder"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.6V21M17 2.6V21'/%3E%3Cpath d='M7 7h10M7 12h10M7 17h10'/%3E%3C/g%3E%3C/svg%3E"); } /* The Cycle — comes around again */ .eyebrow[data-sym="cycle"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.8 3.6v5h-5'/%3E%3C/g%3E%3C/svg%3E"); } /* Built Around Your Life — your calendar */ .eyebrow[data-sym="calendar"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5.4' width='17.6' height='15.4' rx='2'/%3E%3Cpath d='M3.2 10.2h17.6'/%3E%3Cpath d='M8 2.8v4.4M16 2.8v4.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Wellness Rituals · Monthly — a month marked */ .eyebrow[data-sym="calmonth"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5.4' width='17.6' height='15.4' rx='2'/%3E%3Cpath d='M3.2 10.2h17.6'/%3E%3Cpath d='M8 2.8v4.4M16 2.8v4.4'/%3E%3Cpath d='M8.6 15.6h6.8'/%3E%3C/g%3E%3C/svg%3E"); } /* Wellness Rituals · Most Popular — trending */ .eyebrow[data-sym="trend"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.4l5.6-5.6 3.6 3.6L21 6.6'/%3E%3Cpath d='M15.4 6.6H21v5.6'/%3E%3C/g%3E%3C/svg%3E"); } /* Before You Subscribe — on repeat */ .eyebrow[data-sym="repeat"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.6h12.4a3.4 3.4 0 0 1 0 6.8H14'/%3E%3Cpath d='M7 5.4L4 8.6l3 3.2'/%3E%3Cpath d='M20 15.4H7.6'/%3E%3Cpath d='M10.4 18.6l-2.8-3.2 2.8-3.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Latest — most recent */ .eyebrow[data-sym="clocknew"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7v5.4l3.6 2'/%3E%3C/g%3E%3C/svg%3E"); } /* Visit · Order · Ask — the farm's location */ .eyebrow[data-sym="pin"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4S4.6 14.4 4.6 9.4a7.4 7.4 0 0 1 14.8 0c0 5-7.4 12-7.4 12z'/%3E%3Ccircle cx='12' cy='9.2' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Route — the road out */ .eyebrow[data-sym="road"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 3L5 21M15.6 3L19 21'/%3E%3Cpath d='M12 4.4v2.8M12 10.6v2.8M12 16.8v2.8'/%3E%3C/g%3E%3C/svg%3E"); } /* The Route Promise — the guarantee */ .eyebrow[data-sym="shieldcheck"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l7.6 2.8v5.9c0 5-3.2 8.4-7.6 10-4.4-1.6-7.6-5-7.6-10V5.4z'/%3E%3Cpath d='M8.8 11.8l2.4 2.4 4-4.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Try One of These — pointing the way */ .eyebrow[data-sym="signpost"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6V21'/%3E%3Cpath d='M4.6 6h11l2.4 2.6-2.4 2.6h-11z'/%3E%3Cpath d='M19.4 13.4h-11L6 16l2.4 2.6h11z'/%3E%3C/g%3E%3C/svg%3E"); } /* Before You Drive Over — the drive */ .eyebrow[data-sym="car"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.4v-3l1.8-4.6A2 2 0 0 1 7.7 7.4h8.6a2 2 0 0 1 1.9 1.4L20 13.4v3z'/%3E%3Cpath d='M4 13.4h16'/%3E%3Ccircle cx='7.4' cy='18' r='1.6'/%3E%3Ccircle cx='16.6' cy='18' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); } /* Where & When — place and time */ .eyebrow[data-sym="when"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='13' height='14' rx='2'/%3E%3Cpath d='M2.6 9.4h13'/%3E%3Cpath d='M6.6 2.8v4.2M11.6 2.8v4.2'/%3E%3Ccircle cx='17.6' cy='16' r='4.4'/%3E%3Cpath d='M17.6 13.6V16l1.6 1'/%3E%3C/g%3E%3C/svg%3E"); } /* Why Families Join — households */ .eyebrow[data-sym="people"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7.6' r='3.4'/%3E%3Cpath d='M2.6 20c0-3.4 2.9-5.6 6.4-5.6s6.4 2.2 6.4 5.6'/%3E%3Ccircle cx='17.6' cy='9' r='2.6'/%3E%3Cpath d='M15.6 14.8c3.2-.7 6.6.9 6.6 4.2'/%3E%3C/g%3E%3C/svg%3E"); } /* The Street Bonus — the block */ .eyebrow[data-sym="houses"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 20v-6.4l4.4-3.4 4.4 3.4V20z'/%3E%3Cpath d='M12.6 20v-8.4l4.4-3.4 4.4 3.4V20'/%3E%3Cpath d='M1.6 20h20.8'/%3E%3C/g%3E%3C/svg%3E"); } /* The Credit — money back */ .eyebrow[data-sym="coin"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4v9.2'/%3E%3Cpath d='M14.4 9.6c-.6-.8-1.5-1.2-2.6-1.2-1.5 0-2.6.8-2.6 2s1.1 1.8 2.6 1.8 2.8.6 2.8 1.9-1.2 2-2.8 2c-1.2 0-2.1-.4-2.7-1.3'/%3E%3C/g%3E%3C/svg%3E"); } /* Your Code — your referral ticket */ .eyebrow[data-sym="ticket"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4z'/%3E%3Cpath d='M9.6 6.4v10'/%3E%3C/g%3E%3C/svg%3E"); } /* Who We Supply — chefs and kitchens */ .eyebrow[data-sym="chefhat"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 20v-5.6a4.6 4.6 0 0 1-1-8.6 4.4 4.4 0 0 1 8-1.6 4.4 4.4 0 0 1 8 1.6 4.6 4.6 0 0 1-1 8.6V20z'/%3E%3Cpath d='M6.4 16.6h11.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Keep Reading — an open book */ .eyebrow[data-sym="book"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 6.2C9.8 4.9 7.6 4.2 4.8 4a1.4 1.4 0 0 0-1.6 1.4v11.4c0 .8.6 1.4 1.4 1.4 2.5.2 4.4.8 5.6 1.8h1z'/%3E%3Cpath d='M12.8 6.2C14.2 4.9 16.4 4.2 19.2 4a1.4 1.4 0 0 1 1.6 1.4v11.4c0 .8-.6 1.4-1.4 1.4-2.5.2-4.4.8-5.6 1.8h-1z'/%3E%3C/g%3E%3C/svg%3E"); } /* Mushroom Guides — a field guide */ .eyebrow[data-sym="guidebook"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.6h12.4a1.6 1.6 0 0 1 1.6 1.6v15.2H6.6A1.6 1.6 0 0 1 5 18.8z'/%3E%3Cpath d='M5 17.2h14'/%3E%3Cpath d='M9.4 8.2a2.8 2.8 0 0 1 5.6 0z'/%3E%3Cpath d='M11.4 8.2v3.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Free Guide — yours to take */ .eyebrow[data-sym="download"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v11.2'/%3E%3Cpath d='M7.6 10.4L12 14.8l4.4-4.4'/%3E%3Cpath d='M4 18.4v1.2a1.4 1.4 0 0 0 1.4 1.4h13.2a1.4 1.4 0 0 0 1.4-1.4v-1.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Start Here — orientation */ .eyebrow[data-sym="compass"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M15.4 8.6l-1.8 5.2-5.2 1.8 1.8-5.2z'/%3E%3C/g%3E%3C/svg%3E"); } /* Begin Here — the starting flag */ .eyebrow[data-sym="flagstart"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 21V3.4'/%3E%3Cpath d='M5.6 4.4h12l-2.4 3.8 2.4 3.8h-12'/%3E%3C/g%3E%3C/svg%3E"); } /* Keep Going — onward */ .eyebrow[data-sym="chevrons"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 6l6 6-6 6'/%3E%3Cpath d='M13.6 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E"); } /* Onboarding — step by step */ .eyebrow[data-sym="checklist"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 6.4H21M9.4 12H21M9.4 17.6H21'/%3E%3Cpath d='M3 6.2l1.6 1.6L7.4 5'/%3E%3Cpath d='M3 11.8l1.6 1.6L7.4 10.6'/%3E%3Cpath d='M3 17.4L4.6 19l2.8-2.8'/%3E%3C/g%3E%3C/svg%3E"); } /* Before You Buy — the honest questions */ .eyebrow[data-sym="ask"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 8.6a3.4 3.4 0 1 1 4.6 3.2c-1 .4-1.2 1.2-1.2 2v.8'/%3E%3Ccircle cx='12' cy='19' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/g%3E%3C/svg%3E"); } /* Questions — ask us */ .eyebrow[data-sym="bubbleq"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.6a2.4 2.4 0 0 1-2.4 2.4H8.2L3.4 21V5.4A2.4 2.4 0 0 1 5.8 3h12.8A2.4 2.4 0 0 1 21 5.4z'/%3E%3Cpath d='M10.2 8.4a2.2 2.2 0 1 1 3 2.1c-.7.3-.8.8-.8 1.3'/%3E%3C/g%3E%3C/svg%3E"); } /* How It Works — the mechanism */ .eyebrow[data-sym="gears"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.6v3M12 18.4v3M2.6 12h3M18.4 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E"); } /* Before You Start — press go */ .eyebrow[data-sym="play"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10 8.4l6 3.6-6 3.6z'/%3E%3C/g%3E%3C/svg%3E"); } /* Before You Join — the way in */ .eyebrow[data-sym="door"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 21V4.4a1.4 1.4 0 0 1 1.4-1.4h10.4a1.4 1.4 0 0 1 1.4 1.4V21'/%3E%3Cpath d='M3.4 21h17.2'/%3E%3Ccircle cx='15' cy='12.4' r='1.1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); } /* The Flagship — the standard-bearer */ .eyebrow[data-sym="flag"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V3.6'/%3E%3Cpath d='M6 4.6h12.4l-2.6 4.4 2.6 4.4H6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Founding Fifty — the first cohort */ .eyebrow[data-sym="laurel"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 20.4C5 18.6 3 15.2 3 11.2 3 7.4 4.8 4.4 7.4 3c1 2.4 1 5 .4 7.4'/%3E%3Cpath d='M15.4 20.4c3.6-1.8 5.6-5.2 5.6-9.2 0-3.8-1.8-6.8-4.4-8.2-1 2.4-1 5-.4 7.4'/%3E%3Cpath d='M8.6 20.4h6.8'/%3E%3C/g%3E%3C/svg%3E"); } /* Founding Members — earned first */ .eyebrow[data-sym="medal"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14.6' r='6'/%3E%3Cpath d='M12 11.8l.9 1.9 2 .3-1.5 1.4.4 2-1.8-1-1.8 1 .4-2-1.5-1.4 2-.3z' fill='%23000' stroke='none'/%3E%3Cpath d='M8.4 8.8L6 2.8h12l-2.4 6'/%3E%3C/g%3E%3C/svg%3E"); } /* The Signature — the house hand */ .eyebrow[data-sym="signature"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.4c3.4 0 4-9.4 6.4-9.4 1.8 0 1.2 8 3.2 8 1.6 0 1.8-4.4 3.4-4.4 1.4 0 1.4 3 3 3h2'/%3E%3Cpath d='M3.4 20.4h17.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Subscribe & Save — the standing discount */ .eyebrow[data-sym="pricetag"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 2.8H21v9.6l-9.2 9.2a1.6 1.6 0 0 1-2.3 0L2.8 14a1.6 1.6 0 0 1 0-2.3z'/%3E%3Ccircle cx='17' cy='7' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); } /* The Offer — what's on the table */ .eyebrow[data-sym="gift"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 9.6h17.2V21H3.4z'/%3E%3Cpath d='M2.4 6.6h19.2v3H2.4z'/%3E%3Cpath d='M12 6.6V21'/%3E%3Cpath d='M12 6.6S11 2.6 8.6 2.6a2.4 2.4 0 0 0 0 4.8M12 6.6s1-4 3.4-4a2.4 2.4 0 0 1 0 4.8'/%3E%3C/g%3E%3C/svg%3E"); } /* Legal — the letter of it */ .eyebrow[data-sym="gavel"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 6.4l4 4'/%3E%3Cpath d='M9.6 8.4l6-6 5.6 5.6-6 6z' /%3E%3Cpath d='M11.4 12.6L3 21'/%3E%3Cpath d='M2.4 21h8.4'/%3E%3C/g%3E%3C/svg%3E"); } /* The Fine Print, Unfined — read it */ .eyebrow[data-sym="document"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.8H6.6a1.8 1.8 0 0 0-1.8 1.8v14.8a1.8 1.8 0 0 0 1.8 1.8h10.8a1.8 1.8 0 0 0 1.8-1.8V8.4z'/%3E%3Cpath d='M13.4 2.8v5.6h5.8'/%3E%3Cpath d='M8.4 13h7.2M8.4 16.6h7.2'/%3E%3C/g%3E%3C/svg%3E"); } /* The Program — how it runs */ .eyebrow[data-sym="clipboard"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.4H7.2a1.8 1.8 0 0 0-1.8 1.8v13a1.8 1.8 0 0 0 1.8 1.8h9.6a1.8 1.8 0 0 0 1.8-1.8v-13A1.8 1.8 0 0 0 16.8 4.4H15'/%3E%3Crect x='9' y='2.6' width='6' height='3.6' rx='1'/%3E%3Cpath d='M8.8 11.6h6.4M8.8 15.4h4.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Two Programs — a pair */ .eyebrow[data-sym="two"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.4' width='11' height='11' rx='1.6'/%3E%3Crect x='10' y='9.6' width='11' height='11' rx='1.6'/%3E%3C/g%3E%3C/svg%3E"); } /* Health & Benefits — what it does for you */ .eyebrow[data-sym="pulse"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12.4h4l2.2-5.6 3.6 10.4 2.4-6.2 1.8 3.2h4.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Recipes — the chef's knife */ .eyebrow[data-sym="knife"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.6L14.6 4c1.6-1.6 3.4-1 3.4 1 0 2.6-1.6 5.4-4 7.8L6.6 20z'/%3E%3Cpath d='M6.6 20l-2.4 1.2L3 18.8'/%3E%3C/g%3E%3C/svg%3E"); } /* Kitchen & Storage — keeping them right */ .eyebrow[data-sym="jar"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 8.6h10.8V19a2 2 0 0 1-2 2H8.6a2 2 0 0 1-2-2z'/%3E%3Crect x='5.6' y='4.4' width='12.8' height='4.2' rx='1.4'/%3E%3Cpath d='M9.4 12.6h5.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Comparisons — one against the other */ .eyebrow[data-sym="versus"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6h11'/%3E%3Cpath d='M10.4 5.2L13.8 8.6l-3.4 3.4'/%3E%3Cpath d='M21 15.4H10'/%3E%3Cpath d='M13.6 12l-3.4 3.4 3.4 3.4'/%3E%3C/g%3E%3C/svg%3E"); } /* The Science — the compounds */ .eyebrow[data-sym="molecule"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.4' r='2.6'/%3E%3Ccircle cx='5.4' cy='17' r='2.6'/%3E%3Ccircle cx='18.6' cy='17' r='2.6'/%3E%3Cpath d='M10.6 7.6L7 14.6M13.4 7.6l3.6 7M8 17h8'/%3E%3C/g%3E%3C/svg%3E"); } /* Growing Guides — how it's raised */ .eyebrow[data-sym="wateringcan"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.4h9.4V19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15.4 13.2L21 9.4v8'/%3E%3Cpath d='M8.4 10.4V8a2.6 2.6 0 0 1 5.2 0v2.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Common Questions — the recurring ones */ .eyebrow[data-sym="faqlist"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 6.4h9M3.6 12h9M3.6 17.6h6'/%3E%3Cpath d='M16.4 8.2a2.4 2.4 0 1 1 3.2 2.3c-.7.3-.9.9-.9 1.5'/%3E%3Ccircle cx='18.7' cy='15.4' r='1.1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); } /* Farm Journal — notes from Fairfield */ .eyebrow[data-sym="notebook"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3h12a1.4 1.4 0 0 1 1.4 1.4v15.2A1.4 1.4 0 0 1 18.4 21h-12A2.4 2.4 0 0 1 4 18.6V5.4A2.4 2.4 0 0 1 6.4 3z'/%3E%3Cpath d='M4 17h15.8'/%3E%3Cpath d='M8.6 7.4h6.8M8.6 11h4.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Stay in Touch — the newsletter */ .eyebrow[data-sym="envelope"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2'/%3E%3Cpath d='M3.4 6.6L12 13l8.6-6.4'/%3E%3C/g%3E%3C/svg%3E"); } /* Earning Spores — drifting spores (also the fallback for any label with no data-sym of its own) */ .eyebrow[data-sym="spores"] { --eyebrow-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='15' r='2.4'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3Ccircle cx='19' cy='14' r='2.4'/%3E%3C/svg%3E"); } .h-display { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: 0.005em; margin-top: var(--sp-3); text-wrap: balance; } .h-display em { font-style: italic; font-weight: 500; } .lede { color: var(--stone); font-size: var(--text-lg); font-weight: 300; line-height: 1.7; max-width: 58ch; margin-top: var(--sp-3); } .section-head { max-width: 720px; } .section-head--center { margin-inline: auto; text-align: center; } /* Centered section heads used to flank the label with a rule on BOTH sides. The glyph now carries the meaning, and one glyph reads better than a symbol sandwiched between two dashes, so the trailing rule is gone and ::before simply inherits the symbol from .eyebrow above. */ .section-head--center .eyebrow::after { content: none; } .section-head--center .lede { margin-inline: auto; } /* Gilded text sheen */ /* Gilded text: a highlight sweeps across the letterforms via a gradient clipped to the glyphs. The ramp used to END on --gold-deep (#8A6D25) at both 0% and 100%. That tone is only ~4:1 against the near-black page, and because the sheen animates, those dark endpoints travel across the word — so whichever letter they were sitting on looked like it was fading out or cut off, most visibly the leading "g" of "gold" and the "I" of INNOCULATED. The sweep is unchanged in shape; the ramp now simply never drops below --gold (~8.4:1), so the highlight still reads as light moving over gold leaf without any letter dimming toward the background. */ .gilt { background: linear-gradient(105deg, var(--gold) 0%, var(--gold-bright) 25%, var(--gold-pale) 50%, var(--gold-bright) 75%, var(--gold) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; /* One sweep on load, then still (audit E1). It used to loop every 8s on every page, repainting the wordmark and headline for as long as the tab was open, one of nine things moving at once on the homepage. */ animation: gilt-sheen 3.2s var(--ease-out) 500ms 1 both; } @keyframes gilt-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 34px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); cursor: pointer; white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex: none; } .btn--gold { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold) 100%); color: var(--black); } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(201, 164, 58, 0.55); } .btn--gold:active { transform: translateY(0); } /* A pressed state that shows on touch, where there is no hover (audit E2). */ .btn:active, .add-btn:active, .filter-btn:active, .qty button:active:not(:disabled), .cart-qty button:active:not(:disabled) { filter: brightness(0.92); } .btn--ghost { border: 1px solid var(--line-strong); color: var(--gold-bright); background: transparent; } .btn--ghost:hover { border-color: var(--gold-bright); background: rgba(201, 164, 58, 0.08); transform: translateY(-2px); } .link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); } .link-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); } .link-arrow:hover svg { transform: translateX(6px); } /* ============================================================ HEADER ============================================================ */ .header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); transition: background-color var(--t-med) ease, border-color var(--t-med) ease, backdrop-filter var(--t-med) ease; border-bottom: 1px solid transparent; } .header.is-scrolled { background: rgba(11, 10, 7, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 76px; } .wordmark { display: flex; flex-direction: column; line-height: 1; gap: 4px; padding: 8px 0; } .wordmark-main { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.14em; color: var(--ivory); } .wordmark-main .gilt { animation: none; } .wordmark-sub { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.52em; text-transform: uppercase; color: var(--gold); } .nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); } .nav a:not(.btn) { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); transition: color var(--t-fast) ease; } .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 8px; width: 100%; height: 1px; background: var(--gold-bright); transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out); } .nav a:not(.btn):hover { color: var(--ivory); } .nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; } .nav a[aria-current="page"] { color: var(--gold-bright); } .header-actions { display: flex; align-items: center; gap: var(--sp-2); } .cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-bright); transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); } .cart-btn:hover { border-color: var(--gold-bright); background: rgba(201, 164, 58, 0.08); transform: translateY(-2px); } .cart-btn svg { width: 20px; height: 20px; } .cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--gold); color: var(--black); font-size: var(--text-2xs); font-weight: 700; border-radius: 999px; opacity: 0; transform: scale(0.5); transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out); } .cart-count.has-items { opacity: 1; transform: scale(1); } .cart-count.is-bumped { animation: cart-bump 420ms var(--ease-out); } /* "Added ✓" laid over an add button for a moment after a click (audit B2). */ .snipcart-add-item.is-added { position: relative; color: transparent !important; } .snipcart-add-item.is-added > * { visibility: hidden; } .snipcart-add-item.is-added::after { content: "Added \2713"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--added-ink, currentColor); visibility: visible; } @keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cart-count.is-bumped { animation: none; } } /* Mobile nav */ .nav-toggle { display: none; width: 48px; height: 48px; place-items: center; color: var(--gold-bright); } .nav-toggle svg { width: 26px; height: 26px; } .nav-toggle .icon-close { display: none; } @media (max-width: 1024px) { .nav-toggle { display: grid; } .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 10px; background: rgba(9, 8, 5, 0.97); /* No backdrop-filter: the panel is 97% opaque so the blur was imperceptible, but it forced a full-viewport blur to composite on every open — stacked under the scrolled header's own blur, since this sits at z-index:-1 behind it. will-change replaces the one USEFUL side effect that removing the blur cost us: backdrop-filter promotes an element to its own compositing layer. Without a layer, fading a full-screen panel repaints on the main thread each frame and the animation lands in two or three visible steps. This keeps the layer (and the stacking context z-index:-1 depends on) at a fraction of the cost. */ will-change: opacity; opacity: 0; visibility: hidden; /* The PANEL lands fast (120ms) while the links keep their staggered entrance below. Previously both faded over 350ms together, so for ~300ms you saw nav text floating over fully legible page content — which read as the menu being stuck half-drawn. Invisible at the top of the page (uniform dark hero behind) and obvious once scrolled (headings and prices showing through). Fade the backdrop first and the see-through window disappears. */ transition: opacity 120ms ease, visibility 120ms ease; } /* While the drawer covers the screen there is nothing meaningful left for the header to blur — drop it so only one layer composites. transition:none is the important half. .header animates backdrop-filter over 350ms, so without this the blur INTERPOLATES down to zero — i.e. the header keeps re-blurring its backdrop every single frame for the whole duration of the drawer animation, on top of the drawer's own repaint. That frame starvation is what made the menu arrive in two or three visible jumps. Snap it off instead. */ body.nav-open .header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; } .nav a:not(.btn) { font-size: 1.05rem; min-height: 56px; } /* Snappier stagger: the last link used to settle ~920ms after the tap, which felt sluggish once the backdrop stopped hiding it. */ /* :not(.btn) is required — the base .nav a:not(.btn) rule above has higher specificity and its `transition: color` shorthand was wiping this one out. The links therefore SNAPPED to full opacity instantly while the backdrop was still fading, which is what made the menu look half-drawn. The stagger below never fired either. */ .nav a:not(.btn) { opacity: 0; transform: translateY(14px); transition: color var(--t-fast) ease, opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } body.nav-open .nav { opacity: 1; visibility: visible; } body.nav-open .nav a:not(.btn) { opacity: 1; transform: none; } body.nav-open .nav a:not(.btn):nth-child(1) { transition-delay: 40ms; } body.nav-open .nav a:not(.btn):nth-child(2) { transition-delay: 80ms; } body.nav-open .nav a:not(.btn):nth-child(3) { transition-delay: 120ms; } body.nav-open .nav a:not(.btn):nth-child(4) { transition-delay: 160ms; } body.nav-open .nav a:not(.btn):nth-child(5) { transition-delay: 200ms; } body.nav-open .nav a:not(.btn):nth-child(6) { transition-delay: 240ms; } body.nav-open .nav a:not(.btn):nth-child(7) { transition-delay: 280ms; } body.nav-open .nav-toggle .icon-open { display: none; } body.nav-open .nav-toggle .icon-close { display: block; } body.nav-open { overflow: hidden; } body.nav-open .header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100dvh; display: grid; place-items: center; text-align: center; overflow: hidden; padding-block: 140px 120px; isolation: isolate; } .hero--sub { min-height: 72dvh; padding-block: 160px 100px; } .hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 60% at 50% 0%, #1c1810 0%, transparent 60%), radial-gradient(70% 50% at 80% 100%, #171307 0%, transparent 55%), var(--black); } /* Homepage hero still (audit D2). Below the mycelium lines and glows, above the flat .hero-bg. */ .home-hero-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .home-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0.34; -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 88%); mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 88%); } .home-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 7, 0.55) 0%, rgba(11, 10, 7, 0.25) 45%, var(--black) 100%); } @media (max-width: 720px) { .home-hero-photo img { opacity: 0.26; } } .hero-mycelium { position: absolute; inset: -5% -10%; z-index: -1; width: 120%; height: 110%; color: var(--gold); opacity: 0.14; will-change: transform; } .hero-glow { position: absolute; z-index: -1; width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; border-radius: 50%; filter: blur(90px); opacity: 0.16; background: radial-gradient(circle, var(--gold) 0%, transparent 65%); animation: glow-drift 16s ease-in-out infinite alternate; } .hero-glow--a { top: -12%; left: -8%; } .hero-glow--b { bottom: -18%; right: -10%; animation-delay: -8s; } @keyframes glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.15); } } /* Gold dust */ .dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .dust span { position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); opacity: 0; animation: dust-rise 14s linear infinite; } .dust span:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 15s; } .dust span:nth-child(2) { left: 21%; animation-delay: 3s; width: 3px; height: 3px; } .dust span:nth-child(3) { left: 34%; animation-delay: 7s; animation-duration: 18s; } .dust span:nth-child(4) { left: 47%; animation-delay: 1.5s; width: 2px; height: 2px; } .dust span:nth-child(5) { left: 58%; animation-delay: 9s; } .dust span:nth-child(6) { left: 69%; animation-delay: 5s; animation-duration: 17s; width: 3px; height: 3px; } .dust span:nth-child(7) { left: 81%; animation-delay: 11s; } .dust span:nth-child(8) { left: 92%; animation-delay: 2.5s; animation-duration: 20s; width: 2px; height: 2px; } @keyframes dust-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: 0.7; } 60% { opacity: 0.35; } 100% { transform: translateY(-105vh) translateX(4vw); opacity: 0; } } .hero-inner { position: relative; max-width: 900px; } .hero-kicker { display: inline-flex; align-items: center; gap: 16px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--stone); } .hero-kicker::before, .hero-kicker::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .hero-kicker::after { background: linear-gradient(90deg, var(--gold), transparent); } .hero-title { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 600; line-height: 1.06; /* Display type this large wants tightening, not opening (audit E6). */ letter-spacing: -0.02em; margin-top: var(--sp-3); text-wrap: balance; } .hero-title em { font-style: italic; font-weight: 500; } .hero-lede { color: var(--stone); font-size: var(--text-lg); font-weight: 300; max-width: 54ch; margin: var(--sp-4) auto 0; } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); } /* Equal-width CTA group. Buttons size to their text by default, so three different labels give three different widths — fine for two, ragged for three, and worst when they stack on a phone. A grid makes every cell the same width regardless of label length: one column stacked, three across once there's room. Labels can wrap inside a cell, hence white-space reset — the default nowrap would force the row wider than the viewport. */ .hero-ctas--stack { display: grid; grid-template-columns: minmax(0, 340px); justify-content: center; gap: var(--sp-2); } .hero-ctas--stack .btn { width: 100%; padding: 12px 20px; white-space: normal; text-align: center; } @media (min-width: 860px) { .hero-ctas--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; } } /* A door and the one line that says what is behind it (audit D1). */ .hero-door { display: grid; grid-template-rows: 1fr auto; gap: 8px; } .hero-door-note { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.04em; line-height: 1.5; } .hero-rating { justify-content: center; margin-top: var(--sp-3); } .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--stone); min-height: 44px; } .hero-scroll::after { content: ""; width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold), transparent); animation: scroll-pulse 2.4s var(--ease-out) infinite; transform-origin: top; } @keyframes scroll-pulse { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(14px); opacity: 0; } } /* Staggered hero entrance */ .hero-inner > * { opacity: 0; transform: translateY(28px); animation: hero-in 1100ms var(--ease-out) forwards; } .hero-inner > :nth-child(1) { animation-delay: 150ms; } .hero-inner > :nth-child(2) { animation-delay: 320ms; } .hero-inner > :nth-child(3) { animation-delay: 520ms; } .hero-inner > :nth-child(4) { animation-delay: 700ms; } @keyframes hero-in { to { opacity: 1; transform: none; } } /* ============================================================ TICKER ============================================================ */ .ticker { border-block: 1px solid var(--line); background: var(--charcoal); overflow: hidden; padding-block: 18px; } .ticker-track { display: flex; gap: 0; width: max-content; animation: ticker-scroll 42s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { display: inline-flex; align-items: center; gap: 28px; padding-inline: 14px 42px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .ticker-track span::after { content: ""; width: 7px; height: 7px; background: var(--gold-deep); transform: rotate(45deg); flex: none; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ PILLARS ============================================================ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--sp-6); } .pillar { background: var(--black); padding: clamp(32px, 4vw, 56px); transition: background-color var(--t-med) ease; } .pillar:hover { background: var(--surface); } .pillar-icon { width: 44px; height: 44px; color: var(--gold); margin-bottom: var(--sp-3); } .pillar-icon svg { width: 100%; height: 100%; } .pillar h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--sp-2); } .pillar p { color: var(--stone); font-size: var(--text-sm); line-height: 1.75; } @media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } } /* ============================================================ PLATES (photo placeholders — drop real inside .plate) ============================================================ */ .plate { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); border: 1px solid var(--line); padding: 12px; overflow: hidden; } .plate--wide { aspect-ratio: 16 / 10; } .plate::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201, 164, 58, 0.32); pointer-events: none; z-index: 2; } .plate-art { position: absolute; inset: 12px; display: grid; place-items: center; color: var(--gold); } .plate-art svg { width: min(48%, 190px); height: auto; stroke-width: 1.3; opacity: 0.92; transition: transform 600ms var(--ease-out); } .plate-cap { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone); } .plate-num { position: absolute; top: 26px; left: 0; right: 0; z-index: 2; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.14em; } /* Real photography drops in like this: … */ .plate-photo { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: cover; z-index: 1; } .plate:has(img.plate-photo) .plate-art, .plate:has(img.plate-photo) .plate-cap, .plate:has(img.plate-photo) .plate-num { display: none; } /* ---------- Video plates ---------- The engraved icon + "Photography Plate" caption stay put as a poster; the video crossfades over them once it has enough data to play, and plays only once scrolled into view (see main.js). A play/pause button lets a visitor override that at any time. */ .plate--video .plate-video-el { opacity: 0; transition: opacity 600ms var(--ease-out); } .plate--video.is-ready .plate-video-el { opacity: 1; } .plate--video.is-ready .plate-art, .plate--video.is-ready .plate-cap { opacity: 0; } .plate--video .plate-art, .plate--video .plate-cap { transition: opacity 600ms var(--ease-out); } /* With a poster frame the video element is shown from the start, so the visitor sees the grow room, not an icon captioned "Photography Plate" (audit D2). */ .plate--poster .plate-video-el { opacity: 1; } .plate--poster .plate-art, .plate--poster .plate-cap { opacity: 0; } .plate-video-toggle { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 1px solid rgba(245, 239, 226, 0.5); border-radius: 50%; background: rgba(11, 10, 7, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: var(--ivory); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease; } .plate--video:hover .plate-video-toggle, .plate-video-toggle:focus-visible { opacity: 1; } .plate-video-toggle:hover { border-color: var(--gold); transform: translate(-50%, -50%) scale(1.06); } .plate-video-toggle svg { width: 22px; height: 22px; } .plate-video-toggle .icon-pause { display: none; } .plate--video.is-playing .plate-video-toggle .icon-play { display: none; } .plate--video.is-playing .plate-video-toggle .icon-pause { display: block; } .plate--video.is-playing .plate-video-toggle { opacity: 0; } .plate--video.is-playing:hover .plate-video-toggle { opacity: 1; } /* ============================================================ STORY (split) ============================================================ */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } @media (max-width: 900px) { .split, .split--flip { grid-template-columns: 1fr; } } .story-body p + p { margin-top: var(--sp-3); } .story-body p { color: var(--stone); font-weight: 400; line-height: 1.8; } .story-body strong { color: var(--ivory); font-weight: 600; } .story-sig { margin-top: var(--sp-4); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--gold-bright); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--gold-bright); line-height: 1; } .stat-label { margin-top: 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); } @media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); } } /* ============================================================ VARIETY CARDS ============================================================ */ .variety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(20px, 2.5vw, 32px); margin-top: var(--sp-6); } /* All five varieties on one row once there's room — no orphan card */ @media (min-width: 1200px) { .variety-grid { grid-template-columns: repeat(5, 1fr); } } .variety-card { display: block; border: 1px solid var(--line); background: var(--charcoal); transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) ease, box-shadow var(--t-med) ease; } .variety-card:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); } .variety-card:hover .plate-art svg { transform: scale(1.07); } .variety-card .plate { border: none; aspect-ratio: 1 / 1; } .variety-body { padding: var(--sp-3); border-top: 1px solid var(--line); } .variety-body h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .variety-latin { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--gold); margin-top: 2px; } .variety-note { margin-top: 12px; font-size: var(--text-sm); color: var(--stone); line-height: 1.7; } /* ============================================================ APOTHECARY / WELLNESS ============================================================ */ .apothecary { background: radial-gradient(80% 70% at 50% 0%, rgba(201, 164, 58, 0.06) 0%, transparent 60%), var(--charcoal); border-block: 1px solid var(--line); } .apoth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(20px, 2.5vw, 32px); margin-top: var(--sp-6); } /* ============================================================ PRODUCT CARDS (shop + home wellness) ============================================================ */ .product-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--black); transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) ease, box-shadow var(--t-med) ease; } .product-card:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); } .product-card:hover .plate-art svg { transform: scale(1.07); } .product-card .plate { border: none; } .product-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: var(--sp-3); border-top: 1px solid var(--line); } .product-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; } .product-latin { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--gold); } .product-desc { font-size: var(--text-sm); color: var(--stone); line-height: 1.7; flex: 1; } .product-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); } .product-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; } .product-unit { display: block; font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-top: 2px; } .add-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--line-strong); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; } .add-btn svg { width: 15px; height: 15px; } .add-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--black); } /* ============================================================ FEATURE BAND (Chef's Box) ============================================================ */ .feature-band { border: 1px solid var(--line); background: radial-gradient(100% 120% at 100% 0%, rgba(201, 164, 58, 0.08) 0%, transparent 55%), var(--surface); padding: clamp(36px, 5vw, 80px); } .feature-list { margin-top: var(--sp-3); display: grid; gap: 14px; } .feature-list li { list-style: none; display: flex; gap: 14px; align-items: baseline; color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } .feature-list li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg) translateY(-1px); } .feature-band .product-price { font-size: var(--text-2xl); } .feature-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); } /* ============================================================ SOIL TEASER / EARTH BAND ============================================================ */ .earth-band { position: relative; border-block: 1px solid var(--line); background: radial-gradient(90% 100% at 0% 100%, rgba(201, 164, 58, 0.07) 0%, transparent 55%), var(--charcoal); overflow: hidden; } /* ============================================================ SHOP PAGE ============================================================ */ /* Unboxed on purpose: a bordered line in the spot where a hero button usually sits read as a button that did nothing (audit D12). */ .shop-note { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--sp-4); padding: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .shop-note svg { width: 16px; height: 16px; color: var(--gold); flex: none; } /* Shop product photos open the product page, like the homepage tiles do (audit D12). Mouse-only: the name link beside it is the keyboard route. */ .plate-link { display: block; } .plate-link:hover .plate-photo { transform: scale(1.02); } .plate-link .plate-photo { transition: transform var(--t-med) var(--ease-out); } .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-5); } .fulfill-note { margin-top: 14px; color: var(--stone); font-size: var(--text-sm); } .fulfill-note strong { color: var(--gold); } .filter-btn { min-height: 46px; padding: 0 24px; border: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); transition: all var(--t-fast) ease; } .filter-btn:hover { color: var(--ivory); border-color: var(--line-strong); } .filter-btn.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 2.5vw, 32px); margin-top: var(--sp-5); } .shop-grid .product-card.is-hidden { display: none; } .shop-section-label { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-3); } .shop-section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .shop-section-label h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; white-space: nowrap; } /* ============================================================ CART DRAWER (demo mode until Snipcart key is added) ============================================================ */ .cart-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--t-med) ease, visibility var(--t-med) ease; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--charcoal); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 450ms var(--ease-out); } body.cart-open .cart-drawer { transform: translateX(0); } body.cart-open .cart-backdrop { opacity: 1; visibility: visible; } body.cart-open { overflow: hidden; } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); border-bottom: 1px solid var(--line); } .cart-head h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; } .cart-close { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--stone); transition: color var(--t-fast) ease, border-color var(--t-fast) ease; } .cart-close:hover { color: var(--ivory); border-color: var(--line-strong); } .cart-close svg { width: 18px; height: 18px; } /* Items and notes scroll as one; only .cart-foot is pinned (audit B1). */ .cart-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .cart-items { padding: var(--sp-3) var(--sp-3) var(--sp-2); display: grid; gap: var(--sp-2); align-content: start; } .cart-notes { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: 12px; } .cart-notes .pickup-nudge, .cart-notes .ship-progress { margin-bottom: 0; } .cart-notes .guarantee { margin-top: 4px; justify-content: center; } .cart-notes .cart-order-alt { margin-top: 0; } .cart-guide-note { color: var(--stone); font-size: var(--text-sm); line-height: 1.55; } .cart-guide-note a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } .cart-empty { text-align: center; color: var(--stone); padding-block: var(--sp-5); font-weight: 400; } .cart-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--sp-3); } .cart-empty-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); color: var(--gold-bright); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .cart-empty-links a:hover { border-color: var(--gold); background: rgba(201, 164, 58, 0.08); } .cart-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); color: var(--stone); font-size: var(--text-sm); } .cart-undo button { min-height: 44px; padding: 0 14px; color: var(--gold-bright); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; } .cart-empty svg { width: 44px; height: 44px; margin: 0 auto var(--sp-2); color: var(--gold-deep); } .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-2); padding: var(--sp-2); border: 1px solid var(--line); background: var(--black); } .cart-item-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); } .cart-item-option { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .cart-item-price { color: var(--gold-bright); font-variant-numeric: tabular-nums; font-weight: 600; align-self: center; } .cart-qty { display: inline-flex; align-items: center; gap: 4px; } .cart-qty button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--stone); font-size: 1rem; transition: all var(--t-fast) ease; } .cart-qty button:hover:not(:disabled) { color: var(--black); background: var(--gold); border-color: var(--gold); } .cart-qty button:disabled { opacity: 0.35; cursor: default; } .cart-qty output { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } .cart-remove { justify-self: end; align-self: center; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); min-height: 44px; padding-inline: 8px; transition: color var(--t-fast) ease; } .cart-remove:hover { color: #E5786D; } .cart-foot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--line); display: grid; gap: 12px; background: var(--charcoal); } .cart-foot.is-empty .cart-subtotal { display: none; } .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; } .cart-subtotal span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); } .cart-subtotal strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--gold-bright); font-variant-numeric: tabular-nums; } .cart-fulfillment { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); margin: 0; min-width: 0; } .cart-fulfillment legend { float: left; width: 100%; margin-bottom: 2px; color: var(--ivory); font-size: var(--text-sm); font-weight: 650; } .cart-fulfillment.is-invalid { border-color: #E8B45B; } /* One row per way the order can reach them (audit B3). */ .ful-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); background: var(--black); cursor: pointer; transition: border-color var(--t-fast) ease; } .ful-row:hover { border-color: var(--line-strong); } .ful-row:has(input:checked) { border-color: var(--gold); background: rgba(201, 164, 58, 0.08); } .ful-row:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; } .ful-row input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold); } .ful-text { display: grid; gap: 2px; line-height: 1.3; } .ful-text strong { color: var(--ivory); font-size: var(--text-sm); font-weight: 600; } .ful-text small { color: var(--stone); font-size: 0.78rem; } .ful-row.is-disabled { cursor: not-allowed; } .ful-row.is-disabled strong { color: var(--stone); } .ful-row.is-disabled .ful-text { opacity: 0.7; } /* Short phones (iPhone SE and similar): give the basket itself more room. */ @media (max-height: 760px) { .cart-head { padding-block: 12px; } .cart-foot { gap: 10px; padding-top: 12px; padding-bottom: 14px; } .cart-fulfillment { padding: 10px; gap: 6px; } .ful-row { min-height: 44px; padding: 5px 12px; } .ful-text small { font-size: 0.72rem; } } .cart-fulfillment > label:first-child { color: var(--ivory); font-size: var(--text-sm); font-weight: 650; } .cart-fulfillment select, .cart-fulfillment input:not([type="radio"]) { width: 100%; border: 1px solid var(--line); background: var(--black); color: var(--ivory); padding: 11px 12px; font: inherit; } .cart-postal { display: grid; gap: 6px; color: var(--stone); font-size: var(--text-xs); } .cart-postal input.is-invalid { border-color: #E8B45B; } /* The hidden attribute must win over any component display rule (.cart-savings, .pickup-nudge, .cart-fulfillment, .cart-postal all set display and were showing while hidden). */ [hidden] { display: none !important; } .cart-fulfillment-note, .cart-checkout-status { margin: 0; color: var(--stone); font-size: 0.78rem; line-height: 1.5; } .cart-fulfillment-note:empty, .cart-checkout-status:empty { display: none; } .cart-checkout-status:not(:empty) { color: #E8B45B; } .cart-foot [data-cart-checkout]:disabled { cursor: wait; opacity: 0.72; } .cart-demo-note { font-size: 0.78rem; color: var(--stone); line-height: 1.6; } .cart-demo-note a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } /* Customer quote inside the origin story (Task 2.9). */ .story-quote { margin: var(--sp-3) 0 0; padding-left: var(--sp-2); border-left: 2px solid var(--gold); } .story-quote p { margin: 0; color: var(--ivory); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.55; } .story-quote footer { margin-top: 8px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; } /* The one documentable line salvaged from the deleted #proof section. */ .batch-line { margin-top: 10px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.04em; } /* Signup-not-connected notice (migration window). Amber, not red: the submission failed to go anywhere, but the visitor did nothing wrong. */ .signup-unwired, .form-unwired { display: block; margin-top: 12px; padding: 10px 12px; border: 1px solid #C9862E; border-left: 3px solid #E8A33D; background: rgba(201, 134, 46, 0.12); color: #F0C98A; font-size: 0.85rem; line-height: 1.55; } .signup-unwired a, .form-unwired a { color: #F5DFAE; text-decoration: underline; text-underline-offset: 3px; } /* Placeholder-config guard banner. Never renders on localhost. */ .config-guard { position: relative; z-index: 9999; padding: 12px 16px; background: #8C1D1D; color: #FFF1F1; font-size: 0.85rem; font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: 0.02em; } /* Order-by-text channel in the cart drawer (migration window). */ .cart-order-alt { font-size: 0.78rem; color: var(--stone); line-height: 1.6; margin-top: 6px; text-align: center; } .cart-order-alt a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; left: 50%; bottom: 32px; z-index: var(--z-toast); transform: translate(-50%, 20px); display: flex; align-items: center; gap: 12px; max-width: min(480px, calc(100vw - 40px)); padding: 16px 24px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ivory); font-size: var(--text-sm); opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility var(--t-med); } .toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* The open cart already shows what was added; a toast there only covers the drawer's own links (audit B1). */ body.cart-open .toast { opacity: 0; visibility: hidden; } .toast svg { width: 18px; height: 18px; color: var(--gold-bright); flex: none; } /* ============================================================ SUB TO SOIL PAGE ============================================================ */ .cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-6); text-align: center; } .cycle-node { position: relative; padding: var(--sp-3) var(--sp-2); } .cycle-node:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: calc(-1 * var(--sp-2) / 2 - 12px); width: 24px; height: 1px; background: var(--gold-deep); } .cycle-icon { width: 64px; height: 64px; margin: 0 auto var(--sp-2); display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); } .cycle-icon svg { width: 28px; height: 28px; } .cycle-node h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; } .cycle-node p { font-size: 0.8rem; color: var(--stone); margin-top: 6px; line-height: 1.6; } @media (max-width: 820px) { .cycle { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-2); } .cycle-node:not(:last-child)::after { display: none; } } .steps { margin-top: var(--sp-6); display: grid; gap: 0; } .step { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-4); padding-block: var(--sp-4); border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step-num { font-family: var(--font-display); font-style: italic; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--gold); line-height: 1; } .step h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; } .step p { color: var(--stone); font-weight: 400; margin-top: 10px; max-width: 60ch; line-height: 1.75; } @media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: var(--sp-2); } } /* Product page merchandising — quick-fact chips, per-unit note, sensory profile meters, purchase-option cards (build_products.py) */ .pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .pdp-chips span { padding: 6px 12px; border: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } .pdp-per { margin-top: 4px; font-size: var(--text-sm); color: var(--stone); } .pdp-opts { margin-top: var(--sp-3); } .pdp-profile { margin-top: var(--sp-3); border: 1px solid var(--line); padding: 16px 18px; } .pdp-profile-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; } .pdp-meter { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; align-items: center; gap: 12px; padding-block: 5px; font-size: var(--text-sm); color: var(--ivory); } .pdp-meter-track { display: block; height: 4px; background: var(--line); overflow: hidden; } .pdp-meter-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); } .pdp-meter-score { font-size: var(--text-xs); color: var(--stone); font-variant-numeric: tabular-nums; } /* Homepage story teaser on a phone. The block is a TEASER now — the full narrative lives on our-story.html — so it shouldn't spend half a screen on a 4:5 plate. The film is still the point, just framed landscape, and the stats pull up tight beneath it instead of sitting under 96px of gap. */ @media (max-width: 640px) { #story .plate { aspect-ratio: 5 / 4; } #story .stats { margin-top: var(--sp-4); padding-top: var(--sp-3); } #story .story-beats { line-height: 1.7; } } /* Secondary cross-sell line under a hero's chips — quieter than a .shop-note chip, for "looking for the other thing?" pointers. */ .hero-alt { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--stone); } .hero-alt a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* Wellness Rituals — apothecary cards on a phone. Six products × (plate + name + latin + description + two buy rows) ran to 6+ screens. The plate shrinks, the latin name and prose description step aside, and the two buy rows tighten — everything needed to choose and buy survives, at roughly half the height. */ @media (max-width: 640px) { #apothecary .product-card .plate { aspect-ratio: 16 / 10; } #apothecary .product-latin, #apothecary .product-desc { display: none; } #apothecary .product-name { font-size: var(--text-lg); } #apothecary .apo-row { padding: 10px 12px; gap: 6px 10px; } #apothecary .section-head .lede { font-size: var(--text-sm); } /* The plan cards ARE the offer, so they only get a light trim: a wider crop on the photo, which is the single tallest element in each card. Copy, price, feature list and CTA all stay. */ #plans .plan-media { aspect-ratio: 21 / 10; } } /* Our Story — gallery of photography plates (our-story.html). Placeholder plates show their engraved art until a real photo is dropped in as .plate-photo (same rule as everywhere: :has hides it). */ .story-gallery { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } @media (max-width: 900px) { .story-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } } @media (max-width: 560px) { .story-gallery { grid-template-columns: 1fr; } } /* How-It-Works modal (home-delivery) — the four route steps as a compact 2×2 inside the dialog, driven by body.hiw-open. Replaced the old in-flow section (and its .steps--rail variant). */ body.hiw-open .rate-overlay.hiw-overlay { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } body.hiw-open .hiw-dialog { transform: translateY(0); } .hiw-dialog .rate-title em { color: var(--gold); } .hiw-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-2); margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); text-align: left; } /* Undo the base editorial .step layout inside the dialog */ .hiw-steps .step { grid-template-columns: 1fr; gap: 0; padding-block: 0; border-top: 0; } .hiw-steps .step:last-child { border-bottom: 0; } .hiw-steps .step-num { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--gold); line-height: 1; } .hiw-steps h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; margin-top: 8px; } .hiw-steps .step p:not(.step-num) { margin-top: 4px; font-size: var(--text-sm); line-height: 1.55; color: var(--stone); font-weight: 400; } .hiw-actions { margin-top: var(--sp-3); } .hiw-actions .btn { width: 100%; justify-content: center; } @media (max-width: 420px) { .hiw-steps { grid-template-columns: 1fr; gap: var(--sp-2); } } /* ---------- Promise marks ---------- The lighter cousin of .benefit-grid (home-delivery): engraved gold emblems instead of boxed cards. Half the height on a phone, and the ring breathes on hover so the band doesn't read as static rectangles. */ .promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4) var(--sp-3); margin-top: var(--sp-5); } .promise-grid--trio { grid-template-columns: repeat(3, 1fr); } .promise { text-align: center; } .promise-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--sp-2); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); transition: color var(--t-med) ease, border-color var(--t-med) ease, transform var(--t-med) var(--ease-out); } /* The glow that wakes the mark up */ .promise-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 199, 102, 0.16) 0%, transparent 68%); opacity: 0; transition: opacity var(--t-med) ease; pointer-events: none; } .promise:hover .promise-icon { color: var(--gold-bright); border-color: var(--gold); transform: translateY(-3px); } .promise:hover .promise-icon::after { opacity: 1; } .promise-icon svg { width: 25px; height: 25px; } .promise h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--ivory); } .promise p { font-size: var(--text-sm); color: var(--stone); margin-top: 6px; line-height: 1.6; max-width: 30ch; margin-inline: auto; } @media (max-width: 720px) { .promise-grid, .promise-grid--trio { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-2); } /* Span the final card ONLY when it would otherwise sit alone — i.e. when the count is odd. The old rule spanned it unconditionally, so Sub to Soil's SIX cards rendered as 2, 2, 1, then one stretched full width: the fifth was orphaned by the sixth being pulled out of its row. :nth-child(odd) is the parity test. Home Delivery has seven and still spans correctly. */ .promise-grid--trio .promise:nth-child(odd):last-child { grid-column: 1 / -1; } .promise-icon { width: 46px; height: 46px; margin-bottom: 10px; } .promise-icon svg { width: 21px; height: 21px; } .promise p { font-size: 0.8rem; line-height: 1.5; } } @media (prefers-reduced-motion: reduce) { .promise:hover .promise-icon { transform: none; } } .benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--sp-6); } .benefit { background: var(--black); padding: var(--sp-4); transition: background-color var(--t-med) ease; } .benefit:hover { background: var(--surface); } .benefit svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: var(--sp-2); } .benefit h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; } .benefit p { font-size: var(--text-sm); color: var(--stone); margin-top: 8px; line-height: 1.7; } /* ---------- Forms ---------- */ .form-panel { border: 1px solid var(--line); background: var(--charcoal); padding: clamp(28px, 4vw, 56px); margin-top: var(--sp-5); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .form-grid .form-field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .form-field { display: grid; gap: 8px; } .form-field label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .form-field label .req { color: var(--gold-bright); } .form-field input, .form-field select, .form-field textarea { min-height: 52px; padding: 12px 16px; background: var(--black); border: 1px solid var(--line); color: var(--ivory); transition: border-color var(--t-fast) ease; border-radius: 0; width: 100%; } .form-field textarea { min-height: 130px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); } .form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A43A' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .form-error { font-size: 0.78rem; color: #E5786D; display: none; } .form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select { border-color: #A34438; } .form-field.has-error .form-error { display: block; } .form-success { display: none; text-align: center; padding: var(--sp-5) var(--sp-3); } .form-success.is-visible { display: block; } .form-success svg { width: 52px; height: 52px; color: var(--gold-bright); margin: 0 auto var(--sp-3); } .form-success h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; } .form-success p { color: var(--stone); margin-top: var(--sp-2); max-width: 46ch; margin-inline: auto; } /* ---------- FAQ ---------- */ .faq { margin-top: var(--sp-5); border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; transition: color var(--t-fast) ease; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--gold-bright); } .faq summary::after { content: "+"; font-family: var(--font-body); font-size: 1.5rem; font-weight: 300; color: var(--gold); transition: transform var(--t-med) var(--ease-out); flex: none; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 4px var(--sp-3); color: var(--stone); font-weight: 400; max-width: 68ch; line-height: 1.75; } /* ============================================================ CONTACT + FOOTER ============================================================ */ .contact-band { border-top: 1px solid var(--line); } .contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); } .contact-item { display: flex; gap: var(--sp-2); align-items: flex-start; } .contact-item svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 4px; } .contact-item strong { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-bottom: 4px; } .contact-item a:hover { color: var(--gold-bright); } .footer { border-top: 1px solid var(--line); background: var(--charcoal); padding-block: var(--sp-5) var(--sp-4); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-4); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } } .footer-tag { color: var(--stone); font-weight: 400; font-size: var(--text-sm); max-width: 34ch; margin-top: var(--sp-2); line-height: 1.7; } /* .footer-head is the same rank as the h4 column titles; some pages use one, some the other, and both must read identically. */ .footer h4, .footer .footer-head { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-2); } .footer-links { list-style: none; display: grid; gap: 4px; } .footer-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--stone); font-size: var(--text-sm); transition: color var(--t-fast) ease; } .footer-links a:hover { color: var(--gold-bright); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--stone); } .socials { display: flex; gap: 8px; } .socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--stone); transition: all var(--t-fast) ease; } .socials a:hover { color: var(--black); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); } .socials svg { width: 17px; height: 17px; } /* ============================================================ REVEAL SYSTEM (IntersectionObserver adds .is-visible) ============================================================ */ /* Audit E3: every block used to rise 34px over 900ms, identically, 30 times on the homepage. Text now settles 16px over 600ms; photographs unveil in place (a fade while the image eases from 5% larger) instead of sliding. will-change is released once a block has arrived. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } figure.plate.reveal, .pdp-gallery.reveal, .variety-tile.reveal { transform: none; transition: opacity 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity; } figure.plate.reveal > .plate-photo, .variety-tile.reveal img { transform: scale(1.05); transition: transform 1400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } figure.plate.reveal.is-visible > .plate-photo, .variety-tile.reveal.is-visible img { transform: none; transition-delay: 0ms; } /* ============================================================ SNIPCART THEME (applies once live key is connected) ============================================================ */ .snipcart-modal__container { background: var(--charcoal) !important; } .snipcart { --color-default: var(--ivory); --color-alt: var(--stone); --color-buttonPrimary: var(--black); --bgColor-default: var(--charcoal); --bgColor-alt: var(--surface); --bgColor-buttonPrimary: var(--gold); --bgColor-buttonPrimary-hover: var(--gold-bright); --borderColor-default: var(--line); font-family: var(--font-body); } /* ============================================================ PRODUCT PAGES (products/*.html — generated by build_products.py) ============================================================ */ /* Top padding only needs to clear the fixed header — the product gallery sits flush beneath it (breadcrumb removed by design). */ .pdp { padding: clamp(96px, 12vh, 120px) 0 var(--sp-6); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--sp-4); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .breadcrumb a { color: var(--gold); text-decoration: none; } .breadcrumb a:hover { color: var(--gold-bright); text-decoration: underline; } .breadcrumb span[aria-hidden] { color: var(--gold-deep); } .pdp-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .pdp-grid { grid-template-columns: 1fr; } } /* Desktop: the gallery rides along while the taller buy panel scrolls, instead of leaving ~600px of empty black under the photo (audit C7). 96px clears the fixed header; pages with the header ribbon get more. */ @media (min-width: 901px) { .pdp-gallery { position: sticky; top: 96px; } body:has(.header-ribbon) .pdp-gallery { top: 132px; } } /* Gallery */ .pdp-stage { margin: 0; } .pdp-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 450ms var(--ease-out); } .pdp-slide.is-active { opacity: 1; pointer-events: auto; } /* The ours-vs-theirs card is a landscape GRAPHIC with copy at both edges. The stage is portrait and .plate-photo crops to cover, which would slice both text columns off. Fit it whole instead; the stage's own dark ground fills the bands above and below. */ .pdp-slide .plate-photo[src$="apothecary-ours-vs-theirs.jpg"] { object-fit: contain; } /* the stage holds photo + art slides together — undo the blanket :has() hide */ .pdp-stage.plate:has(.plate-photo) .plate-art { display: grid; } .pdp-stage.plate:has(.plate-photo) .plate-cap { display: block; } .pdp-thumbs { display: grid; /* ~5 across on a phone, more on desktop — sized down so a longer gallery reads as a strip, not a second grid */ grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-top: 10px; } .pdp-thumb { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); cursor: pointer; overflow: hidden; transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); } .pdp-thumb:hover { border-color: var(--line-strong); transform: translateY(-2px); } .pdp-thumb.is-active { border-color: var(--gold); } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-thumb-art { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold); } .pdp-thumb-art svg { width: 46%; height: auto; stroke-width: 1.3; opacity: 0.9; } /* Planned-image slides — the shot list rendered in place. The slide card states what the image should contain; the thumb wears a camera + label. */ .pdp-shot-todo { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; padding: clamp(20px, 6%, 48px); border: 1px dashed var(--line-strong); margin: 12px; } .pdp-shot-icon { color: var(--gold); display: block; margin: 0 auto 4px; } .pdp-shot-icon svg { width: 34px; height: 34px; } .pdp-shot-kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .pdp-shot-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ivory); } .pdp-shot-brief { font-size: var(--text-sm); line-height: 1.6; color: var(--stone); max-width: 42ch; margin-inline: auto; } .pdp-thumb--todo { display: grid; grid-template-rows: 1fr auto; padding-bottom: 4px; } .pdp-thumb--todo .pdp-thumb-art svg { width: 38%; opacity: 0.7; } .pdp-thumb-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 4px; } /* Buy panel */ .pdp-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; color: var(--ivory); margin-top: 10px; } .pdp-latin { margin-top: 6px; } .pdp-price { display: flex; align-items: baseline; gap: 12px; margin-top: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .pdp-price-num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gold-bright); } .pdp-long { margin-top: var(--sp-3); color: var(--stone); font-weight: 400; line-height: 1.8; } .benefit-list { list-style: none; display: grid; gap: 12px; margin-top: var(--sp-3); } .benefit-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ivory); font-size: var(--text-sm); font-weight: 500; } .benefit-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); } .pdp-buy-row { display: flex; gap: 12px; margin-top: var(--sp-4); } .qty { display: flex; align-items: stretch; border: 1px solid var(--line-strong); flex: none; } .qty button { width: 46px; min-height: 52px; border: 0; background: transparent; color: var(--gold); font-size: 1.2rem; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; } .qty button:hover:not(:disabled) { background: rgba(201, 164, 58, 0.12); color: var(--gold-bright); } /* At 1 and at 20 the stepper says so instead of silently doing nothing (audit E5). */ .qty button:disabled { opacity: 0.3; cursor: default; } .qty output { display: grid; place-items: center; min-width: 40px; color: var(--ivory); font-weight: 600; font-variant-numeric: tabular-nums; } .pdp-add { flex: 1; justify-content: center; min-height: 52px; } .pdp-trust { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); color: var(--stone); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .pdp-trust svg { width: 16px; height: 16px; flex: none; color: var(--gold); } /* Accordions */ .pdp-accordions { margin-top: var(--sp-4); border-bottom: 1px solid var(--line); } .pdp-acc { border-top: 1px solid var(--line); } .pdp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; cursor: pointer; list-style: none; color: var(--ivory); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; transition: color var(--t-fast) ease; } .pdp-acc summary::-webkit-details-marker { display: none; } .pdp-acc summary:hover { color: var(--gold-bright); } .pdp-acc summary svg { width: 18px; height: 18px; flex: none; color: var(--gold); transition: transform var(--t-med) var(--ease-out); } .pdp-acc[open] summary svg { transform: rotate(180deg); } .pdp-acc-body { padding: 0 0 20px; color: var(--stone); font-weight: 400; line-height: 1.8; font-size: var(--text-sm); } /* Quote band */ .pdp-quote-band { background: var(--charcoal); border-block: 1px solid var(--line); } .pdp-quote { max-width: 780px; margin: 0 auto; text-align: center; } .pdp-quote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.6; color: var(--ivory); } .pdp-quote footer { margin-top: var(--sp-3); color: var(--gold); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } /* Cross-sell + clickable cards */ .shop-grid--pairs { margin-top: var(--sp-4); } .product-card { position: relative; } .product-card .add-btn { position: relative; z-index: 2; } .pair-link { position: absolute; inset: 0; z-index: 1; } .product-name a { color: inherit; text-decoration: none; transition: color var(--t-fast) ease; } .product-name a:hover { color: var(--gold-bright); } .product-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Sticky buy bar */ .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: rgba(18, 16, 11, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line-strong); transform: translateY(110%); transition: transform var(--t-med) var(--ease-out); } .sticky-buy.is-visible { transform: translateY(0); } .sticky-buy-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: 12px; } .sticky-buy-name { color: var(--ivory); font-family: var(--font-display); font-size: var(--text-lg); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-buy-name .product-unit { display: inline; margin-left: 8px; } .sticky-buy .btn { flex: none; } /* Product-page sticky bar, identity side (2026-09-28). A framed thumbnail, the name in Playfair, and the price in gold beside a small-caps unit, so the left of the bar reads as the product, not a stray line of text. A thin gold rule fades in across the top edge. */ .sticky-buy { border-top-color: transparent; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.9); } .sticky-buy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent); opacity: 0.55; } .sticky-buy-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .sticky-buy-thumb { width: 52px; height: 52px; flex: none; object-fit: cover; border: 1px solid var(--line-strong); outline: 1px solid rgba(201, 164, 58, 0.18); outline-offset: 3px; background: var(--surface); } .sticky-buy-id .sticky-buy-name { display: grid; gap: 3px; font-size: var(--text-base); line-height: 1.2; white-space: normal; overflow: visible; } .sticky-buy-id .sticky-buy-title { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; letter-spacing: -0.005em; } .sticky-buy-id .product-unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: var(--text-2xs); color: var(--stone); } .sticky-buy-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gold-bright); } .sticky-buy-unit { letter-spacing: 0.14em; text-transform: uppercase; } /* ============================================================ CURSOR MICRO-INTERACTIONS Mouse-only (fine pointer + hover), gated by JS + prefers-reduced-motion. ============================================================ */ .cursor-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .cursor-ring { position: absolute; top: 0; left: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid rgba(201, 164, 58, 0.55); border-radius: 50%; opacity: 0; transition: opacity var(--t-med) ease; will-change: transform; } .cursor-dust { position: absolute; top: 0; left: 0; border-radius: 50%; background: var(--gold-bright); opacity: 0; transition: opacity var(--t-med) ease; will-change: transform; } .cursor-layer.is-visible .cursor-ring { opacity: 0.7; } .cursor-layer.is-visible .cursor-dust { opacity: var(--o, 0.4); } /* Magnetic buttons: damped spring-back */ .btn.is-magnetic, .add-btn.is-magnetic { transition: color var(--t-fast) ease, background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform 300ms var(--ease-out); } /* Cursor spotlight on dark surfaces */ .spotlight { position: relative; } .spotlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 164, 58, 0.14), transparent 65%); opacity: 0; transition: opacity var(--t-med) ease; } .spotlight:hover::after { opacity: 1; } /* ============================================================ OFFER BAR (config-driven, hidden unless OFFER_TEXT is set) ============================================================ */ .offer-bar { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-header) + 1); display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; padding: 6px 48px 6px 16px; background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep)); color: var(--black); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } .offer-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .offer-bar-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: var(--black); cursor: pointer; font-size: 1rem; } body.has-offer .header { top: 38px; } body.has-offer .hero { padding-top: 38px; } /* ============================================================ REVIEWS RAIL (home) ============================================================ */ .reviews-band { border-block: 1px solid var(--line); background: var(--charcoal); } .rev-rail { position: relative; margin-top: var(--sp-5); } .rev-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .rev-track::-webkit-scrollbar { display: none; } .rev-card { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); background: radial-gradient(120% 100% at 50% 0%, var(--surface-2) 0%, var(--surface) 60%); } .rev-stars { display: flex; gap: 4px; color: var(--gold-bright); } .rev-stars svg { width: 16px; height: 16px; } .rev-text { color: var(--ivory); font-weight: 400; line-height: 1.75; font-size: var(--text-sm); } .rev-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rev-name { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .rev-src { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; } /* Date sits between name and source. margin-right:auto keeps "Google review" pinned right while the date tucks in beside the name. */ .rev-when { color: var(--stone); font-size: var(--text-xs); margin-right: auto; } /* Under reviews that name a medical condition (flagged `disclaim` in js/config.js and build_products.py): frames the quote as the customer's experience + the DSHEA line. Sits OUTSIDE .rev-text on purpose, so the rail's four-line clamp can never hide it while the claim shows. */ .rev-disclaimer { color: var(--stone); font-size: var(--text-xs); font-style: italic; line-height: 1.55; padding-top: 10px; border-top: 1px solid var(--line); } .rev-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--sp-3); } .rev-nav button { width: 46px; height: 46px; border: 1px solid var(--line-strong); background: transparent; color: var(--gold); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background-color var(--t-fast) ease; } .rev-nav button:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(201, 164, 58, 0.08); } .rev-nav svg { width: 18px; height: 18px; } /* ============================================================ RATE-US MODAL (review gate) ============================================================ */ .rate-overlay { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 10); display: grid; place-items: center; padding: 20px; background: rgba(6, 5, 3, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--t-med) ease, visibility 0s linear var(--t-med); } /* :not(.welcome-overlay):not(.ts-overlay) — the welcome and Truffle Society modals reuse .rate-overlay for their backdrops but are driven by their own body classes (welcome-open / ts-open), not body.rate-open. Without the exclusions, opening the review gate would also un-hide those overlays sitting in the DOM. */ body.rate-open .rate-overlay:not(.welcome-overlay):not(.ts-overlay):not(.hdt-overlay):not(.hiw-overlay):not(.plan-overlay):not(.nl-overlay):not(.box-overlay) { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } /* The welcome pop-up has its own switch (2026-10-15). It used to add body.rate-open, which also opened the "How would you rate us?" dialog underneath it on every first visit. .box-overlay (Home Delivery's "What's in the box") was missing from the list above for the same reason. */ body.nl-open .rate-overlay.nl-overlay { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } body.nl-open .nl-overlay .rate-dialog { transform: translateY(0); } .rate-dialog { width: min(480px, 100%); border: 1px solid var(--line-strong); background: radial-gradient(130% 100% at 50% 0%, var(--surface-2) 0%, var(--charcoal) 70%); padding: clamp(28px, 5vw, 44px); text-align: center; position: relative; transform: translateY(14px); transition: transform var(--t-med) var(--ease-out); } body.rate-open .rate-dialog { transform: translateY(0); } .rate-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--stone); cursor: pointer; } .rate-close:hover { color: var(--ivory); } .rate-close svg { width: 18px; height: 18px; } .rate-dialog .wordmark { display: inline-flex; margin-bottom: 10px; } .rate-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ivory); margin-top: 6px; } .rate-sub { color: var(--stone); font-size: var(--text-sm); margin-top: 8px; } .rate-stars { display: flex; justify-content: center; gap: 8px; margin-top: var(--sp-3); } .rate-stars button { width: 52px; height: 52px; border: 0; background: transparent; color: var(--stone); cursor: pointer; display: grid; place-items: center; transition: color 120ms ease, transform 120ms var(--ease-out); } .rate-stars button svg { width: 34px; height: 34px; } .rate-stars button.is-lit { color: var(--gold-bright); } .rate-stars button:hover { transform: scale(1.12); } .rate-form { text-align: left; margin-top: var(--sp-3); } .rate-form .btn { width: 100%; justify-content: center; margin-top: 6px; } .rate-note { margin-top: 14px; color: var(--stone); font-size: var(--text-xs); } /* Opt-in private-feedback link on the thanks step. A quiet text link on purpose: it is offered equally after every rating (the gate is gone), so it must read as an aside, not as the next step in a flow. */ .rate-alt-link { display: block; margin: 14px auto 0; background: none; border: 0; padding: 4px; color: var(--stone); font-family: inherit; font-size: var(--text-sm); cursor: pointer; } .rate-alt-link span { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .rate-alt-link:hover span { color: var(--gold-bright); } /* ============================================================ WELCOME MODAL (farmers-market QR landing) Same overlay/dialog mechanics as the rate-us modal above — only opens when arriving via ?join=1 (what the market QR code encodes), so a normal homepage visit never sees it. ============================================================ */ .welcome-dialog { width: min(480px, 100%); max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-strong); background: radial-gradient(130% 100% at 50% 0%, var(--surface-2) 0%, var(--charcoal) 70%); padding: clamp(24px, 5vw, 40px); text-align: left; position: relative; transform: translateY(14px); transition: transform var(--t-med) var(--ease-out); } body.welcome-open .rate-overlay.welcome-overlay { opacity: 1; visibility: visible; } body.welcome-open .welcome-dialog { transform: translateY(0); } .welcome-head { text-align: center; margin-bottom: var(--sp-3); } .welcome-head .wordmark { display: inline-flex; margin-bottom: 10px; } .welcome-kicker { margin: 0 0 6px; font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .welcome-head h2 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ivory); margin: 0; } .welcome-head h2 em { font-style: italic; color: var(--gold-bright); font-weight: 500; } /* ---------- Legal pages (privacy.html, sms-terms.html) ---------- Prose built on .article-body, which already carries the reading measure and heading rhythm. Only the page furniture is new. */ .legal-page { padding-top: clamp(120px, 16vh, 170px); } .legal-head { max-width: 68ch; margin-bottom: var(--sp-5); } .legal-updated { margin-top: var(--sp-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* Plain-language box at the top — most people read only this */ .legal-summary { margin-bottom: var(--sp-5); padding: 20px 22px; border-left: 2px solid var(--gold); background: var(--charcoal); } .legal-summary p { margin: 0; color: var(--ivory); } .legal-body h2 { margin-top: var(--sp-5); margin-bottom: 10px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ivory); } .legal-body p + p { margin-top: var(--sp-2); } .legal-body ul { margin: var(--sp-2) 0 0; padding-left: 20px; list-style: disc; } .legal-body li { margin-bottom: 8px; } .legal-body li::marker { color: var(--gold-deep); } .legal-body strong { color: var(--ivory); font-weight: 600; } .legal-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* The "have a lawyer read this" caveat — deliberately unmissable */ .legal-notice { margin-top: var(--sp-5); padding: 18px 20px; border: 1px dashed var(--line-strong); background: var(--surface); font-size: var(--text-sm); } .legal-notice p { margin: 0; } /* Three-choice hub — review / email / SMS. Each pick is a full-width tap target (market use is one-handed, outdoors, in a hurry). */ .welcome-picks { display: grid; gap: 10px; margin-bottom: var(--sp-2); } .welcome-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-fast) var(--ease-out); } .welcome-pick:hover, .welcome-pick:focus-visible { border-color: var(--gold); background: var(--surface-2); } .welcome-pick:active { transform: scale(0.99); } .welcome-pick--review { border-color: var(--line-strong); background: linear-gradient(180deg, var(--surface-2), var(--surface)); } .welcome-pick-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); flex: none; } .welcome-pick-icon svg { width: 19px; height: 19px; } .welcome-pick--review .welcome-pick-icon { color: var(--gold-bright); border-color: var(--line-strong); } .welcome-pick-body { display: grid; gap: 3px; min-width: 0; } .welcome-pick-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ivory); line-height: 1.25; } .welcome-pick-tag { /* Own line, always — inline wrapping made the two signup cards sit at different heights depending on viewport width */ display: table; margin: 5px 0 1px; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 2px; font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); vertical-align: middle; } /* The signup incentive — filled gold so it reads as a reward being handed over, not another descriptive label. Text comes from WELCOME_EMAIL_OFFER / WELCOME_SMS_OFFER in js/config.js. */ .welcome-pick-offer { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 6px 0 2px; padding: 4px 10px 4px 8px; border-radius: 2px; background: var(--gold); color: #171308; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .welcome-pick-offer svg { width: 13px; height: 13px; flex: none; } /* Narrow phones: keep the offer on one line. Wrapped, it added 20px to every signup card and pushed the third option below the fold. */ @media (max-width: 400px) { .welcome-pick-offer { white-space: nowrap; font-size: var(--text-2xs); letter-spacing: 0.04em; padding: 4px 8px 4px 7px; } .welcome-pick-offer svg { width: 12px; height: 12px; } } /* Short phones (iPhone SE and friends): tighten the vertical rhythm so all three choices stay on screen. A QR landing that needs scrolling to reveal option 3 has already lost it. */ @media (max-height: 700px) { .welcome-head { margin-bottom: 12px; } .welcome-head .wordmark { margin-bottom: 6px; } .welcome-picks { gap: 8px; } .welcome-pick { padding: 12px 14px; } .welcome-pick-offer { margin: 4px 0 2px; } } .welcome-pick-sub { color: var(--stone); font-size: var(--text-sm); line-height: 1.45; } .welcome-pick-go { width: 18px; height: 18px; color: var(--gold-deep); flex: none; } .welcome-pick:hover .welcome-pick-go { color: var(--gold); } /* Completed state — the arrow becomes a tick so someone taking all three can see where they've already been. Still tappable: a signup can be repeated, and the review link should stay reachable. */ .welcome-pick-done { display: none; width: 20px; height: 20px; flex: none; color: var(--gold-bright); } .welcome-pick.is-done .welcome-pick-go { display: none; } .welcome-pick.is-done .welcome-pick-done { display: block; } .welcome-pick.is-done { border-color: var(--line-strong); } .welcome-pick.is-done .welcome-pick-title, .welcome-pick.is-done .welcome-pick-sub { opacity: 0.6; } .welcome-pick.is-done .welcome-pick-offer { opacity: 0.45; } /* Post-signup nudge toward the option they haven't taken yet */ .welcome-next { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); text-align: center; } .welcome-next-head { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gold-bright); } .welcome-next-sub { margin: 0 0 14px; font-size: var(--text-sm); color: var(--stone); } .welcome-next .btn { width: 100%; justify-content: center; } /* Chosen-channel panel */ .welcome-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 0; border: 0; background: none; color: var(--stone); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .welcome-back:hover { color: var(--gold); } .welcome-back svg { width: 15px; height: 15px; } .welcome-panel-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ivory); } /* Scale the QR modal up on tall phones — it was leaving ~40% of the screen empty, and this is read one-handed outdoors in sunlight. Gated on min-height so short phones (iPhone SE, 667px) keep the compact sizing instead of being pushed into a scroll. */ @media (max-width: 640px) and (min-height: 760px) { .rate-overlay.welcome-overlay { padding: 14px; } .welcome-dialog { padding: 30px 20px; } .welcome-head { margin-bottom: var(--sp-4); } .welcome-kicker { font-size: 0.78rem; margin-bottom: 8px; } .welcome-head h2 { font-size: 1.85rem; } .welcome-picks { gap: 12px; } .welcome-pick { padding: 18px 15px; gap: 15px; } .welcome-pick-icon { width: 50px; height: 50px; } .welcome-pick-icon svg { width: 23px; height: 23px; } .welcome-pick-title { font-size: 1.22rem; } .welcome-pick-tag { font-size: var(--text-2xs); padding: 3px 8px; } .welcome-pick-offer { font-size: 12px; padding: 5px 12px 5px 9px; } .welcome-pick-offer svg { width: 14px; height: 14px; } .welcome-pick-sub { font-size: 0.95rem; line-height: 1.5; } .welcome-pick-go { width: 21px; height: 21px; } .rate-overlay.welcome-overlay .rate-close { width: 46px; height: 46px; } .rate-overlay.welcome-overlay .rate-close svg { width: 21px; height: 21px; } } [data-welcome-mount] { min-height: 56px; } [data-welcome-mount] input[type="email"], [data-welcome-mount] input[type="tel"], [data-welcome-mount] input[type="text"] { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; background: #0F0D09 !important; border: 1px solid var(--line-strong) !important; border-radius: 3px !important; color: var(--ivory) !important; font-family: var(--font-body) !important; font-size: 16px !important; /* < 16px triggers iOS zoom-on-focus */ } [data-welcome-mount] button, [data-welcome-mount] button[type="submit"] { width: 100% !important; min-height: 50px !important; background: var(--gold) !important; color: #171308 !important; border: 0 !important; border-radius: 3px !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .welcome-notice { border: 1px dashed var(--line-strong); border-radius: 3px; padding: 14px; background: var(--surface); font-size: var(--text-sm); color: var(--stone); } .welcome-notice p { margin: 0 0 8px; } .welcome-notice p:last-child { margin-bottom: 0; } .welcome-notice a.btn-fallback { display: block; margin-top: 10px; padding: 13px; background: var(--gold); color: #171308; text-align: center; text-decoration: none; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; } .welcome-legal { margin-top: var(--sp-3); padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.55; color: var(--stone); } .welcome-legal p { margin: 0 0 6px; } .welcome-legal p:last-child { margin-bottom: 0; } .welcome-legal a { color: var(--gold); } /* ============================================================ SUBSCRIPTION PLANS ============================================================ */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); } .plan-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: radial-gradient(120% 100% at 50% 0%, var(--surface-2) 0%, var(--surface) 60%); transition: border-color var(--t-med) ease, transform var(--t-med) var(--ease-out); } .plan-card:hover { border-color: rgba(201, 164, 58, 0.55); transform: translateY(-4px); } .plan-card--featured { border-color: var(--gold); } .plan-flag { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); padding: 5px 14px; background: var(--gold); color: var(--black); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .plan-media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); } .plan-media img { width: 100%; height: 100%; object-fit: cover; } /* Two-product plans show two photos in one frame, halved by a hairline in the same gold as every other divider. Each half keeps the full frame height, so the pair reads as one image rather than two stacked cards. */ /* Two classes, because `.plan-media-link { display: block }` further down the file would otherwise win on source order alone. */ .plan-media.plan-media--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); } .plan-media--split img { min-width: 0; } .plan-media .plate-art-lite { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gold); background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); } .plan-media .plate-art-lite svg { width: 34%; height: auto; stroke-width: 1.3; opacity: 0.92; } .plan-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; } .plan-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ivory); } .plan-desc { color: var(--stone); font-size: var(--text-sm); line-height: 1.7; font-weight: 400; } .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 4px; } /* Tags and "/ month" never break mid-label; the row wraps instead. */ .plan-price span { white-space: nowrap; } .plan-price strong { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gold-bright); font-weight: 500; } .plan-price span { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; } .plan-price-tag { display: inline-block; margin-left: 2px; padding: 3px 9px; background: var(--gold); color: var(--black); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle; } /* `.plan-price span` above (0,1,1) outranks `.plan-price-tag` (0,1,0), so inside a plan card the tag took the stone text colour and sat grey on gold, unreadable. Restate the tag's own type at matching specificity. */ .plan-price .plan-price-tag { color: var(--black); font-size: var(--text-2xs); letter-spacing: 0.14em; } /* Second tag beside the discount (the Duo ships free). Outlined so the two read as separate facts, and spaced so they can wrap on a narrow card. */ .plan-price-tag--ship, .plan-price .plan-price-tag--ship { margin-left: 6px; background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } /* Sentence case in stone with the figure in ivory: two lines of tracked gold capitals beside a gold price, tag, link and ticks left nothing leading (audit C5). Same words as before. */ .plan-save { color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.55; } .plan-save strong { color: var(--ivory); font-weight: 600; } /* Shipping cost on the one plan that does not ship free (audit B7). */ .plan-ship-note { margin-top: -4px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.06em; } .plan-feats { list-style: none; display: grid; gap: 8px; margin-top: 4px; } .plan-feats li { display: flex; gap: 10px; align-items: flex-start; color: var(--ivory); font-size: var(--text-sm); } .plan-feats svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--gold); } .plan-card .add-btn { margin-top: auto; align-self: stretch; justify-content: center; min-height: 48px; } /* The plan button is the card's primary action, filled like every other buy button, not an outline (audit C4). */ .plan-card .add-btn { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold) 100%); border-color: var(--gold); color: var(--black); } .plan-card .add-btn:hover { box-shadow: 0 14px 34px -12px rgba(201, 164, 58, 0.55); } /* ============================================================ CONVERSION — FBT strip, qty hint, free-ship progress ============================================================ */ .fbt { margin-top: var(--sp-4); border: 1px solid var(--line); padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: rgba(201, 164, 58, 0.04); } .fbt-label { flex-basis: 100%; color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .fbt-items { display: flex; align-items: center; gap: 10px; color: var(--ivory); font-size: var(--text-sm); flex: 1 1 auto; } .fbt-plus { color: var(--gold); font-family: var(--font-display); } .fbt-total { color: var(--gold-bright); font-family: var(--font-display); font-size: var(--text-lg); white-space: nowrap; } .fbt .add-btn { flex: none; } .qty-hint { margin-top: 10px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.06em; } .qty-hint strong { color: var(--gold); font-weight: 700; } .ship-progress { margin-bottom: 14px; } .ship-progress-label { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.06em; margin-bottom: 8px; } .ship-progress-label strong { color: var(--gold-bright); } .ship-progress-bar { height: 4px; background: rgba(201, 164, 58, 0.18); overflow: hidden; } .ship-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width var(--t-med) var(--ease-out); } .cart-savings { display: flex; justify-content: space-between; color: var(--gold); font-size: var(--text-sm); margin-bottom: 6px; } /* ============================================================ GUARANTEE + PICKUP INCENTIVES ============================================================ */ .guarantee { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: var(--stone); font-size: var(--text-sm); line-height: 1.6; } .guarantee svg { width: 18px; height: 18px; flex: none; color: var(--gold); margin-top: 2px; } .guarantee strong { color: var(--ivory); } .footer-guarantee { max-width: 320px; } .chip-perk { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--gold); color: var(--black); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; } .filter-btn.is-active .chip-perk { background: var(--black); color: var(--gold-bright); } .pickup-nudge { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(201, 164, 58, 0.06); color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.04em; line-height: 1.6; } .pickup-nudge svg { width: 16px; height: 16px; flex: none; color: var(--gold); margin-top: 1px; } .pickup-nudge strong { color: var(--gold-bright); } /* ============================================================ ACCESSIBILITY / MOTION ============================================================ */ .skip-link { position: absolute; top: -60px; left: 16px; z-index: 999; padding: 14px 22px; background: var(--gold); color: var(--black); font-weight: 700; font-size: var(--text-sm); transition: top var(--t-fast) ease; } .skip-link:focus { top: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ============================================================ LEARN (learn/**.html — generated by build_learn.py) Long-form editorial. The only place on the site with real prose typography: the global reset zeroes every element margin, so .article-body restyles headings, paragraphs, lists, tables, and quotes from scratch. ============================================================ */ /* The primary nav gained an 8th item ("Learn"); extend the mobile drawer's staggered reveal so it still lands last. */ @media (max-width: 1024px) { body.nav-open .nav a:nth-child(8) { transition-delay: 480ms; } } /* ---------- Article shell ---------- */ .learn-article { padding: clamp(120px, 16vh, 170px) 0 var(--sp-6); } .learn-head { max-width: 68ch; } .learn-head .lede { margin-top: var(--sp-3); } .learn-meta { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); color: var(--gold); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .learn-meta svg { width: 16px; height: 16px; flex: none; } .learn-meta span[aria-hidden] { color: var(--gold-deep); } .learn-layout { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; margin-top: var(--sp-5); } /* ---------- Table of contents ---------- */ .learn-toc { border-top: 1px solid var(--line); padding-top: var(--sp-2); } .learn-toc summary { cursor: pointer; list-style: none; color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .learn-toc summary::-webkit-details-marker { display: none; } .learn-toc summary::after { content: "+"; float: right; font-size: 1rem; line-height: 1; color: var(--gold-deep); } .learn-toc details[open] summary::after { content: "–"; } .learn-toc ol { list-style: none; margin-top: var(--sp-2); display: grid; gap: 2px; counter-reset: toc; } .learn-toc li { counter-increment: toc; } .learn-toc a { display: block; padding: 7px 0 7px 26px; position: relative; color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; text-decoration: none; transition: color var(--t-fast) ease; } .learn-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-deep); } .learn-toc a:hover { color: var(--ivory); } .learn-toc a.is-current { color: var(--gold); } .learn-toc a.is-current::before { color: var(--gold); } /* The TOC is authored first so it reads before the article on mobile, but on desktop it moves to the right rail — that keeps the body copy flush with the h1 and lede above it, and fills the space the 68ch measure leaves over. */ @media (min-width: 1024px) { .learn-layout { grid-template-columns: minmax(0, 1fr) 216px; } .article-body { order: 1; } .learn-toc { order: 2; position: sticky; top: 104px; max-height: 78vh; overflow-y: auto; } } /* ---------- Article prose ---------- */ .article-body { max-width: 68ch; color: var(--stone); font-size: var(--text-base); font-weight: 400; line-height: 1.85; } .article-body > * + * { margin-top: var(--sp-3); } .article-body h2, .article-body h3, .article-body h4 { color: var(--ivory); font-family: var(--font-display); line-height: 1.2; text-wrap: balance; scroll-margin-top: clamp(96px, 13vh, 124px); } .article-body h2 { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--text-xl); font-weight: 600; } .article-body h3 { margin-top: var(--sp-4); font-size: var(--text-lg); font-weight: 500; } .article-body h4 { margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: var(--sp-2); } .article-body strong { color: var(--ivory); font-weight: 600; } .article-body em { font-style: italic; } .article-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease; } .article-body a:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); } .article-body code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.86em; color: var(--gold-pale); background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; } .article-body ul, .article-body ol { display: grid; gap: 12px; } .article-body li { list-style: none; position: relative; padding-left: 26px; line-height: 1.75; } .article-body ul > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); } .article-body ol { counter-reset: steps; } .article-body ol > li { counter-increment: steps; } .article-body ol > li::before { content: counter(steps); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 0.9em; font-style: italic; color: var(--gold); } .article-body li > strong:first-child { color: var(--ivory); } .article-body blockquote { margin-top: var(--sp-4); margin-bottom: var(--sp-4); padding: 4px 0 4px var(--sp-3); border-left: 2px solid var(--gold-deep); } .article-body blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.6; color: var(--ivory); } .article-rule { margin: var(--sp-4) 0; border: 0; height: 1px; background: var(--line); } /* Tables scroll inside their own box so the page never does. */ .article-table-wrap { margin-top: var(--sp-4); overflow-x: auto; } .article-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .article-table th, .article-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.6; } .article-table th { color: var(--gold); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; border-bottom-color: var(--line-strong); } .article-table td { color: var(--stone); font-weight: 400; } .article-table tr:last-child td { border-bottom: none; } .article-disclaimer { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); align-items: flex-start; } .article-disclaimer svg { margin-top: 3px; } /* ---------- Article cards (reuse .product-card chrome) ---------- */ .learn-card { justify-content: space-between; } .learn-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: var(--sp-3); } .learn-card-kicker { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .learn-card .product-name { font-size: var(--text-lg); } .learn-card .product-desc { flex: 1; } .learn-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: var(--sp-2); border-top: 1px solid var(--line); color: var(--stone); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .learn-card-meta svg { width: 15px; height: 15px; flex: none; color: var(--gold-deep); } /* ---------- Learn hub ---------- */ /* Hairlines come from the cards themselves, not a gap:1px background bleed — nine cards never fill a 2/3/4-column row, and a bled background would paint the empty cells gold. */ .learn-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .learn-hub-card { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--black); text-decoration: none; transition: background var(--t-med) ease; } .learn-hub-card:hover { background: var(--surface); } .learn-hub-count { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .learn-hub-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ivory); } .learn-hub-blurb { flex: 1; color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; } .learn-hub-card .link-arrow { margin-top: var(--sp-1); } .learn-hub-card:hover .link-arrow svg { transform: translateX(4px); } /* ============================================================ THE MONTHLY RITUAL (monthly-ritual.html) Subscription configurator. Real radio inputs in fieldsets — the visual card is the label, the input stays focusable but visually hidden, so keyboard and screen readers get proper radiogroup semantics. ============================================================ */ .ritual-layout { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; } @media (min-width: 1024px) { .ritual-layout { grid-template-columns: minmax(0, 1fr) 380px; } .ritual-summary { position: sticky; top: 104px; } } .ritual-steps { display: grid; gap: var(--sp-5); } .ritual-step-num { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } /* The numeral carries the step — sized up a touch above its label */ .ritual-step-num b { font-size: 1.35em; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.14em; } /* ---------- Always-included block ---------- */ .ritual-fixed { display: grid; gap: 10px; padding: var(--sp-3); border: 1px solid var(--line); background: var(--charcoal); } .ritual-fixed-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ivory); } .ritual-fixed-name span { color: var(--stone); font-size: var(--text-sm); font-style: italic; } .ritual-fixed-desc { color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; max-width: 60ch; } .ritual-fixed-price { color: var(--gold-bright); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* ---------- Fieldsets ---------- */ .ritual-group { border: 0; padding: 0; margin: 0; min-width: 0; } .ritual-legend { display: block; padding: 0; } .ritual-legend .ritual-step-num { display: block; margin-bottom: var(--sp-1); } .ritual-legend { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ivory); } .ritual-hint { margin-top: var(--sp-2); color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; max-width: 62ch; } .ritual-options { display: grid; gap: 12px; margin-top: var(--sp-3); } /* ---------- Option cards ---------- */ .ritual-option { position: relative; display: block; padding: var(--sp-3) var(--sp-3) var(--sp-3) 54px; border: 1px solid var(--line); background: var(--black); cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .ritual-option input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .ritual-option::before, .ritual-option::after { content: ""; position: absolute; border-radius: 50%; } .ritual-option::before { left: 20px; top: 27px; width: 18px; height: 18px; border: 1px solid var(--line-strong); transition: border-color var(--t-fast) ease; } .ritual-option::after { left: 25px; top: 32px; width: 8px; height: 8px; background: var(--gold); transform: scale(0); transition: transform 140ms var(--ease-out); } .ritual-option:hover { border-color: var(--line-strong); } /* A single fixed choice shown as a statement: no radio dot, no pointer. */ .ritual-option--fixed { padding-left: var(--sp-3); cursor: default; border-color: var(--gold); background: var(--surface); } .ritual-option--fixed::before, .ritual-option--fixed::after { content: none; } .ritual-option:has(input:checked) { border-color: var(--gold); background: var(--surface); } .ritual-option:has(input:checked)::before { border-color: var(--gold); } .ritual-option:has(input:checked)::after { transform: scale(1); } .ritual-option:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; } .ritual-option-body { display: grid; gap: 6px; } .ritual-option-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ivory); } .ritual-option-desc { color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.65; } .ritual-option-meta { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .ritual-option-meta a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .ritual-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--gold); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; } /* ---------- Fulfillment chips (radio-backed .filter-btn) ---------- */ .ritual-chip { position: relative; display: inline-flex; } .ritual-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .ritual-chip > span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px; border: 1px solid var(--line); color: var(--stone); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: all var(--t-fast) ease; } .ritual-chip:hover > span { color: var(--ivory); border-color: var(--line-strong); } .ritual-chip:has(input:checked) > span { background: var(--gold); border-color: var(--gold); color: var(--black); } /* The perk badge is solid gold — invert it once the chip itself goes gold. */ .ritual-chip:has(input:checked) .chip-perk { background: var(--black); color: var(--gold); } .ritual-chip:has(input:focus-visible) > span { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ---------- Summary ---------- */ .ritual-summary { padding: var(--sp-3); border: 1px solid var(--line); background: var(--charcoal); } .ritual-summary-plate { margin-bottom: var(--sp-3); } .ritual-summary-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ivory); } .ritual-lines { list-style: none; display: grid; gap: 10px; margin-top: var(--sp-3); } .ritual-lines li { display: flex; justify-content: space-between; gap: var(--sp-2); padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ivory); font-size: var(--text-sm); line-height: 1.5; } .ritual-lines em { color: var(--stone); font-style: italic; } .ritual-line-price { color: var(--stone); flex: none; } .ritual-totals { margin-top: var(--sp-3); display: grid; gap: 8px; } .ritual-value, .ritual-pay { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); } .ritual-value { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; } .ritual-value span:last-child { text-decoration: line-through; } .ritual-pay { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; } .ritual-pay strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; color: var(--gold-bright); letter-spacing: 0; } .ritual-save { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .ritual-cta { width: 100%; justify-content: center; margin-top: var(--sp-3); } .ritual-guarantee { margin-top: var(--sp-3); align-items: flex-start; } .ritual-guarantee svg { margin-top: 3px; } /* ---------- /resources hub ---------- */ .resources-stack { display: grid; gap: var(--sp-4); } .resources-stack .signup--full { width: 100%; margin-inline: auto; } .resources-note { display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: var(--sp-4) auto 0; color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; } .resources-note svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--gold); } .learn-empty { margin-top: var(--sp-5); padding: var(--sp-4); border: 1px solid var(--line); color: var(--stone); font-weight: 400; line-height: 1.8; max-width: 68ch; } .learn-empty a { color: var(--gold); } /* ============================================================ SIGNUP (lead magnets — markup from lead_magnets.py) Three variants of one component: full, compact, footer. Reuses .form-field / .has-error / .btn--gold. The checkbox is built from scratch — there were no checkboxes on the site. ============================================================ */ .signup-title { color: var(--ivory); } .signup-blurb { margin-top: var(--sp-2); color: var(--stone); font-weight: 400; line-height: 1.7; font-size: var(--text-sm); } .signup-form { margin-top: var(--sp-3); } /* Fields stack: email → consent → submit. Deliberately NOT an inline email+button row — that puts the submit button ahead of the required consent box in tab order, so a keyboard user hits submit before the checkbox they have to tick. */ .signup-field input::placeholder { color: var(--gold); } .signup-submit { width: 100%; max-width: 360px; justify-content: center; margin-top: var(--sp-3); } /* ---------- Consent checkbox (net-new) ---------- */ .signup-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin-top: var(--sp-3); } .signup-consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; display: grid; place-content: center; background: var(--black); border: 1px solid var(--line-strong); border-radius: 0; cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .signup-consent input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; background: var(--gold); transform: scale(0); transition: transform 140ms var(--ease-out); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .signup-consent input[type="checkbox"]:hover { border-color: var(--gold); } .signup-consent input[type="checkbox"]:checked { border-color: var(--gold); } .signup-consent input[type="checkbox"]:checked::before { transform: scale(1); } .signup-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* The consent label is a sentence — override the uppercase field-label style. */ .signup-consent label { color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; cursor: pointer; } .signup-consent.has-error input[type="checkbox"] { border-color: #A34438; } /* ---------- Error + success ---------- */ .signup-error { display: none; margin-top: var(--sp-2); color: #E5786D; font-size: 0.82rem; line-height: 1.5; } .signup-form.is-invalid .signup-error { display: block; } .signup-success { display: none; } .signup-success.is-visible { display: block; } .signup-success:focus { outline: none; } .signup-success-head { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ivory); } .signup-success-sub { margin-top: var(--sp-2); max-width: 46ch; color: var(--stone); font-weight: 400; font-size: var(--text-sm); line-height: 1.7; } /* ---------- Welcome pop-up (built by js/signup.js) ---------- Borrows .rate-overlay / .rate-dialog so the scrim, the frame and the close button match every other dialog on the site. Only the inside differs: wider for a form, and left-aligned where there is a sentence to read rather than a line to glance at. */ .nl-dialog { width: min(460px, 100%); padding: clamp(30px, 5vw, 40px); text-align: left; } .nl-copy { text-align: center; } .nl-title { font-family: var(--font-display); font-size: clamp(1.55rem, 4.4vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--ivory); margin: 8px 0 10px; text-wrap: balance; } .nl-title em { color: var(--gold); font-style: italic; } /* One dialog, read once, at speed: the supporting line is body size and near-ivory rather than the small stone used in page-level blurbs, and the footnote is stone rather than the dim gold that only works as a label. */ .nl-sub { margin: 0; color: var(--ivory); opacity: 0.86; font-size: var(--text-base); font-weight: 400; line-height: 1.55; } .nl-signup { margin-top: var(--sp-3); } /* The footer form caps its button so it cannot stretch across a wide column. In a 460px dialog that cap only leaves a gap. */ .nl-dialog .signup-submit { max-width: none; } .nl-dialog .signup-success { text-align: center; } .nl-dialog .signup-success-sub { max-width: none; } .nl-dialog .signup-success-sub strong { color: var(--gold); font-weight: 700; letter-spacing: 0.06em; } .nl-fine { margin: var(--sp-3) 0 0; text-align: center; color: var(--stone); font-size: var(--text-xs); line-height: 1.5; } .nl-dialog .signup-consent label { font-size: 0.84rem; } .nl-dialog .signup-success-sub { color: var(--ivory); opacity: 0.86; font-size: var(--text-base); } /* A pop-up that slides is an advertisement; one that fades is a note. Honour reduced-motion by skipping the travel, not the dialog. */ @media (prefers-reduced-motion: reduce) { .nl-dialog { transform: none; } } /* ---------- Variant: full ---------- */ .signup--full { max-width: 760px; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--line); background: var(--charcoal); } .signup--full .signup-title { margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.15; text-wrap: balance; } .signup--full .signup-blurb { max-width: 56ch; font-size: var(--text-base); } /* ---------- Variant: compact ---------- */ .signup--compact { margin-top: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .signup--compact .signup-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .signup--compact .signup-blurb { margin-top: 6px; } /* Match the article's reading measure rather than the 1200px container. */ .learn-article .signup--compact { max-width: 68ch; } /* ---------- Variant: footer ---------- */ .signup--footer { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .signup--footer .signup-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .signup--footer .signup-blurb { margin-top: var(--sp-1); max-width: 42ch; } .signup--footer .signup-form { margin-top: 0; } @media (min-width: 900px) { .signup--footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--sp-5); } .signup--footer .signup-success { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .hero-inner > * { opacity: 1 !important; transform: none !important; } .ticker-track { animation: none; flex-wrap: wrap; } .dust { display: none; } .cursor-layer { display: none; } } /* ============================================================ HOME DELIVERY (home-delivery.html) The doorstep subscription configurator. Reuses the Ritual's builder skeleton (.ritual-layout / -option / -summary) — those classes are the site's radio-card system, not Ritual-only. Everything new is prefixed .hd-. ============================================================ */ /* ---------- Hero towns line ---------- */ .hd-towns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: var(--sp-3); color: var(--stone); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .hd-towns span { display: inline-flex; align-items: center; gap: 10px; } .hd-towns span + span::before { content: "·"; color: var(--gold-deep); margin-right: 10px; } /* ---------- The two boxes ---------- */ /* "Reserve" always wears gold — the one-glance differentiator between the two programs, applied wherever the name appears (headings, cards, builder options, FAQ, and via JS on the live summary + sticky bar). */ .reserve-mark, .hd-stickybar-price small.reserve-mark { color: var(--gold-bright); } .hd-programs { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); align-items: stretch; } @media (min-width: 880px) { .hd-programs { grid-template-columns: 1fr 1fr; } } .hd-program { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); background: var(--charcoal); } .hd-program--featured { border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 1px var(--gold), 0 24px 60px rgba(0, 0, 0, 0.45); } .hd-flag { position: absolute; top: -13px; left: var(--sp-4); padding: 4px 14px; background: var(--gold); color: var(--black); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .hd-program-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--ivory); } .hd-program-name em { color: var(--gold-bright); font-style: italic; } .hd-program-sub { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .hd-program-desc { color: var(--stone); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; } .hd-program-price { color: var(--ivory); font-size: var(--text-sm); } .hd-program-price strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold-bright); font-weight: 600; } /* The tier-mix bar: what a cycle is made of, by weight */ .hd-mix { display: grid; gap: 8px; margin-top: 4px; } .hd-mix-bar { display: flex; height: 12px; border: 1px solid var(--line-strong); overflow: hidden; } .hd-mix-seg--sig { background: var(--gold); } .hd-mix-seg--spec { background: var(--gold-deep); } .hd-mix-seg--rare { background: var(--gold-pale); } .hd-mix-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.06em; } .hd-mix-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; } /* Alternating-delivery mini cards (how the Reserve rotation works) */ .hd-cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; } @media (max-width: 480px) { .hd-cycle { grid-template-columns: 1fr; } } .hd-cycle-card { padding: 14px 16px; border: 1px solid var(--line); background: var(--black); } .hd-cycle-label { color: var(--gold); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .hd-cycle-card p { margin-top: 6px; color: var(--stone); font-size: var(--text-xs); font-weight: 400; line-height: 1.6; } .hd-program-cta { margin-top: auto; padding-top: var(--sp-2); } /* ---------- Builder: option rows with a price column ---------- */ .hd-opt { padding-right: 132px; } .hd-opt-price { position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; gap: 2px; justify-items: end; text-align: right; } .hd-opt-price strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--gold-bright); } .hd-opt-price small { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.04em; } @media (max-width: 560px) { .hd-opt { padding-right: var(--sp-3); } .hd-opt-price { position: static; justify-items: start; text-align: left; margin-top: 8px; } } .hd-save-tag { display: inline-block; margin-left: 10px; padding: 3px 10px; background: var(--gold); color: var(--black); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; } /* ---------- Size chips: value + per-lb sub-line ---------- */ .hd-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-3); } /* The chips' terse (phone) label form stays hidden until the mobile rules in the compact-mode block below switch the two over. */ .hd-chip-terse { display: none; } .hd-chip { position: relative; display: inline-flex; flex: 1 1 150px; } .hd-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .hd-chip > span { display: grid; gap: 3px; width: 100%; padding: 14px 18px; border: 1px solid var(--line); background: var(--black); cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .hd-chip-size { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ivory); } .hd-chip-size .hd-chip-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--gold); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; } .hd-chip-sub { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.04em; } .hd-chip:hover > span { border-color: var(--line-strong); } .hd-chip:has(input:checked) > span { border-color: var(--gold); background: var(--surface); box-shadow: inset 0 0 0 1px var(--gold); } .hd-chip:has(input:checked) .hd-chip-size { color: var(--gold-bright); } .hd-chip:has(input:focus-visible) > span { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ---------- Summary extras ---------- */ .hd-per { display: flex; justify-content: space-between; color: var(--stone); font-size: var(--text-sm); } .hd-term-note { margin-top: 10px; color: var(--stone); font-size: var(--text-xs); font-weight: 400; line-height: 1.6; } .hd-cooler { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--sp-3); padding: 12px 14px; border: 1px dashed var(--line-strong); color: var(--stone); font-size: var(--text-xs); line-height: 1.6; cursor: pointer; } .hd-cooler input { flex: none; width: 15px; height: 15px; margin-top: 2px; accent-color: var(--gold); cursor: pointer; } .hd-cooler strong { color: var(--ivory); } /* ---------- Delivery zone ---------- */ /* ---------- Route address check ---------- Replaced the grid of town tiles: a visitor shouldn't have to scan a list to find themselves. Logic lives in routeCheck() in delivery.js. */ .hd-check { max-width: 620px; margin: var(--sp-5) auto 0; } .hd-check-split { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .hd-check-form .form-grid { margin-top: var(--sp-3); } .hd-check-opt { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--gold); } /* This error sits outside a .form-field, so it needs its own switch */ .form-error.is-visible { display: block; } .hd-consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: var(--sp-3); cursor: pointer; font-size: 0.8rem; line-height: 1.6; color: var(--stone); } .hd-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); flex: none; cursor: pointer; } .hd-consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .hd-check-form .btn { margin-top: var(--sp-4); } .hd-check-result .hd-check-alt { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--stone); } .hd-check-result .hd-check-alt a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* The served ring, stated once beneath the checker as proof */ .hd-zone-line { max-width: 720px; margin: var(--sp-5) auto 0; text-align: center; font-size: var(--text-sm); line-height: 1.8; color: var(--stone); } .hd-zone-line span { display: block; margin-bottom: 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } /* ---------- Mobile sticky order bar ---------- */ .hd-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px clamp(16px, 4vw, 28px); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(11, 10, 7, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(102%); transition: transform var(--t-med) var(--ease-out); } .hd-stickybar.is-visible { transform: translateY(0); } .hd-stickybar-price { display: grid; gap: 2px; min-width: 0; } .hd-stickybar-price strong { font-family: var(--font-display); /* One notch down from --text-2xl: the bar was eating ~100px of a phone screen. Still display-size for older eyes, just not billboard-size. */ font-size: var(--text-xl); color: var(--gold-bright); font-weight: 600; line-height: 1.05; } .hd-stickybar-price small { color: var(--ivory); font-size: var(--text-sm); line-height: 1.35; } .hd-stickybar .btn { flex: none; } @media (min-width: 1024px) { .hd-stickybar { display: none; } } /* ---------- Route capacity note ---------- */ .hd-capacity { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-3); padding: 10px 18px; border: 1px solid var(--line); color: var(--stone); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .hd-capacity::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px var(--gold-bright); } @media (prefers-reduced-motion: reduce) { .hd-stickybar { transition: none; } } /* ---------- The Truffle Society (waitlist card + modal) ---------- A price-anchor / waitlist card, not a purchasable product. It is deliberately SUBORDINATE to the two buyable cards: ink background, thin border, smaller type, ghost CTA — noticed, never competing. */ @media (min-width: 880px) { /* Tablet: the two buyable boxes side by side, Society wrapping below */ .hd-programs--trio .hd-program--society { grid-column: 1 / -1; } } @media (min-width: 1160px) { /* Desktop: three across — Society narrower, to the right */ .hd-programs--trio { grid-template-columns: 1fr 1.08fr 0.78fr; } .hd-programs--trio .hd-program--society { grid-column: auto; } } .hd-program--society { background: var(--black); border-color: var(--line); gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); } .hd-program--society .hd-program-name { font-size: var(--text-lg); } .hd-program--society .hd-program-price strong { font-size: var(--text-base); } .hd-program--society .hd-program-desc { font-size: var(--text-sm); } .ts-badge { /* inline-block, NOT flex: the label carries text runs plus the seat count, and a flex container would treat each as its own gapped item — spraying the words apart. As normal inline text it flows and wraps cleanly, dot included. */ display: inline-block; align-self: flex-start; padding: 4px 12px; border: 1px solid var(--line-strong); color: var(--gold); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; } .ts-badge::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--gold-bright); vertical-align: middle; } /* Sold out: same badge shape, quieter signal — a static stone dot instead of the glowing gold one, which otherwise reads as "live". */ .ts-badge--soldout { color: var(--stone); border-color: var(--line); } .ts-badge--soldout::before { background: var(--stone); } .ts-soldout { color: var(--ivory); font-size: var(--text-xs); font-weight: 400; line-height: 1.6; } .ts-feats { list-style: none; display: grid; gap: 10px; } .ts-feats li { position: relative; padding-left: 18px; color: var(--stone); font-size: var(--text-xs); font-weight: 400; line-height: 1.6; } .ts-feats li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--gold-deep); } .ts-fine { color: var(--stone); opacity: 0.75; font-size: var(--text-2xs); letter-spacing: 0.05em; line-height: 1.6; } /* ---------- Trial-vs-Season nudge modal (reuses .rate-overlay/ .rate-dialog mechanics, driven by body.hdt-open) ---------- */ body.hdt-open .rate-overlay.hdt-overlay { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } body.hdt-open .hdt-dialog { transform: translateY(0); } .hdt-compare { margin-top: var(--sp-3); border: 1px solid var(--line); padding: 16px 18px; text-align: left; } .hdt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--text-sm); color: var(--stone); padding-block: 6px; } .hdt-row strong { color: var(--ivory); font-size: var(--text-base); } .hdt-row--season { border-top: 1px solid var(--line); color: var(--ivory); } .hdt-row--season strong { color: var(--gold-bright); } .hdt-save { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--gold-bright); } .hdt-actions { display: grid; gap: 10px; margin-top: var(--sp-3); } .hdt-actions .btn { width: 100%; justify-content: center; } /* ---------- Waitlist modal (reuses .rate-overlay/.rate-dialog mechanics, driven by body.ts-open like the welcome modal) ---------- */ body.ts-open .rate-overlay.ts-overlay { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } body.ts-open .ts-dialog { transform: translateY(0); } .ts-dialog { text-align: left; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ts-dialog .rate-title, .ts-dialog .rate-sub { text-align: left; } .ts-group-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .ts-group-label .req { color: var(--gold-bright); } .ts-radios { display: grid; gap: 8px; } .ts-radio { position: relative; display: block; padding: 12px 14px 12px 42px; border: 1px solid var(--line); background: var(--black); color: var(--ivory); font-size: var(--text-sm); line-height: 1.5; cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .ts-radio input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .ts-radio::before, .ts-radio::after { content: ""; position: absolute; border-radius: 50%; } .ts-radio::before { left: 14px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border: 1px solid var(--line-strong); } .ts-radio::after { left: 18px; top: 50%; margin-top: -4px; width: 8px; height: 8px; background: var(--gold); transform: scale(0); transition: transform 140ms var(--ease-out); } .ts-radio:hover { border-color: var(--line-strong); } .ts-radio:has(input:checked) { border-color: var(--gold); background: var(--surface); } .ts-radio:has(input:checked)::before { border-color: var(--gold); } .ts-radio:has(input:checked)::after { transform: scale(1); } .ts-radio:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ---------- Urgency / capacity band ---------- Numbers render from HD_ROUTE_CAP / HD_SPOTS_TAKEN in js/config.js; the countdown ticks to the real Friday-night route cutoff. */ /* Route-capacity ribbon — a thin strip riding the fixed header (home-delivery only). Replaces the old full-width urgency band. Opaque so it reads over the hero before the header gains its scrolled background. */ .header-ribbon { background: #14100A; border-block: 1px solid var(--line-strong); padding: 7px 16px; } .header-ribbon p { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .header-ribbon strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; } .header-ribbon a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .header-ribbon { padding-block: 6px; } .header-ribbon p { gap: 2px 14px; font-size: var(--text-2xs); } .header-ribbon-why { display: none; } /* Phones: header + two-line ribbon + buy bar took ~24% of the screen. The ribbon folds away once the page scrolls; it is read on arrival (audit C8). .is-scrolled is set by js/main.js past 24px. */ .header-ribbon { max-height: 80px; overflow: hidden; transition: max-height var(--t-med) ease, padding var(--t-med) ease, border-width var(--t-med) ease; } .header.is-scrolled .header-ribbon { max-height: 0; padding-block: 0; border-width: 0; } } /* ---------- Apothecary: one-time vs subscribe rows ---------- (subscribe.html #apothecary). Two purchase paths per card: a quiet one-time row, and an emphasized Subscribe & Save row (20% off the first order at checkout, 10% off every order after — the displayed subscribe price IS the ongoing 10%-off price). */ .apo-buy { display: grid; gap: 10px; margin-top: 14px; } .apo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line); background: var(--black); } .apo-row--sub { border-color: var(--gold); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(201, 164, 58, 0.35); } .apo-row-info { display: grid; gap: 2px; min-width: 0; } .apo-row-label { color: var(--stone); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .apo-row--sub .apo-row-label { color: var(--gold); } .apo-row-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ivory); } .apo-row--sub .apo-row-price { color: var(--gold-bright); } .apo-row-price small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--stone); margin-left: 3px; } .apo-row-perk { flex-basis: 100%; color: var(--stone); font-size: var(--text-xs); line-height: 1.5; } .apo-row-perk strong { color: var(--gold-bright); } .apo-row .add-btn { flex: none; } .apo-row--sub .add-btn { background: var(--gold); border-color: var(--gold); color: var(--black); } .apo-row--sub .add-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--black); } /* ============================================================ SECTION THEMES — the three power sections One brand, three atmospheres, set by a class on : .theme-pickup Farm Pickup — morning at the farm door. Warm earthen tint, light-through-barn-slats texture, amber glow. .theme-route Home Delivery — the evening route. Cool graphite tint, drifting dashed route line, brighter kinetic gold. .theme-ritual Wellness Rituals — the apothecary at candlelight. Pale-gold candle glow, lunar phase motif, warmer tinted sections. Everything stays inside the existing token palette — these are lighting changes, not new colors. ============================================================ */ /* ---------- 1 · Farm Pickup ---------- */ .theme-pickup .hero--sub .hero-bg { background: radial-gradient(100% 80% at 50% 0%, rgba(94, 66, 24, 0.42) 0%, transparent 62%), radial-gradient(70% 50% at 85% 100%, #171307 0%, transparent 55%), var(--black); } /* Morning light through barn slats */ .theme-pickup .hero--sub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient( 90deg, transparent 0 92px, rgba(232, 199, 102, 0.05) 92px 96px ); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, transparent 80%); pointer-events: none; } .theme-pickup .hero-glow--a { background: radial-gradient(circle, #b9822e 0%, transparent 65%); opacity: 0.22; } /* ============================================================ FARM PICKUP — mobile pass Most of this page's traffic is phones. Measured before the pass (375×812): the hero ran 1122px, the catalog didn't begin until 2093px, each product card was 712px, and the primary CTA was 382px wide inside a 342px container — clipped, not wrapped. ============================================================ */ /* ---------- Primary text-to-order CTA ---------- .btn is nowrap by design (it keeps short labels from breaking mid -phrase). That's wrong for this one long label, so this button opts out and stacks its two parts instead. */ .pickup-text-cta { white-space: normal; } .pickup-cta-copy { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } .pickup-cta-num { color: inherit; } @media (max-width: 560px) { .pickup-text-cta { width: 100%; padding: 12px 18px; min-height: 60px; /* two lines of caps still need a real tap target */ } .pickup-cta-copy { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.25; } .pickup-cta-num { font-size: 0.95em; letter-spacing: 0.1em; opacity: 0.82; } /* Match the secondary button so the pair reads as a stack, not a wide button with a small one orphaned underneath. */ .theme-pickup .hero-ctas { flex-direction: column; gap: 12px; /* --sp-5 (64px) is tuned for a desktop hero with room to breathe. On a phone it reads as the page having ended. */ margin-top: var(--sp-3); } .theme-pickup .hero-ctas .btn { width: 100%; } .theme-pickup .hero-lede { margin-top: var(--sp-2); font-size: var(--text-base); } } /* ---------- Hero facts ---------- Replaces four separately-bordered .shop-note rows. Sentence case at a readable size instead of 11.5px letter-spaced caps, and one shared frame instead of four. */ .pickup-facts { list-style: none; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-3); max-width: 640px; display: grid; gap: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.28); text-align: left; } .pickup-facts li { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 12px; font-size: var(--text-sm); line-height: 1.45; color: var(--stone); letter-spacing: 0; text-transform: none; } .pickup-facts svg { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; } .pickup-facts strong { color: var(--gold-bright); font-weight: 700; } @media (min-width: 780px) { .pickup-facts { grid-template-columns: 1fr 1fr; gap: 14px 28px; } } /* ---------- Where & When ---------- */ .visit-card { max-width: 620px; margin: 0 auto; padding: var(--sp-4) var(--sp-3); border: 1px solid var(--line); background: var(--charcoal); } .visit-row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .visit-row:last-of-type { border-bottom: 0; } .visit-row svg { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; } .visit-row strong { display: block; margin-bottom: 4px; font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .visit-row p { color: var(--stone); font-size: var(--text-sm); line-height: 1.55; } /* Navigate / call / text. Three equal thumb targets on a phone. */ .visit-actions { display: grid; gap: 10px; margin-top: var(--sp-3); } .visit-actions .btn { width: 100%; padding: 0 16px; } @media (min-width: 560px) { .visit-actions { grid-template-columns: 1.4fr 1fr 1fr; } } /* ---------- Compact product cards on mobile ---------- The 4/5 plate is beautiful on desktop and punishing on a phone: it alone was ~430px of a 712px card, so five varieties meant 3,560px of scrolling to compare five prices. Desktop is untouched. */ @media (max-width: 700px) { .theme-pickup .product-card .plate { aspect-ratio: 16 / 10; } .theme-pickup .product-card .plate-cap, .theme-pickup .product-card .plate-num { display: none; } .theme-pickup .product-body { padding: var(--sp-2); gap: 6px; } .theme-pickup .product-desc { font-size: var(--text-sm); line-height: 1.5; /* Two lines is enough to set the tone; the product page carries the full copy for anyone who wants it. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-pickup .product-latin { font-size: var(--text-xs); } .theme-pickup .shop-grid { gap: var(--sp-2); } } /* ---------- Sticky order bar ---------- */ .pickup-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 10, 7, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line-strong); transform: translateY(110%); transition: transform var(--t-med) var(--ease-out); } .pickup-stickybar.is-visible { transform: none; } .pickup-stickybar-copy { min-width: 0; } .pickup-stickybar-copy strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold-bright); line-height: 1.1; } .pickup-stickybar-copy small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pickup-stickybar .btn { flex: none; min-height: 46px; padding: 0 20px; } /* Desktop keeps the header cart and the hero CTA in view; a fixed bar there is just chrome eating the viewport. */ @media (min-width: 900px) { .pickup-stickybar { display: none; } } /* Never let the bar sit on top of the footer's last line. */ @media (max-width: 899px) { .theme-pickup .footer { padding-bottom: 96px; } } /* The pickup-flow band sits on warm soil */ .pickup-band { position: relative; padding-block: clamp(56px, 7vw, 104px); background: linear-gradient(180deg, #191307 0%, var(--charcoal) 100%); border-block: 1px solid var(--line); } .pickup-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: var(--sp-4); color: var(--stone); font-size: var(--text-sm); font-weight: 400; text-align: center; } .pickup-note strong { color: var(--gold-bright); font-weight: 600; } .pickup-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* ---------- 2 · Home Delivery ---------- */ .theme-route .hero--sub .hero-bg { background: radial-gradient(100% 80% at 50% 0%, rgba(36, 44, 50, 0.55) 0%, transparent 60%), radial-gradient(70% 50% at 15% 100%, #12161a 0%, transparent 55%), var(--black); } /* Passing-headlight streaks, barely there */ .theme-route .hero--sub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient( 115deg, transparent 0 150px, rgba(232, 199, 102, 0.035) 150px 153px ); -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 60%); mask-image: linear-gradient(180deg, transparent 10%, #000 60%); pointer-events: none; } .theme-route .hero-glow--a { background: radial-gradient(circle, var(--gold-bright) 0%, transparent 62%); opacity: 0.13; } /* The route line: a dashed gold path drifting beneath the hero copy */ .route-line { width: min(680px, 86%); margin: var(--sp-4) auto 0; color: var(--gold); opacity: 0.55; } .route-line .route-path { stroke-dasharray: 7 11; animation: route-dash 26s linear infinite; } @keyframes route-dash { to { stroke-dashoffset: -360; } } .theme-route .hd-towns { margin-top: var(--sp-2); } /* Unfinished copy marker. Anything carrying [data-todo] is placeholder text awaiting real operational detail — it renders legibly (so the page is never broken) but flags itself hard enough that it can't ship unnoticed. Delete the attribute when the copy is real; the styling disappears with it. */ [data-todo] em { font-style: normal; padding: 1px 6px; border-bottom: 1px dashed var(--gold); background: rgba(201, 164, 58, 0.10); color: var(--gold-bright); } [data-todo] em::before { content: "⚑ "; opacity: 0.8; } /* Hero entry price. Quiet by design — it answers "can I afford this?" without competing with the headline for attention. */ .theme-route .hd-hero-from { margin-top: var(--sp-3); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--stone); } .theme-route .hd-hero-from strong { color: var(--gold-bright); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0; } .theme-route .hd-hero-from span { color: rgba(181, 171, 152, 0.75); } @media (max-width: 560px) { .theme-route .hd-hero-from span { display: block; margin-top: 2px; } } /* ---------- Home Delivery photography ---------- Added because the page was carrying one photograph across 9,000px of a FOOD subscription offer. Appetite is the argument here; type can't make it alone. */ /* Hero photograph. Sits behind the hero copy, above .hero-bg. The hero is already type-dense — kicker, headline, lede, price, two CTAs, guarantee, route line, towns. A full-bleed photo behind all of that is clutter, so the image is anchored to one corner and feathered out: atmosphere, not a competing subject. */ .theme-route .hd-hero-photo { --hd-hero-fit: contain; position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .theme-route .hd-hero-photo img { position: absolute; right: 2%; top: 45%; transform: translateY(-50%); width: min(52%, 640px); height: auto; object-fit: cover; opacity: 0.72; border-radius: 4px; /* Feather all 4 edges smoothly so the photo melts into the dark background */ -webkit-mask-image: radial-gradient(ellipse 65% 65% at 62% 52%, #000 25%, rgba(0, 0, 0, 0.65) 55%, transparent 85%); mask-image: radial-gradient(ellipse 65% 65% at 62% 52%, #000 25%, rgba(0, 0, 0, 0.65) 55%, transparent 85%); } /* Keeps the bottom of the hero grounded in solid black so the towns line and route SVG never sit on top of photographic texture. */ .theme-route .hd-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, var(--black) 96%); } /* On narrow screens the copy owns the whole column — the image stays well back so nothing competes with a 2-line headline on a phone. It used to sit 18% off the right edge at 0.28, which cropped the cap and left an unreadable sliver. Now that the shot is a single isolated mushroom rather than a busy cascade, it can hold a little more presence without becoming noise: pulled mostly on-screen so the cap-and-stem silhouette is whole, and lifted just enough to register as a mushroom. The ::after gradient still grounds the bottom in solid black, so the towns line and route SVG never sit on photographic texture. */ @media (max-width: 720px) { .theme-route .hd-hero-photo img { /* The desktop rule now centres the photo with top + transform; clear both so the bottom-anchored phone placement below still applies. */ top: auto; transform: none; width: 78%; /* Pushed right so the stem clears the centre column — the copy, the CTAs and the guarantee chip are all centred, and a bright vertical stem straight through them competes instead of supporting. */ right: -20%; /* Lifted off the floor. At bottom:-4% the ::after black gradient ate the stem and left only a dome, which reads as a hill rather than a mushroom — the exact legibility problem this swap was meant to fix. This clears the gradient enough for cap AND stem to survive. */ bottom: 8%; /* Shape carries recognition better than detail does, so once the whole silhouette is visible it can sit back down at background weight. */ opacity: 0.30; } } /* Program-card plates. The fresh varieties were shot on black, so they sit flush inside the frame with no matting needed. */ .theme-route .hd-program-plate { position: relative; margin: 0 0 var(--sp-1); aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: var(--black); } .theme-route .hd-program-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); } .theme-route .hd-program:hover .hd-program-plate img { transform: scale(1.04); } /* Hairline gold inner rule — the engraved-plate motif, kept subtle so three cards in a row don't turn into a picture frame shop. */ .theme-route .hd-program-plate::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 164, 58, 0.20); pointer-events: none; } /* Placeholder plate for a shot that doesn't exist yet. Deliberately reads as "reserved space", never as a broken image. */ .theme-route .hd-program-plate--todo { display: grid; place-content: center; gap: 8px; background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); border-style: dashed; border-color: rgba(201, 164, 58, 0.30); } .theme-route .hd-plate-todo-art { display: block; width: 46px; margin: 0 auto; color: var(--gold); opacity: 0.5; } .theme-route .hd-plate-todo-cap { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); opacity: 0.8; text-align: center; } @media (prefers-reduced-motion: reduce) { .theme-route .hd-program:hover .hd-program-plate img { transform: none; } } /* ---------- 3 · Wellness Rituals ---------- */ .theme-ritual .hero--sub .hero-bg { background: radial-gradient(46% 52% at 50% 4%, rgba(243, 224, 160, 0.13) 0%, transparent 70%), radial-gradient(80% 55% at 50% 108%, rgba(138, 109, 37, 0.18) 0%, transparent 60%), var(--black); } .theme-ritual .hero-glow--a { background: radial-gradient(circle, var(--gold-pale) 0%, transparent 60%); opacity: 0.10; filter: blur(110px); } .theme-ritual .section--tint { background: #161109; } /* ---------- 5 · Sub to Soil — the growing bed ---------- */ /* The one power page that had no atmosphere of its own. Light through leaves rather than through barn slats: a low green-shifted earth glow at the base of the hero, as if lit from the ground up. Still the same palette — this is a lighting change, not a new color. */ .theme-soil .hero--sub .hero-bg { background: radial-gradient(90% 70% at 50% 0%, rgba(72, 78, 40, 0.42) 0%, transparent 62%), radial-gradient(80% 55% at 50% 110%, rgba(94, 84, 30, 0.28) 0%, transparent 60%), var(--black); } /* Growth: faint vertical stems rising from the base of the hero */ .theme-soil .hero--sub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient( 90deg, transparent 0 54px, rgba(201, 164, 58, 0.045) 54px 56px ); -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 62%); mask-image: linear-gradient(0deg, #000 0%, transparent 62%); pointer-events: none; } .theme-soil .hero-glow--b { background: radial-gradient(circle, #6d7a34 0%, transparent 64%); opacity: 0.20; } .theme-soil .section--tint { background: #12130C; } /* ---------- The hero's one visual ---------- Modelled on a soil cross-section: seedlings on the surface, root system running the depth below. It states the program without a word of copy — what grows above is fed by what was built below. Two earlier attempts are recorded so neither returns. Horizon BANDS across the background read as banding artifacts behind the headline. A LABELLED core sample beside the copy used grower jargon a homeowner would not follow, and on a phone it stacked under the CTAs and pushed the hero half a screen past the fold. Both failure modes are designed out here: nothing to read, and position:absolute so it CANNOT add height at any width. The roots fade with depth, so the headline always sits in clear space rather than over texture — the thing the bands got wrong. ⚠️ THIS WANTS TO BE A PHOTOGRAPH. The reference works because of real root-hair density, which line art cannot match. Replace with a shot of seedlings over substrate-built soil when it exists. */ .soil-canopy { position: absolute; /* Offset so the soil line lands in the gap between the header and the kicker — at top:0 the sprouts grew straight through the nav. */ top: 62px; left: 0; right: 0; /* An EXPLICIT height, not bottom:0. An is a replaced element, so with height:auto it takes its intrinsic viewBox ratio and `bottom` is simply ignored — which left the roots ending less than halfway down. calc() against the offset makes them run to the section's end. */ height: calc(100% - 62px); /* ...and an EXPLICIT width for the same reason, which was the other half of the same bug: with width:auto the replaced element sized itself from that height and the viewBox ratio (1440/900), so on any screen wider than 1.6x the hero height the canopy stopped short and the sprouts covered only the left of the page. `right: 0` cannot stretch it. */ width: 100%; z-index: 0; color: var(--gold); pointer-events: none; } .soil-canopy-sprouts { opacity: 0.5; } .soil-canopy-line { opacity: 0.3; } /* Roots thin out with depth so type never sits on texture. */ .soil-canopy-roots { opacity: 0.26; /* Thins with depth so type sits in clear space, but never reaches zero: the roots have to still be there at the bottom edge. */ -webkit-mask-image: linear-gradient(180deg, #000 6%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.34) 100%); mask-image: linear-gradient(180deg, #000 6%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.34) 100%); } /* Hero copy sits above the soil. */ .theme-soil .hero-inner { position: relative; z-index: 1; } @media (max-width: 720px) { /* Phones have less headroom above the kicker, and the type is tighter against the art, so everything steps back. */ .soil-canopy { top: 48px; height: calc(100% - 48px); } .soil-canopy-sprouts { opacity: 0.42; } .soil-canopy-roots { opacity: 0.2; } } @media (prefers-reduced-motion: no-preference) { .soil-canopy { animation: soil-canopy-in 1500ms var(--ease-out) both; } } @keyframes soil-canopy-in { from { opacity: 0; transform: translateY(-16px); } } /* The cycle, grown into the theme: moss-cast icon rings (lichen on a ring of stone), spore-trail connectors instead of hard rules, and a dashed return arc that actually closes the loop. */ .theme-soil .cycle-icon { border-color: rgba(109, 122, 52, 0.55); background: radial-gradient(80% 80% at 50% 30%, rgba(109, 122, 52, 0.14) 0%, transparent 70%); } /* Stage numerals. On a phone the grid drops to 2×2 and the connectors are hidden, so nothing said these four were a SEQUENCE — they read as an unordered set of facts. Numerals restore the order at every width and cost no markup: a CSS counter, matching the Roman numerals the Learn section already uses. */ .theme-soil .cycle { counter-reset: soilstage; } .theme-soil .cycle-node { counter-increment: soilstage; } .theme-soil .cycle-node::before { content: counter(soilstage, upper-roman); display: block; margin-bottom: 6px; font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--gold-deep); letter-spacing: 0.1em; } .theme-soil .cycle-node:not(:last-child)::after { height: 0; background: none; border-top: 1px dashed var(--gold-deep); opacity: 0.8; } .cycle-return { margin-top: var(--sp-2); text-align: center; color: var(--gold); } .cycle-return svg { width: min(640px, 92%); display: block; margin: 0 auto; } .cycle-return p { margin-top: 2px; font-size: var(--text-xs); font-style: italic; color: var(--stone); letter-spacing: 0.06em; } @media (max-width: 820px) { /* The 2×2 grid has no line to close; the words carry the loop alone. */ .cycle-return svg { display: none; } .cycle-return { margin-top: var(--sp-3); } } /* Soil strata: a cut through a garden bed between the argument and the ask. Layered humus bands, darker with depth, flecked with mineral grit — all gradient, no image. */ .soil-strata { height: 22px; background: radial-gradient(circle at 12% 30%, rgba(232, 199, 102, 0.10) 0 1px, transparent 2px), radial-gradient(circle at 34% 70%, rgba(201, 164, 58, 0.08) 0 1px, transparent 2px), radial-gradient(circle at 57% 25%, rgba(232, 199, 102, 0.07) 0 1px, transparent 2px), radial-gradient(circle at 78% 65%, rgba(201, 164, 58, 0.09) 0 1px, transparent 2px), radial-gradient(circle at 92% 35%, rgba(232, 199, 102, 0.06) 0 1px, transparent 2px), linear-gradient(180deg, #191A0F 0%, #15130C 38%, #100E09 72%, var(--black) 100%); background-size: 220px 22px, 180px 22px, 260px 22px, 200px 22px, 240px 22px, 100% 100%; border-block: 1px solid var(--line); } /* The consultation section trades the apothecary's candle glow for the same ground-up moss light as the hero — booking the visit should feel like standing in the garden it produces. */ .theme-soil .apothecary { background: radial-gradient(80% 70% at 50% 100%, rgba(88, 96, 44, 0.16) 0%, transparent 62%), radial-gradient(60% 50% at 50% 0%, rgba(201, 164, 58, 0.04) 0%, transparent 60%), var(--charcoal); } /* Benefit icons pick up the same lichen ring as the cycle. */ .theme-soil .promise-icon { border-color: rgba(109, 122, 52, 0.5); background: radial-gradient(80% 80% at 50% 30%, rgba(109, 122, 52, 0.12) 0%, transparent 70%); } /* ---------- 4 · Learn — the old library ---------- */ /* Ancient-wisdom atmosphere: lamplight on dark shelves, a faint engraved seal behind the hero, sepia-tinted sections, and an illuminated drop cap opening every article. Same tokens, different candle. */ .theme-learn .hero--sub .hero-bg { background: radial-gradient(60% 55% at 50% 0%, rgba(94, 66, 24, 0.5) 0%, transparent 65%), radial-gradient(45% 40% at 50% 8%, rgba(243, 224, 160, 0.09) 0%, transparent 70%), radial-gradient(70% 50% at 10% 100%, #14100a 0%, transparent 55%), var(--black); } /* The seal: faint concentric rings, like a spore print pressed in wax */ .theme-learn .hero--sub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient( circle at 50% 42%, transparent 0 34px, rgba(201, 164, 58, 0.05) 34px 36px ); -webkit-mask-image: radial-gradient(55% 60% at 50% 42%, #000 0%, transparent 78%); mask-image: radial-gradient(55% 60% at 50% 42%, #000 0%, transparent 78%); pointer-events: none; } .theme-learn .hero-glow--a { background: radial-gradient(circle, #b9822e 0%, transparent 62%); opacity: 0.16; filter: blur(90px); } /* Kicker reads like an inscription */ .theme-learn .hero-kicker { letter-spacing: 0.34em; } /* Sections take a candlelit sepia rather than neutral charcoal */ .theme-learn .section--tint { background: #151008; } /* The illuminated drop cap — every article opens like a manuscript */ .theme-learn .article-body > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--gold-bright); } /* Article rules get a small centered diamond, like a scribe's mark */ .theme-learn .article-body hr { border: 0; height: 1px; background: var(--line); position: relative; overflow: visible; margin-block: var(--sp-4); } .theme-learn .article-body hr::after { content: "◆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 9px; color: var(--gold-deep); background: var(--black); padding-inline: 10px; } /* The lunar rhythm — waxing to full and back, once a month */ .moons { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: var(--sp-4); } .moons span { width: 13px; height: 13px; border: 1px solid var(--gold-deep); border-radius: 50%; } .moons span:nth-child(2) { background: linear-gradient(90deg, transparent 65%, var(--gold-deep) 65%); } .moons span:nth-child(3) { background: linear-gradient(90deg, transparent 35%, var(--gold) 35%); } .moons span:nth-child(4) { width: 17px; height: 17px; background: var(--gold-pale); border-color: var(--gold-pale); box-shadow: 0 0 16px rgba(243, 224, 160, 0.45); } .moons span:nth-child(5) { background: linear-gradient(90deg, var(--gold) 65%, transparent 65%); } .moons span:nth-child(6) { background: linear-gradient(90deg, var(--gold-deep) 35%, transparent 35%); } @media (prefers-reduced-motion: reduce) { .route-line .route-path { animation: none; } } /* ============================================================ HOME DELIVERY — MOBILE COMPACT MODE Progressive disclosure on phones: an option's supporting line only renders while that option is selected, decoration steps aside, and the marketing cards fold to name · bar · price · CTA. Desktop is untouched. ============================================================ */ @media (max-width: 640px) { /* Builder radios: the description belongs to the chosen option only */ [data-hd] .ritual-option input:not(:checked) ~ .ritual-option-body .ritual-option-desc { display: none; } /* Size chips swap to their terse form — every size keeps its price, per-lb rate and meal count, so all three stay comparable at once */ [data-hd] .hd-chip-full { display: none; } [data-hd] .hd-chip-terse { display: block; } /* The summary's photography plate is decoration — the numbers are the summary */ .ritual-summary-plate { display: none; } /* Program cards fold: keep name, one-line desc, mix bar, price, CTA */ .hd-mix-legend, .hd-cycle, .ts-feats { display: none; } /* Two Programs: tighter head-to-cards rhythm on a phone */ #boxes.section { padding-top: clamp(48px, 12vw, 72px); } #boxes .hd-programs { margin-top: var(--sp-4); } /* Builder: compress the step-to-step rhythm so a chosen program's price and ALL THREE size chips stay on screen together — changing size shouldn't cost a scroll. Scoped to [data-hd] so the Monthly Ritual builder (same .ritual-* classes) keeps its airier layout. The step number rides inline with its heading instead of stacking. */ [data-hd] .ritual-steps { gap: var(--sp-3); } [data-hd] .ritual-legend { font-size: var(--text-lg); } [data-hd] .ritual-legend .ritual-step-num { display: inline; margin-bottom: 0; } [data-hd] .ritual-legend .ritual-step-num::after { content: " · "; letter-spacing: 0; } [data-hd] .ritual-hint { margin-top: 2px; line-height: 1.5; } [data-hd] .ritual-options, [data-hd] .hd-chips { margin-top: var(--sp-2); } /* Three sizes across one row — comparable at a glance, and the whole step collapses from ~240px to a single band. */ [data-hd] .hd-chips { gap: 8px; flex-wrap: nowrap; } [data-hd] .hd-chip { flex: 1 1 0; min-width: 0; } [data-hd] .hd-chip > span { padding: 12px 10px; gap: 2px; } [data-hd] .hd-chip-size { font-size: var(--text-lg); } [data-hd] .hd-chip-tag { display: block; margin: 2px 0 0; padding: 2px 5px; font-size: var(--text-2xs); } [data-hd] .hd-chip-sub { font-size: 0.72rem; line-height: 1.45; } /* The per-delivery figure is the number being compared — give it weight */ [data-hd] .hd-chip-terse--price { font-size: 0.95rem; font-weight: 600; color: var(--ivory); margin-top: 2px; } [data-hd] .hd-chip input:checked ~ span .hd-chip-terse--price { color: var(--gold-bright); } } /* ============================================================ SUBSCRIPTION PLAN PAGES (subscribe-lions-mane / subscribe-duo) Small additions on top of the shared PDP system. ============================================================ */ /* Breadcrumb back to the plans grid */ .pdp-back { display: inline-flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 var(--sp-2); font-size: var(--text-sm); color: var(--stone); transition: color var(--t-fast) ease; } .pdp-back:hover { color: var(--gold); } .pdp-back svg { width: 16px; height: 16px; } /* "How the subscription works" — the anxiety-killer timeline. Lives inside the buy panel, so it stays quiet: numbers, one bold lead-in each, no borders competing with the buy button. */ .plan-steps { display: grid; gap: 14px; margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); } .plan-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: var(--text-sm); line-height: 1.5; color: var(--stone); } .plan-step strong { color: var(--ivory); } .plan-step-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-display); font-size: var(--text-sm); color: var(--gold); } /* The Ritual Ladder — marking the rung you're on. The current card is informational, not clickable, so it dims slightly and drops the hover affordances. */ .plan-card--current { border-color: var(--line-strong); opacity: 0.92; } .plan-flag--current { background: transparent; color: var(--gold); border: 1px solid var(--line-strong); } .plan-card .plan-name a { color: inherit; transition: color var(--t-fast) ease; } .plan-card .plan-name a:hover { color: var(--gold-bright); } /* Plan-card media/name click-through affordance on subscribe.html */ .plan-media-link { display: block; } .plan-media-link:hover img { transform: scale(1.03); } .plan-media-link img { transition: transform var(--t-med) var(--ease-out); } .plan-details-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--text-sm); color: var(--gold); } .plan-details-link svg { width: 15px; height: 15px; } .plan-details-link:hover { color: var(--gold-bright); } /* ============================================================ MOBILE LUXURY PASS — rhythm, composition, and the menu Most traffic is phones; the system was tuned on desktop and the seams all showed at 375px. Measured before this pass: the homepage ran 18,876px (23 screens), the hero carried a ~160px dead band above the kicker, headlines broke on accidents ("grows" alone on its own line), and the menu was seven identical caps links — the one surface every visitor touches, wearing none of the brand's typography. ============================================================ */ /* Composed line breaks everywhere, not accidents. Progressive enhancement — browsers without text-wrap:balance ignore it. */ .hero-title, .h-display, .pdp-title, .hd-program-name, .plan-name, .ritual-summary-title, .section-head h2 { text-wrap: balance; } @media (max-width: 700px) { :root { /* Section breathing: generous on a 27" display, a void on a phone. 23 screens of homepage was mostly this variable. */ --section: clamp(56px, 9vw, 88px); --text-hero: clamp(2.35rem, 10.5vw, 3.2rem); } /* The hero sizes to its content instead of forcing 100dvh — that dead band above the kicker was place-items:center stretching into the leftover height. */ .hero { min-height: auto; padding-block: 118px 72px; } .hero--sub { min-height: auto; padding-block: 118px 56px; } .hero-kicker { font-size: var(--text-2xs); letter-spacing: 0.2em; } /* The flanking rules cost 120px the kicker text needs at 375px, and the absolutely-anchored Descend cue collides with content once the hero stops being 100dvh. Both are desktop flourishes. */ .hero-kicker::before, .hero-kicker::after { display: none; } .hero-scroll { display: none; } /* The lede reads as a wall at 1.25rem×300 across six lines. Base size, tighter measure, same voice. */ .hero-lede { font-size: var(--text-base); max-width: 34ch; margin-top: var(--sp-3); } .hero-ctas { margin-top: var(--sp-4); } /* Variety plates: the 1/1 plate × 5 cards was ~5,000px of the homepage. 16/11 keeps the appetite, halves the scroll toll. */ .variety-grid { margin-top: var(--sp-4); } .variety-card .plate { aspect-ratio: 16 / 11; } .variety-body { padding: var(--sp-2); } /* The homepage apothecary block was the single tallest section left (3,264px) — same compact treatment the shop cards got. */ .apoth-grid { margin-top: var(--sp-4); } .apoth-grid .product-card .plate { aspect-ratio: 16 / 10; } .apoth-grid .product-card .plate-cap, .apoth-grid .product-card .plate-num { display: none; } .apoth-grid .product-body { padding: var(--sp-2); gap: 6px; } .apoth-grid .product-desc { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* The whole variety card is a link — say so. A quiet gilt arrow after the name, nudging on hover/tap. */ .variety-body h3::after { content: "→"; display: inline-block; margin-left: 10px; color: var(--gold); font-family: var(--font-body); font-weight: 400; transform: translateX(0); transition: transform var(--t-fast) var(--ease-out); } .variety-card:hover .variety-body h3::after { transform: translateX(6px); } /* ---------- The menu, dressed for the house ---------- Full-screen serif wayfinding instead of a generic caps list: left-aligned Playfair, the current page in gilt italic, and the farm's signature line held quietly at the bottom. The existing stagger animation is kept — it reads better on type this size. */ @media (max-width: 1024px) { .nav { align-items: flex-start; justify-content: center; padding: 96px 34px 120px; gap: 6px; /* Own atmosphere instead of page bleed-through: at 0.97 the hero's ivory display type ghosted legibly behind the links and read as unfinished, not atmospheric. */ background: radial-gradient(120% 55% at 50% 0%, rgba(201, 164, 58, 0.06), transparent 60%), rgba(9, 8, 5, 0.99); } .nav a:not(.btn) { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ivory); min-height: 54px; } .nav a:not(.btn)::after { display: none; } /* underline is desktop chrome */ .nav a:not(.btn):hover { color: var(--gold-bright); } .nav a[aria-current="page"] { color: var(--gold-bright); font-style: italic; } /* The house signature, set where a colophon belongs. */ .nav::after { content: "Fairfield, New Jersey · Est. 2020"; position: absolute; left: 34px; bottom: 44px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--stone); opacity: 0; transition: opacity 300ms var(--ease-out) 320ms; } body.nav-open .nav::after { opacity: 0.8; } } /* ---------- The Standard, as a ledger (mobile) ---------- Three bordered cards with icon-above-prose stack to ~1,220px on a phone — a wall of paragraphs where the reader is scanning. The content is really three *specifications*, so on mobile it sets as a ledger: icon in the margin, claim, one proof line, hairline between entries. Desktop keeps the three-column plate. */ @media (max-width: 820px) { .pillars { margin-top: var(--sp-3); } .pillar { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; row-gap: 2px; align-items: start; padding: var(--sp-3) var(--sp-2); } .pillar-icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin-bottom: 0; margin-top: 3px; } .pillar h3 { font-size: var(--text-lg); margin-bottom: 0; } .pillar p { line-height: 1.6; } } /* ---------- The Standard, numbered (homepage) ---------- Three outlined cards with a 44px line icon each read as a template, and at ~480px tall they were mostly empty black. The homepage sets the same three claims as numbered columns instead: no boxes, a hairline between columns, a large gilt numeral where the icon was, and body copy big enough to read. 404.html keeps the icon cards. */ .pillars--numbered { gap: 0; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--sp-5); } .pillars--numbered .pillar { background: none; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); } .pillars--numbered .pillar:first-child { border-left: 0; padding-left: 0; } .pillars--numbered .pillar:hover { background: none; } .pillar-num { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: var(--gold); margin-bottom: var(--sp-3); } .pillars--numbered .pillar h3 { white-space: nowrap; margin-bottom: var(--sp-1); } .pillars--numbered .pillar p { color: var(--ivory); opacity: 0.78; font-size: var(--text-base); line-height: 1.6; } @media (max-width: 1080px) { .pillars--numbered .pillar h3 { white-space: normal; } } @media (max-width: 820px) { .pillars--numbered { border-bottom: 0; } .pillars--numbered .pillar { grid-template-columns: 44px 1fr; padding: var(--sp-3) 0; border-left: 0; border-bottom: 1px solid var(--line); } .pillar-num { grid-row: 1 / span 2; font-size: 1.75rem; margin: 2px 0 0; } } /* Centered section eyebrows: the two 36px flanking rules plus 28px of letter-spacing push longer labels ("The Innoculated Standard") onto a second line at 375px. The rules are a desktop flourish; the label is the information. Same call already made on the hero kicker. */ @media (max-width: 700px) { /* The glyph stays on phones. The old pair of 36px rules was decoration worth dropping at this width; a 17px symbol that names the section is information, and costs a fraction of the room. */ .section-head--center .eyebrow::after { content: none; } .section-head--center .eyebrow { letter-spacing: 0.2em; } /* Hard
s in section headlines were placed for desktop measure; on a phone they compound with wrapping. Let text-wrap:balance, already set on .h-display, compose the break instead. */ .section-head--center .h-display br { display: none; } } /* ============================================================ HOMEPAGE NOTES PASS — compact variety tiles, consolidated footer, review clamp, readability bumps ============================================================ */ /* Variety tiles — photo, name, price. Tap through for everything else. */ .variety-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; /* The section head has no bottom margin of its own, so the headline's descenders were sitting on the first row of photos. */ margin-top: clamp(28px, 4vw, 48px); } @media (min-width: 720px) { .variety-tiles { grid-template-columns: repeat(5, 1fr); } } .variety-tile { display: block; text-decoration: none; color: inherit; } .variety-tile figure { margin: 0 0 10px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); transition: border-color var(--t-fast) ease; } .variety-tile:hover figure { border-color: var(--gold); } /* A slow 4% zoom on hover, not just a border colour (audit E4). */ .variety-tile img { transition: transform 1400ms var(--ease-out); } .variety-tile:hover img, .variety-tile.reveal.is-visible:hover img { transform: scale(1.04); } .variety-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .variety-tile-art { display: grid; place-items: center; color: var(--gold); } .variety-tile-art svg { width: 52%; height: auto; stroke-width: 1.3; opacity: 0.9; } .variety-tile h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--ivory); } .variety-tile p { margin-top: 2px; font-size: var(--text-sm); color: var(--stone); } /* 5 tiles in a 2-col grid: let the odd one span the last row cleanly */ @media (max-width: 719px) { .variety-tile:last-child { grid-column: 1 / -1; } .variety-tile:last-child figure { aspect-ratio: 21 / 9; } } /* Footer consolidation — the two tall link columns collapse into compact wrapping rows, sitewide, without touching 15 files. */ /* Phones only (one-column footer). On desktop each column is narrow and wrapped rows came out ragged, so there the links stay a list (audit C10). */ @media (max-width: 560px) { .footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; } } /* Pointer devices get a tighter list; touch keeps the 40px targets. */ @media (hover: hover) and (pointer: fine) and (min-width: 561px) { .footer-links { gap: 0; } .footer-links a { min-height: 32px; } } .footer-links li { margin: 0; } .footer-grid { gap: var(--sp-4); } /* Reviews: clamp long cards, tap to expand (wired in reviewsRail) */ .rev-card.is-clamped .rev-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .rev-card--expandable { cursor: pointer; } .rev-card--expandable .rev-more { margin-top: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } /* Home Delivery: the "Your route" summary panel — small text up a notch for smaller phones and older eyes. */ .ritual-summary .ritual-lines li { font-size: var(--text-base); } .ritual-summary .ritual-lines em { font-size: var(--text-sm); } [data-hd] .ritual-summary small, .ritual-summary .rate-note { font-size: var(--text-sm); } /* Wellness: Subscribe & Save row text was too small on mobile */ .apo-row-label { font-size: var(--text-sm); } .apo-row-perk { font-size: var(--text-sm); } @media (max-width: 640px) { #apothecary .apo-row-perk { font-size: var(--text-sm); line-height: 1.5; } } /* "Built around your life" promises — bigger for readability */ .promise h3 { font-size: var(--text-lg); } .promise p { font-size: var(--text-base); } /* ============================================================ LION'S MANE PLAN PAGE — social proof, spec table, proof, farm story, how-to, reviews, compliance. Everything here is additive; the shared PDP system still owns the gallery, buy row, accordions and sticky bar. ============================================================ */ /* Visually hidden, still read aloud. Used for the comparison table's , which screen readers need and sighted users don't (the section heading already says it). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Rating summary under the product title ---------- */ .pdp-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .pdp-rating .rev-stars svg { width: 15px; height: 15px; } .pdp-rating-score { color: var(--ivory); font-weight: 600; font-size: var(--text-sm); } /* Underlined, not colour-only: the link has to be findable without relying on gold-vs-stone discrimination. */ .pdp-rating-link { color: var(--stone); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); /* inline-block, not inline-flex: the count sits in its own so it can be swapped for a real number, and flex would make the span and the word "reviews" separate items — dropping the space between them and splitting the underline into two segments. Vertical padding carries the tap target instead of min-height. */ display: inline-block; padding-block: 11px; } .pdp-rating-link:hover { color: var(--gold-bright); text-decoration-color: var(--gold); } /* Harvest-list link on the Farm Pickup page (audit F4). */ .shop-join { margin-top: var(--sp-3); text-align: center; color: var(--stone); font-size: var(--text-sm); } .shop-join a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } /* Order confirmation: what happens next (audit F1). */ .order-next { margin: var(--sp-4) auto 0; max-width: 560px; text-align: left; padding: var(--sp-3); border: 1px solid var(--line); background: var(--surface); } .order-next-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .order-next-list { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--stone); font-size: var(--text-sm); line-height: 1.6; } .order-next-list li::marker { color: var(--gold); font-weight: 700; } .order-next-list strong { color: var(--ivory); font-weight: 600; } .order-next-list a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } /* Rating + one verbatim review under the wellness plans (audit D7). */ .proof-row { display: grid; justify-items: center; gap: 6px; margin-top: var(--sp-5); text-align: center; } .proof-quote { margin: 0; max-width: 62ch; } .proof-quote p { color: var(--ivory); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.55; } .proof-quote footer { margin-top: 8px; color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; } .ritual-rating { justify-content: center; margin-top: 6px; } /* The homepage "Rate us" prompt, demoted from a gold button to a line. */ .rev-rate-line { margin-top: var(--sp-4); text-align: center; color: var(--stone); font-size: var(--text-sm); } .rev-rate-link { color: var(--gold-bright); font: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 10px 2px; } .rev-rate-link:hover { color: var(--gold-pale); } /* ---------- Expectation line + trust badges ---------- */ .pdp-expect { margin-top: var(--sp-2); color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } .trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--sp-3); background: var(--line); border: 1px solid var(--line); list-style: none; } .trust-badges li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: var(--black); text-align: center; color: var(--stone); font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0.04em; } .trust-badges svg { width: 22px; height: 22px; color: var(--gold); flex: none; } /* ---------- Comparison table ---------- Reads as a spec sheet: hairlines, no zebra stripes, no colour shouting. Our column is marked by a faint wash and a heavier rule, not by making the other column look ridiculous. */ .cmp-wrap { margin-top: var(--sp-5); overflow-x: auto; } .cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 560px; } .cmp-table th, .cmp-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .cmp-table thead th { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); border-bottom-color: var(--line-strong); white-space: nowrap; } .cmp-table thead th.cmp-ours { color: var(--gold); } .cmp-table tbody th { font-family: var(--font-body); font-weight: 500; color: var(--ivory); width: 34%; } .cmp-table td { color: var(--stone); } .cmp-table .cmp-ours { background: rgba(201, 164, 58, 0.05); color: var(--ivory); font-weight: 500; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-yes { color: var(--gold); margin-right: 8px; font-weight: 700; } /* ---------- Proof / lab transparency ---------- */ .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--sp-5); background: var(--line); border: 1px solid var(--line); } .proof-stat { background: var(--black); padding: var(--sp-4) var(--sp-3); text-align: center; } .proof-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); color: var(--gold); line-height: 1; min-height: 42px; } /* The shared icon rule resolves these to display:block, so the parent's text-align can't reach them — centre them directly. */ .proof-num svg { width: 38px; height: 38px; stroke: var(--gold); margin-inline: auto; } .proof-label { margin-top: 12px; color: var(--ivory); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .proof-note { margin-top: 10px; color: var(--stone); font-size: var(--text-sm); line-height: 1.65; } .proof-cta { margin-top: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .proof-batch { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; } /* ---------- Planned-image slots (farm + how-to) ---------- Same language as the product pages' gallery placeholders: a dashed frame that names the shot, so an unshot image reads as a brief rather than as a broken asset. */ .shot-todo { display: grid; place-content: center; /* Grid items stretch by default, so the block-level icon svg would sit at the left edge of a full-width span. */ justify-items: center; gap: 6px; text-align: center; padding: clamp(20px, 6%, 40px); border: 1px dashed var(--line-strong); background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); aspect-ratio: 4 / 3; } .shot-icon { color: var(--gold); opacity: 0.7; } .shot-icon svg { width: 26px; height: 26px; } .shot-kicker { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .shot-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ivory); } .shot-brief { color: var(--stone); font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; margin-inline: auto; } /* ---------- From our farm ---------- */ .farm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: var(--sp-5); } .farm-shot figcaption { margin-top: 12px; color: var(--gold); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; } .farm-visit { display: flex; align-items: flex-start; gap: 14px; margin-top: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } .farm-visit svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; } .farm-visit strong { color: var(--ivory); } .farm-visit a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .farm-visit a:hover { color: var(--gold-bright); } /* ---------- How to use ---------- */ .howto-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: var(--sp-5); } /* Production (SHOW_PLANNED_SHOTS = False) has no how-to figure yet, so the steps sit alone, centred, at reading width instead of half a grid. */ .howto-grid--solo { grid-template-columns: minmax(0, 720px); justify-content: center; } .howto-shot { margin: 0; position: relative; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(130% 90% at 50% 12%, var(--surface-2) 0%, var(--surface) 45%, #0F0D08 100%); } .howto-shot img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; display: block; } /* A gallery slot with no photo and no brief: icon and one quiet line. */ .pdp-shot-todo--quiet { border-style: solid; opacity: 0.7; } .howto-steps { list-style: none; display: grid; gap: var(--sp-3); } .howto-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .howto-steps li:last-child { border-bottom: none; padding-bottom: 0; } .howto-num { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); } .howto-steps h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ivory); margin-bottom: 6px; } .howto-steps p { color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } /* ---------- Reviews (stacked list, reusing .rev-card) ---------- */ .rev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: var(--sp-5); } /* .rev-card is built for the homepage rail; in a grid its flex basis is inert, but the scroll-snap and fixed basis are reset here so the cards fill their tracks. */ .rev-list .rev-card { flex: initial; scroll-snap-align: none; } /* Cards size to their own quote instead of stretching to the tallest one, which left two-line quotes in ~350px boxes with the name floating at the bottom, far from its words (audit C6). */ .rev-track { align-items: flex-start; } .rev-list { align-items: start; } .rev-card .rev-meta { margin-top: 4px; } .rev-date { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; } .rev-verified { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--gold); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; } .rev-verified svg { width: 15px; height: 15px; flex: none; } /* ---------- Ladder additions ---------- */ .plan-rating { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ivory); font-size: var(--text-sm); font-weight: 600; } .plan-rating .rev-stars svg { width: 13px; height: 13px; } .plan-rating-count { color: var(--stone); font-weight: 400; } .plan-vs { margin-top: 8px; color: var(--gold); font-size: var(--text-sm); } .plan-vs strong { color: var(--gold-bright); } /* ---------- Compliance band ---------- */ .disclaimer-band { padding: var(--sp-4) 0; border-top: 1px solid var(--line); background: var(--black); } .disclaimer-band p { color: var(--stone); font-size: var(--text-xs); line-height: 1.7; text-align: center; max-width: 68ch; margin-inline: auto; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .howto-grid { grid-template-columns: 1fr; } .farm-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .proof-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* The sticky bar had one job and the product name was crowding it out — "Lion's Mane Pow…" is noise. Price and button remain. (Pages with the thumbnail card keep the name: it sits on its own line above the price there, so it crowds nothing; see below.) */ .sticky-buy-title { display: none; } .sticky-buy-id .sticky-buy-title { display: block; font-size: var(--text-sm); } .sticky-buy-thumb { width: 44px; height: 44px; } .sticky-buy-id { gap: 12px; } .sticky-buy-inner { gap: 12px; } .sticky-buy .btn { padding: 0 20px; } .sticky-buy-id .sticky-buy-name .product-unit { font-size: var(--text-2xs); color: var(--stone); } /* The bar inherits nowrap + ellipsis from the shared rule. With the name gone the remaining string is the price, and "then $27/mo" is the one part of it that must never be clipped — a recurring charge hidden behind an ellipsis is the exact pattern this page avoids. So it wraps to two lines instead of truncating. */ .sticky-buy-name { white-space: normal; overflow: visible; line-height: 1.3; } .sticky-buy-name .product-unit { margin-left: 0; font-size: var(--text-sm); color: var(--ivory); } .trust-badges li { padding: 12px 4px; letter-spacing: 0; } .cmp-table { min-width: 460px; } .cmp-table th, .cmp-table td { padding: 13px 12px; } } /* Comparison table on a phone. A three-column table cannot hold its shape at 375px — the row label squeezes to six lines and the third column falls off the edge. Each row becomes its own small card instead: the spec as a heading, then the two values labelled. Same information, same order, no horizontal scrolling. */ @media (max-width: 700px) { .cmp-wrap { overflow-x: visible; } .cmp-table { min-width: 0; display: block; } .cmp-table thead { display: none; } .cmp-table tbody, .cmp-table tr, .cmp-table tbody th, .cmp-table td { display: block; width: auto; } .cmp-table tbody tr { border: 1px solid var(--line); margin-bottom: 14px; } .cmp-table tbody tr:last-child { margin-bottom: 0; } .cmp-table tbody th { padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(201, 164, 58, 0.05); color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .cmp-table tbody td { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; padding: 11px 14px; border: none; background: transparent; } .cmp-table tbody td + td { border-top: 1px solid var(--line); } .cmp-table tbody td::before { content: attr(data-label); color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-table tbody td.cmp-ours { border-left: none; border-right: none; } } /* ============================================================ PLAN PDP — title above the image on mobile The gallery was eating the whole first screen: a 4:5 plate plus thumbs pushed the name, rating and price entirely below the fold, so the opening view said nothing a shopper could act on. The title block is now its own grid child, placed explicitly: desktop mobile ┌──────┬─────┐ ┌───────┐ │ │ head│ │ head │ │ gal ├─────┤ ├───────┤ │ │panel│ │ gal │ └──────┴─────┘ ├───────┤ │ panel │ └───────┘ Scoped to .pdp-grid--split so the 11 product PDPs, which have no .pdp-head, keep their current two-child layout untouched. ============================================================ */ .pdp-grid--split { grid-template-rows: auto 1fr; /* The 40–80px column gutter is right between image and panel, and far too much between a title and the chips beneath it. */ row-gap: var(--sp-3); } .pdp-grid--split .pdp-head { grid-column: 2; grid-row: 1; } .pdp-grid--split .pdp-gallery { grid-column: 1; grid-row: 1 / span 2; } .pdp-grid--split .pdp-panel { grid-column: 2; grid-row: 2; } @media (max-width: 900px) { /* Single column: hand placement back to auto so DOM order (head → gallery → panel) is what renders. */ .pdp-grid--split .pdp-head, .pdp-grid--split .pdp-gallery, .pdp-grid--split .pdp-panel { grid-column: auto; grid-row: auto; } .pdp-grid--split .pdp-head { margin-bottom: 4px; } /* A 4:5 plate is 419px tall at 375px wide. Cropping to 4:3 gives back ~168px — enough to lift the price and the plan picker into the first screen — and the jar is centred in frame, so nothing of the product is lost. */ .pdp-grid--split .pdp-stage { aspect-ratio: 4 / 3; } .pdp-grid--split .pdp-thumbs { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; } } /* Reclaiming the rest of the first screen on the plan pages. Each of these was sized for a desktop measure and simply carried over. */ @media (max-width: 900px) { /* The section pad clears a 77px fixed header; 97px was ~20px of dead band on top of that. */ .pdp { padding-top: 86px; } /* 24/16 margins around a 44px breadcrumb spent 84px on a back link. */ .pdp-back { margin: 4px 0 10px; } } @media (max-width: 560px) { /* The chip row wrapped to two lines (74px) and sat between the photo and the price — the one number a shopper is looking for. Tighter tracking and padding fold it back to a single row. */ .pdp-grid--split .pdp-chips { gap: 6px; margin-top: 12px; } .pdp-grid--split .pdp-chips span { padding: 5px 9px; letter-spacing: 0.06em; } } /* Price ahead of the chips on a phone. The chip row is genuine substance ("30 daily servings", "whole fruiting body") but it is reassurance, and it was sitting between the photo and the one thing a shopper scrolls to find. Flex `order` reorders the render without touching the source, so the reading order for assistive tech and the desktop layout both stay as authored. */ @media (max-width: 560px) { .pdp-grid--split .pdp-panel { display: flex; flex-direction: column; } .pdp-grid--split .pdp-price { order: -3; margin-top: 14px; } .pdp-grid--split .pdp-per { order: -2; } .pdp-grid--split .plan-save { order: -1; } } /* ============================================================ PUBLISHED RESEARCH (#research) Set like a reference card, not a marketing panel: no gold glow, no icons, no emphasis colour on the findings. The one visual accent is on the parameter list and the disclaimer — the parts a sceptical reader should find first. ============================================================ */ .pdp-research-link { margin-top: var(--sp-2); font-size: var(--text-sm); } .pdp-research-link a { display: inline-flex; align-items: center; gap: 7px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); padding-block: 9px; } .pdp-research-link a:hover { color: var(--gold-bright); } .pdp-research-link svg { width: 15px; height: 15px; } .study { max-width: 74ch; margin: var(--sp-5) auto 0; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); } .study-kicker { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .study-body { margin-top: var(--sp-3); color: var(--stone); font-size: var(--text-base); line-height: 1.8; } .study-body em { color: var(--ivory); font-style: italic; } /* The parameters box. This is the honesty of the section: a citation that hides its n, its population and its dose is doing persuasion, not evidence. */ .study-facts { margin-top: var(--sp-4); border-top: 1px solid var(--line); } .study-facts > div { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); } .study-facts dt { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; } .study-facts dd { color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } .study-ours { display: block; margin-top: 6px; color: var(--ivory); } .study-cite { margin-top: var(--sp-3); color: var(--stone); font-size: var(--text-sm); line-height: 1.7; } .study-cite cite { font-style: italic; } .study-cite a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .study-cite a:hover { color: var(--gold-bright); } .study-cite svg { width: 14px; height: 14px; } /* Not visually shouted, but not tucked away either — same size as the body copy it qualifies, which is the point. */ .study-disclaimer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); color: var(--stone); font-size: var(--text-sm); line-height: 1.75; } .study-disclaimer strong { color: var(--ivory); } @media (max-width: 560px) { .study-facts > div { grid-template-columns: 1fr; gap: 4px; } } /* Per-serving line on the purchase options. The headline prices sit at different cadences ($27/mo, $76.50/quarter, $30 once), so they can't be compared directly — the per-serving figure is the one number that makes the three tiers commensurable. Kept quiet by default; the winning tier bolds its own figure. */ .opt-per { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.08em; } .opt-per strong { color: var(--gold); font-weight: 700; } /* ---------- Buttons must never exceed their container ---------- .btn is `white-space: nowrap` with 34px of side padding and 0.16em tracking, so a long label simply grows past the viewport. The COA button ("Download the current Certificate of Analysis") measured 504px on a 375px screen — and because body carries overflow-x:hidden, the overhang was clipped silently rather than showing a scrollbar, which is why right-hand borders disappeared on phones while desktop looked fine. max-width caps every button at its container; on phones the label is allowed to wrap rather than overflow. min-height still guarantees the tap target, so a two-line button just gets taller. */ .btn { max-width: 100%; } @media (max-width: 560px) { .btn { white-space: normal; text-align: center; padding-inline: 20px; line-height: 1.35; padding-block: 12px; } } /* ---------- "Why three months" note ---------- Reuses the shared .rate-overlay / .rate-dialog shell so it matches the other modals exactly; only the body class differs. */ body.plan-note-open .rate-overlay.plan-overlay { opacity: 1; visibility: visible; transition: opacity var(--t-med) ease; } body.plan-note-open .plan-dialog { transform: translateY(0); } body.plan-note-open { overflow: hidden; } .plan-dialog { width: min(430px, 100%); text-align: left; } .plan-dialog .rate-title { text-align: center; } .plan-note-body { margin-top: var(--sp-3); color: var(--stone); font-size: var(--text-sm); line-height: 1.75; } .plan-note-body em { color: var(--ivory); font-style: italic; } /* The one number that makes the case, shown rather than argued. */ .plan-note-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: var(--sp-3); background: var(--line); border: 1px solid var(--line); } .plan-note-compare > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; background: var(--black); } .plan-note-compare span { color: var(--stone); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; } .plan-note-compare strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--stone); } .plan-note-compare small { color: var(--stone); font-size: var(--text-xs); } .plan-note-compare .is-better { background: rgba(201, 164, 58, 0.06); } .plan-note-compare .is-better strong { color: var(--gold-bright); } .plan-note-actions { display: grid; gap: 10px; } .plan-note-actions .btn { width: 100%; } .plan-note-foot { margin-top: var(--sp-3); text-align: center; } .plan-note-foot a { color: var(--stone); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; } .plan-note-foot a:hover { color: var(--gold-bright); } @media (prefers-reduced-motion: reduce) { .plan-dialog { transition: none; } } /* Planned-image thumbs on a phone: the caption truncates to noise ("LABEL C…", "OURS V…"). The camera icon already says "planned", and the full brief is on the slide itself, so drop the caption and let the strip read as a strip. */ @media (max-width: 700px) { .pdp-thumb--todo .pdp-thumb-label { display: none; } .pdp-thumb--todo .pdp-thumb-art svg { width: 44%; } } /* ---------- Hero clearance under the ribbon header ---------- The hero's top padding is sized for a plain 77px header. On the three pages carrying .header-ribbon (shop, subscribe, home-delivery) the fixed header is ~127px, so the kicker landed 27px under the ribbon's bottom border — reading as crowded against it rather than as the start of the hero. :has() scopes this to exactly the pages that have the ribbon, so it stays correct if a ribbon is added to or removed from a page later; nothing here is hardcoded to a page name. */ body:has(.header-ribbon) .hero { padding-top: 172px; } @media (max-width: 900px) { body:has(.header-ribbon) .hero, body:has(.header-ribbon) .hero--sub { padding-top: 162px; } } /* ---------- Catalog: heading → products, nothing in between ---------- .shop-section-label carries margin-top: var(--sp-6) (96px) to separate one labelled group from the group above it. On the first label there is no group above — so that 96px stacked on the section's own 64px padding and the band's 56px, leaving ~184px of dead space between the last line of copy and the heading. */ .shop-section-label:first-child { margin-top: 0; } /* The heading now sits directly above its grid, so the grid no longer needs a full section-sized gap to clear an intervening card. */ .shop-section-label + .shop-grid { margin-top: var(--sp-4); } /* Cross-sell strip, previously ~240 characters of inline style. */ .shop-crosssell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: var(--sp-5); padding: 16px 20px; border: 1px solid var(--line); background: var(--charcoal); color: var(--stone); font-size: var(--text-sm); line-height: 1.6; } .shop-crosssell strong { color: var(--gold-bright); font-weight: 600; } .shop-crosssell a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; min-height: 44px; } .shop-crosssell a:hover { color: var(--gold-bright); } .shop-crosssell svg { width: 16px; height: 16px; } /* ---------- Running weight under the quantity stepper ---------- Fresh mushrooms are sold by the half pound, so "3" in the stepper is an arithmetic problem, not an answer. This line does the sum. */ .qty-weight { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-2); padding: 10px 14px; border: 1px solid var(--line); background: rgba(201, 164, 58, 0.05); color: var(--stone); font-size: var(--text-sm); line-height: 1.5; } .qty-weight svg { width: 18px; height: 18px; color: var(--gold); flex: none; } .qty-weight strong { color: var(--gold-bright); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.01em; } /* ============================================================ POLISH PASS — flagship lockup, gilt overhang, visit spacing, capacity pill, compact pickup cards, centered feature lists. ============================================================ */ /* ---------- (1) Flagship lockup ---------- "The Flagship · Bi-Weekly Delivery" was one letter-spaced eyebrow that wrapped on phones, orphaning "DELIVERY". Now a two-line lockup: the eyebrow names the tier, and the schedule gets its own display-serif line. Left-aligned everywhere — the block lives in a split layout, and centering one fragment against left-set bullets reads as a mistake. */ .flag-lockup .eyebrow { color: var(--gold-bright); } .flag-sub { margin-top: 10px; font-family: var(--font-display); font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 600; color: var(--ivory); line-height: 1.2; } .flag-sub em { color: var(--gold-bright); font-style: italic; } .flag-lockup + .h-display { margin-top: var(--sp-2); } /* ---------- (2) Gilt glyph overhang ---------- .gilt paints text by clipping a gradient to the glyphs — but the gradient only covers the element's layout box. Playfair's italic "g" (and the swash on other letters) inks slightly OUTSIDE that box, and ink with no background behind it renders transparent: the letter genuinely looks shaved. Padding extends the painted area over the overhang; the negative margin gives the space back so layout and line-height are unchanged. */ .gilt { padding: 0.1em 0.14em; margin: -0.1em -0.14em; } /* ---------- (4) "The farm door." breathing room ---------- */ .visit-card { margin-top: var(--sp-4); } /* ---------- (6) Founding-seats capacity pill ---------- The old pill was inline-flex with a 10px gap, and its mixed text nodes and spans each became separate flex items — "Founding seats ·", "50", "only ·" all floating apart and wrapping independently. The text now lives in ONE wrapper span (markup), so the flex gap separates exactly two things: the pulse dot and the sentence. */ .hd-capacity { letter-spacing: 0.1em; } .hd-capacity-text { line-height: 1.6; } .hd-capacity-text strong, .hd-capacity-text [data-hd-cap], .hd-capacity-text [data-hd-remaining] { color: var(--gold-bright); font-weight: 700; } /* ---------- (3) Farm Pickup: compact two-up cards on phones ---------- Five stacked ~440px cards made the catalog a 2,200px corridor. Two-up with square plates and the prose stripped back reads like a market list: photo, name, price, add. The description and latin name live on the product page, one tap away. */ @media (max-width: 560px) { .theme-pickup .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .theme-pickup .product-card .plate { aspect-ratio: 1 / 1; } .theme-pickup .product-desc, .theme-pickup .product-latin { display: none; } .theme-pickup .product-body { padding: 10px 12px 12px; gap: 4px; } .theme-pickup .product-name { font-size: var(--text-base); } .theme-pickup .product-foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 2px; } .theme-pickup .product-price { font-size: var(--text-base); } .theme-pickup .product-foot .add-btn { width: 100%; justify-content: center; min-height: 44px; } } /* ---------- (7) Feature list inside a centered section head ---------- The bullets stay left-set (ragged centering makes lists unreadable), but the block itself centers under the heading. */ .section-head--center .feature-list { width: fit-content; margin-inline: auto; text-align: left; } /* Footer: fourth column for the legal list ("The Boring Stuff"). The brand cell keeps its double width; the three link lists share the rest. Stacks with everything else under 700px. */ .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* Referral code block. Replaced a two-card benefit grid that spent ~120 words explaining code syntax and the address-match queue; a reader needs two facts (you get a code, you share it), so it is one card. */ .rp-codeblock { max-width: 560px; margin: var(--sp-5) auto 0; padding: var(--sp-4) var(--sp-3); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); text-align: center; } .rp-codeblock-label { color: var(--gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .rp-codeblock .rp-code { margin: var(--sp-3) 0; } /* Bullets stay left-set inside the centred card: ragged-centre lists are hard to scan. */ .rp-codeblock .feature-list { width: fit-content; margin-inline: auto; text-align: left; } /* ============================================================ PROGRAM BUTTONS, one per door on the home hero Three finishes of the ONE brand metal, so the stack reads as a jeweler's tray rather than three unrelated colours (the first cut used a cool graphite for the route button, which sat blue and off-brand against the espresso page — owner called it): route · gilt-edged espresso, the darkest — the Reserve look ritual · candlelit pale gold, the brightest (unchanged) pickup · burnished bronze, the mid-tone between them Every value is an existing token (--gold family, --surface, --black); dark-to-light ordering doubles as hierarchy without any button shouting over the gold one. ============================================================ */ .btn--route, .btn--ritual, .btn--pickup { position: relative; } /* Home Delivery: gilt-edged espresso, the flagship in Reserve dress */ .btn--route { color: var(--gold-bright); border: 1px solid rgba(201, 164, 58, 0.55); background: linear-gradient(150deg, var(--surface-2) 0%, var(--surface) 46%, var(--charcoal) 100%); box-shadow: inset 0 1px 0 rgba(232, 199, 102, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.45); } .btn--route svg { color: var(--gold-bright); } .btn--route:hover { color: var(--gold-pale); border-color: rgba(232, 199, 102, 0.75); transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(201, 164, 58, 0.45); } /* Wellness Rituals: candlelight, the brightest of the three */ .btn--ritual { color: var(--black); border: 1px solid rgba(243, 224, 160, 0.5); background: linear-gradient(120deg, var(--gold-pale) 0%, #FBF1CE 48%, var(--gold-bright) 100%); box-shadow: inset 0 -1px 0 rgba(138, 109, 37, 0.35); } .btn--ritual svg { color: rgba(0, 0, 0, 0.72); } .btn--ritual:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(243, 224, 160, 0.6); } /* Farm Pickup: burnished bronze. Since 2026-09-23 only ONE hero door is filled (Wellness), so Pickup wears its bronze as text and edge on the same espresso ground as Home Delivery: still recognisably the pickup colour, no longer competing with the primary. */ .btn--pickup { color: var(--gold); border: 1px solid rgba(201, 164, 58, 0.5); background: linear-gradient(150deg, var(--surface-2) 0%, var(--surface) 46%, var(--charcoal) 100%); box-shadow: inset 0 1px 0 rgba(201, 164, 58, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.45); } .btn--pickup svg { color: var(--gold); } .btn--pickup:hover { color: var(--gold-bright); transform: translateY(-2px); border-color: rgba(232, 199, 102, 0.75); box-shadow: 0 14px 34px -12px rgba(201, 164, 58, 0.45); } /* The metals carry meaning, so keyboard focus cannot rely on them. */ .btn--route:focus-visible, .btn--ritual:focus-visible, .btn--pickup:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ============================================================ PROGRAM BUTTONS, the sheen A narrow band of light travels across the metal face: the way brushed steel behaves when you tilt it, so the motion explains the material rather than decorating it. Each button's highlight is tinted to its own metal, cool white on graphite, warm white on candlelit gold, amber on the farm's bronze. Two deliberate constraints: 1. It animates a ::after, NEVER the button. js/main.js gives every .btn a magnetic hover that writes an inline transform on pointermove; animating the button itself would fight it and stutter. 2. It plays once on load, staggered across the three, so the effect is not reserved for mouse users. The magnetic effect is fine-pointer only; a phone would otherwise never see any of this. Separate keyframes for entrance and hover so the hover can replay cleanly after the entrance has run. ============================================================ */ .btn--route, .btn--ritual, .btn--pickup { overflow: hidden; /* clips the travelling band */ isolation: isolate; } .btn--route::after, .btn--ritual::after, .btn--pickup::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 42%; pointer-events: none; transform: translateX(-180%) rotate(18deg); background: linear-gradient(90deg, transparent 0%, var(--sheen, rgba(255, 255, 255, 0.26)) 50%, transparent 100%); } /* Tint per metal */ .btn--route { --sheen: rgba(214, 232, 242, 0.30); } /* cool, headlights on a route */ .btn--ritual { --sheen: rgba(255, 252, 240, 0.55); } /* warm, a candle catching gold */ .btn--pickup { --sheen: rgba(255, 214, 138, 0.30); } /* amber, morning through slats */ @keyframes btn-sheen-pass { from { transform: translateX(-180%) rotate(18deg); } to { transform: translateX(340%) rotate(18deg); } } @keyframes btn-sheen-enter { from { transform: translateX(-180%) rotate(18deg); } to { transform: translateX(340%) rotate(18deg); } } /* Entrance: light passes over the three doors in turn, once. */ .hero-ctas--stack .btn--route::after { animation: btn-sheen-enter 1000ms var(--ease-out) 840ms 1; } .hero-ctas--stack .btn--ritual::after { animation: btn-sheen-enter 1000ms var(--ease-out) 700ms 1; } .hero-ctas--stack .btn--pickup::after { animation: btn-sheen-enter 1000ms var(--ease-out) 980ms 1; } /* Hover: the same pass, a touch quicker. */ .btn--route:hover::after, .btn--ritual:hover::after, .btn--pickup:hover::after { animation: btn-sheen-pass 760ms var(--ease-out) 1; } /* The arrow leans toward the destination. */ .btn--route svg, .btn--ritual svg, .btn--pickup svg { transition: transform 260ms var(--ease-out); } .btn--route:hover svg, .btn--ritual:hover svg, .btn--pickup:hover svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .btn--route::after, .btn--ritual::after, .btn--pickup::after { animation: none !important; display: none; } .btn--route:hover svg, .btn--ritual:hover svg, .btn--pickup:hover svg { transform: none; } } /* ============================================================ "MORE INFO" ON THE PROGRAM CARDS + WHAT'S-IN-THE-BOX MODAL The trigger sits bottom-right inside each Step 01 card. The card is a