/* =============================================================================
teas.co.uk — Recipes hub stylesheet
Prefix: .th- (teas hub) · Fonts: Instrument Serif, DM Sans, JetBrains Mono
Everything here matches the approved design 1:1. Values are exact.
Load fonts first:
========================================================================== */
:root {
/* ink + text */
--th-ink: #0E0F12; /* headings, primary text, announce bar bg */
--th-ink-deep: #042220; /* deep green: buttons, collections band */
--th-ink-body: #2a3a37; /* long-form body copy on tinted panels */
--th-muted: #4b5551; /* card descriptions, secondary copy */
--th-muted-2: #46504c; /* mono metadata (time · serves) */
--th-navy: #0c1a36; /* basket button + primary CTA (site-wide) */
/* accents */
--th-teal: #30d8c8; /* ingredient rules, accents */
--th-teal-mint: #5eead4; /* on-dark eyebrow + newsletter button */
--th-teal-link: #0b6b5f; /* "ALL X RECIPES →" links, tea-name lines */
--th-teal-head: #0b8b7a; /* italic word in the H1, straw colour */
--th-clay: #c44b4b; /* eyebrow labels + hero pip */
--th-honey: #fde68a; /* announce-bar highlight */
/* surfaces */
--th-page: #fbfbfa;
--th-paper: #ffffff;
--th-mint: #eff7f6; /* tint panels, occasion cards, chips */
--th-cream: #FAF3DF; /* text on dark bands */
/* lines */
--th-line: rgba(14,15,18,.09);
--th-line-soft: rgba(14,15,18,.07);
--th-line-hair: rgba(14,15,18,.06);
--th-line-deep: rgba(4,34,32,.10);
--th-line-deep-2: rgba(4,34,32,.16);
/* radii */
--th-r-band: 26px; /* hero, collections band */
--th-r-feature: 22px; /* recipe-of-the-moment card */
--th-r-panel: 20px; /* contribute panel */
--th-r-stat: 18px; /* hero stats panel */
--th-r-card: 16px; /* all cards */
--th-r-tile: 14px; /* occasion cards */
--th-r-ico: 11px; /* 38px family icon tile */
--th-r-pill: 999px;
/* elevation */
--th-shadow-card: 0 1px 2px rgba(4,34,32,.05);
--th-shadow-feature: 0 24px 60px -40px rgba(4,34,32,.45);
/* type */
--th-serif: 'Instrument Serif', Georgia, serif;
--th-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--th-mono: 'JetBrains Mono', ui-monospace, monospace;
/* spacing */
--th-gutter: clamp(14px, 3vw, 24px);
--th-gap: 14px; /* every card grid uses 14px, occasion grid 12px */
--th-section: 64px; /* gap between major sections (56px for minor ones) */
}
/* ---------- base ---------------------------------------------------------- */
.th-recipes { background: var(--th-page); color: var(--th-ink); font-family: var(--th-sans); -webkit-font-smoothing: antialiased; }
.th-recipes * { box-sizing: border-box; }
.th-recipes h1, .th-recipes h2, .th-recipes h3, .th-recipes h4 { margin: 0; font-weight: 400; }
.th-recipes a { color: var(--th-teal-link); text-decoration: none; }
.th-recipes a:hover { color: var(--th-ink-deep); text-decoration: underline; }
.th-wrap { max-width: 1240px; margin: 0 auto; padding: 20px var(--th-gutter) 32px; }
/* ---------- shared type utilities ---------------------------------------- */
.th-eyebrow { font-family: var(--th-mono); font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--th-clay); }
.th-eyebrow--dark{ color: var(--th-teal-mint); }
.th-eyebrow__pip { width: 7px; height: 7px; border-radius: 50%; background: var(--th-clay); display: inline-block; margin-right: 8px; }
.th-h1 { font-family: var(--th-serif); font-size: clamp(36px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -.015em; }
.th-h1 em { font-style: italic; color: var(--th-teal-head); }
.th-h2 { font-family: var(--th-serif); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; }
.th-h2--sm { font-size: clamp(25px, 3vw, 34px); }
.th-h2--feature { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; }
.th-lede { font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.6; color: var(--th-ink-body); max-width: 620px; text-wrap: pretty; }
.th-meta { font-family: var(--th-mono); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--th-muted-2); }
.th-more { font-family: var(--th-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--th-teal-link); }
/* ---------- announcement marquee (32px, never clips, never doubles up) -------
ONE track holding TWO identical groups, translated -50%. Do NOT use two
absolutely-positioned tracks offset by left:100% — that percentage resolves
against the CONTAINER, not the track, so the copies overlap as soon as the
track is wider than the viewport (the bug this replaces). */
.th-announce { position: relative; height: 32px; overflow: hidden; background: var(--th-ink); color: var(--th-cream);
font-size: 12.5px; font-weight: 500; }
.th-announce__track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center;
width: max-content; animation: th-marquee 52s linear infinite; will-change: transform; }
.th-announce__group { display: inline-flex; align-items: center; gap: 48px; flex: 0 0 auto;
padding-right: 48px; white-space: nowrap; } /* padding-right keeps the seam gap even */
.th-announce:hover .th-announce__track,
.th-announce:focus-within .th-announce__track { animation-play-state: paused; }
.th-announce a, .th-announce strong { color: var(--th-honey); }
@media (prefers-reduced-motion: reduce) {
.th-announce__track { position: static; width: 100%; animation: none; justify-content: center; flex-wrap: wrap; }
.th-announce__group[aria-hidden="true"] { display: none; }
.th-announce { height: auto; padding: 6px 16px; }
}
/* ---------- site header — VERBATIM from the live theme, DO NOT RESTYLE ---------
Source files (unchanged, already enqueued site-wide):
blocksy-child/assets/css/design-system.css → .topbar .brand nav.pills .icon-btn .bag
+ its 2026-06-16 "SITEWIDE CHROME RETHEME" block (teal mark, #0a4444 active pill,
#042220 basket with #30d8c8 count badge)
blocksy-child/assets/css/rio.css → frosted-glass .topbar override
The rules below are copied from those files so the prototype renders in context.
Implementation: render the existing header markup (.topbar > .brand, #primary-nav.pills
with the inline .teas-mega Shop entry, .icon-btn ×2, .bag) and DELETE this block. */
.th-topbar-shell { max-width: 1240px; margin: 0 auto; padding: 24px 28px 0; } /* live site: .shell max-width 1340px, padding 24px 28px 64px */
.th-topbar { /* design-system.css .topbar */
display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; font-size: 13.5px;
margin-bottom: 28px; position: sticky; top: 14px; z-index: 30;
/* rio.css frosted-glass override (both !important on the live site) */
background: rgba(242,244,248,.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid rgba(208,214,224,.6);
box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(14,20,40,.06), 0 12px 32px rgba(14,20,40,.04);
}
.th-brand { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
border: 1.5px solid rgba(14,15,18,.08); background: #fff; font-weight: 600; font-size: 14px; color: #042220; flex: 0 1 auto; }
.th-brand__mark { width: 34px; height: 34px; border-radius: 50%; background: #1faa9c; color: #042220; /* retheme block */
display: inline-flex; align-items: center; justify-content: center; font-family: var(--th-serif); font-style: italic; font-size: 19px; line-height: 1; }
.th-brand__word { font-family: var(--th-serif); font-style: italic; font-weight: 400; font-size: 20px; letter-spacing: -.005em; }
.th-nav { display: flex; align-items: center; flex: 1; justify-content: center; gap: 0; }
.th-nav > a { padding: 10px 18px; border-radius: 999px; color: #5C6270; font-weight: 500; transition: background .14s cubic-bezier(.32,.72,0,1), color .14s cubic-bezier(.32,.72,0,1); }
.th-nav > a:hover { background: #eff7f6; color: #042220; }
.th-nav > a[aria-current="page"] { background: #0a4444; color: #fff; font-weight: 600; }
.th-nav__shop { margin: 0 6px; align-self: center; min-height: 38px; display: inline-flex; align-items: center;
background: #fff; border: 1px solid rgba(14,15,18,.08); border-radius: 999px; overflow: hidden; }
.th-nav__shop a { padding: 10px 16px; color: #5C6270; font-weight: 500; }
.th-nav__shop button { border: 0; border-left: 1px solid rgba(14,15,18,.08); background: none; padding: 10px 11px 8px; cursor: pointer; color: #5C6270; display: flex; align-items: center; }
.th-icon-btn { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: transparent; color: #042220;
display: inline-flex; align-items: center; justify-content: center; transition: background .14s cubic-bezier(.32,.72,0,1); }
.th-icon-btn:hover { background: rgba(14,15,18,.05); }
.th-icon-btn svg { width: 16px; height: 16px; }
.th-bag { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; height: 42px; flex: 0 0 auto; border-radius: 999px;
background: #042220; color: #fff; border: 1px solid rgba(31,170,156,.20); box-shadow: 0 1px 2px rgba(4,34,32,.12); font-weight: 600; font-size: 13px; }
.th-bag__count { width: 26px; height: 26px; border-radius: 50%; background: #30d8c8; color: #042220; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
/* live responsive behaviour (design-system.css): nav collapses into the hamburger drawer */
@media (max-width: 1180px) {
.th-nav { display: none; }
.th-topbar { gap: 6px; padding: 7px 12px; flex-wrap: nowrap; justify-content: space-between; }
}
/* ---------- breadcrumb --------------------------------------------------- */
.th-crumb { font-family: var(--th-mono); font-size: 11px; letter-spacing: .06em; color: var(--th-muted); display: flex; gap: 8px; padding: 6px 0 18px; }
.th-crumb a { color: var(--th-muted); }
.th-crumb__here { color: var(--th-ink); }
/* =========================================================================
HERO — animated "pulsing" band (values shared with page-wiki-v2.css §1;
the timings ARE the design: copy them verbatim)
Layer stack, bottom → top:
base linear-gradient · .th-hero__blobs (3 hue-rotating radial blobs)
· .th-hero__dots (drifting + pulsing dot grid) · .th-hero__sheen · content (z-index 1)
========================================================================= */
.th-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--th-ink);
border: 1px solid rgba(4,34,32,.10); border-radius: clamp(22px,3vw,32px); padding: clamp(26px,3.6vw,46px);
background: linear-gradient(155deg,#eff7f6 0%,#dff2ec 52%,#f7fbf6 100%); }
.th-hero__blobs { position: absolute; inset: 0; pointer-events: none; animation: th-hue 26s linear infinite; }
.th-hero__blob { position: absolute; border-radius: 50%; }
.th-hero__blob--a { width: 540px; height: 540px; left: -140px; top: -190px; animation: th-blob-a 19s ease-in-out infinite;
background: radial-gradient(circle at 40% 40%, rgba(94,234,212,.85), rgba(94,234,212,0) 68%); }
.th-hero__blob--b { width: 480px; height: 480px; right: -110px; top: -140px; animation: th-blob-b 23s ease-in-out infinite;
background: radial-gradient(circle at 50% 50%, rgba(255,190,132,.62), rgba(255,190,132,0) 66%); }
.th-hero__blob--c { width: 560px; height: 560px; left: 34%; bottom: -300px; animation: th-blob-c 29s ease-in-out infinite;
background: radial-gradient(circle at 50% 50%, rgba(140,196,255,.58), rgba(140,196,255,0) 68%); }
.th-hero__dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(4,34,32,.11) 1px, transparent 1px);
background-size: 22px 22px; animation: th-grid 7s linear infinite, th-pulse 8s ease-in-out infinite; }
.th-hero__sheenwrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.th-hero__sheen { position: absolute; top: -10%; bottom: -10%; width: 24%; animation: th-sheen 11s ease-in-out infinite;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); }
/* content: 2-part FLEX row (not a grid) — copy grows, counter wraps underneath on tablet */
.th-hero__in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: flex-start; }
.th-hero__copy { flex: 1 1 480px; min-width: 0; }
.th-hero__side { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* kicker with the pulsing glow pip */
.th-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--th-mono); font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .10em; color: var(--th-clay); }
.th-kicker .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--th-clay);
box-shadow: 0 0 14px rgba(196,75,75,.45); animation: th-pip 1.9s ease-in-out infinite; }
/* headline: heavy sans + serif-italic + berry highlighter swash */
.th-hero h1 { font-family: var(--th-sans); font-size: clamp(36px,5.2vw,58px); font-weight: 800; letter-spacing: -.032em;
line-height: .95; margin: 16px 0 0; color: var(--th-ink); text-wrap: balance; }
.th-hero h1 em { font-family: var(--th-serif); font-style: italic; font-weight: 400; color: #0b8b7a; letter-spacing: -.012em; }
.th-hero h1 .underline { position: relative; display: inline-block; }
.th-hero h1 .underline::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 6px; height: 14px;
background: #FF2D8E; border-radius: 6px; transform: rotate(-.4deg); opacity: .7; z-index: 0; }
.th-hero h1 .underline span { position: relative; z-index: 1; }
.th-hero__lede { font-size: 17px; line-height: 1.6; color: var(--th-ink-body); max-width: 58ch; margin: 20px 0 0; }
.th-hero__promises { list-style: none; margin: 22px 0 0; padding: 0; max-width: 820px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 14px 22px; }
.th-hero__promises li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.5; color: var(--th-ink-body); }
.th-hero__promises li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #0b8b7a; }
/* right column: mono index line + frosted counter (frosted = legible over the animation) */
.th-hero__index { font-family: var(--th-mono); font-size: 12px; font-weight: 700; letter-spacing: .10em;
text-transform: uppercase; color: var(--th-muted); text-align: right; }
.th-counter { background: rgba(255,255,255,.86); backdrop-filter: blur(6px); border: 1px solid rgba(4,34,32,.10);
border-radius: 18px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.th-counter__n { font-family: var(--th-sans); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
color: var(--th-ink); font-variant-numeric: tabular-nums; }
.th-counter__l { font-family: var(--th-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; line-height: 1.3;
text-transform: uppercase; color: var(--th-muted); margin-top: 7px; } /* .05em: .10em wraps 2-word labels */
/* =========================================================================
SEARCH + "ON THIS PAGE" STRIP — own white card directly under the hero
========================================================================= */
.th-searchbar { background: var(--th-paper); border-radius: 32px; padding: 18px 22px; margin-top: 18px;
box-shadow: 0 .5px 1px rgba(14,15,18,.04), 0 1px 2px rgba(14,15,18,.04), 0 8px 24px rgba(14,15,18,.05);
display: flex; flex-direction: column; gap: 14px; }
.th-searchbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.th-lab { font-family: var(--th-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: #5C6270; }
.th-searchbar form { flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 10px;
background: var(--th-mint); border: 1px solid rgba(4,34,32,.10); border-radius: 999px; padding: 5px 5px 5px 18px; }
.th-searchbar form svg { width: 16px; height: 16px; color: #5C6270; flex-shrink: 0; }
.th-searchbar input[type=search] { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
font-family: inherit; font-size: 15px; font-weight: 500; color: var(--th-ink); padding: 10px 0; }
.th-searchbar button[type=submit] { flex-shrink: 0; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--th-ink-deep); color: #30d8c8; font-family: inherit; font-size: 13px; font-weight: 600; }
.th-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.th-quick a { font-family: var(--th-sans); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
background: var(--th-mint); color: var(--th-ink-deep); border: 1px solid rgba(4,34,32,.08); }
.th-quick a:hover { background: #e0efec; text-decoration: none; }
/* =========================================================================
RECIPE OF THE MOMENT (feature card)
========================================================================= */
.th-feature { margin-top: 56px; }
.th-feature__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 18px; }
.th-feature__card { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-r-feature); overflow: hidden; box-shadow: var(--th-shadow-feature);
display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* illustration panel */
.th-feature__art { position: relative; overflow: hidden; min-height: 480px; padding: 32px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
border-right: 1px solid var(--th-line); background: linear-gradient(165deg, #fff5ec 0%, #ffe0d2 48%, #f3ecff 100%); }
.th-feature__blobs { position: absolute; inset: 0; pointer-events: none; animation: th-hue 34s linear infinite; }
.th-feature__blob--a { position: absolute; width: 340px; height: 340px; left: -90px; top: -90px; border-radius: 50%; animation: th-blob-a 21s ease-in-out infinite;
background: radial-gradient(circle at 50% 50%, rgba(255,152,120,.55), rgba(255,152,120,0) 68%); }
.th-feature__blob--b { position: absolute; width: 300px; height: 300px; right: -80px; bottom: -70px; border-radius: 50%; animation: th-blob-c 25s ease-in-out infinite;
background: radial-gradient(circle at 50% 50%, rgba(94,234,212,.5), rgba(94,234,212,0) 68%); }
.th-feature__dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(14,15,18,.07) 1px, transparent 1px); background-size: 20px 20px; animation: th-grid 9s linear infinite; }
.th-feature__svg { position: relative; z-index: 1; width: 100%; max-width: 290px; height: auto; overflow: visible; } /* svg/feature-strawberry-peach-iced-tea.svg */
.th-feature__caption { position: relative; z-index: 1; font-family: var(--th-mono); font-size: 10px; letter-spacing: .14em; font-weight: 700; color: #8a4b32; background: rgba(255,255,255,.72); border-radius: var(--th-r-pill); padding: 7px 13px; }
/* recipe body */
.th-feature__body { padding: clamp(24px, 2.6vw, 34px); }
.th-feature__intro { font-size: 15.5px; line-height: 1.6; color: var(--th-ink-body); margin: 0 0 18px; max-width: 520px; }
.th-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.th-pill { font-family: var(--th-mono); font-size: 10.5px; font-weight: 600; background: var(--th-mint); color: var(--th-ink-deep); padding: 6px 11px; border-radius: var(--th-r-pill); white-space: nowrap; }
.th-recipe-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.th-recipe-cols h3 { font-family: var(--th-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--th-muted); margin-bottom: 12px; }
.th-ings { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.th-ings li { font-size: 14px; line-height: 1.4; color: var(--th-ink); padding-left: 14px; border-left: 2px solid var(--th-teal); }
.th-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.th-steps li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; color: var(--th-ink-body); }
.th-steps li > span:first-child { font-family: var(--th-mono); font-size: 11px; font-weight: 700; color: var(--th-teal-link); padding-top: 2px; } /* 01, 02, … */
.th-feature__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--th-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.th-btn { font-size: 13.5px; font-weight: 600; border-radius: var(--th-r-pill); padding: 11px 20px; }
.th-btn--ghost { color: var(--th-ink-deep); border: 1px solid var(--th-line-deep-2); padding: 11px 18px; }
.th-btn--solid { color: #fff; background: var(--th-navy); }
.th-btn--solid:hover, .th-btn--ghost:hover { text-decoration: none; }
/* =========================================================================
SECTION HEADS + FAMILY (tea-type) CARDS — the hub's main navigation
========================================================================= */
.th-section { margin-top: var(--th-section); scroll-margin-top: 20px; }
.th-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; border-bottom: 1px solid rgba(14,15,18,.10); padding-bottom: 16px; margin-bottom: 22px; }
.th-section__head p { font-size: 14.5px; color: var(--th-muted); margin: 0; max-width: 640px; }
.th-grid-fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--th-gap); }
.th-fam { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-r-card); box-shadow: var(--th-shadow-card); padding: 20px 20px 16px; display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; }
.th-fam:hover { border-color: rgba(4,34,32,.28); transform: translateY(-2px); }
.th-fam__top { display: flex; align-items: center; gap: 11px; }
.th-fam__ico { width: 38px; height: 38px; border-radius: var(--th-r-ico); background: var(--th-mint); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.th-fam__top h3 { font-family: var(--th-sans); font-size: 15.5px; font-weight: 600; }
.th-fam__count { font-family: var(--th-mono); font-size: 10.5px; font-weight: 600; color: var(--th-muted); }
.th-fam p { font-size: 14px; line-height: 1.55; color: var(--th-muted); margin: 13px 0 14px; }
.th-fam__links { display: flex; flex-direction: column; border-top: 1px solid var(--th-line-soft); }
.th-fam__links a { font-size: 13.5px; color: var(--th-ink); padding: 9px 0; border-bottom: 1px solid var(--th-line-hair); }
.th-fam__links a:last-child { border-bottom: 0; }
.th-fam__links a:hover { color: var(--th-teal-link); text-decoration: none; }
.th-fam > .th-more { margin-top: 14px; }
/* "also in the library" chip block */
.th-also { margin-top: 16px; background: var(--th-mint); border-radius: var(--th-r-card); padding: 20px 22px; }
.th-also__label { font-family: var(--th-mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 700; color: var(--th-muted); }
.th-also__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.th-also__chips a { background: #fff; border: 1px solid var(--th-line-deep); border-radius: var(--th-r-pill); padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--th-ink); }
.th-also__chips a span { font-family: var(--th-mono); font-size: 10.5px; color: var(--th-muted); }
/* =========================================================================
RECIPE CARDS (illustrated) — 4 mood groups × 3 cards
========================================================================= */
.th-groups { display: flex; flex-direction: column; gap: 30px; }
.th-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.th-group__head h3 { font-family: var(--th-sans); font-size: 15px; font-weight: 700; color: var(--th-ink); flex: 0 0 auto; white-space: nowrap; }
.th-group__rule { flex: 1; height: 1px; background: var(--th-line); }
.th-grid-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--th-gap); }
.th-rec { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-r-card); box-shadow: var(--th-shadow-card); overflow: hidden; display: flex; flex-direction: column; color: var(--th-ink); transition: transform .18s ease, box-shadow .18s ease; }
.th-rec:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(4,34,32,.35); text-decoration: none; }
.th-rec__tile { position: relative; overflow: hidden; height: 156px; display: flex; align-items: center; justify-content: center; } /* gradient set per card, see table in README */
.th-rec__tile-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(14,15,18,.06) 1px, transparent 1px); background-size: 16px 16px; }
.th-rec__tile svg { position: relative; width: 104px; height: 104px; overflow: visible; }
.th-rec__body { padding: 16px 18px 18px; }
.th-rec__body h4 { font-family: var(--th-serif); font-size: 22px; line-height: 1.15; margin: 7px 0 5px; }
.th-rec__tea { font-size: 13px; color: var(--th-teal-link); font-weight: 600; }
.th-rec__body p { font-size: 14px; line-height: 1.55; color: var(--th-muted); margin: 10px 0 0; }
/* =========================================================================
COLLECTIONS BAND (dark) · OCCASIONS · CONTRIBUTE
========================================================================= */
/* COLLECTIONS — ordinary light section (NO dark band): section head + 4 cards
built exactly like .th-rec, with a shorter 96px tinted tile. */
.th-grid-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px,1fr)); gap: var(--th-gap); }
.th-col { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-r-card); box-shadow: var(--th-shadow-card);
overflow: hidden; display: flex; flex-direction: column; color: var(--th-ink); transition: transform .18s ease, box-shadow .18s ease; }
.th-col:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(4,34,32,.35); text-decoration: none; }
.th-col__tile { position: relative; overflow: hidden; height: 96px; display: flex; align-items: center; justify-content: center; }
.th-col__tile-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(14,15,18,.06) 1px, transparent 1px); background-size: 16px 16px; }
.th-col__tile span { position: relative; font-size: 30px; }
.th-col__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.th-col__count { font-family: var(--th-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; } /* colour = per-card accent */
.th-col h3 { font-family: var(--th-serif); font-size: 23px; line-height: 1.15; margin: 7px 0 9px; }
.th-col p { font-size: 14px; line-height: 1.55; color: var(--th-muted); margin: 0 0 16px; }
.th-col__cta { margin-top: auto; font-family: var(--th-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--th-teal-link); }
/* per-card tile gradient (160deg) + count accent:
lollies #eaf4f2 → #d6ebe6 / #0b6b5f
cocktails#fbe9ee → #f4d5de / #a8355a
mocktails#fcf6e3 → #f4ebc6 / #8a6b1f
mashups #eef1f8 → #dee6f2 / #3a5480 */
.th-grid-occ { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; }
.th-occ { background: var(--th-mint); border-radius: var(--th-r-tile); padding: 20px 18px; display: flex; flex-direction: column; gap: 5px; color: var(--th-ink-deep); }
.th-occ:hover { background: #e4f1ee; text-decoration: none; }
.th-occ__ico { font-size: 20px; }
.th-occ strong { font-size: 14px; font-weight: 600; margin-top: 6px; }
.th-occ span { font-size: 13px; color: var(--th-muted); }
.th-contrib { margin-top: 56px; border: 1px dashed rgba(4,34,32,.28); background: var(--th-mint); border-radius: var(--th-r-panel); padding: clamp(24px, 3vw, 36px);
display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(22px, 2.6vw, 36px); align-items: center; }
.th-contrib p { font-size: 14.5px; line-height: 1.6; color: var(--th-ink-body); margin: 0; max-width: 600px; }
.th-contrib__actions { display: flex; flex-direction: column; gap: 9px; }
.th-contrib__actions a { font-size: 14px; font-weight: 600; border-radius: var(--th-r-pill); padding: 13px 22px; text-align: center; }
.th-contrib__actions a:nth-child(1) { color: #fff; background: var(--th-ink-deep); }
.th-contrib__actions a:nth-child(2) { color: var(--th-ink-deep); background: #fff; border: 1px solid var(--th-line-deep-2); }
.th-contrib__actions a:nth-child(3) { font-family: var(--th-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--th-muted); margin-top: 4px; }
/* =========================================================================
FOOTER — EXISTING site footer (.foot.foot-v3), verbatim from
blocksy-child/assets/css/design-system.css + its 2026-06-16 teal retheme.
In production the theme already renders and styles this: DO NOT rebuild it.
Only difference from the live rules: the column grid and the bottom rows use
auto-fit / flex-wrap here so the prototype reflows without media queries.
========================================================================= */
.th-foot { margin-top: clamp(36px,4.6vw,56px); color: #fff; border-radius: 40px; overflow: hidden;
background: linear-gradient(155deg,#0e6868 0%,#062828 55%,#042220 100%); }
/* ROW 1 — newsletter strip */
.th-foot__news { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(20px,2.6vw,36px);
align-items: center; padding: clamp(24px,3vw,36px) clamp(22px,3vw,40px);
background: linear-gradient(135deg, rgba(48,216,200,.12) 0%, rgba(48,216,200,.04) 60%, transparent 100%);
border-bottom: 1px solid rgba(255,255,255,.10); } /* live: grid-template-columns:1.2fr 1fr */
.th-foot__eyebrow { font-family: var(--th-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
color: #30d8c8; font-weight: 700; display: inline-block; padding: 4px 12px; background: rgba(48,216,200,.14);
border-radius: 999px; margin-bottom: 12px; }
.th-foot__news h3 { font-family: var(--th-serif); font-size: clamp(23px,2.6vw,28px); line-height: 1.2; letter-spacing: -.015em;
margin: 0 0 8px; color: #eff7f6; font-weight: 400; }
.th-foot__news p { font-size: 13.5px; line-height: 1.55; color: rgba(239,247,246,.72); margin: 0; max-width: 52ch; }
.th-foot__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.th-foot__form input { flex: 1 1 220px; min-width: 0; background: rgba(239,247,246,.08); border: 1px solid rgba(239,247,246,.18);
border-radius: 999px; padding: 12px 18px; color: #eff7f6; font-family: inherit; font-size: 14px; outline: none; }
.th-foot__form input::placeholder { color: rgba(239,247,246,.45); }
.th-foot__form input:focus { border-color: #30d8c8; background: rgba(239,247,246,.12); }
.th-foot__form button { background: #e84898; color: #fff; border: none; border-radius: 999px; padding: 0 20px;
font-weight: 700; font-size: 13px; height: 46px; cursor: pointer; letter-spacing: -.005em; flex: 0 0 auto; }
/* ROW 2 — brand + 5 sitemap columns */
.th-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px,1fr)); gap: clamp(22px,2.6vw,32px);
padding: clamp(26px,3vw,40px) clamp(22px,3vw,40px); } /* live: 1.4fr repeat(5,1fr) */
.th-foot__grid h4 { font-family: var(--th-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
color: #eff7f6; margin: 0 0 16px; font-weight: 800; padding-bottom: 10px; border-bottom: 1px solid rgba(239,247,246,.14); }
.th-foot__col a { display: block; font-size: 13px; color: rgba(239,247,246,.85); padding: 5px 0; font-weight: 500;
letter-spacing: -.005em; line-height: 1.4; transition: color .14s ease, padding-left .14s ease; }
.th-foot__col a:hover { color: #FFB347; padding-left: 4px; text-decoration: none; }
.th-foot__brand { display: flex; align-items: center; gap: 10px; }
.th-foot__brand .mark { width: 38px; height: 38px; border-radius: 50%; background: #1faa9c; color: #042220;
display: inline-flex; align-items: center; justify-content: center; font-family: var(--th-serif); font-style: italic; font-size: 21px; line-height: 1; }
.th-foot__brand .word { font-family: var(--th-serif); font-style: italic; font-size: 24px; letter-spacing: -.005em; color: #eff7f6; }
.th-foot__tag { font-size: 13px; line-height: 1.55; color: rgba(239,247,246,.78); margin: 14px 0 12px; max-width: 34ch; }
.th-foot__addr { font-family: var(--th-mono); font-size: 11px; line-height: 1.6; color: rgba(239,247,246,.55); margin: 0 0 18px; letter-spacing: .01em; }
.th-foot__socials { display: flex; gap: 8px; flex-wrap: wrap; }
.th-foot__socials a { width: 34px; height: 34px; border-radius: 50%; background: rgba(239,247,246,.08);
border: 1px solid rgba(239,247,246,.14); display: inline-flex; align-items: center; justify-content: center; color: rgba(239,247,246,.82); }
.th-foot__socials a:hover { background: #FFB347; color: #1F1814; border-color: #FFB347; transform: translateY(-2px); }
.th-foot__socials svg { width: 15px; height: 15px; }
/* ROW 2b — "Explore more" SEO pill row (a ) */
.th-foot__explore { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: baseline;
padding: 20px clamp(22px,3vw,40px); border-top: 1px solid rgba(239,247,246,.08); }
.th-foot__explore summary { font-family: var(--th-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
color: rgba(239,247,246,.55); font-weight: 700; cursor: pointer; list-style: none; }
.th-foot__explore span { display: flex; flex-wrap: wrap; gap: 7px 9px; margin-top: 12px; }
.th-foot__explore a { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; color: rgba(239,247,246,.78);
font-weight: 500; letter-spacing: -.005em; padding: 6px 12px; border: 1px solid rgba(239,247,246,.13);
border-radius: 999px; background: rgba(239,247,246,.04); }
.th-foot__explore a:hover { color: #1F1814; background: #FFB347; border-color: #FFB347; text-decoration: none; }
/* ROW 3 — trust pills */
.th-foot__trust { list-style: none; margin: 0; padding: 18px clamp(22px,3vw,40px); display: flex; flex-wrap: wrap; gap: 8px;
align-items: center; justify-content: center; background: rgba(239,247,246,.04);
border-top: 1px solid rgba(239,247,246,.08); border-bottom: 1px solid rgba(239,247,246,.08); }
.th-foot__trust li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(239,247,246,.06);
border: 1px solid rgba(239,247,246,.12); border-radius: 999px; font-size: 12px; color: rgba(239,247,246,.85); font-weight: 500; letter-spacing: -.005em; }
.th-foot__trust .ft-ic { display: inline-flex; align-items: center; justify-content: center; color: #FFB347; width: 14px; height: 14px; flex: 0 0 14px; }
/* ROW 4 — copyright + legal */
.th-foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px;
padding: 18px clamp(22px,3vw,40px) 22px; font-size: 11.5px; color: rgba(239,247,246,.55); font-family: var(--th-mono); }
.th-foot__bot a { color: rgba(239,247,246,.7); }
.th-foot__bot a:hover { color: #FFB347; text-decoration: none; }
.th-foot__bot .sep { color: rgba(239,247,246,.3); }
/* =========================================================================
MOBILE — chrome rules that cannot be expressed fluidly (mirrors the live
design-system.css breakpoints). Everything else on the page is fluid by
construction: clamp() type + auto-fit/auto-fill minmax() grids.
========================================================================= */
.th-burger { display: none; width: 44px; height: 44px; flex: 0 0 44px; margin-left: auto; align-items: center; justify-content: center;
background: #fff; border: 1px solid rgba(4,34,32,.10); border-radius: 999px; color: #042220; cursor: pointer;
box-shadow: 0 1px 2px rgba(20,24,30,.05); }
.th-burger svg { width: 22px; height: 22px; }
.th-mobile-menu { margin-top: 10px; background: #fff; border: 1px solid rgba(4,34,32,.10); border-radius: 26px;
box-shadow: 0 12px 32px rgba(14,20,40,.10); padding: 10px; display: flex; flex-direction: column; }
.th-mobile-menu a { padding: 15px 16px; font-size: 16px; font-weight: 600; color: #0f1626; border-bottom: 1px solid #eef1f6; }
.th-mobile-menu a:last-child { border-bottom: 0; }
.th-mobile-menu a[aria-current="page"] { font-weight: 700; color: #fff; background: #0a4444; border-radius: 16px; border-bottom: 0; }
@media (max-width: 1180px) { /* same breakpoint the live theme uses */
.th-nav { display: none; }
.th-burger { display: inline-flex; }
.th-topbar { gap: 6px; padding: 7px 12px; flex-wrap: nowrap; justify-content: space-between; }
}
@media (max-width: 760px) {
.th-topbar-shell { padding: 12px 14px 0; }
.th-topbar, .th-foot { border-radius: 26px; }
.th-foot__bot { justify-content: flex-start; }
.th-feature__art { min-height: clamp(320px,46vw,480px); }
.th-hero__index { text-align: left; }
}
@media (max-width: 420px) {
.th-brand__word, .th-bag .b-text { display: none; } /* live rule: logo mark only on tiny phones */
.th-counter { grid-template-columns: 1fr 1fr; }
}
/* =========================================================================
KEYFRAMES — copy verbatim, timings are part of the design
========================================================================= */
@keyframes th-pip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
@keyframes th-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes th-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes th-blob-a { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(90px,40px,0) scale(1.18); } 66% { transform: translate3d(30px,-52px,0) scale(.92); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes th-blob-b { 0% { transform: translate3d(0,0,0) scale(1.05); } 40% { transform: translate3d(-110px,54px,0) scale(.88); } 75% { transform: translate3d(-40px,-36px,0) scale(1.22); } 100% { transform: translate3d(0,0,0) scale(1.05); } }
@keyframes th-blob-c { 0% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(64px,-70px,0) scale(1.3); } 100% { transform: translate3d(0,0,0) scale(.95); } }
@keyframes th-pulse { 0%, 100% { opacity: .40; } 50% { opacity: .95; } }
@keyframes th-grid { from { background-position: 0 0; } to { background-position: 44px 44px; } }
@keyframes th-sheen { 0% { transform: translateX(-40%) skewX(-12deg); opacity: 0; } 45% { opacity: .55; } 100% { transform: translateX(140%) skewX(-12deg); opacity: 0; } }
@keyframes th-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }
@keyframes th-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-58px); opacity: 0; } }
/* animation hooks used INSIDE the SVGs (garnish float, bubbles) */
.th-float { animation: th-float 6s ease-in-out infinite; }
.th-rise { animation: th-rise 4.6s ease-in-out infinite; }
/* accessibility — mandatory */
@media (prefers-reduced-motion: reduce) { .th-recipes *, .th-announce *, .th-foot * { animation: none !important; } }
/* =========================================================================
RESPONSIVE
The design is fluid: clamp() type + auto-fit/auto-fill grids, no breakpoints
required. Reference behaviour:
≥1240px hero 2-up · family cards 4-up (grid) · recipe cards 3-up · collections 4-up
~1000px family + recipe cards 3-up
~760px cards 2-up · hero stacks (stats panel full width, max 340px)
≤560px everything 1-up · H1 lands at 36px · feature card stacks art over method
Optional guard if the host theme forces small viewports:
========================================================================= */
@media (max-width: 560px) {
.th-feature__art { min-height: 380px; }
.th-stats { max-width: none; }
.th-topbar__end { margin-left: 0; width: 100%; justify-content: flex-end; }
}
/* Live canonical directory additions: same paper/card vocabulary as the approved handoff. */
.th-feature__actions{display:flex;gap:8px;flex-wrap:wrap}
.th-fam h3 a{color:inherit;text-decoration:none}
.th-fam h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.th-directory{scroll-margin-top:20px;margin-top:clamp(58px,7vw,88px);padding:clamp(22px,3vw,38px);border:1px solid rgba(4,34,32,.09);border-radius:30px;background:linear-gradient(145deg,rgba(239,247,246,.94),rgba(255,255,255,.82) 46%,rgba(251,233,238,.48));box-shadow:0 24px 70px -54px rgba(4,34,32,.4)}
.th-directory .th-section__head{margin-bottom:26px;padding-bottom:20px}
.th-directory__groups{display:grid;gap:18px}
.th-directory__group{background:#fff;border:1px solid rgba(14,15,18,.09);border-left:3px solid #0b8b7a;border-radius:16px;box-shadow:0 10px 32px -28px rgba(4,34,32,.34);overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 360px}
.th-directory__group:nth-child(4n+2){border-left-color:#b84272}.th-directory__group:nth-child(4n+3){border-left-color:#c17a42}.th-directory__group:nth-child(4n){border-left-color:#5574a0}
.th-directory__group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:17px 20px;color:#042220;background:linear-gradient(90deg,#eff7f6,rgba(239,247,246,.52));border-bottom:1px solid rgba(14,15,18,.08);font-family:'Instrument Serif',serif;font-size:22px;font-weight:600}
.th-directory__group-head span:last-child{font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#0b6b5f;white-space:nowrap}
.th-directory__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 18px;padding:10px 18px}
.th-directory__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 6px;border-bottom:1px solid rgba(14,15,18,.07);border-radius:7px;color:#26322f;text-decoration:none;font-size:13.5px;line-height:1.35;transition:background .16s ease,color .16s ease,padding .16s ease}
.th-directory__links a:hover{padding-left:10px;color:#0b6b5f;background:rgba(239,247,246,.72);text-decoration:underline;text-underline-offset:3px}
.th-directory__links a span:last-child{color:#b84272}
.th-directory__hub{display:flex;align-items:center;min-height:44px;margin:0 18px 12px;color:#0b6b5f;font:700 10.5px/1.3 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.th-directory__empty{padding:34px;background:#eff7f6;border-radius:18px;text-align:center}
.th-directory__empty h3{font-family:'Instrument Serif',serif;font-size:28px;margin:0 0 8px}
.th-directory__empty p{margin:0 0 18px}
@media(max-width:760px){.th-directory{margin-inline:-2px;padding:18px 10px;border-radius:22px}.th-directory__links{grid-template-columns:1fr;padding:8px 12px}.th-directory__group-head{padding:14px;font-size:19px}.th-feature__actions .th-btn{width:100%;justify-content:center}}
@media(max-width:520px){.tal-launcher{right:14px!important;bottom:14px!important;width:58px!important;min-width:58px!important;height:58px!important;padding:4px!important;border-radius:999px!important}.tal-launcher-label,.tal-launcher-caret{display:none!important}.tal-launcher-mark{width:48px!important;height:48px!important;margin:0!important}.tal-panel{right:8px!important;bottom:8px!important}}