/* ====== FONTS (self-contained import; matches page faces) ====== */ @import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spline+Sans+Mono:wght@400;500;600&display=swap");/* ============================================================ DESIGN TOKENS — light cream + green + brass (per brief palette) ============================================================ */ .tt-home { --tt-ink: #102B1E; --tt-oxblood: #114429; --tt-oxblood-2: #0F3D26; --tt-sappan: #1F6B40; --tt-brass: #BE9230; /* THE buy color */ --tt-brass-2: #E3C88E; --tt-brass-deep: #765A22; --tt-paper: #FAF6EC; --tt-paper-2: #F1EBD9; --tt-paper-3: #FBF8F0; --tt-cream: #16301F; /* dark green text on ex-dark bands */ --tt-sand-dk: #59695B; --tt-body: #324136; --tt-muted: #59695B; --tt-sale: #A23B2E; /* terracotta — was/save only */ --tt-line: rgba(17, 68, 41, 0.14); --tt-line-soft: rgba(17, 68, 41, 0.09); --tt-line-dk: rgba(17, 68, 41, 0.16); --tt-display: "Marcellus", "Times New Roman", serif; --tt-text: "Spectral", Georgia, serif; --tt-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --tt-shadow: 0 14px 32px rgba(17,68,41,0.08); --tt-shadow-up: 0 26px 56px rgba(17,68,41,0.14); --tt-ease: cubic-bezier(0.22, 0.72, 0.2, 1);position: relative; width: 100%; max-width: 100%; overflow-x: clip; font-family: var(--tt-text); color: var(--tt-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(circle at 12% 2%, rgba(17,68,41,0.04), transparent 42%), radial-gradient(circle at 90% 6%, rgba(190,146,48,0.07), transparent 46%), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='tt-n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23tt-n)'%20opacity='0.04'/%3E%3C/svg%3E"), var(--tt-paper); }.tt-home *, .tt-home *::before, .tt-home *::after { box-sizing: border-box; }.tt-home img { max-width: 100%; height: auto; display: block; }.tt-home h1, .tt-home h2, .tt-home h3, .tt-home h4 { font-family: var(--tt-display); font-weight: 400; color: var(--tt-ink); margin: 0; letter-spacing: 0.005em; } .tt-home p { margin: 0; } .tt-home ::selection { background: rgba(224, 178, 94, 0.4); color: var(--tt-ink); }.tt-home a:focus-visible, .tt-home summary:focus-visible, .tt-home button:focus-visible, .tt-home .tt-btn:focus-visible { outline: 3px solid var(--tt-sappan); outline-offset: 3px; border-radius: 4px; }/* ---- Skip link ---- */ .tt-home .tt-skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 18px; background: var(--tt-oxblood); color: #FBF8F0; font: 600 13px/1 var(--tt-mono); letter-spacing: 0.08em; text-decoration: none; border-radius: 4px; transition: top 0.2s var(--tt-ease); } .tt-home .tt-skip:focus { top: 12px; }/* ================= UTILITY: MONO LABELS ================= */ .tt-home .tt-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--tt-mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--tt-sappan); margin: 0 0 18px; } .tt-home .tt-eyebrow .tt-eyebrow-n { color: var(--tt-brass-deep); font-variant-numeric: tabular-nums; } .tt-home .tt-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.55; }/* ================= REVEAL ON SCROLL (progressive enhancement only) ================= */ @media (scripting: enabled) { .tt-home .tt-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--tt-ease), transform 0.8s var(--tt-ease); } } .tt-home .tt-reveal.tt-in { opacity: 1; transform: none; }/* ================= STARS (visual social proof only — NOT in JSON-LD) ================= */ .tt-home .tt-stars { display: inline-flex; gap: 3px; line-height: 0; } .tt-home .tt-stars svg { width: 18px; height: 18px; fill: var(--tt-brass); } .tt-home .tt-stars.tt-stars-lg svg { width: 22px; height: 22px; }/* ================= BUTTONS ================= */ .tt-home .tt-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 30px; border: 0; cursor: pointer; border-radius: 2px; font: 600 13.5px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s var(--tt-ease), box-shadow 0.25s var(--tt-ease), border-color 0.25s, background-color 0.25s, color 0.25s; } .tt-home .tt-btn-buy { background: linear-gradient(135deg, var(--tt-brass) 0%, var(--tt-brass-2) 100%); color: #2A1606; box-shadow: 0 12px 26px rgba(190,146,48,0.32); } .tt-home .tt-btn-buy:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(190,146,48,0.44); } .tt-home .tt-btn-buy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.5) 50%, transparent 58%); transform: translateX(-130%); transition: transform 0.6s var(--tt-ease); pointer-events: none; } .tt-home .tt-btn-buy:hover::after { transform: translateX(130%); } .tt-home .tt-btn-lg { padding: 19px 38px; font-size: 14.5px; } .tt-home .tt-btn-ghost { border: 1.5px solid rgba(17,68,41,0.42); color: var(--tt-oxblood); background: transparent; } .tt-home .tt-btn-ghost:hover { transform: translateY(-2px); border-color: var(--tt-sappan); color: var(--tt-sappan); } .tt-home .tt-btn:active { transform: translateY(0) scale(0.98); } .tt-home .tt-btn-block { width: 100%; }/* ================= SECTION SCAFFOLD ================= */ .tt-home .tt-section { position: relative; padding: clamp(54px, 7vw, 96px) 24px; } .tt-home .tt-wrap { max-width: 1320px; margin: 0 auto; } .tt-home .tt-wrap-narrow { max-width: 820px; }.tt-home .tt-paper { background: transparent; } .tt-home .tt-paper-2 { background: linear-gradient(180deg, var(--tt-paper-2), var(--tt-paper)); } .tt-home .tt-band { border-block: 1px solid var(--tt-line); background: radial-gradient(900px 440px at 88% -10%, rgba(190,146,48,0.10), transparent 60%), radial-gradient(720px 460px at 4% 112%, rgba(17,68,41,0.05), transparent 62%), linear-gradient(176deg, #FBF8F0 0%, #F4EEDC 62%, #FAF6EC 100%); }/* Headings */ .tt-home .tt-h2 { font-size: clamp(32px, 4.8vw, 54px); line-height: 1.06; letter-spacing: 0.01em; } .tt-home .tt-section-head { text-align: center; max-width: 760px; margin: 0 auto; } .tt-home .tt-section-head .tt-h2 { margin-bottom: 14px; } .tt-home .tt-section-head .tt-eyebrow { justify-content: center; }.tt-home .tt-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; color: var(--tt-sappan); } .tt-home .tt-rule::before, .tt-home .tt-rule::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: 0.5; } .tt-home .tt-rule span { font: 400 13px/1 var(--tt-display); letter-spacing: 0.3em; }.tt-home .tt-sub { max-width: 640px; margin: 18px auto 0; text-align: center; font-size: 17px; line-height: 1.7; color: var(--tt-muted); }.tt-home .tt-prose p { font-size: 17.5px; line-height: 1.85; color: var(--tt-body); margin: 0 0 18px; } .tt-home .tt-prose p:last-child { margin-bottom: 0; } .tt-home .tt-prose em { font-style: italic; color: var(--tt-oxblood); } .tt-home .tt-prose a, .tt-home .tt-faq-a a { color: var(--tt-sappan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(190,146,48,0.5); transition: color 0.25s, text-decoration-color 0.25s; } .tt-home .tt-prose a:hover, .tt-home .tt-faq-a a:hover { color: var(--tt-oxblood); text-decoration-color: var(--tt-brass); }/* ================= MASTHEAD STRIP ================= */ .tt-home .tt-masthead { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1440px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--tt-line); } .tt-home .tt-masthead-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--tt-display); font-size: clamp(20px, 2.6vw, 26px); letter-spacing: 0.06em; color: var(--tt-ink); text-decoration: none; } .tt-home .tt-masthead-brand .tt-seal { width: 30px; height: 30px; } .tt-home .tt-masthead-cta { display: none; align-items: center; gap: 16px; } .tt-home .tt-masthead-cta .tt-mh-trust { font: 500 11px/1.4 var(--tt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-muted); text-align: right; } .tt-home .tt-masthead-cta .tt-mh-trust b { color: var(--tt-brass-deep); font-weight: 600; } .tt-home .tt-masthead-cta .tt-btn { padding: 12px 20px; font-size: 11.5px; } @media (min-width: 860px) { .tt-home .tt-masthead-cta { display: flex; } }/* ================= SEAL ================= */ .tt-home .tt-seal { display: inline-block; line-height: 0; } .tt-home .tt-seal svg { width: 100%; height: 100%; overflow: visible; } .tt-home .tt-seal .tt-seal-stroke { fill: none; stroke: var(--tt-sappan); stroke-width: 1.4; } .tt-home .tt-seal .tt-seal-glyph { fill: none; stroke: var(--tt-sappan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .tt-home .tt-seal .tt-seal-text { fill: var(--tt-brass-deep); font: 500 9px var(--tt-mono); letter-spacing: 0.2em; } .tt-home .tt-bot-glyph { color: var(--tt-sappan); } .tt-home .tt-bot-glyph .tt-seal-glyph { fill: none; stroke: currentColor; stroke-width: 2; }/* ================= HERO (100-pack offer leads) ================= */ .tt-home .tt-hero { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 56px) 24px clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--tt-line); background: radial-gradient(820px 520px at 82% -14%, rgba(190,146,48,0.16), transparent 56%), radial-gradient(700px 480px at 6% 110%, rgba(17,68,41,0.05), transparent 60%), linear-gradient(168deg, #FCF9F1 0%, #F3EDDA 66%, #FAF6EC 100%); } .tt-home .tt-hero-inner { position: relative; z-index: 1; max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .tt-home .tt-hero-copy { max-width: 600px; } .tt-home .tt-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; font: 500 11px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-muted); padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--tt-line); } .tt-home .tt-issue b { color: var(--tt-brass-deep); font-weight: 600; } .tt-home .tt-issue .tt-stars svg { width: 13px; height: 13px; } .tt-home .tt-issue .tt-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }.tt-home .tt-hero h1 { color: var(--tt-ink); margin: 0; } .tt-home .tt-hero-brand { display: block; font-size: clamp(40px, 6.4vw, 72px); line-height: 0.98; letter-spacing: 0.012em; } .tt-home .tt-hero-kw { display: block; margin-top: 12px; font-size: clamp(14px, 2vw, 20px); line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-brass-deep); } .tt-home .tt-hero-lede { font-family: var(--tt-display); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.34; color: var(--tt-oxblood); margin: 18px 0 0; } .tt-home .tt-hero-sub { font-size: 16px; line-height: 1.72; color: var(--tt-muted); margin: 13px 0 0; max-width: 520px; }/* HERO 100-pack offer card — the conversion centerpiece */ .tt-home .tt-offer { position: relative; margin-top: 24px; padding: 22px 22px 20px; border-radius: 12px; background: linear-gradient(180deg, #FFFFFF, var(--tt-paper-3)); border: 1.5px solid var(--tt-brass); box-shadow: var(--tt-shadow-up), 0 0 0 4px rgba(190,146,48,0.1); } .tt-home .tt-offer-flag { position: absolute; top: -13px; left: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--tt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #2A1606; background: linear-gradient(135deg, var(--tt-brass), var(--tt-brass-2)); padding: 7px 13px; border-radius: 999px; box-shadow: 0 8px 18px rgba(190,146,48,0.4); } .tt-home .tt-offer-flag svg { width: 12px; height: 12px; fill: #2A1606; } .tt-home .tt-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .tt-home .tt-offer-name { font-family: var(--tt-display); font-size: 23px; color: var(--tt-ink); } .tt-home .tt-offer-name span { display: block; font: 500 10.5px/1.4 var(--tt-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-brass-deep); margin-top: 2px; } .tt-home .tt-offer-supply { font: 500 11px/1.4 var(--tt-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-muted); text-align: right; } .tt-home .tt-offer-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px 12px; margin-top: 14px; } .tt-home .tt-offer-now { font: 400 44px/1 var(--tt-display); color: var(--tt-oxblood); } .tt-home .tt-offer-was { font: 500 17px/1 var(--tt-mono); color: var(--tt-muted); text-decoration: line-through; text-decoration-color: rgba(89,105,91,0.7); } .tt-home .tt-offer-save { font: 600 11px/1 var(--tt-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #F2F8EF; background: var(--tt-sappan); padding: 6px 11px; border-radius: 999px; } .tt-home .tt-offer-percup { display: block; margin-top: 8px; font: 500 12.5px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-offer-percup b { color: var(--tt-oxblood); font-weight: 600; } .tt-home .tt-offer .tt-btn { margin-top: 16px; } .tt-home .tt-offer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 16px; margin-top: 13px; font: 500 11px/1.4 var(--tt-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-muted); text-align: center; } .tt-home .tt-offer-meta span { display: inline-flex; align-items: center; gap: 6px; } .tt-home .tt-offer-meta svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--tt-sappan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tt-home .tt-offer-taster { display: block; margin-top: 14px; text-align: center; font: 500 12px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-offer-taster a { color: var(--tt-sappan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(190,146,48,0.5); transition: color 0.25s; } .tt-home .tt-offer-taster a:hover { color: var(--tt-oxblood); } .tt-home .tt-hero-jump { display: inline-block; margin-top: 16px; font: 500 12px/1 var(--tt-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-sappan); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(190,146,48,0.45); transition: color 0.25s; } .tt-home .tt-hero-jump:hover { color: var(--tt-ink); }/* Hero art: framed product photo + wax seal + floating savings chip */ .tt-home .tt-hero-art { position: relative; display: grid; place-items: center; perspective: 900px; } .tt-home .tt-hero-photo-wrap { position: relative; width: min(460px, 88vw); transition: transform 0.2s ease-out; } .tt-home .tt-hero-photo-link { position: relative; display: block; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--tt-paper-3); box-shadow: inset 0 0 0 1px var(--tt-line), 0 28px 60px rgba(17,68,41,0.18); transition: transform 0.4s var(--tt-ease), box-shadow 0.4s var(--tt-ease); } .tt-home .tt-hero-photo-link:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.6), 0 40px 84px rgba(17,68,41,0.24); } .tt-home .tt-hero-photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: inherit; transition: transform 0.6s var(--tt-ease); } .tt-home .tt-hero-photo-link:hover .tt-hero-photo { transform: scale(1.06); } .tt-home .tt-hero-photo-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(17,68,41,0.05), transparent 28%); } .tt-home .tt-hero-photo-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.34) 50%, transparent 60%); transform: translateX(-130%); transition: transform 0.85s var(--tt-ease); } .tt-home .tt-hero-photo-link:hover .tt-hero-photo-shine { transform: translateX(130%); } .tt-home .tt-hero-ribbon { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; background: rgba(17,68,41,0.92); border: 1px solid rgba(190,146,48,0.5); border-radius: 4px; backdrop-filter: blur(4px); font: 600 11px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-brass-2); } .tt-home .tt-hero-ribbon b { color: #FBF8F0; font-size: 13px; } /* floating savings chip — animated number on reveal */ .tt-home .tt-hero-chip { position: absolute; top: 14px; right: -10px; z-index: 4; display: grid; place-items: center; text-align: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #FFFFFF, #F0E4C7 70%, #E2D2AC 100%); box-shadow: 0 14px 28px rgba(17,68,41,0.22), inset 0 2px 3px rgba(255,255,255,0.85), 0 0 0 1px rgba(190,146,48,0.4); } .tt-home .tt-hero-chip b { display: block; font-family: var(--tt-display); font-size: 26px; line-height: 1; color: var(--tt-brass-deep); } .tt-home .tt-hero-chip span { display: block; margin-top: 2px; font: 600 8.5px/1.2 var(--tt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-brass-deep); } @media (max-width: 560px) { .tt-home .tt-hero-chip { width: 76px; height: 76px; right: -4px; } .tt-home .tt-hero-chip b { font-size: 21px; } }.tt-home .tt-hero-seal { position: absolute; right: -16px; bottom: -16px; width: 124px; height: 124px; z-index: 4; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #FCF6E8 0%, #F0E4C7 60%, #E2D2AC 100%); box-shadow: 0 16px 32px rgba(17,68,41,0.2), inset 0 2px 3px rgba(255,255,255,0.85), inset 0 -3px 7px rgba(110,74,20,0.18), 0 0 0 1px rgba(110,74,20,0.2); transition: transform 0.2s ease-out; } .tt-home .tt-hero-seal svg { width: 100%; height: 100%; overflow: visible; } .tt-home .tt-hero-seal .tt-seal-stroke { stroke: rgba(110,74,20,0.5); } .tt-home .tt-hero-seal .tt-seal-glyph { stroke: var(--tt-oxblood); stroke-width: 2; } .tt-home .tt-hero-seal .tt-seal-text { fill: #3A1108; } @media (max-width: 560px) { .tt-home .tt-hero-seal { width: 96px; height: 96px; right: -8px; bottom: -8px; } }/* ================= TRUST STRIP ================= */ .tt-home .tt-strip { background: var(--tt-paper-2); border-bottom: 1px solid var(--tt-line); padding: 0; } .tt-home .tt-strip-inner { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); } .tt-home .tt-strip-item { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-right: 1px solid var(--tt-line); } .tt-home .tt-strip-item:last-child { border-right: 0; } .tt-home .tt-strip-item svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--tt-sappan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tt-home .tt-strip-item b { display: block; font-family: var(--tt-display); font-weight: 400; font-size: 15px; color: var(--tt-ink); line-height: 1.2; } .tt-home .tt-strip-item span { font: 500 10.5px/1.3 var(--tt-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tt-muted); }/* ================= SOCIAL PROOF BAR + TESTIMONIALS ================= */ .tt-home .tt-proof-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; text-align: center; margin: 0 auto clamp(34px, 5vw, 48px); max-width: 760px; } .tt-home .tt-proof-score { display: inline-flex; align-items: center; gap: 12px; } .tt-home .tt-proof-score .tt-pscore { font-family: var(--tt-display); font-size: 34px; line-height: 1; color: var(--tt-oxblood); } .tt-home .tt-proof-score-txt { text-align: left; } .tt-home .tt-proof-score-txt b { display: block; font: 600 12.5px/1.3 var(--tt-mono); letter-spacing: 0.04em; color: var(--tt-ink); } .tt-home .tt-proof-score-txt span { font: 500 11px/1.3 var(--tt-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-muted); } .tt-home .tt-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .tt-home .tt-quote { display: flex; flex-direction: column; padding: 24px 24px 22px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 10px; box-shadow: var(--tt-shadow); transition: transform 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease), border-color 0.35s; } .tt-home .tt-quote:hover { transform: translateY(-5px); box-shadow: var(--tt-shadow-up); border-color: rgba(190,146,48,0.5); } .tt-home .tt-quote .tt-stars { margin-bottom: 12px; } .tt-home .tt-quote p { font-family: var(--tt-display); font-size: 18px; line-height: 1.5; color: var(--tt-ink); margin: 0 0 16px; } .tt-home .tt-quote-by { margin-top: auto; display: flex; align-items: center; gap: 10px; } .tt-home .tt-quote-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #FFFFFF, var(--tt-paper-2)); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.45); font: 500 14px/1 var(--tt-display); color: var(--tt-sappan); } .tt-home .tt-quote-by div b { display: block; font: 600 13px/1.3 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-ink); } .tt-home .tt-quote-by div span { font: 500 10px/1.3 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-sappan); }/* ================= ORIGIN ================= */ .tt-home .tt-origin { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .tt-home .tt-dropcap-card { position: relative; padding: 30px 28px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-left: 3px solid var(--tt-oxblood); border-radius: 4px; box-shadow: var(--tt-shadow); } .tt-home .tt-dropcap-card .tt-pull { font-family: var(--tt-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.32; color: var(--tt-oxblood); } .tt-home .tt-dropcap-card .tt-pull-by { display: block; margin-top: 16px; font: 500 11px/1.5 var(--tt-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-muted); } .tt-home .tt-origin-body .tt-prose p:first-child::first-letter { float: left; font-family: var(--tt-display); font-size: 4.6em; line-height: 0.74; padding: 6px 12px 0 0; color: var(--tt-sappan); }/* ================= THE BLEND ================= */ .tt-home .tt-featured { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 52px); align-items: center; margin: clamp(40px, 5vw, 56px) 0 clamp(44px, 6vw, 64px); } .tt-home .tt-featured-photo { position: relative; width: min(360px, 80vw); margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: var(--tt-shadow-up); background: var(--tt-paper-3); } .tt-home .tt-featured-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.6s var(--tt-ease); } .tt-home .tt-featured:hover .tt-featured-photo img { transform: scale(1.05); } .tt-home .tt-featured-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(190,146,48,0.4); border-radius: inherit; pointer-events: none; } .tt-home .tt-featured-tag { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; font: 500 10px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--tt-oxblood); padding: 7px 14px; border-radius: 999px; white-space: nowrap; } .tt-home .tt-featured-copy h3 { font-size: clamp(27px, 3.6vw, 38px); margin: 0 0 4px; } .tt-home .tt-featured-latin { font: 500 13.5px/1 var(--tt-mono); letter-spacing: 0.08em; color: var(--tt-brass-deep); margin: 0 0 14px; } .tt-home .tt-featured-copy p { font-size: 17px; line-height: 1.8; color: var(--tt-body); }.tt-home .tt-bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: clamp(44px, 6vw, 60px); } .tt-home .tt-bot-card { text-align: center; padding: 26px 16px 22px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 6px; box-shadow: var(--tt-shadow); transition: transform 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease), border-color 0.35s var(--tt-ease); } .tt-home .tt-bot-card:hover { transform: translateY(-5px); box-shadow: var(--tt-shadow-up); border-color: rgba(190,146,48,0.55); } .tt-home .tt-bot-medal { position: relative; width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #FFFFFF, var(--tt-paper-2)); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.45); transition: transform 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease); } .tt-home .tt-bot-card:hover .tt-bot-medal { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.75); } .tt-home .tt-bot-medal .tt-bot-glyph { width: 44px; height: 44px; } .tt-home .tt-bot-card:hover .tt-bot-glyph { color: var(--tt-oxblood-2); transition: color 0.3s; } .tt-home .tt-bot-card h4 { font-size: 18px; margin: 0 0 5px; color: var(--tt-ink); } .tt-home .tt-bot-card .tt-bot-card-latin { font: 500 11px/1.3 var(--tt-mono); letter-spacing: 0.06em; color: var(--tt-brass-deep); margin: 0 0 8px; } .tt-home .tt-bot-card p { font-size: 14px; line-height: 1.55; color: var(--tt-muted); }/* the 15-herb ledger */ .tt-home .tt-ledger { background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 6px; box-shadow: var(--tt-shadow-up); overflow: hidden; } .tt-home .tt-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 26px; background: var(--tt-paper-2); border-bottom: 1.5px solid var(--tt-oxblood); } .tt-home .tt-ledger-head h3 { font-size: 22px; margin: 0; } .tt-home .tt-ledger-head span { font: 500 10.5px/1 var(--tt-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-brass-deep); } .tt-home .tt-ledger-grid { display: grid; grid-template-columns: 1fr 1fr; } .tt-home .tt-ledger-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; padding: 14px 26px; border-bottom: 1px solid var(--tt-line-soft); transition: background 0.25s var(--tt-ease); } .tt-home .tt-ledger-row:hover { background: rgba(17,68,41,0.04); } .tt-home .tt-ledger-grid > .tt-ledger-row:nth-child(odd) { border-right: 1px solid var(--tt-line-soft); } .tt-home .tt-ledger-grid > .tt-ledger-row:nth-last-child(-n+2) { border-bottom: 0; } .tt-home .tt-ledger-num { font: 500 11px/1.4 var(--tt-mono); color: var(--tt-sappan); font-variant-numeric: tabular-nums; } .tt-home .tt-ledger-name { font-family: var(--tt-display); font-size: 17px; color: var(--tt-ink); } .tt-home .tt-ledger-latin { grid-column: 2; font: 400 11.5px/1.3 var(--tt-mono); letter-spacing: 0.04em; color: var(--tt-muted); font-style: italic; } .tt-home .tt-ledger-foot { padding: 16px 26px; background: var(--tt-paper-2); border-top: 1px solid var(--tt-line); font: 500 12px/1.6 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); text-align: center; }/* ================= IN THE CUP ================= */ .tt-home .tt-cup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: clamp(36px, 5vw, 52px); } .tt-home .tt-cup-col { padding: 30px 26px; border: 1px solid var(--tt-line); border-radius: 6px; background: var(--tt-paper-3); transition: transform 0.35s var(--tt-ease), border-color 0.35s, box-shadow 0.35s; } .tt-home .tt-cup-col:hover { transform: translateY(-4px); border-color: rgba(190,146,48,0.5); box-shadow: var(--tt-shadow); } .tt-home .tt-cup-swatch { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(17,68,41,0.12); } .tt-home .tt-cup-swatch.c1 { background: radial-gradient(circle at 35% 30%, #C45A2C, #7C2C18); } .tt-home .tt-cup-swatch.c2 { background: radial-gradient(circle at 35% 30%, #C7D08F, #8A9450); } .tt-home .tt-cup-swatch.c3 { background: radial-gradient(circle at 35% 30%, #A6824F, #5F4628); } .tt-home .tt-cup-num { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.2em; color: var(--tt-brass-deep); } .tt-home .tt-cup-col .tt-cup-label { display: block; margin-top: 8px; font: 500 11px/1 var(--tt-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tt-sappan); } .tt-home .tt-cup-col h3 { font-size: 24px; margin: 12px 0 10px; color: var(--tt-ink); } .tt-home .tt-cup-col p { font-size: 15.5px; line-height: 1.7; color: var(--tt-body); }/* ================= THE RITUAL ================= */ .tt-home .tt-ritual { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 56px); } .tt-home .tt-ritual::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 1px; background: repeating-linear-gradient(90deg, var(--tt-brass) 0 6px, transparent 6px 12px); opacity: 0.6; } .tt-home .tt-step { position: relative; text-align: center; } .tt-home .tt-step-node { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-paper); border: 1.5px solid var(--tt-brass); font: 500 15px/1 var(--tt-mono); color: var(--tt-sappan); box-shadow: 0 0 0 6px var(--tt-paper); } .tt-home .tt-step h3 { font-size: 20px; margin: 0 0 7px; } .tt-home .tt-step p { font-size: 14.5px; line-height: 1.6; color: var(--tt-muted); max-width: 220px; margin: 0 auto; }/* ================= VALUE LADDER (the price menu, anchored on 100) ================= */ .tt-home .tt-ladder-vis { max-width: 760px; margin: clamp(28px,4vw,40px) auto clamp(38px,5vw,52px); background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 10px; box-shadow: var(--tt-shadow); padding: 24px 26px; } .tt-home .tt-ladder-vis h3 { font-size: 18px; margin: 0 0 4px; } .tt-home .tt-ladder-vis .tt-lv-sub { font: 500 11.5px/1.4 var(--tt-mono); letter-spacing: 0.04em; color: var(--tt-muted); margin: 0 0 18px; } .tt-home .tt-lv-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; padding: 9px 0; } .tt-home .tt-lv-row + .tt-lv-row { border-top: 1px solid var(--tt-line-soft); } .tt-home .tt-lv-label { font: 600 12.5px/1.3 var(--tt-mono); color: var(--tt-ink); } .tt-home .tt-lv-label span { display: block; font-weight: 500; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-muted); } .tt-home .tt-lv-track { position: relative; height: 12px; border-radius: 999px; background: var(--tt-paper-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--tt-line-soft); } .tt-home .tt-lv-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--tt-sappan), var(--tt-oxblood)); } .tt-home .tt-lv-row.is-hero .tt-lv-fill { background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); } .tt-home .tt-lv-val { font: 600 14px/1 var(--tt-mono); color: var(--tt-oxblood); font-variant-numeric: tabular-nums; white-space: nowrap; } .tt-home .tt-lv-row.is-hero .tt-lv-val { color: var(--tt-brass-deep); } .tt-home .tt-lv-foot { margin-top: 16px; font: 500 11px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); text-align: center; }.tt-home .tt-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(34px, 5vw, 48px); } .tt-home .tt-pack { position: relative; display: flex; flex-direction: column; padding: 28px 24px 26px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 8px; box-shadow: var(--tt-shadow); transition: transform 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease), border-color 0.35s; } .tt-home .tt-pack::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, var(--tt-sappan), var(--tt-oxblood)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--tt-ease); } .tt-home .tt-pack:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-up); border-color: rgba(190,146,48,0.6); } .tt-home .tt-pack:hover::before { transform: scaleX(1); } /* 100 = Most Popular anchor */ .tt-home .tt-pack.is-popular { border-color: var(--tt-brass); box-shadow: var(--tt-shadow), 0 0 0 1px rgba(190,146,48,0.32); } .tt-home .tt-pack.is-popular::before { background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); transform: scaleX(1); } /* 250/500 = the visual heroes */ .tt-home .tt-pack.is-hero { border-color: var(--tt-oxblood); transform: translateY(-6px); background: linear-gradient(180deg, #FFFFFF, var(--tt-paper-3)); box-shadow: var(--tt-shadow-up), 0 0 0 1.5px rgba(17,68,41,0.18); } .tt-home .tt-pack.is-hero::before { background: linear-gradient(90deg, var(--tt-oxblood-2), var(--tt-sappan)); transform: scaleX(1); } .tt-home .tt-pack.is-hero:hover { transform: translateY(-10px); } .tt-home .tt-pack-flag { position: absolute; top: -11px; left: 24px; z-index: 2; font: 600 10px/1 var(--tt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #2A1606; background: linear-gradient(135deg, var(--tt-brass), var(--tt-brass-2)); padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(190,146,48,0.4); } .tt-home .tt-pack-flag.is-best { left: 24px; color: #FBF8F0; background: linear-gradient(135deg, var(--tt-oxblood), var(--tt-oxblood-2)); box-shadow: 0 6px 16px rgba(17,68,41,0.4); } .tt-home .tt-pack-save { position: absolute; top: -11px; right: 24px; z-index: 2; font: 600 10px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #FCEFD6; background: var(--tt-sale); padding: 6px 11px; border-radius: 999px; box-shadow: 0 6px 16px rgba(162,59,46,0.34); } .tt-home .tt-pack-name { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-brass-deep); } .tt-home .tt-pack-size { font-family: var(--tt-display); font-size: 32px; color: var(--tt-ink); margin: 10px 0 2px; transition: color 0.25s; } .tt-home .tt-pack:hover .tt-pack-size { color: var(--tt-sappan); } .tt-home .tt-pack-supply { font: 500 10.5px/1.3 var(--tt-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-muted); margin: 0 0 14px; } .tt-home .tt-pack-pricing { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; } .tt-home .tt-pack-now { font: 600 27px/1 var(--tt-mono); color: var(--tt-oxblood); font-variant-numeric: tabular-nums; } .tt-home .tt-pack-was { font: 400 14px/1 var(--tt-mono); color: var(--tt-muted); text-decoration: line-through; text-decoration-color: rgba(89,105,91,0.7); } .tt-home .tt-pack-percup { display: inline-flex; align-items: baseline; gap: 6px; font: 600 13px/1 var(--tt-mono); color: var(--tt-sappan); margin: 0 0 16px; } .tt-home .tt-pack-percup b { font-size: 17px; color: var(--tt-oxblood); } .tt-home .tt-pack.is-hero .tt-pack-percup b { color: var(--tt-oxblood-2); } .tt-home .tt-pack-desc { font-size: 14px; line-height: 1.55; color: var(--tt-muted); margin: 0 0 18px; } .tt-home .tt-pack .tt-btn { margin-top: auto; width: 100%; padding: 14px 18px; font-size: 12.5px; }.tt-home .tt-packs-more { text-align: center; margin-top: clamp(28px,4vw,40px); } .tt-home .tt-packs-more details { display: inline-block; text-align: left; max-width: 100%; } .tt-home .tt-packs-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-sappan); padding: 12px 22px; border: 1.5px solid rgba(17,68,41,0.3); border-radius: 999px; transition: border-color 0.25s, color 0.25s; } .tt-home .tt-packs-more summary::-webkit-details-marker { display: none; } .tt-home .tt-packs-more summary:hover { border-color: var(--tt-sappan); color: var(--tt-oxblood); } .tt-home .tt-packs-more summary .tt-chev { transition: transform 0.3s var(--tt-ease); } .tt-home .tt-packs-more details[open] summary .tt-chev { transform: rotate(180deg); } .tt-home .tt-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 22px; } .tt-home .tt-mini { display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 7px; text-decoration: none; transition: transform 0.3s var(--tt-ease), border-color 0.3s, box-shadow 0.3s; } .tt-home .tt-mini:hover { transform: translateY(-3px); border-color: rgba(190,146,48,0.55); box-shadow: var(--tt-shadow); } .tt-home .tt-mini-size { font-family: var(--tt-display); font-size: 21px; color: var(--tt-ink); } .tt-home .tt-mini-supply { font: 500 10px/1.3 var(--tt-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-muted); margin-bottom: 8px; } .tt-home .tt-mini-price { display: flex; align-items: baseline; gap: 8px; } .tt-home .tt-mini-now { font: 600 16px/1 var(--tt-mono); color: var(--tt-oxblood); } .tt-home .tt-mini-was { font: 400 12px/1 var(--tt-mono); color: var(--tt-muted); text-decoration: line-through; } .tt-home .tt-mini-meta { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 11px/1 var(--tt-mono); } .tt-home .tt-mini-cup { color: var(--tt-sappan); } .tt-home .tt-mini-off { color: var(--tt-sale); }.tt-home .tt-packs-trust { display: flex; justify-content: center; margin: 28px auto 2px; text-align: center; } .tt-home .tt-cta-trust { display: inline-flex; align-items: center; gap: 9px; font-family: var(--tt-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-muted); line-height: 1.45; } .tt-home .tt-cta-trust svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tt-sappan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tt-home .tt-packs-note { text-align: center; margin-top: 16px; font: 500 12.5px/1.6 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-compliance-note { max-width: 680px; margin: 10px auto 0; text-align: center; font: 500 12px/1.6 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); }/* ================= GALLERY STRIP ================= */ .tt-home .tt-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(34px,5vw,48px); } .tt-home .tt-gallery a { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--tt-paper-3); box-shadow: var(--tt-shadow); transition: transform 0.4s var(--tt-ease), box-shadow 0.4s var(--tt-ease); } .tt-home .tt-gallery a:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-up); } .tt-home .tt-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.6s var(--tt-ease); } .tt-home .tt-gallery a:hover img { transform: scale(1.08); } .tt-home .tt-gallery a::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--tt-line); border-radius: inherit; pointer-events: none; }/* ================= TRANSPARENCY ================= */ .tt-home .tt-coa { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 56px); align-items: center; } .tt-home .tt-coa-card { position: relative; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(17,68,41,0.04) 31px 32px), #FCF8EF; border: 1px solid var(--tt-line); border-radius: 4px; box-shadow: var(--tt-shadow-up); padding: 30px 30px 26px; } .tt-home .tt-coa-card::before, .tt-home .tt-coa-card::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 6px -2px, transparent 6px, #FCF8EF 6px) repeat-x; background-size: 12px 10px; } .tt-home .tt-coa-card::before { top: -9px; transform: scaleY(-1); } .tt-home .tt-coa-card::after { bottom: -9px; } .tt-home .tt-coa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1.5px solid var(--tt-oxblood); } .tt-home .tt-coa-top h3 { font-size: 25px; margin: 0; line-height: 1.05; } .tt-home .tt-coa-top .tt-coa-kicker { display: block; font: 500 10px/1.4 var(--tt-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tt-sappan); margin-bottom: 6px; } .tt-home .tt-coa-seal { width: 64px; height: 64px; flex: none; } .tt-home .tt-coa-field { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--tt-line); font-family: var(--tt-mono); } .tt-home .tt-coa-field:last-of-type { border-bottom: 0; } .tt-home .tt-coa-field .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-muted); } .tt-home .tt-coa-field .v { font-size: 13px; font-weight: 600; color: var(--tt-ink); text-align: right; } .tt-home .tt-coa-field .v.ok { color: var(--tt-sappan); } .tt-home .tt-coa-note { margin-top: 14px; font: 500 11px/1.5 var(--tt-mono); color: var(--tt-muted); } .tt-home .tt-promise { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; } .tt-home .tt-promise li { position: relative; display: flex; align-items: center; gap: 16px; padding: 15px 18px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 11px; box-shadow: 0 6px 16px rgba(17,68,41,0.04); overflow: hidden; transition: transform 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease), border-color 0.3s var(--tt-ease); } .tt-home .tt-promise li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--tt-oxblood-2), var(--tt-oxblood)); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--tt-ease); } .tt-home .tt-promise li:hover { transform: translateX(5px); border-color: rgba(17,68,41,0.4); box-shadow: 0 16px 32px rgba(17,68,41,0.1); } .tt-home .tt-promise li:hover::before { transform: scaleY(1); } .tt-home .tt-promise .tt-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF, var(--tt-paper-2)); box-shadow: inset 0 0 0 1px rgba(17,68,41,0.18); color: var(--tt-sappan); transition: background 0.35s var(--tt-ease), color 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease), transform 0.35s var(--tt-ease); } .tt-home .tt-promise .tt-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tt-home .tt-promise li:hover .tt-ic { background: linear-gradient(135deg, var(--tt-oxblood-2), var(--tt-oxblood)); color: #F6EEDE; box-shadow: inset 0 0 0 1px rgba(17,68,41,0.5), 0 8px 18px rgba(17,68,41,0.32); transform: scale(1.07) rotate(-3deg); } .tt-home .tt-promise li > div { min-width: 0; } .tt-home .tt-promise b { display: block; font-family: var(--tt-display); font-weight: 400; font-size: 16.5px; color: var(--tt-ink); } .tt-home .tt-promise p { font-size: 13.5px; line-height: 1.5; color: var(--tt-muted); margin: 2px 0 0; }/* ================= FAQ ================= */ .tt-home .tt-faq { max-width: 820px; margin: clamp(36px, 5vw, 52px) auto 0; } .tt-home .tt-faq-item { background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 5px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .tt-home .tt-faq-item:hover { border-color: rgba(190,146,48,0.45); } .tt-home .tt-faq-item[open] { border-color: rgba(190,146,48,0.6); box-shadow: var(--tt-shadow); } .tt-home .tt-faq-item summary { list-style: none; cursor: pointer; padding: 19px 56px 19px 22px; position: relative; font-family: var(--tt-display); font-size: 19px; color: var(--tt-ink); } .tt-home .tt-faq-item summary::-webkit-details-marker { display: none; } .tt-home .tt-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 24px/1 var(--tt-display); color: var(--tt-sappan); transition: transform 0.3s var(--tt-ease); } .tt-home .tt-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .tt-home .tt-faq-a { padding: 0 22px 20px; } .tt-home .tt-faq-a p { font-size: 15.5px; line-height: 1.75; color: var(--tt-body); } .tt-home .tt-faq-item[open] .tt-faq-a { animation: tt-fade 0.4s var(--tt-ease); } @keyframes tt-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }/* ================= FINAL CTA ================= */ .tt-home .tt-finalcta { text-align: center; max-width: 760px; margin: 0 auto; } .tt-home .tt-finalcta .tt-stars { margin-bottom: 16px; } .tt-home .tt-finalcta h2 { margin-bottom: 12px; } .tt-home .tt-finalcta p { max-width: 520px; margin: 0 auto 26px; color: var(--tt-muted); font-size: 16.5px; } .tt-home .tt-finalcta-btns { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .tt-home .tt-finalcta-taster { font: 500 12.5px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); margin-top: 18px; } .tt-home .tt-finalcta-taster a { color: var(--tt-sappan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .tt-home .tt-finalcta-trust { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--tt-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-muted); } .tt-home .tt-finalcta-trust svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tt-sappan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }/* ================= FOOTER ================= */ .tt-home .tt-footer { color: var(--tt-body); background: linear-gradient(180deg, #EFE8D4, #F2ECDA); border-top: 1px solid var(--tt-line); padding: clamp(56px, 8vw, 84px) 0 0; } .tt-home .tt-footer-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(36px, 6vw, 72px); max-width: 1340px; margin: 0 auto; padding: 0 24px; } .tt-home .tt-footer-mark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--tt-display); font-size: 27px; letter-spacing: 0.04em; color: var(--tt-ink); } .tt-home .tt-footer-mark .tt-footer-seal { width: 30px; height: 30px; } .tt-home .tt-footer-tagline { margin: 16px 0 20px; max-width: 380px; font-size: 15px; line-height: 1.7; color: var(--tt-muted); } .tt-home .tt-footer-mail { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--tt-mono); letter-spacing: 0.04em; color: var(--tt-sappan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(190,146,48,0.4); transition: color 0.25s, text-decoration-color 0.25s; } .tt-home .tt-footer-mail:hover { color: var(--tt-ink); text-decoration-color: var(--tt-brass); } .tt-home .tt-footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; } .tt-home .tt-footer-col h4 { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-brass-deep); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tt-line); } .tt-home .tt-footer-col ul { list-style: none; margin: 0; padding: 0; } .tt-home .tt-footer-col li { margin: 0 0 11px; } .tt-home .tt-footer-col li:last-child { margin-bottom: 0; } .tt-home .tt-footer-col a { position: relative; display: inline-block; font-family: var(--tt-text); font-size: 15px; color: var(--tt-muted); text-decoration: none; transition: color 0.25s var(--tt-ease), padding-left 0.25s var(--tt-ease); } .tt-home .tt-footer-col a::before { content: ""; position: absolute; top: 50%; left: 0; width: 0; height: 1.5px; background: var(--tt-brass); transform: translateY(-50%); transition: width 0.25s var(--tt-ease); } .tt-home .tt-footer-col a:hover { color: var(--tt-ink); padding-left: 16px; } .tt-home .tt-footer-col a:hover::before { width: 11px; } .tt-home .tt-footer-disclaimer { max-width: 1340px; margin: clamp(44px, 6vw, 60px) auto 0; padding: 24px 24px 0; border-top: 1px solid var(--tt-line); } .tt-home .tt-footer-disclaimer p { font-size: 12.5px; line-height: 1.8; color: var(--tt-muted); } .tt-home .tt-footer-disclaimer p + p { margin-top: 10px; } .tt-home .tt-footer-bar { margin-top: clamp(30px, 5vw, 46px); padding: 20px 0; background: rgba(17,68,41,0.05); border-top: 1px solid var(--tt-line); } .tt-home .tt-footer-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; max-width: 1340px; margin: 0 auto; padding: 0 24px; } .tt-home .tt-footer-copy { font: 500 12px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-footer-uplink { font: 500 11.5px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-sappan); text-decoration: none; white-space: nowrap; transition: color 0.25s; } .tt-home .tt-footer-uplink:hover { color: var(--tt-ink); }/* ================= STICKY BUY BAR + PROGRESS (defaults to 100-pack) ================= */ .tt-home .tt-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); box-shadow: 0 0 10px rgba(224,178,94,0.5); z-index: 2147483646; pointer-events: none; transition: transform 0.12s linear; } .tt-home .tt-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483645; display: flex; align-items: center; gap: 16px; padding: 12px clamp(14px, 4vw, 32px); background: rgba(251,248,240,0.97); color: var(--tt-ink); border-top: 1px solid var(--tt-line); box-shadow: 0 -12px 30px rgba(17,68,41,0.12); backdrop-filter: blur(8px); transform: translateY(120%); transition: transform 0.45s var(--tt-ease); } .tt-home .tt-buybar.tt-show { transform: none; } .tt-home .tt-buybar-label { margin: 0; font-family: var(--tt-display); font-size: 17px; line-height: 1.2; color: var(--tt-ink); } .tt-home .tt-buybar-label span { display: block; font: 500 11px/1.4 var(--tt-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-brass-deep); } .tt-home .tt-buybar-price { margin-left: auto; font: 600 16px/1 var(--tt-mono); color: var(--tt-oxblood); white-space: nowrap; font-variant-numeric: tabular-nums; } .tt-home .tt-buybar-price s { color: var(--tt-muted); font-weight: 400; font-size: 13px; margin-left: 6px; } .tt-home .tt-buybar .tt-btn { padding: 13px 26px; } .tt-home .tt-buybar-close { background: none; border: 0; padding: 4px 6px; font-size: 22px; line-height: 1; color: var(--tt-muted); cursor: pointer; border-radius: 4px; transition: color 0.2s; } .tt-home .tt-buybar-close:hover { color: var(--tt-ink); } @media (max-width: 640px) { .tt-home .tt-buybar-label span { display: none; } .tt-home .tt-buybar-price { margin-left: auto; } } @media (max-width: 460px) { .tt-home .tt-buybar-price { display: none; } .tt-home .tt-buybar .tt-btn { margin-left: auto; padding: 12px 16px; font-size: 11px; } }/* ================= STAGGERED REVEAL ================= */ .tt-home .tt-bot-grid > .tt-reveal:nth-child(2), .tt-home .tt-packs > .tt-reveal:nth-child(2), .tt-home .tt-proof-grid > .tt-reveal:nth-child(2), .tt-home .tt-cup-grid > .tt-reveal:nth-child(2), .tt-home .tt-ritual > .tt-reveal:nth-child(2), .tt-home .tt-gallery > .tt-reveal:nth-child(2) { transition-delay: 0.08s; } .tt-home .tt-bot-grid > .tt-reveal:nth-child(3), .tt-home .tt-packs > .tt-reveal:nth-child(3), .tt-home .tt-proof-grid > .tt-reveal:nth-child(3), .tt-home .tt-cup-grid > .tt-reveal:nth-child(3), .tt-home .tt-ritual > .tt-reveal:nth-child(3), .tt-home .tt-gallery > .tt-reveal:nth-child(3) { transition-delay: 0.16s; } .tt-home .tt-bot-grid > .tt-reveal:nth-child(4), .tt-home .tt-proof-grid > .tt-reveal:nth-child(4), .tt-home .tt-ritual > .tt-reveal:nth-child(4), .tt-home .tt-gallery > .tt-reveal:nth-child(4) { transition-delay: 0.24s; } .tt-home .tt-bot-grid > .tt-reveal:nth-child(5) { transition-delay: 0.32s; }/* ================= RESPONSIVE ================= */ @media (max-width: 980px) { .tt-home .tt-hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } .tt-home .tt-hero-copy { max-width: 640px; margin: 0 auto; } .tt-home .tt-issue, .tt-home .tt-hero-sub { margin-left: auto; margin-right: auto; } .tt-home .tt-issue { justify-content: center; } .tt-home .tt-offer-price-row, .tt-home .tt-offer-meta { justify-content: center; } .tt-home .tt-offer-head { justify-content: center; text-align: center; } .tt-home .tt-offer-supply { text-align: center; } .tt-home .tt-offer { max-width: 480px; margin-left: auto; margin-right: auto; } .tt-home .tt-hero-art { order: -1; } .tt-home .tt-strip-inner { grid-template-columns: 1fr 1fr; } .tt-home .tt-strip-item:nth-child(2) { border-right: 0; } .tt-home .tt-strip-item:nth-child(1), .tt-home .tt-strip-item:nth-child(2) { border-bottom: 1px solid var(--tt-line); } .tt-home .tt-origin { grid-template-columns: 1fr; gap: 32px; } .tt-home .tt-featured { grid-template-columns: 1fr; text-align: center; } .tt-home .tt-featured-copy { max-width: 560px; margin: 0 auto; } .tt-home .tt-coa { grid-template-columns: 1fr; } } @media (max-width: 860px) { .tt-home .tt-packs { grid-template-columns: 1fr; } .tt-home .tt-pack.is-hero { transform: none; } .tt-home .tt-ritual { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } .tt-home .tt-ritual::before { display: none; } .tt-home .tt-ledger-grid { grid-template-columns: 1fr; } .tt-home .tt-ledger-grid > .tt-ledger-row:nth-child(odd) { border-right: 0; } .tt-home .tt-ledger-grid > .tt-ledger-row:nth-last-child(2) { border-bottom: 1px solid var(--tt-line-soft); } .tt-home .tt-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tt-home .tt-section { padding: clamp(46px, 11vw, 60px) 18px; } .tt-home .tt-hero { padding: 32px 18px 48px; } .tt-home .tt-hero-brand { font-size: clamp(36px, 12vw, 56px); } .tt-home .tt-strip-inner { grid-template-columns: 1fr; } .tt-home .tt-strip-item { border-right: 0; border-bottom: 1px solid var(--tt-line); } .tt-home .tt-strip-item:last-child { border-bottom: 0; } .tt-home .tt-lv-row { grid-template-columns: 76px 1fr auto; gap: 10px; } .tt-home .tt-footer-top { grid-template-columns: 1fr; gap: 36px; } .tt-home .tt-footer-nav { grid-template-columns: 1fr 1fr; } .tt-home .tt-footer-bar-inner { justify-content: center; text-align: center; } .tt-home .tt-coa-top { flex-direction: column; } .tt-home .tt-faq-item summary { padding-right: 46px; } } @media (max-width: 380px) { .tt-home .tt-ritual { grid-template-columns: 1fr; } .tt-home .tt-footer-nav { grid-template-columns: 1fr; } .tt-home .tt-offer-now { font-size: 36px; } }/* ================= REDUCED MOTION ================= */ @media (prefers-reduced-motion: reduce) { .tt-home .tt-reveal, .tt-home .tt-reveal.tt-in { opacity: 1; transform: none; filter: none; transition: none; } .tt-home .tt-bot-card, .tt-home .tt-pack, .tt-home .tt-faq-item, .tt-home .tt-btn, .tt-home .tt-quote, .tt-home .tt-cup-col, .tt-home .tt-promise li, .tt-home .tt-mini, .tt-home .tt-gallery a { transition: none; } .tt-home .tt-bot-card:hover, .tt-home .tt-pack:hover, .tt-home .tt-btn-buy:hover, .tt-home .tt-btn-ghost:hover, .tt-home .tt-quote:hover, .tt-home .tt-cup-col:hover, .tt-home .tt-promise li:hover, .tt-home .tt-promise li:hover .tt-ic, .tt-home .tt-mini:hover, .tt-home .tt-gallery a:hover { transform: none; } .tt-home .tt-faq-item[open] .tt-faq-a { animation: none; } .tt-home .tt-footer-col a:hover { padding-left: 0; } .tt-home .tt-footer-col a:hover::before { width: 0; } .tt-home .tt-progress, .tt-home .tt-buybar, .tt-home .tt-hero-photo-wrap, .tt-home .tt-hero-seal { transition: none; } .tt-home .tt-hero-photo-wrap, .tt-home .tt-hero-seal { transform: none !important; } .tt-home .tt-pack::before { transition: none; } }/* ===== polish:spacing.css ===== */ /* ============================================================ TEATAPEE HOMEPAGE — SPACING & VERTICAL RHYTHM POLISH Additive override block. Append immediately before </style>. Scope: every selector under `.tt-home `. Spacing/rhythm only — no colour, font, or layout-structure changes. Relies on source-order (this block is last) + matched/raised specificity to win. `!important` is used ONLY where it must beat inline style="" attributes on grid wrappers (documented). Tokens reused; one private rhythm scale added on .tt-home. ============================================================ *//* ---- A consistent vertical-rhythm scale (private to .tt-home) ---- */ .tt-home { --tt-rhythm: clamp(58px, 7.4vw, 104px); /* section vertical padding */ --tt-gutter: clamp(20px, 4vw, 40px); /* container side gutter */ --tt-head-gap: clamp(36px, 5vw, 60px); /* section-head -> content */ --tt-grid-gap: clamp(20px, 2.2vw, 28px); /* uniform grid gap */ --tt-grid-gap-tight:clamp(14px, 1.6vw, 18px); /* dense mini grids */ --tt-stack-1: 10px; /* eyebrow -> h2 baseline tightener */ --tt-stack-2: 14px; /* h2 -> rule */ --tt-stack-3: 16px; /* rule -> sub */ }/* ============================================================ 1. SECTIONS — uniform vertical padding + balanced gutters ============================================================ */ .tt-home .tt-section { padding-top: var(--tt-rhythm); padding-bottom: var(--tt-rhythm); padding-left: var(--tt-gutter); padding-right: var(--tt-gutter); }/* Container width + gutters: keep the established 1320 cap, even gutter rail */ .tt-home .tt-wrap { max-width: 1320px; } .tt-home .tt-wrap-narrow { max-width: 820px; }/* ============================================================ 2. SECTION HEAD — consistent space to the content below it, and a tighter, even eyebrow / h2 / rule / sub stack. ============================================================ */ .tt-home .tt-section .tt-section-head { margin-bottom: var(--tt-head-gap); }/* tighten the internal stack so the head reads as one unit */ .tt-home .tt-section-head .tt-eyebrow { margin-bottom: var(--tt-stack-1); } .tt-home .tt-section-head .tt-h2 { margin-bottom: 0; } .tt-home .tt-section-head .tt-rule { margin-top: var(--tt-stack-2); } .tt-home .tt-section-head .tt-sub { margin-top: var(--tt-stack-3); }/* When a head has NO rule but DOES have a sub (rare), keep the sub close */ .tt-home .tt-section-head .tt-eyebrow + .tt-h2 { margin-top: 0; }/* The #about head is left-aligned and lacks a rule/sub: it must still own the gap to .tt-origin. Neutralise its inline margin-top so the single head-gap token governs (inline style => needs !important). */ .tt-home #about .tt-section-head { margin-bottom: var(--tt-head-gap); } .tt-home #about .tt-origin[style] { margin-top: 0 !important; }/* ============================================================ 3. GRIDS — one even gap rhythm across every collection grid. Each grid sits a uniform distance below its head; the head's margin-bottom already provides that, so zero stray margin-tops (some are inline) to avoid doubled/uneven gaps. ============================================================ */ .tt-home .tt-proof-grid, .tt-home .tt-cup-grid, .tt-home .tt-ritual, .tt-home .tt-bot-grid, .tt-home .tt-gallery, .tt-home .tt-packs { gap: var(--tt-grid-gap); }/* slightly tighter, denser secondary grids keep their own rhythm */ .tt-home .tt-mini-grid { gap: var(--tt-grid-gap-tight); }/* Remove per-grid margin-top so the section-head gap is the single source of truth (these previously used assorted clamp() values or inline styles, producing inconsistent vertical jumps). */ .tt-home .tt-cup-grid, .tt-home .tt-ritual, .tt-home .tt-gallery { margin-top: 0; }.tt-home .tt-proof-grid { margin-top: 0; }/* #reviews has an extra score header between head and grid: balance it */ .tt-home #reviews .tt-proof-head { margin-top: 0; margin-bottom: var(--tt-head-gap); }/* The proof grid follows the score header, not the section head, so it needs its own top reset (already 0 above) and the head owns the first gap */ .tt-home #reviews .tt-section-head { margin-bottom: clamp(28px, 3.6vw, 40px); }/* ============================================================ 4. THE BLEND (#blend) — featured row, botanical grid, ledger get an even internal rhythm instead of mixed clamps. ============================================================ */ .tt-home .tt-featured { margin-top: 0; margin-bottom: var(--tt-head-gap); } .tt-home .tt-bot-grid { margin-bottom: var(--tt-head-gap); } .tt-home #blend .tt-ledger { margin-top: 0; }/* ============================================================ 5. VALUE LADDER (#buy) — even spacing between the visual, the pack cards, the "more" disclosure and the trust line. ============================================================ */ .tt-home .tt-ladder-vis { margin-top: 0; margin-bottom: var(--tt-head-gap); } .tt-home .tt-packs { margin-top: 0; } .tt-home .tt-packs-more { margin-top: var(--tt-head-gap); } .tt-home .tt-packs-trust { margin-top: clamp(24px, 3.2vw, 34px); margin-bottom: 0; } .tt-home .tt-packs-note { margin-top: 12px; } .tt-home .tt-compliance-note { margin-top: 10px; } .tt-home .tt-mini-grid { margin-top: clamp(18px, 2.4vw, 24px); }/* ============================================================ 6. IN THE CUP / RITUAL / TRANSPARENCY / FAQ / FINAL CTA — land each section's primary content the same distance below its head, and even out internal lists. ============================================================ */ .tt-home #cup .tt-cup-grid, .tt-home #brew .tt-ritual { margin-top: 0; }.tt-home .tt-coa { margin-top: 0; } .tt-home .tt-promise { margin-top: clamp(20px, 2.6vw, 26px); gap: clamp(11px, 1.4vw, 14px); }.tt-home .tt-faq { margin-top: 0; } .tt-home .tt-faq-item { margin-bottom: clamp(10px, 1.2vw, 12px); } .tt-home .tt-faq-item:last-child { margin-bottom: 0; }/* Final CTA: even the star -> h2 -> copy -> buttons -> trust stack */ .tt-home .tt-finalcta .tt-stars { margin-bottom: clamp(14px, 1.8vw, 18px); } .tt-home .tt-finalcta h2 { margin-bottom: clamp(12px, 1.4vw, 14px); } .tt-home .tt-finalcta p { margin-bottom: clamp(22px, 3vw, 28px); } .tt-home .tt-finalcta-taster, .tt-home .tt-finalcta-trust { margin-top: clamp(16px, 2vw, 20px); }/* ============================================================ 7. ORIGIN (#about) — even the prose / aside column rhythm. ============================================================ */ .tt-home .tt-origin { gap: clamp(28px, 4vw, 56px); } .tt-home .tt-dropcap-card { padding: clamp(26px, 3vw, 32px) clamp(24px, 2.6vw, 30px); }/* ============================================================ 8. RESPONSIVE — <=860px: pull the rhythm in proportionally so sections don't feel cavernous on tablets, keep grids even. ============================================================ */ @media (max-width: 860px) { .tt-home { --tt-rhythm: clamp(48px, 8vw, 76px); --tt-head-gap: clamp(30px, 5.4vw, 46px); --tt-grid-gap: clamp(16px, 2.6vw, 22px); --tt-gutter: clamp(18px, 4vw, 30px); } /* stacked packs read better with a touch more separation than cards */ .tt-home .tt-packs { gap: clamp(16px, 3vw, 22px); } /* two-up ritual / gallery stay even */ .tt-home .tt-ritual { gap: clamp(28px, 5vw, 34px) clamp(16px, 3vw, 22px); } .tt-home .tt-gallery { gap: clamp(14px, 2.6vw, 18px); } }/* ============================================================ 9. RESPONSIVE — of home-conv.html. ============================================================ *//* ------------------------------------------------------------ 1. POLISH-LAYER TOKENS (scoped additions only) ------------------------------------------------------------ */ .tt-home { --tt-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tt-ease-soft: cubic-bezier(0.33, 0.85, 0.3, 1); }/* ------------------------------------------------------------ 2. REFINED FOCUS-VISIBLE (premium a11y ring, harmonised) Keeps the existing sappan outline but softens with a brass halo. ------------------------------------------------------------ */ @media (scripting: enabled) { .tt-home a:focus-visible, .tt-home summary:focus-visible, .tt-home button:focus-visible, .tt-home .tt-btn:focus-visible { box-shadow: 0 0 0 4px rgba(190, 146, 48, 0.28); transition: box-shadow 0.2s var(--tt-ease); } }/* ------------------------------------------------------------ 3. DECORATIVE BOTANICAL LINE-ART behind section heads Pure CSS, ::before on .tt-section-head. aria-hidden by nature (decorative pseudo-element). Sits low z so it never blocks text. Each centred head gets a faint sprig watermark; left-aligned heads are skipped (origin/about uses inline style override). ------------------------------------------------------------ */ .tt-home .tt-section-head { position: relative; } .tt-home .tt-section-head::before { content: ""; position: absolute; left: 50%; top: -38px; width: 132px; height: 60px; transform: translateX(-50%); pointer-events: none; opacity: 0.5; background-repeat: no-repeat; background-position: center; background-size: contain; /* two mirrored sprigs framing the eyebrow — drawn in --tt-sappan tone */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='60'%20viewBox='0%200%20132%2060'%3E%3Cg%20fill='none'%20stroke='%231F6B40'%20stroke-width='1.1'%20stroke-linecap='round'%20opacity='0.6'%3E%3Cpath%20d='M66%2042%20C66%2032%2066%2024%2066%2016'/%3E%3Cpath%20d='M66%2032%20C58%2030%2053%2025%2052%2019%20C59%2020%2064%2025%2066%2030'/%3E%3Cpath%20d='M66%2026%20C74%2024%2079%2019%2080%2013%20C73%2014%2068%2019%2066%2024'/%3E%3Cpath%20d='M66%2020%20C60%2018%2056%2013%2055%208%20C61%209%2065%2013%2066%2018'/%3E%3Cpath%20d='M66%2016%20C72%2014%2076%209%2077%204%20C71%205%2067%209%2066%2014'/%3E%3Ccircle%20cx='66'%20cy='13'%20r='1.6'%20fill='%23BE9230'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E"); } /* hide the watermark on left-aligned heads (origin uses inline text-align:left) */ .tt-home .tt-section-head[style*="left"]::before { display: none; }/* ------------------------------------------------------------ 4. ANIMATED RULE FLOURISH The existing .tt-rule keeps its centred glyph; we let the two side strokes "draw in" once the head reveals. Render-safe: strokes already exist at full width; we only override width under scripting + add a grow transition. ------------------------------------------------------------ */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tt-home .tt-reveal .tt-rule::before, .tt-home .tt-reveal .tt-rule::after { width: 0; transition: width 0.7s 0.25s var(--tt-ease-out); } .tt-home .tt-reveal.tt-in .tt-rule::before, .tt-home .tt-reveal.tt-in .tt-rule::after { width: 48px; } /* section heads themselves are not .tt-reveal, so also animate the rule when its parent section comes into view via .tt-in-head */ .tt-home .tt-section-head .tt-rule::before, .tt-home .tt-section-head .tt-rule::after { width: 0; transition: width 0.7s 0.2s var(--tt-ease-out); } .tt-home .tt-section-head.tt-in-head .tt-rule::before, .tt-home .tt-section-head.tt-in-head .tt-rule::after { width: 48px; } } /* the eyebrow lead-rule sweeps in with the head too */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tt-home .tt-section-head .tt-eyebrow::before { transition: width 0.6s 0.1s var(--tt-ease-out), opacity 0.6s 0.1s; } }/* ------------------------------------------------------------ 5. HEAD ENTRANCE — fade/rise the eyebrow + h2 + sub when the section scrolls in (heads are NOT .tt-reveal, so add a sibling class .tt-in-head applied by JS). Fully render-safe: default state is visible; hidden state only inside scripting. ------------------------------------------------------------ */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tt-home .tt-section-head.tt-head-anim .tt-eyebrow, .tt-home .tt-section-head.tt-head-anim .tt-h2, .tt-home .tt-section-head.tt-head-anim .tt-sub { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--tt-ease-out), transform 0.7s var(--tt-ease-out); } .tt-home .tt-section-head.tt-head-anim .tt-h2 { transition-delay: 0.06s; } .tt-home .tt-section-head.tt-head-anim .tt-sub { transition-delay: 0.14s; } .tt-home .tt-section-head.tt-head-anim::before { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.92); transition: opacity 0.8s var(--tt-ease-out), transform 0.8s var(--tt-ease-out); } .tt-home .tt-section-head.tt-head-anim.tt-in-head .tt-eyebrow, .tt-home .tt-section-head.tt-head-anim.tt-in-head .tt-h2, .tt-home .tt-section-head.tt-head-anim.tt-in-head .tt-sub { opacity: 1; transform: none; } .tt-home .tt-section-head.tt-head-anim.tt-in-head::before { opacity: 0.5; transform: translateX(-50%) translateY(0) scale(1); } }/* ------------------------------------------------------------ 6. SOFT GRAIN + GRADIENT TEXTURE on bands Adds a barely-there sheen to .tt-band / .tt-paper-2 so the long sections feel crafted rather than flat. Decorative ::after, pointer-events none, sits behind content (z 0). ------------------------------------------------------------ */ .tt-home .tt-band, .tt-home .tt-paper-2 { position: relative; isolation: isolate; } .tt-home .tt-band > .tt-wrap, .tt-home .tt-paper-2 > .tt-wrap { position: relative; z-index: 1; } .tt-home .tt-band::after, .tt-home .tt-paper-2::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background: radial-gradient(620px 320px at 96% 0%, rgba(190, 146, 48, 0.05), transparent 70%), radial-gradient(560px 300px at 0% 100%, rgba(17, 68, 41, 0.035), transparent 72%); }/* ------------------------------------------------------------ 7. SHIMMER ON THE 5.0 SCORE + HERO/OFFER PRICE A slow brass sheen sweeps ACROSS the big numbers via a masked highlight overlay. The number text itself keeps its solid --tt-* colour at all times (legibility never depends on the effect). The overlay is an aria-hidden ::after with a moving diagonal highlight clipped to the glyphs through background-clip on a separate, fully-transparent layer — so if clip is unsupported the overlay simply renders nothing visible. Disabled entirely under reduced motion. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .tt-home .tt-proof-score .tt-pscore, .tt-home .tt-offer-now { position: relative; display: inline-block; } .tt-home .tt-proof-score .tt-pscore::after, .tt-home .tt-offer-now::after { content: attr(data-tt-shine); position: absolute; inset: 0; pointer-events: none; color: transparent; background-image: linear-gradient( 100deg, transparent 0%, transparent 40%, rgba(190, 146, 48, 0.9) 50%, transparent 60%, transparent 100%); background-repeat: no-repeat; background-size: 240% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tt-shimmer 6.5s 1.4s ease-in-out 2; } @keyframes tt-shimmer { 0% { background-position: 130% 0; } 45% { background-position: -40% 0; } 100% { background-position: -40% 0; } } }/* ------------------------------------------------------------ 8. REFINED HOVER STATES — lift + soft shadow + accent reveal ------------------------------------------------------------ *//* Quote (review) cards: lift the avatar + draw a top accent bar, plus a faint quotation glyph that fades in. */ .tt-home .tt-quote { position: relative; overflow: hidden; } .tt-home .tt-quote::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--tt-ease-out); } .tt-home .tt-quote:hover::before, .tt-home .tt-quote:focus-within::before { transform: scaleX(1); } .tt-home .tt-quote::after { content: "\201D"; /* closing double quote */ position: absolute; right: 16px; bottom: 2px; font: 400 86px/0.6 var(--tt-display); color: var(--tt-sappan); opacity: 0.07; pointer-events: none; transition: opacity 0.4s var(--tt-ease), color 0.4s, transform 0.5s var(--tt-ease-out); transform: translateY(6px); } .tt-home .tt-quote:hover::after, .tt-home .tt-quote:focus-within::after { opacity: 0.16; color: var(--tt-brass-deep); transform: translateY(0); } .tt-home .tt-quote-av { transition: transform 0.35s var(--tt-ease-out), box-shadow 0.35s var(--tt-ease); } .tt-home .tt-quote:hover .tt-quote-av, .tt-home .tt-quote:focus-within .tt-quote-av { transform: scale(1.08) rotate(-2deg); box-shadow: inset 0 0 0 1px rgba(190, 146, 48, 0.8), 0 6px 14px rgba(17, 68, 41, 0.16); }/* Cup-of-tea cards: nudge the swatch and let the number brighten. */ .tt-home .tt-cup-swatch { transition: transform 0.4s var(--tt-ease-out), box-shadow 0.4s var(--tt-ease); } .tt-home .tt-cup-col:hover .tt-cup-swatch { transform: scale(1.12) translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(17, 68, 41, 0.2); }/* Ritual step nodes: ring pulse + lift on hover of the step. */ .tt-home .tt-step-node { transition: transform 0.35s var(--tt-ease-out), border-color 0.35s, color 0.35s, box-shadow 0.35s var(--tt-ease); } .tt-home .tt-step:hover .tt-step-node { transform: translateY(-3px); border-color: var(--tt-sappan); color: var(--tt-oxblood); box-shadow: 0 0 0 6px var(--tt-paper), 0 10px 22px rgba(17, 68, 41, 0.16); }/* CTA buttons: brass underline-glow for ghost button on hover. */ .tt-home .tt-btn-ghost { position: relative; } .tt-home .tt-btn-ghost::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 9px; height: 1px; background: var(--tt-brass); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.35s var(--tt-ease-out), opacity 0.35s var(--tt-ease); } .tt-home .tt-btn-ghost:hover::after { transform: scaleX(1); opacity: 0.8; }/* Footer-mail + per-cup chips: small lift on hover. */ .tt-home .tt-footer-mail { transition: color 0.25s, text-decoration-color 0.25s, transform 0.25s var(--tt-ease-out); } .tt-home .tt-footer-mail:hover { transform: translateY(-1px); }/* Trust-strip items: glyph rotates subtly + tints on hover of the row. */ .tt-home .tt-strip-item svg { transition: transform 0.4s var(--tt-ease-out), stroke 0.3s; } .tt-home .tt-strip-item:hover svg { transform: scale(1.12) rotate(-4deg); stroke: var(--tt-oxblood); }/* ------------------------------------------------------------ 9. GALLERY — caption reveal + even, polished overlay Adds a brass corner accent and a slide-up caption pulled from the image alt-less; we use the existing aria-label via a data hook injected by JS. Render-safe: overlay is decorative only. ------------------------------------------------------------ */ .tt-home .tt-gallery a { position: relative; } .tt-home .tt-gallery a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(16, 43, 30, 0.55) 100%); opacity: 0; transition: opacity 0.4s var(--tt-ease); } .tt-home .tt-gallery a:hover::before, .tt-home .tt-gallery a:focus-visible::before { opacity: 1; } .tt-home .tt-gallery .tt-gcap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3; font: 500 11px/1.4 var(--tt-mono); letter-spacing: 0.04em; color: #FBF8F0; text-shadow: 0 1px 6px rgba(16, 43, 30, 0.6); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--tt-ease-out), transform 0.4s var(--tt-ease-out); } .tt-home .tt-gallery a:hover .tt-gcap, .tt-home .tt-gallery a:focus-visible .tt-gcap { opacity: 1; transform: none; }/* ------------------------------------------------------------ 10. VALUE-LADDER bars: animate fill widths on reveal. Render-safe: inline width is the source of truth and stays the default; we only re-animate from 0 under scripting + motion-ok by overriding to a transition that starts collapsed and is released by the .tt-in class on the parent .tt-ladder-vis. ------------------------------------------------------------ */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tt-home .tt-ladder-vis.tt-reveal .tt-lv-fill { transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--tt-ease-out); } .tt-home .tt-ladder-vis.tt-reveal:not(.tt-in) .tt-lv-fill { transform: scaleX(0); } .tt-home .tt-ladder-vis.tt-reveal.tt-in .tt-lv-fill { transform: scaleX(1); } /* stagger the four bars */ .tt-home .tt-ladder-vis.tt-in .tt-lv-row:nth-child(3) .tt-lv-fill { transition-delay: 0.08s; } .tt-home .tt-ladder-vis.tt-in .tt-lv-row:nth-child(4) .tt-lv-fill { transition-delay: 0.16s; } .tt-home .tt-ladder-vis.tt-in .tt-lv-row:nth-child(5) .tt-lv-fill { transition-delay: 0.24s; } .tt-home .tt-ladder-vis.tt-in .tt-lv-row:nth-child(6) .tt-lv-fill { transition-delay: 0.32s; } }/* ------------------------------------------------------------ 11. PACK CARDS — sheen sweep on hover (over existing lift). ------------------------------------------------------------ */ .tt-home .tt-pack { overflow: hidden; } .tt-home .tt-pack::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%); transform: translateX(-130%); transition: transform 0.85s var(--tt-ease-out); } .tt-home .tt-pack:hover::after { transform: translateX(130%); } .tt-home .tt-pack > * { position: relative; z-index: 1; }/* ------------------------------------------------------------ 12. POLISHED STICKY BUY-BAR ENTRANCE Layer a soft brass top-edge glow + a one-time pulse on the button the first time the bar appears (JS toggles .tt-pulse). ------------------------------------------------------------ */ .tt-home .tt-buybar { border-top-color: rgba(190, 146, 48, 0.4); } .tt-home .tt-buybar::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tt-brass), transparent); opacity: 0.8; } @media (prefers-reduced-motion: no-preference) { .tt-home .tt-buybar.tt-show.tt-pulse .tt-btn-buy { animation: tt-buy-pulse 1.6s var(--tt-ease) 0.2s 2; } @keyframes tt-buy-pulse { 0%, 100% { box-shadow: 0 12px 26px rgba(190, 146, 48, 0.32); } 50% { box-shadow: 0 12px 26px rgba(190, 146, 48, 0.32), 0 0 0 6px rgba(190, 146, 48, 0.22); } } }/* ------------------------------------------------------------ 13. HERO CHIP — slow idle float (subtle), settles statically if motion is reduced. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .tt-home .tt-hero-chip { animation: tt-chip-float 5.5s ease-in-out 1s infinite; } @keyframes tt-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } }/* ------------------------------------------------------------ 14. PROMISE list & ledger rows — accent dot on hover. ------------------------------------------------------------ */ .tt-home .tt-ledger-row { position: relative; } .tt-home .tt-ledger-num { transition: color 0.25s, letter-spacing 0.25s var(--tt-ease); } .tt-home .tt-ledger-row:hover .tt-ledger-num { color: var(--tt-brass-deep); letter-spacing: 0.04em; }/* ------------------------------------------------------------ 15. DROPCAP card — left rule grows on reveal for a crafted feel. ------------------------------------------------------------ */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tt-home .tt-dropcap-card { overflow: hidden; } .tt-home .tt-reveal .tt-dropcap-card::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--tt-brass), transparent); opacity: 0; transition: opacity 0.7s 0.3s var(--tt-ease); } .tt-home .tt-reveal.tt-in .tt-dropcap-card::after { opacity: 0.5; } }/* ------------------------------------------------------------ 16. REDUCED MOTION — hard off-switch for every effect above. Anything that animates/transforms is neutralised so the page is fully static and fully visible. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .tt-home .tt-section-head .tt-eyebrow, .tt-home .tt-section-head .tt-h2, .tt-home .tt-section-head .tt-sub, .tt-home .tt-section-head::before, .tt-home .tt-section-head .tt-rule::before, .tt-home .tt-section-head .tt-rule::after, .tt-home .tt-reveal .tt-rule::before, .tt-home .tt-reveal .tt-rule::after { transform: none !important; transition: none !important; } .tt-home .tt-section-head.tt-head-anim .tt-eyebrow, .tt-home .tt-section-head.tt-head-anim .tt-h2, .tt-home .tt-section-head.tt-head-anim .tt-sub { opacity: 1 !important; } .tt-home .tt-section-head.tt-head-anim::before { opacity: 0.5 !important; } .tt-home .tt-section-head .tt-rule::before, .tt-home .tt-section-head .tt-rule::after, .tt-home .tt-reveal .tt-rule::before, .tt-home .tt-reveal .tt-rule::after { width: 48px !important; }.tt-home .tt-proof-score .tt-pscore::after, .tt-home .tt-offer-now::after { content: none !important; animation: none !important; } .tt-home .tt-hero-chip, .tt-home .tt-buybar.tt-show.tt-pulse .tt-btn-buy { animation: none !important; }.tt-home .tt-quote::before, .tt-home .tt-quote::after, .tt-home .tt-quote-av, .tt-home .tt-cup-swatch, .tt-home .tt-step-node, .tt-home .tt-btn-ghost::after, .tt-home .tt-strip-item svg, .tt-home .tt-pack::after, .tt-home .tt-gallery a::before, .tt-home .tt-gallery .tt-gcap, .tt-home .tt-ledger-num, .tt-home .tt-ladder-vis .tt-lv-fill { transition: none !important; }.tt-home .tt-quote:hover::before, .tt-home .tt-quote:focus-within::before { transform: none; } .tt-home .tt-quote:hover .tt-quote-av, .tt-home .tt-quote:focus-within .tt-quote-av, .tt-home .tt-cup-col:hover .tt-cup-swatch, .tt-home .tt-step:hover .tt-step-node, .tt-home .tt-strip-item:hover svg { transform: none; } .tt-home .tt-pack::after { transform: translateX(-130%); } .tt-home .tt-ladder-vis .tt-lv-fill { transform: none !important; } .tt-home .tt-gallery .tt-gcap { opacity: 0; } /* keep captions hidden, decorative */ }/* ===== polish:pictures.css ===== */ /* ================================================================= PICTURE INTEGRATION — supporting CSS (scoped .tt-home) Append immediately before </style>. Reuses existing --tt-* tokens. Owns: #cup editorial photo layout + #gallery mosaic. ================================================================= *//* ================= #cup — EDITORIAL PHOTO + TASTING NOTES ================= */ .tt-home .tt-cup-editorial { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; margin-top: clamp(36px, 5vw, 52px); }/* the brewed-cup feature image */ .tt-home .tt-cup-figure { position: relative; margin: 0; } .tt-home .tt-cup-photo { position: relative; overflow: hidden; border-radius: 12px; background: var(--tt-paper-3); box-shadow: var(--tt-shadow-up); transition: transform 0.45s var(--tt-ease), box-shadow 0.45s var(--tt-ease); } .tt-home .tt-cup-photo img { width: 100%; aspect-ratio: 19 / 20; object-fit: cover; border-radius: inherit; transition: transform 0.7s var(--tt-ease); } .tt-home .tt-cup-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(190,146,48,0.42); background: linear-gradient(180deg, rgba(17,68,41,0.04), transparent 26%); } .tt-home .tt-cup-figure:hover .tt-cup-photo { transform: translateY(-4px); box-shadow: var(--tt-shadow-up), 0 0 0 4px rgba(190,146,48,0.10); } .tt-home .tt-cup-figure:hover .tt-cup-photo img { transform: scale(1.05); } /* shine sweep, harmonised with hero/gallery */ .tt-home .tt-cup-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.30) 50%, transparent 60%); transform: translateX(-130%); transition: transform 0.85s var(--tt-ease); } .tt-home .tt-cup-figure:hover .tt-cup-shine { transform: translateX(130%); } /* floating brewed/poured tag, matching .tt-featured-tag language */ .tt-home .tt-cup-photo-tag { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; font: 500 10px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--tt-oxblood); padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 18px rgba(17,68,41,0.28); } .tt-home .tt-cup-cap { margin-top: 14px; text-align: center; font: italic 400 14px/1.6 var(--tt-text); color: var(--tt-muted); }/* the three tasting notes, now a vertical editorial list */ .tt-home .tt-cup-notes { min-width: 0; } .tt-home .tt-cup-intro { font-family: var(--tt-display); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--tt-oxblood); margin: 0 0 clamp(20px, 3vw, 28px); } .tt-home .tt-cup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .tt-home .tt-cup-note { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 10px; box-shadow: var(--tt-shadow); transition: transform 0.35s var(--tt-ease), border-color 0.35s, box-shadow 0.35s; } .tt-home .tt-cup-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px; background: linear-gradient(180deg, var(--tt-brass), var(--tt-brass-deep)); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--tt-ease); } .tt-home .tt-cup-note:hover { transform: translateX(5px); border-color: rgba(190,146,48,0.5); box-shadow: var(--tt-shadow-up); } .tt-home .tt-cup-note:hover::before { transform: scaleY(1); } .tt-home .tt-cup-note .tt-cup-swatch { width: 40px; height: 40px; flex: none; margin: 4px 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(17,68,41,0.12); } .tt-home .tt-cup-note-body { min-width: 0; } .tt-home .tt-cup-note-meta { display: inline-flex; align-items: center; gap: 10px; } .tt-home .tt-cup-note .tt-cup-num { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.2em; color: var(--tt-brass-deep); } .tt-home .tt-cup-note .tt-cup-label { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tt-sappan); } .tt-home .tt-cup-note h3 { font-size: clamp(21px, 2.6vw, 25px); margin: 9px 0 7px; color: var(--tt-ink); } .tt-home .tt-cup-note p { font-size: 15.5px; line-height: 1.7; color: var(--tt-body); margin: 0; }/* staggered reveal for the notes column */ .tt-home .tt-cup-notes > .tt-reveal:nth-child(2) { transition-delay: 0.06s; } .tt-home .tt-cup-list > .tt-cup-note.tt-reveal:nth-child(1) { transition-delay: 0.10s; } .tt-home .tt-cup-list > .tt-cup-note.tt-reveal:nth-child(2) { transition-delay: 0.18s; } .tt-home .tt-cup-list > .tt-cup-note.tt-reveal:nth-child(3) { transition-delay: 0.26s; }/* ================= #gallery — REFINED MOSAIC ================= */ .tt-home .tt-gallery-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; margin-top: clamp(34px, 5vw, 48px); } /* lead tile = tall feature (spans 2 cols x 2 rows); wide tile spans 2 cols */ .tt-home .tt-gtile-lead { grid-column: span 2; grid-row: span 2; } .tt-home .tt-gtile-wide { grid-column: 1 / -1; }.tt-home .tt-gtile { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--tt-paper-3); box-shadow: var(--tt-shadow); transition: transform 0.4s var(--tt-ease), box-shadow 0.4s var(--tt-ease); } .tt-home .tt-gtile:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-up); } .tt-home .tt-gtile img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; transition: transform 0.7s var(--tt-ease), filter 0.45s var(--tt-ease); } .tt-home .tt-gtile:hover img { transform: scale(1.07); } .tt-home .tt-gtile::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tt-line); transition: box-shadow 0.4s var(--tt-ease); } .tt-home .tt-gtile:hover::after { box-shadow: inset 0 0 0 1px rgba(190,146,48,0.6); }/* shine sweep on hover */ .tt-home .tt-gtile-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%); transform: translateX(-130%); transition: transform 0.85s var(--tt-ease); } .tt-home .tt-gtile:hover .tt-gtile-shine { transform: translateX(130%); }/* caption overlay — readable gradient, slides up on hover */ .tt-home .tt-gtile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 4px 12px; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(15,49,31,0.86) 0%, rgba(15,49,31,0.42) 52%, transparent 100%); color: #FBF8F0; } .tt-home .tt-gtile-no { font: 500 11px/1 var(--tt-mono); letter-spacing: 0.14em; color: var(--tt-brass-2); padding-bottom: 3px; } .tt-home .tt-gtile-txt { font-family: var(--tt-display); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.15; color: #FBF8F0; } .tt-home .tt-gtile-txt small { display: block; margin-top: 4px; font: 500 10px/1.3 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251,248,240,0.78); } .tt-home .tt-gtile-go { justify-self: end; white-space: nowrap; font: 600 10.5px/1 var(--tt-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-brass-2); opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--tt-ease), transform 0.35s var(--tt-ease); } .tt-home .tt-gtile:hover .tt-gtile-go, .tt-home .tt-gtile:focus-visible .tt-gtile-go { opacity: 1; transform: none; } .tt-home .tt-gtile-lead .tt-gtile-txt { font-size: clamp(19px, 2.2vw, 24px); } .tt-home .tt-gtile-lead .tt-gtile-cap { padding: 56px 22px 20px; }/* staggered reveal */ .tt-home .tt-gallery-mosaic > .tt-reveal:nth-child(2) { transition-delay: 0.08s; } .tt-home .tt-gallery-mosaic > .tt-reveal:nth-child(3) { transition-delay: 0.16s; } .tt-home .tt-gallery-mosaic > .tt-reveal:nth-child(4) { transition-delay: 0.24s; }/* ================= RESPONSIVE ================= */ @media (max-width: 980px) { .tt-home .tt-cup-editorial { grid-template-columns: 1fr; gap: 36px; } .tt-home .tt-cup-figure { max-width: 480px; margin: 0 auto; width: 100%; } .tt-home .tt-cup-intro { text-align: center; } } @media (max-width: 860px) { .tt-home .tt-gallery-mosaic { grid-template-columns: repeat(2, 1fr); } .tt-home .tt-gtile-lead { grid-column: span 2; grid-row: auto; } .tt-home .tt-gtile-wide { grid-column: span 2; } .tt-home .tt-gtile img { min-height: 200px; } } @media (max-width: 560px) { .tt-home .tt-gallery-mosaic { grid-template-columns: 1fr; } .tt-home .tt-gtile-lead, .tt-home .tt-gtile-wide { grid-column: span 1; } .tt-home .tt-cup-note { padding: 18px 18px; gap: 14px; } .tt-home .tt-cup-note .tt-cup-swatch { width: 34px; height: 34px; } /* keep CTA hint visible on touch where there is no hover */ .tt-home .tt-gtile-go { opacity: 1; transform: none; } }/* ================= REDUCED MOTION ================= */ @media (prefers-reduced-motion: reduce) { .tt-home .tt-cup-photo, .tt-home .tt-cup-photo img, .tt-home .tt-cup-note, .tt-home .tt-gtile, .tt-home .tt-gtile img, .tt-home .tt-gtile::after, .tt-home .tt-gtile-go { transition: none; } .tt-home .tt-cup-figure:hover .tt-cup-photo, .tt-home .tt-cup-figure:hover .tt-cup-photo img, .tt-home .tt-cup-note:hover, .tt-home .tt-gtile:hover, .tt-home .tt-gtile:hover img { transform: none; } .tt-home .tt-cup-shine, .tt-home .tt-gtile-shine { display: none; } .tt-home .tt-gtile-go { opacity: 1; transform: none; } }/* ===== polish:reviews.css ===== */ /* ================= REVIEWS — integrated + EVEN social proof ================= *//* Aggregate banner */ .tt-home .tt-rv-agg { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0 auto clamp(30px, 4vw, 44px); padding: 22px 28px; max-width: 640px; background: linear-gradient(180deg, var(--tt-paper-3), rgba(255,255,255,0.55)); border: 1px solid var(--tt-line); border-radius: 12px; box-shadow: var(--tt-shadow); } .tt-home .tt-rv-agg-score { display: inline-flex; align-items: center; gap: 14px; } .tt-home .tt-rv-agg-score .tt-pscore { font-family: var(--tt-display); font-size: clamp(38px, 5vw, 48px); line-height: 1; color: var(--tt-oxblood); } .tt-home .tt-rv-agg-score .tt-stars-lg svg { width: 26px; height: 26px; } .tt-home .tt-rv-agg-txt { font: 500 14px/1.5 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-rv-agg-txt b { color: var(--tt-ink); font-weight: 600; } .tt-home .tt-rv-agg-tags { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; font: 500 10.5px/1 var(--tt-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-sappan); } .tt-home .tt-rv-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tt-brass); opacity: 0.7; }/* Avatar colour variants (tasteful palette tones) */ .tt-home .tt-av-sappan { color: #FBF8F0; background: radial-gradient(circle at 34% 28%, var(--tt-sappan), var(--tt-oxblood-2)); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.35); } .tt-home .tt-av-oxblood { color: #FBF8F0; background: radial-gradient(circle at 34% 28%, var(--tt-oxblood), var(--tt-ink)); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.35); } .tt-home .tt-av-brass { color: #2A1606; background: radial-gradient(circle at 34% 28%, var(--tt-brass-2), var(--tt-brass)); box-shadow: inset 0 0 0 1px rgba(110,74,20,0.3); } .tt-home .tt-av-ink { color: var(--tt-brass-2); background: radial-gradient(circle at 34% 28%, #1C4530, var(--tt-ink)); box-shadow: inset 0 0 0 1px rgba(190,146,48,0.3); }/* Lead / hero testimonial */ .tt-home .tt-rv-lead { position: relative; max-width: 880px; margin: 0 auto clamp(28px, 4vw, 40px); padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px) clamp(26px, 4vw, 38px); text-align: center; background: radial-gradient(620px 320px at 50% -30%, rgba(190,146,48,0.10), transparent 64%), linear-gradient(180deg, #FFFFFF, var(--tt-paper-3)); border: 1px solid var(--tt-line); border-radius: 14px; box-shadow: var(--tt-shadow-up); overflow: hidden; } .tt-home .tt-rv-lead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); } .tt-home .tt-rv-mark { width: clamp(46px, 6vw, 64px); height: auto; margin: 0 auto 14px; display: block; fill: var(--tt-brass); opacity: 0.34; } .tt-home .tt-rv-lead .tt-stars-lg { margin-bottom: 16px; } .tt-home .tt-rv-lead .tt-stars-lg svg { width: 24px; height: 24px; } .tt-home .tt-rv-lead-q p { font-family: var(--tt-display); font-size: clamp(22px, 3.1vw, 32px); line-height: 1.34; letter-spacing: 0.005em; color: var(--tt-ink); max-width: 640px; margin: 0 auto; } .tt-home .tt-rv-lead-by { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(22px, 3vw, 30px); padding-top: 20px; border-top: 1px solid var(--tt-line-soft); } .tt-home .tt-rv-lead-by .tt-quote-av { width: 46px; height: 46px; font-size: 17px; } .tt-home .tt-rv-lead-meta { text-align: left; } .tt-home .tt-rv-lead-meta b { display: block; font: 600 15px/1.3 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-ink); } .tt-home .tt-rv-lead-meta span { font: 500 10.5px/1.3 var(--tt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-sappan); }/* Even grid — equal-height cards, balanced 3-up that collapses without orphans */ .tt-home .tt-rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 22px); align-items: stretch; } .tt-home .tt-rv-card { height: 100%; } .tt-home .tt-rv-card .tt-stars { margin-bottom: 14px; } .tt-home .tt-rv-card blockquote { flex: 1 1 auto; display: flex; } .tt-home .tt-rv-card blockquote p { font-family: var(--tt-display); font-size: 17.5px; line-height: 1.55; color: var(--tt-ink); margin: 0 0 18px; } /* aligned avatar discs on the grid cards */ .tt-home .tt-rv-card .tt-quote-av { width: 40px; height: 40px; font-size: 15px; } .tt-home .tt-rv-card .tt-quote-by div b { letter-spacing: 0.02em; }/* Reveal stagger for the lead + grid (extends the existing pattern) */ .tt-home .tt-rv-grid > .tt-reveal:nth-child(2) { transition-delay: 0.07s; } .tt-home .tt-rv-grid > .tt-reveal:nth-child(3) { transition-delay: 0.14s; } .tt-home .tt-rv-grid > .tt-reveal:nth-child(4) { transition-delay: 0.07s; } .tt-home .tt-rv-grid > .tt-reveal:nth-child(5) { transition-delay: 0.14s; } .tt-home .tt-rv-grid > .tt-reveal:nth-child(6) { transition-delay: 0.21s; }/* One-line raves — CSS-only marquee (no JS; static & fully readable if animation is off) */ .tt-home .tt-rv-marquee { position: relative; margin: clamp(28px, 4vw, 40px) 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); overflow: hidden; } .tt-home .tt-rv-track { display: flex; width: max-content; } .tt-home .tt-rv-run { display: flex; align-items: stretch; gap: 14px; margin: 0; padding: 4px 7px 4px 0; list-style: none; animation: tt-rv-scroll 42s linear infinite; } .tt-home .tt-rv-marquee:hover .tt-rv-run { animation-play-state: paused; } .tt-home .tt-rv-chip { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; padding: 13px 20px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); border-radius: 999px; box-shadow: var(--tt-shadow); font-family: var(--tt-display); font-size: 16px; color: var(--tt-ink); } .tt-home .tt-rv-chip i { font-style: normal; font: 500 10.5px/1 var(--tt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-sappan); padding-left: 11px; margin-left: 3px; border-left: 1px solid var(--tt-line); } .tt-home .tt-rv-chip-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 500 12px/1 var(--tt-display); } @keyframes tt-rv-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }/* Footer line under the reviews */ .tt-home .tt-rv-foot { margin: clamp(28px, 4vw, 38px) auto 0; max-width: 640px; text-align: center; font: 500 13px/1.7 var(--tt-mono); letter-spacing: 0.02em; color: var(--tt-muted); } .tt-home .tt-rv-foot a { color: var(--tt-sappan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(190,146,48,0.5); transition: color 0.25s, text-decoration-color 0.25s; white-space: nowrap; } .tt-home .tt-rv-foot a:hover { color: var(--tt-oxblood); text-decoration-color: var(--tt-brass); }/* Responsive */ @media (max-width: 860px) { .tt-home .tt-rv-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tt-home .tt-rv-grid { grid-template-columns: 1fr; } .tt-home .tt-rv-agg { padding: 20px 18px; } .tt-home .tt-rv-agg-score { gap: 10px; } .tt-home .tt-rv-lead-by { flex-direction: column; gap: 10px; text-align: center; } .tt-home .tt-rv-lead-meta { text-align: center; } .tt-home .tt-rv-foot a { white-space: normal; } }/* Reduced motion — marquee freezes in a fully-readable static position */ @media (prefers-reduced-motion: reduce) { .tt-home .tt-rv-run { animation: none; transform: none; } .tt-home .tt-rv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } }/* cro:Add a 'Secure checkout' reassurance line */ .tt-home .tt-offer-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--tt-line-soft);font:500 11px/1.3 var(--tt-mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--tt-muted)} .tt-home .tt-offer-secure svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--tt-sappan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tt-home .tt-offer-secure b{color:var(--tt-oxblood);font-weight:600}/* cro:Add a tasteful guarantee badge beside th */ .tt-home .tt-guarantee{display:flex;align-items:center;gap:18px;max-width:560px;margin:clamp(26px,3.4vw,36px) auto 0;padding:18px 22px;background:linear-gradient(180deg,var(--tt-paper-3),rgba(255,255,255,0.55));border:1px solid var(--tt-line);border-radius:14px;box-shadow:var(--tt-shadow)} .tt-home .tt-guarantee-seal{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 38% 30%,#FCF6E8 0%,#F0E4C7 60%,#E2D2AC 100%);box-shadow:0 10px 22px rgba(17,68,41,0.16),inset 0 2px 3px rgba(255,255,255,0.85),0 0 0 1px rgba(110,74,20,0.2)} .tt-home .tt-guarantee-seal svg{width:100%;height:100%;overflow:visible} .tt-home .tt-guarantee-seal .tt-gs-ring{fill:none;stroke:rgba(110,74,20,0.5);stroke-width:1.4} .tt-home .tt-guarantee-seal .tt-gs-num{fill:var(--tt-oxblood);font:400 22px/1 var(--tt-display);text-anchor:middle} .tt-home .tt-guarantee-seal .tt-gs-txt{fill:var(--tt-brass-deep);font:600 7px var(--tt-mono);letter-spacing:0.16em;text-anchor:middle} .tt-home .tt-guarantee-body{min-width:0} .tt-home .tt-guarantee-body b{display:block;font-family:var(--tt-display);font-weight:400;font-size:clamp(18px,2.2vw,21px);color:var(--tt-ink);line-height:1.2} .tt-home .tt-guarantee-body p{margin:5px 0 0;font:500 12.5px/1.55 var(--tt-mono);letter-spacing:0.02em;color:var(--tt-muted)} @media (max-width:460px){.tt-home .tt-guarantee{flex-direction:column;text-align:center;gap:12px}.tt-home .tt-guarantee-body p{margin-left:auto;margin-right:auto}}/* cro:CSS for the #buy bulk-pack band (two-col */ .tt-home .tt-buy-hero { display:grid; grid-template-columns:0.96fr 1.04fr; gap:clamp(24px,4vw,52px); align-items:center; margin:0 0 var(--tt-head-gap); } .tt-home .tt-buy-hero-media { position:relative; display:block; overflow:hidden; border-radius:14px; background:var(--tt-paper-3); box-shadow:var(--tt-shadow-up); transition:transform 0.45s var(--tt-ease), box-shadow 0.45s var(--tt-ease); } .tt-home .tt-buy-hero-media img { width:100%; aspect-ratio:9/8; object-fit:cover; border-radius:inherit; transition:transform 0.7s var(--tt-ease); } .tt-home .tt-buy-hero-media::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(190,146,48,0.42); background:linear-gradient(180deg, rgba(17,68,41,0.05), transparent 26%); } .tt-home .tt-buy-hero-media:hover { transform:translateY(-4px); box-shadow:var(--tt-shadow-up), 0 0 0 4px rgba(190,146,48,0.10); } .tt-home .tt-buy-hero-media:hover img { transform:scale(1.05); } .tt-home .tt-buy-hero-shine { position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.30) 50%, transparent 60%); transform:translateX(-130%); transition:transform 0.85s var(--tt-ease); } .tt-home .tt-buy-hero-media:hover .tt-buy-hero-shine { transform:translateX(130%); } .tt-home .tt-buy-hero-copy { min-width:0; } .tt-home .tt-buy-hero-kicker { display:block; font:500 11px/1 var(--tt-mono); letter-spacing:0.2em; text-transform:uppercase; color:var(--tt-brass-deep); margin:0 0 12px; } .tt-home .tt-buy-hero-line { font-family:var(--tt-display); font-size:clamp(24px,3.4vw,38px); line-height:1.2; color:var(--tt-ink); margin:0; } .tt-home .tt-buy-hero-line b { color:var(--tt-oxblood); font-weight:400; } .tt-home .tt-buy-hero-trust { display:inline-flex; align-items:center; gap:9px; margin-top:18px; font:500 12px/1.4 var(--tt-mono); letter-spacing:0.04em; text-transform:uppercase; color:var(--tt-muted); } .tt-home .tt-buy-hero-trust svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--tt-sappan); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:980px){ .tt-home .tt-buy-hero { grid-template-columns:1fr; gap:clamp(22px,5vw,32px); text-align:center; } .tt-home .tt-buy-hero-media { max-width:480px; margin:0 auto; width:100%; } .tt-home .tt-buy-hero-trust { justify-content:center; } } @media (prefers-reduced-motion: reduce){ .tt-home .tt-buy-hero-media, .tt-home .tt-buy-hero-media img { transition:none; } .tt-home .tt-buy-hero-media:hover, .tt-home .tt-buy-hero-media:hover img { transform:none; } .tt-home .tt-buy-hero-shine { display:none; } }/* cro:Reviews: add an even verified-trust ribb */ .tt-home .tt-rv-trustrow { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:12px; max-width:760px; margin:0 auto clamp(28px,4vw,40px); } .tt-home .tt-rv-trustrow .tt-rv-trustcell { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:var(--tt-paper-3); border:1px solid var(--tt-line); border-radius:999px; box-shadow:var(--tt-shadow); transition:transform 0.3s var(--tt-ease), border-color 0.3s, box-shadow 0.3s; } .tt-home .tt-rv-trustrow .tt-rv-trustcell:hover { transform:translateY(-2px); border-color:rgba(190,146,48,0.5); box-shadow:var(--tt-shadow-up); } .tt-home .tt-rv-trustrow svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--tt-sappan); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .tt-home .tt-rv-trustrow b { font:600 18px/1 var(--tt-display); color:var(--tt-oxblood); } .tt-home .tt-rv-trustrow span { font:500 11px/1.3 var(--tt-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--tt-muted); } @media (max-width:560px){ .tt-home .tt-rv-trustrow { gap:10px; } .tt-home .tt-rv-trustrow .tt-rv-trustcell { padding:11px 15px; } } @media (prefers-reduced-motion: reduce){ .tt-home .tt-rv-trustrow .tt-rv-trustcell { transition:none; } .tt-home .tt-rv-trustrow .tt-rv-trustcell:hover { transform:none; } }/* cro:Visual craft: warm depth + dot-grid text */ .tt-home .tt-offer { background:radial-gradient(420px 220px at 88% -10%, rgba(190,146,48,0.10), transparent 62%), linear-gradient(180deg, #FFFFFF, var(--tt-paper-3)); } .tt-home .tt-offer::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; opacity:0.5; background-image:radial-gradient(rgba(17,68,41,0.06) 1px, transparent 1px); background-size:14px 14px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 60%); mask-image:linear-gradient(180deg, transparent, #000 60%); } .tt-home .tt-offer > * { position:relative; z-index:1; } .tt-home .tt-pack.is-popular { box-shadow:var(--tt-shadow-up), 0 0 0 1px rgba(190,146,48,0.4); } .tt-home .tt-pack.is-hero { box-shadow:var(--tt-shadow-up), 0 0 0 1.5px rgba(17,68,41,0.2), 0 30px 60px rgba(17,68,41,0.12); } @media (prefers-reduced-motion: reduce){ .tt-home .tt-offer::before { background-image:none; } }/* cro:CSS for the mid-page CTA band (scoped, r */ .tt-home .tt-midcta{margin:clamp(36px,5vw,52px) 0 0;} .tt-home .tt-midcta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px clamp(20px,4vw,40px);padding:clamp(22px,3vw,30px) clamp(22px,3.5vw,38px);border-radius:14px;border:1px solid var(--tt-line);background:radial-gradient(640px 320px at 88% -30%,rgba(190,146,48,0.12),transparent 64%),linear-gradient(180deg,#FFFFFF,var(--tt-paper-3));box-shadow:var(--tt-shadow-up);} .tt-home .tt-midcta-copy{min-width:0;} .tt-home .tt-midcta-eye{display:block;font:500 11px/1 var(--tt-mono);letter-spacing:0.2em;text-transform:uppercase;color:var(--tt-sappan);margin-bottom:8px;} .tt-home .tt-midcta-line{font-family:var(--tt-display);font-size:clamp(20px,2.6vw,27px);line-height:1.25;color:var(--tt-ink);} .tt-home .tt-midcta-act{display:flex;flex-direction:column;align-items:flex-start;gap:9px;} .tt-home .tt-midcta-act .tt-btn{padding:15px 28px;} .tt-home .tt-midcta-trust{font:500 11px/1.4 var(--tt-mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--tt-muted);} @media (max-width:680px){.tt-home .tt-midcta-inner{flex-direction:column;align-items:stretch;text-align:center;} .tt-home .tt-midcta-act{align-items:stretch;} .tt-home .tt-midcta-act .tt-btn{width:100%;} .tt-home .tt-midcta-trust{text-align:center;}}/* cro:Tiny styling for the per-cup delta empha */ .tt-home .tt-pack-delta{display:block;font-weight:600;color:var(--tt-oxblood-2);margin-bottom:3px;}/* cro:Strengthen the reviews→buy bridge with a */ .tt-home .tt-rv-cta{display:flex;justify-content:center;margin-top:clamp(16px,2.4vw,22px);} .tt-home .tt-rv-cta .tt-btn{padding:15px 30px;} @media(max-width:560px){.tt-home .tt-rv-cta .tt-btn{width:100%;max-width:360px;}}/* ===== main menu / nav redesign + rating chips + lead centering + taster spacing ===== */ .tt-home .tt-masthead { gap: 12px clamp(16px,3vw,32px); } .tt-home .tt-masthead-cta { display: flex; } .tt-home .tt-nav { display: none; } @media (min-width: 880px) { .tt-home .tt-nav { display: flex; align-items: center; gap: clamp(16px,2.2vw,30px); margin: 0 auto; } } .tt-home .tt-nav a { position: relative; text-decoration: none; font: 600 12px/1 var(--tt-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-body); padding: 6px 1px; transition: color 0.25s var(--tt-ease); } .tt-home .tt-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: linear-gradient(90deg, var(--tt-brass), var(--tt-brass-2)); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--tt-ease); } .tt-home .tt-nav a:hover, .tt-home .tt-nav a:focus-visible { color: var(--tt-oxblood); } .tt-home .tt-nav a:hover::after, .tt-home .tt-nav a:focus-visible::after { transform: scaleX(1); } @media (max-width: 879.98px) { .tt-home .tt-masthead-cta .tt-btn { padding: 10px 15px; font-size: 11px; } } @media (max-width: 420px) { .tt-home .tt-masthead-brand { font-size: 19px; gap: 8px; } .tt-home .tt-masthead-cta .tt-btn { padding: 9px 12px; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .tt-home .tt-nav a::after { transition: none; } }.tt-home .tt-issue { gap: 10px 12px; } .tt-home .tt-issue-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--tt-paper-3); border: 1px solid var(--tt-line); box-shadow: var(--tt-shadow); transition: transform 0.3s var(--tt-ease), border-color 0.3s, box-shadow 0.3s; } .tt-home .tt-issue-chip:hover { transform: translateY(-1px); border-color: rgba(190,146,48,0.5); box-shadow: var(--tt-shadow-up); } .tt-home .tt-issue-chip b { color: var(--tt-oxblood); font-weight: 700; } .tt-home .tt-issue-rate .tt-stars svg { width: 14px; height: 14px; } .tt-home .tt-issue-ship .tt-issue-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--tt-sappan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .tt-home .tt-issue-chip { transition: none; } .tt-home .tt-issue-chip:hover { transform: none; } }.tt-home .tt-rv-lead-by { justify-content: center; } .tt-home .tt-rv-lead-meta { text-align: center; }.tt-home .tt-finalcta-taster { margin-top: clamp(28px, 4vw, 40px); }/* cro:De-uppercase the long mono trust SENTENC */ /* ===== readability:r4 — long mono runs read as sentences, not labels ===== */ /* Mono-uppercase is fine for SHORT labels; full sentences set in uppercase + letter-spacing are hard to scan. These trust/disclaimer/footer lines are sentences: drop the uppercasing + heavy tracking, keep the mono face. */ .tt-home .tt-cta-trust, .tt-home .tt-buy-hero-trust, .tt-home .tt-finalcta-trust, .tt-home .tt-midcta-trust, .tt-home .tt-offer-secure { text-transform: none; letter-spacing: 0.01em; } /* these are prose-length mono lines — nudge size + leading for comfort */ .tt-home .tt-cta-trust, .tt-home .tt-finalcta-trust { font-size: 12.5px; line-height: 1.55; } .tt-home .tt-buy-hero-trust { font-size: 12.5px; } .tt-home .tt-packs-note, .tt-home .tt-compliance-note, .tt-home .tt-lv-foot, .tt-home .tt-ledger-foot, .tt-home .tt-rv-foot, .tt-home .tt-offer-taster, .tt-home .tt-finalcta-taster { letter-spacing: 0.005em; line-height: 1.7; }/* cro:Lift small body/description text to a co */ /* ===== readability:r4 — small prose blocks up to a comfortable size ===== */ /* 14px muted prose is below comfortable body size on a cream page. Nudge the genuinely prose-y card/step descriptions; labels stay small. */ .tt-home .tt-bot-card p { font-size: 14.5px; line-height: 1.6; color: var(--tt-body); } .tt-home .tt-pack-desc { font-size: 14.5px; line-height: 1.6; } .tt-home .tt-step p { font-size: 15px; line-height: 1.62; } .tt-home .tt-promise p { font-size: 14px; line-height: 1.55; } .tt-home .tt-strip-item span { font-size: 11px; letter-spacing: 0.04em; }/* cro:Cap prose line-length and add leading on */ /* ===== readability:r4 — measure (line-length) control for prose ===== */ /* Aim ~62-70ch so origin / transparency prose doesn't run edge-to-edge on wide viewports. Centre where the block is otherwise full-width. */ .tt-home .tt-origin-body .tt-prose, .tt-home .tt-coa-copy .tt-prose { max-width: 64ch; } .tt-home .tt-prose p { line-height: 1.8; } .tt-home .tt-faq-a p { max-width: 68ch; } .tt-home .tt-cup-note p { max-width: 56ch; } @media (max-width: 980px) { .tt-home .tt-origin-body .tt-prose, .tt-home .tt-coa-copy .tt-prose { max-width: none; } }/* cro:Raise the eyebrow / mono micro-label leg */ /* ===== readability:r4 — tiny mono labels: a touch more size, less tracking ===== */ /* The 10-11.5px eyebrows and pack flags are decorative-small; bump size a hair and tighten tracking so they stay crisp labels (short = uppercase ok). */ .tt-home .tt-eyebrow { font-size: 12px; letter-spacing: 0.22em; } .tt-home .tt-cup-label, .tt-home .tt-cup-note .tt-cup-label { font-size: 11.5px; letter-spacing: 0.16em; } .tt-home .tt-pack-name { font-size: 11.5px; letter-spacing: 0.14em; } .tt-home .tt-offer-percup, .tt-home .tt-pack-percup { letter-spacing: 0.01em; }/* cro:Strengthen muted text contrast on the da */ /* ===== readability:r4 — muted text on the warmer paper-2 / band bands ===== */ /* --tt-muted (#59695B) is ~4.9:1 on paper-2 and dips on the band gradient's darker stop (#F4EEDC). Use a slightly deeper grey for muted prose inside the warm-cream sections so it clears AA with margin. */ .tt-home .tt-paper-2 .tt-pack-desc, .tt-home .tt-paper-2 .tt-pack-supply, .tt-home .tt-band .tt-cup-cap, .tt-home .tt-band .tt-rv-agg-txt, .tt-home .tt-paper-2 .tt-packs-note, .tt-home .tt-paper-2 .tt-compliance-note { color: #4F5E52; }/* cro:Make the keyboard focus ring clearly vis */ /* ===== readability:r4 — visible focus ring over cards/photos ===== */ .tt-home a:focus-visible, .tt-home summary:focus-visible, .tt-home button:focus-visible, .tt-home .tt-btn:focus-visible { outline-width: 3px; outline-offset: 2px; } .tt-home .tt-mini:focus-visible, .tt-home .tt-gtile:focus-visible, .tt-home .tt-buy-hero-media:focus-visible { outline: 3px solid var(--tt-sappan); outline-offset: 2px; }/* cro:Give the flat trust strip depth + a cent */ /* polish:r4-visual — trust strip depth + brass signature edge */ .tt-home .tt-strip { position: relative; background: linear-gradient(180deg, var(--tt-paper-3) 0%, var(--tt-paper-2) 100%); box-shadow: inset 0 14px 26px -22px rgba(17,68,41,0.22); } .tt-home .tt-strip::before { content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(340px,52%); height:2px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--tt-brass) 22%, var(--tt-brass-2) 50%, var(--tt-brass) 78%, transparent); opacity:0.9; } .tt-home .tt-strip-item b { letter-spacing:0.01em; } .tt-home .tt-strip-item span { color:#4F5E51; } @media (min-width:861px){ .tt-home .tt-strip-item { padding-top:22px; padding-bottom:22px; } }/* cro:Add editorial depth to the sparse #about */ /* polish:r4-visual — #about origin: oversized brass quote glyph + vine divider, balances the thin two-column section */ .tt-home #about .tt-origin { position: relative; } .tt-home #about .tt-dropcap-card { position: relative; overflow: hidden; } .tt-home #about .tt-dropcap-card::before { content:"\201C"; position:absolute; top:-22px; right:6px; z-index:0; font:400 150px/1 var(--tt-display); color:var(--tt-brass); opacity:0.12; pointer-events:none; } .tt-home #about .tt-dropcap-card .tt-pull, .tt-home #about .tt-dropcap-card .tt-pull-by { position: relative; z-index: 1; } .tt-home #about .tt-origin-body { position: relative; padding-top: 4px; } .tt-home #about .tt-origin-body::before { content:""; display:block; width:64px; height:1px; margin:0 0 22px; background:linear-gradient(90deg, var(--tt-brass), transparent); } @media (max-width:980px){ .tt-home #about .tt-origin-body::before { margin-left:auto; margin-right:auto; } .tt-home #about .tt-origin-body { text-align:center; } } @media (max-width:560px){ .tt-home #about .tt-dropcap-card::before { font-size:118px; top:-16px; } }/* cro:Refine the #brew ritual: gradient connec */ /* polish:r4-visual — brew ritual connector + node depth */ .tt-home .tt-ritual::before { background:linear-gradient(90deg, transparent, var(--tt-brass) 12%, var(--tt-brass-2) 50%, var(--tt-brass) 88%, transparent); opacity:0.85; height:2px; top:26px; } .tt-home .tt-step-node { background:radial-gradient(circle at 36% 30%, #FFFFFF, var(--tt-paper-3)); box-shadow:0 0 0 6px var(--tt-paper), 0 6px 16px rgba(17,68,41,0.10); } @media (prefers-reduced-motion: no-preference){ .tt-home .tt-step:hover .tt-step-node { background:linear-gradient(135deg, var(--tt-sappan), var(--tt-oxblood-2)); color:#FBF8F0; border-color:var(--tt-oxblood); } } @media (prefers-reduced-motion: reduce){ .tt-home .tt-step:hover .tt-step-node { background:radial-gradient(circle at 36% 30%, #FFFFFF, var(--tt-paper-3)); color:var(--tt-sappan); } }/* cro:Editorial-ledger polish: brass head tick */ /* polish:r4-visual — 15-herb ledger texture */ .tt-home .tt-ledger-head { position: relative; } .tt-home .tt-ledger-head::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--tt-brass), var(--tt-brass-deep)); } .tt-home .tt-ledger-grid > .tt-ledger-row:nth-child(4n+1), .tt-home .tt-ledger-grid > .tt-ledger-row:nth-child(4n+2) { background: rgba(17,68,41,0.018); } .tt-home .tt-ledger-row:hover { background: rgba(190,146,48,0.06); } .tt-home .tt-ledger-foot { position: relative; } .tt-home .tt-ledger-foot::before { content:"\10022"; display:block; margin:0 auto 6px; font:400 13px/1 var(--tt-display); color:var(--tt-brass); opacity:0.7; }/* cro:Crisp the alternating band seams with a */ /* polish:r4-visual — soft seam between alternating sections for cleaner rhythm */ .tt-home .tt-section + .tt-section { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 2px 0 -1px var(--tt-line-soft); } .tt-home .tt-section.tt-band { border-top: 1px solid var(--tt-line); }/* cro:Lift the hero offer's brass frame with a */ /* polish:r4-visual — hero offer card: warmer brass frame depth */ .tt-home .tt-offer { box-shadow: var(--tt-shadow-up), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 4px rgba(190,146,48,0.10); } .tt-home .tt-offer-flag { box-shadow: 0 8px 18px rgba(190,146,48,0.4), inset 0 1px 0 rgba(255,255,255,0.5); } .tt-home .tt-offer-percup b { color: var(--tt-oxblood-2); } .tt-home .tt-offer-save { box-shadow: 0 4px 12px rgba(162,59,46,0.28); }/* cro:Style inline links inside mono notes so */ .tt-home .tt-packs-note a, .tt-home .tt-lv-foot a { color: var(--tt-sappan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(190,146,48,0.5); transition: color .25s, text-decoration-color .25s; } .tt-home .tt-packs-note a:hover, .tt-home .tt-lv-foot a:hover { color: var(--tt-oxblood); text-decoration-color: var(--tt-brass); }/* cro:Tighten cup-figure caption readability — */ .tt-home .tt-cup-cap { max-width: 46ch; }/* ===== editorial elevation: hero eyebrow + gold-italic accent + botanical marquee ===== */ .tt-home .tt-hero-eyebrow { display: block; font: 600 11px/1 var(--tt-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tt-brass-deep); margin: 0 0 14px; } .tt-home .tt-hero-accent { font-family: var(--tt-text); font-style: italic; font-weight: 500; background: linear-gradient(105deg, var(--tt-oxblood) 0%, var(--tt-sappan) 28%, var(--tt-brass) 52%, var(--tt-sappan) 76%, var(--tt-oxblood) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--tt-oxblood); animation: tt-hero-sheen 7s linear 0.6s 3; } @keyframes tt-hero-sheen { to { background-position: 220% center; } } .tt-home .tt-marquee { overflow: hidden; border-top: 1px solid var(--tt-line); border-bottom: 1px solid var(--tt-line); background: var(--tt-paper-2); padding: 13px 0; } .tt-home .tt-marquee-track { display: inline-flex; align-items: center; white-space: nowrap; width: max-content; animation: tt-marquee-scroll 52s linear infinite; } .tt-home .tt-marquee:hover .tt-marquee-track { animation-play-state: paused; } @keyframes tt-marquee-scroll { to { transform: translateX(-50%); } } .tt-home .tt-marquee-track span { position: relative; font-family: var(--tt-text); font-style: italic; font-size: 17px; color: var(--tt-sappan); padding: 0 32px 0 14px; white-space: nowrap; } .tt-home .tt-marquee-track span::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--tt-brass); transform: translateY(-50%); } .tt-home .tt-marquee-track .tt-marquee-lead { font: 600 11px/1 var(--tt-mono); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-brass-deep); } .tt-home .tt-marquee-track .tt-marquee-lead::after { display: none; } @media (prefers-reduced-motion: reduce) { .tt-home .tt-hero-accent { animation: none; } .tt-home .tt-marquee-track { animation: none; transform: none; } } /* ===== honest-value & polish patch (2026-07-12) ===== */ /* Brand payment marks (shared kit) */ .tt-home .mpb-row{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px} .tt-home .mpb{display:inline-flex;align-items:center;justify-content:center;height:27px;min-width:46px;padding:0 8px;background:#fff;border:1px solid var(--tt-line);border-radius:6px;box-shadow:0 1px 2px rgba(31,43,36,.08);font-style:normal} .tt-home .mpb-visa{font:italic 800 13px/1 Arial,Helvetica,sans-serif;color:#1A2E7A} .tt-home .mpb-mc b{display:inline-block;width:15px;height:15px;border-radius:50%;background:#EB001B} .tt-home .mpb-mc b+b{background:#F79E1B;margin-left:-6px;opacity:.92} .tt-home .mpb-amex{background:#2E77BC;border-color:#2E77BC;font:800 10px/1 Arial,Helvetica,sans-serif;color:#fff;letter-spacing:.08em} .tt-home .mpb-apay{gap:2px;font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#111} .tt-home .mpb-apay svg{width:11px;height:13px;fill:#111} .tt-home .tt-offer-paybadges{display:flex;justify-content:center;margin-top:9px} .tt-home .tt-finalcta-paybadges{display:flex;justify-content:center;margin-top:14px} /* NOTE: the widget masthead below never renders — the tt-chrome mu-plugin hides .tt-masthead sitewide (!important) so Astra's theme header is the single header. */ @media (pointer: fine) { .tt-home .tt-hero-photo-wrap, .tt-home .tt-hero-seal { will-change: transform; } } .tt-home .tt-marquee.tt-anim-off .tt-marquee-track, .tt-home .tt-rv-marquee.tt-anim-off .tt-rv-run { animation-play-state: paused; } .tt-home .tt-btn:focus-visible { outline: 3px solid var(--tt-sappan); outline-offset: 3px; } .tt-home .tt-buybar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .tt-home .tt-offer-percup b { white-space: nowrap; }{ "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.teatapee.com/#organization", "name": "TeaTapee.com", "alternateName": ["Tapee Tea", "Tepee Tea", "Tapee Herbal Tea"], "legalName": "THAITEAS LTD", "url": "https://www.teatapee.com/", "email": "atyourservice@teatapee.com", "logo": { "@type": "ImageObject", "@id": "https://www.teatapee.com/#logo", "url": "https://www.teatapee.com/wp-content/uploads/2026/06/teatapee-logo-scaled.png" }, "address": { "@type": "PostalAddress", "streetAddress": "9 Bourne Road", "addressLocality": "Bexley", "addressRegion": "England", "postalCode": "DA5 1LW", "addressCountry": "GB" }, "identifier": { "@type": "PropertyValue", "propertyID": "UK Companies House", "value": "16870792" }, "contactPoint": { "@type": "ContactPoint", "email": "atyourservice@teatapee.com", "areaServed": "Worldwide", "contactType": "customer service" }, "knowsAbout": ["Thai herbal tea", "Jewel Vine (Derris scandens)", "Caffeine-free herbal infusions", "Traditional Thai botanicals"], "description": "A specialist store for a traditional 15-herb Thai herbal tea led by Jewel Vine. Caffeine-free, packed in Thailand, with the full herb list shown on the product page." }, { "@type": "WebSite", "@id": "https://www.teatapee.com/#website", "url": "https://www.teatapee.com/", "name": "TeaTapee", "alternateName": ["Tapee Tea", "Tepee Tea"], "inLanguage": "en", "publisher": { "@id": "https://www.teatapee.com/#organization" }, "potentialAction": { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https://www.teatapee.com/?s={search_term_string}" }, "query-input": "required name=search_term_string" } }, { "@type": "Product","aggregateRating":{"@type":"AggregateRating","ratingValue":"4.94","reviewCount":"70","bestRating":"5","worstRating":"1"}, "@id": "https://www.teatapee.com/product/tapee-tea/#product", "name": "Tapee Tea — Traditional Thai Herbal Tea", "description": "A traditional 15-herb Thai herbal tea led by Jewel Vine (Derris scandens). Caffeine-free, sourced and packed in Thailand. Brews a deep red-amber; woody and earthy in the cup. Every herb is listed, with its botanical name.", "category": "Herbal Tea", "url": "https://www.teatapee.com/product/tapee-tea/", "image": [ "https://www.teatapee.com/wp-content/uploads/2024/05/1706751193518-2.png", "https://i0.wp.com/www.teatapee.com/wp-content/uploads/2024/05/1706751193518-2.png?fit=1600%2C1600&ssl=1" ], "brand": { "@type": "Brand", "name": "Tapee Tea", "alternateName": ["Tepee Tea", "Tapee Herbal Tea", "Tapee Thai Tea"] }, "sku": "TAPEE-TEA", "offers": { "@type": "AggregateOffer", "priceCurrency": "USD", "lowPrice": "24.50", "highPrice": "366.90", "offerCount": 9, "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/", "seller": { "@id": "https://www.teatapee.com/#organization" }, "offers": [ { "@type": "Offer", "name": "15 Teabags", "sku": "tapee-tea-15", "price": "14.90", "priceCurrency": "USD", "availability": "https://schema.org/OutOfStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=15%20Teabags" }, { "@type": "Offer", "name": "25 Teabags", "sku": "tapee-tea-25", "price": "24.50", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=25%20Teabags" }, { "@type": "Offer", "name": "50 Teabags", "sku": "tapee-tea-50", "price": "46.50", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=50%20Teabags" }, { "@type": "Offer", "name": "75 Teabags", "sku": "tapee-tea-75", "price": "68.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=75%20Teabags" }, { "@type": "Offer", "name": "100 Teabags", "sku": "tapee-tea-100", "price": "89.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=100%20Teabags" }, { "@type": "Offer", "name": "125 Teabags", "sku": "tapee-tea-125", "price": "108.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=125%20Teabags" }, { "@type": "Offer", "name": "150 Teabags", "sku": "tapee-tea-150", "price": "128.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=150%20Teabags" }, { "@type": "Offer", "name": "250 Teabags", "sku": "tapee-tea-250", "price": "187.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=250%20Teabags" }, { "@type": "Offer", "name": "500 Teabags", "sku": "tapee-tea-500", "price": "366.90", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "priceValidUntil": "2026-12-31", "url": "https://www.teatapee.com/product/tapee-tea/?attribute_choose-a-quantity-free-shipping=500%20Teabags" } ] } }, { "@type": "FAQPage", "@id": "https://www.teatapee.com/#faq", "mainEntity": [ { "@type": "Question", "name": "What does the tea taste like?", "acceptedAnswer": { "@type": "Answer", "text": "It brews a deep red-amber and tastes earthy and woody, with a fresh, herbaceous lift and a gentle bitterness. Many add honey or a slice of lemon." } }, { "@type": "Question", "name": "Which pack size should I buy?", "acceptedAnswer": { "@type": "Answer", "text": "If you are new to it, the 25-teabag taster ($24.50) is an easy first cup. Most regular drinkers choose the 100-teabag pack ($89.90, about three months' supply) for the balance of price and convenience. To pay the least per cup, size up to the 250- or 500-teabag packs." } }, { "@type": "Question", "name": "Is it really just herbs?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. It is a blend of fifteen herbs and nothing else. The full list, with botanical names, is shown on this page." } }, { "@type": "Question", "name": "Does the tea contain caffeine?", "acceptedAnswer": { "@type": "Answer", "text": "No. It is brewed from herbs and dried botanicals rather than tea leaves, so it is naturally caffeine-free." } }, { "@type": "Question", "name": "What is in the blend?", "acceptedAnswer": { "@type": "Answer", "text": "Fifteen Thai herbs, led by Jewel Vine (Derris scandens). The complete list is shown on this page. Please review it for any personal dietary considerations or allergies." } }, { "@type": "Question", "name": "How do I brew it?", "acceptedAnswer": { "@type": "Answer", "text": "Use one bag per cup with 250 to 350 ml of water just off the boil, around 90 to 95 degrees Celsius. Steep 5 to 10 minutes, then serve it hot or over ice. Honey or lemon to taste." } }, { "@type": "Question", "name": "Do you ship internationally, and how long does it take?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Orders ship from Thailand with tracking to most countries. Estimated delivery windows and the current list of destinations are on our shipping information and shipment tracking pages." } }, { "@type": "Question", "name": "What if I am not happy with it?", "acceptedAnswer": { "@type": "Answer", "text": "We offer a 30-day money-back guarantee from the date of delivery. See our returns and refunds page for how it works." } }, { "@type": "Question", "name": "How should I store it?", "acceptedAnswer": { "@type": "Answer", "text": "Keep it in an airtight container away from heat, light and moisture. Dried botanicals usually hold their aroma best within several months of opening." } } ] }, { "@type": "HowTo", "@id": "https://www.teatapee.com/#brew", "name": "How to brew Thai herbal tea", "description": "Brew a caffeine-free cup of traditional 15-herb Thai herbal tea in four simple steps.", "totalTime": "PT10M", "supply": [ { "@type": "HowToSupply", "name": "One tea bag of Thai herbal tea" }, { "@type": "HowToSupply", "name": "250 to 350 ml of water per bag" } ], "tool": [ { "@type": "HowToTool", "name": "Kettle" }, { "@type": "HowToTool", "name": "Cup or teapot" } ], "step": [ { "@type": "HowToStep", "position": 1, "name": "Measure", "text": "One tea bag per cup. Use 250 to 350 ml of water for each bag." }, { "@type": "HowToStep", "position": 2, "name": "Heat", "text": "Bring water just off the boil, around 90 to 95 degrees Celsius." }, { "@type": "HowToStep", "position": 3, "name": "Steep", "text": "Let it brew 5 to 10 minutes. Longer means stronger and more bitter." }, { "@type": "HowToStep", "position": 4, "name": "Serve", "text": "Drink it hot, or cool it and pour over ice. Honey or lemon to taste." } ] }, { "@type": "BreadcrumbList", "@id": "https://www.teatapee.com/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.teatapee.com/" }, { "@type": "ListItem", "position": 2, "name": "Thai Herbal Tea", "item": "https://www.teatapee.com/product/tapee-tea/" } ] }, { "@type": "WebPage", "@id": "https://www.teatapee.com/#webpage", "url": "https://www.teatapee.com/", "name": "Thai Herbal Tea, Caffeine-Free 15-Herb Blend | TeaTapee", "description": "A traditional 15-herb Thai herbal tea led by Jewel Vine. Caffeine-free, packed in Thailand. The 100-teabag pack is most popular; shipped free worldwide with tracking and a 30-day money-back guarantee.", "inLanguage": "en", "isPartOf": { "@id": "https://www.teatapee.com/#website" }, "about": { "@id": "https://www.teatapee.com/#organization" }, "breadcrumb": { "@id": "https://www.teatapee.com/#breadcrumb" }, "primaryImageOfPage": { "@type": "ImageObject", "url": "https://www.teatapee.com/wp-content/uploads/2024/05/1706751193518-2.png" } } ] }(function () { var root = document.querySelector('.tt-home'); if (!root) return; var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;/* Reveal on scroll (progressive enhancement only — content is visible without this) */ var els = root.querySelectorAll('.tt-reveal'); if (reduced || !('IntersectionObserver' in window)) { els.forEach(function (el) { el.classList.add('tt-in'); }); } else { var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('tt-in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); els.forEach(function (el) { io.observe(el); }); }/* Scroll progress + sticky buy bar */ var bar = root.querySelector('.tt-progress'); var buybar = root.querySelector('.tt-buybar'); var hero = root.querySelector('.tt-hero'); var dismissed = false, ticking = false; function onScroll() { if (ticking) return; ticking = true; requestAnimationFrame(function () { var st = window.pageYOffset || document.documentElement.scrollTop; var h = document.documentElement.scrollHeight - window.innerHeight; if (bar) bar.style.transform = 'scaleX(' + (h > 0 ? st / h : 0) + ')'; if (buybar && !dismissed) { var trigger = hero ? hero.offsetHeight * 0.85 : 600; buybar.classList.toggle('tt-show', st > trigger); } ticking = false; }); } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); onScroll();var closeBtn = root.querySelector('.tt-buybar-close'); if (closeBtn && buybar) { closeBtn.addEventListener('click', function () { dismissed = true; buybar.classList.remove('tt-show'); }); }/* Pause the infinite marquees while they are offscreen (battery/compositor cost) */ if ('IntersectionObserver' in window) { var marq = root.querySelectorAll('.tt-marquee, .tt-rv-marquee'); if (marq.length) { var mio = new IntersectionObserver(function (entries) { entries.forEach(function (e) { e.target.classList.toggle('tt-anim-off', !e.isIntersecting); }); }, { rootMargin: '250px 0px' }); marq.forEach(function (el) { mio.observe(el); }); } }/* Hero photo + seal pointer parallax (fine pointers only; rect cached, writes rAF-throttled) */ if (!reduced && window.matchMedia('(pointer: fine)').matches && hero) { var photo = root.querySelector('.tt-hero-photo-wrap'); var seal = root.querySelector('.tt-hero-seal'); var heroRect = null, px = 0, py = 0, pTick = false; function refreshRect() { heroRect = hero.getBoundingClientRect(); } window.addEventListener('resize', function () { heroRect = null; }, { passive: true }); window.addEventListener('scroll', function () { heroRect = null; }, { passive: true }); hero.addEventListener('pointerenter', refreshRect); hero.addEventListener('pointermove', function (ev) { if (!heroRect) refreshRect(); px = (ev.clientX - heroRect.left) / heroRect.width - 0.5; py = (ev.clientY - heroRect.top) / heroRect.height - 0.5; if (pTick) return; pTick = true; requestAnimationFrame(function () { if (photo) photo.style.transform = 'translate(' + (px * 9).toFixed(1) + 'px,' + (py * 9).toFixed(1) + 'px)'; if (seal) seal.style.transform = 'translate(' + (px * 16).toFixed(1) + 'px,' + (py * 16).toFixed(1) + 'px)'; pTick = false; }); }); hero.addEventListener('pointerleave', function () { if (photo) photo.style.transform = ''; if (seal) seal.style.transform = ''; }); }/* Smooth in-page scrolling */ root.querySelectorAll('a[href^="#"]').forEach(function (a) { a.addEventListener('click', function (ev) { var id = a.getAttribute('href'); if (id.length < 2) return; var target = root.querySelector(id) || document.querySelector(id); if (!target) return; ev.preventDefault(); target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' }); }); }); })();(function () { "use strict"; var root = document.querySelector('.tt-home'); if (!root) return; var reduced = false; try { reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { reduced = false; } var hasIO = ('IntersectionObserver' in window); var heads = root.querySelectorAll('.tt-section-head'); function settleHead(h) { h.classList.add('tt-in-head'); } if (heads.length) { if (reduced || !hasIO) { heads.forEach(settleHead); } else { heads.forEach(function (h) { h.classList.add('tt-head-anim'); }); var headIO = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { settleHead(e.target); headIO.unobserve(e.target); } }); }, { threshold: 0.2, rootMargin: '0px 0px -8% 0px' }); heads.forEach(function (h) { headIO.observe(h); }); window.setTimeout(function () { heads.forEach(function (h) { if (!h.classList.contains('tt-in-head')) settleHead(h); }); }, 2600); } } var galLinks = root.querySelectorAll('.tt-gallery a'); galLinks.forEach(function (a) { if (a.querySelector('.tt-gcap')) return; var label = a.getAttribute('aria-label'); if (!label) return; var cap = document.createElement('span'); cap.className = 'tt-gcap'; cap.setAttribute('aria-hidden', 'true'); cap.textContent = label; a.appendChild(cap); }); if (!reduced) { var shineEls = root.querySelectorAll('.tt-proof-score .tt-pscore, .tt-offer-now'); shineEls.forEach(function (el) { var t = (el.textContent || '').trim(); if (t) el.setAttribute('data-tt-shine', t); }); } if (!reduced && 'MutationObserver' in window) { var buybar = root.querySelector('.tt-buybar'); if (buybar) { var pulsed = false; var mo = new MutationObserver(function () { if (!pulsed && buybar.classList.contains('tt-show')) { pulsed = true; buybar.classList.add('tt-pulse'); mo.disconnect(); } }); mo.observe(buybar, { attributes: true, attributeFilter: ['class'] }); if (buybar.classList.contains('tt-show')) { pulsed = true; buybar.classList.add('tt-pulse'); mo.disconnect(); } } } })();