/* ------------------------------------------------------------------ THEMED 2026-08-08 - this sheet no longer pins a palette. Every brand colour now reads the ACTIVE colour theme (app/data/themes.php, chosen in Admin > Appearance) through the variables layout/header.php emits: rgb(var(--yf--) / ) channels + opacity var(--yfx--) plain hex Exact token values map 1:1. Decorative tints that sat just off a token (brass glows, vignettes) were folded into their NEAREST token on purpose: left literal they would stay brass/crimson under a black-and-white theme, which is exactly the drift this system exists to prevent. Four stale colours from the retired pre-2026-08-03 ramp (#9C2B27, #7A1F1F, rgba(90,10,17), rgba(156,43,39)) were folded in the same way instead of being carried forward. Still literal on purpose: pure white and pure black (structural, not brand), and mask-image gradient stops (masks, not colour). Comments are left untouched - they document the old palette. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Yo Fu Yan Wo - BETA-ONLY design refresh (2026-07-07). Morandi-muted palette + China-red accent, iOS/iPadOS "native app" feel. Loaded ONLY by beta pages (see app/layout/header.php's $isBeta branch) - production (app/ + bare docroot) never includes this file, so this can freely override site.css tokens without any risk to the live site. Loaded AFTER assets/css/site.css in , so :root custom-property redeclarations here win the cascade for equal specificity. ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } /* Recolor the shared gold-gradient text accent to the muted China-red/brass blend used everywhere else in the beta theme. */ /* ALIGNED 2026-08-08 with site.css's rule. site.css is linked AFTER this sheet, so its .text-gold-grad always won and this override never rendered. Rather than leave two rules disagreeing, both now resolve to the same accent tokens - so the gradient is identical whichever sheet wins, and it follows the active theme either way. */ .text-gold-grad{ background:linear-gradient(92deg,var(--yfx-metal-1) 0%,var(--yfx-metal-2) 30%,var(--yfx-metal-3) 52%,var(--yfx-metal-2) 74%,var(--yfx-metal-1) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hairline-gold{ background:linear-gradient(90deg,transparent,var(--yfx-gold-500) 50%,transparent); } .ring-gold{ box-shadow:0 0 0 1px rgb(var(--yf-gold-500) / .45) inset; } .link-underline{ background-image:linear-gradient(var(--yfx-imperial-700),var(--yfx-imperial-700)); } /* Cart badge + fly-to-cart dot recolored to the China-red accent */ .fly-to-cart-dot{ background:var(--yfx-imperial-700) !important; } /* ---------- iPadOS/iOS "native app" polish layer ---------------------- */ /* Softer, more diffused card shadow + gentle lift on hover for anything already using shadow-card (product cards, panels, forms across every beta page) - zero markup changes needed since the class is shared. */ .shadow-card{ transition: box-shadow .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); } /* Glassy translucent surfaces for the sticky header / modals / drawers */ .backdrop-blur-xl{ backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); } /* Buttons & interactive controls get a touch more native "press" feedback */ a, button { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease, opacity .25s ease; } button:active, a:active { transform: translateY(1px); } /* Rounded-corner bump for a softer, more "card" iPadOS silhouette wherever rounded-2xl / rounded-3xl are already used (no markup change required). */ .rounded-2xl{ border-radius: 1.25rem; } .rounded-3xl{ border-radius: 1.75rem; } /* Smooth reveal + focus rings tuned to the new accent */ :focus-visible{ outline: 2px solid var(--yfx-imperial-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .shadow-card, a, button { transition: none; } } /* ---------- Layout/structure revamp (2026-07-07, phase 2) -------------- Global upgrades to already-shared utility combinations - every beta page that already uses `rounded-2xl bg-white border border-ivory-300` (product cards, step cards, panels, forms…) picks these up automatically, with ZERO markup changes required on pages we don't touch directly. */ /* Every plain white bordered card becomes a soft glass surface with a layered shadow instead of a flat 1px border look. */ .bg-white.border-ivory-300{ border-color: rgb(var(--yf-ivory-300) / .6); background: linear-gradient(180deg, #FFFFFF 0%, var(--yfx-ivory-50) 100%); box-shadow: 0 1px 1px rgba(255,255,255,.7) inset, 0 10px 28px -14px rgb(var(--yf-ink-DEFAULT) / .14); } .bg-white.border-ivory-300:hover{ box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 18px 40px -16px rgb(var(--yf-ink-DEFAULT) / .20); } /* Frosted/glass variant for use on imagery or tinted backgrounds. */ .glass-surface{ background: rgba(255,255,255,.62); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 1px 1px rgba(255,255,255,.6) inset, 0 20px 45px -20px rgb(var(--yf-ink-DEFAULT) / .28); } .glass-dark{ background: rgb(var(--yf-imperial-950) / .42); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border: 1px solid rgba(255,255,255,.10); } /* iOS-style segmented control (used for catalogue filters / plan toggles). */ .ios-segment{ display:inline-flex; gap:2px; padding:3px; border-radius:9999px; background:var(--yfx-ivory-200); box-shadow: 0 1px 2px rgb(var(--yf-ink-DEFAULT) / .08) inset; } .ios-segment button, .ios-segment a[role="button"]{ border-radius:9999px; padding:.5rem 1.05rem; font-size:13.5px; font-weight:600; color:var(--yfx-ink-soft); white-space:nowrap; text-align:center; } .ios-segment button[aria-selected="true"], .ios-segment a[aria-selected="true"]{ background:#FFFFFF; color:var(--yfx-imperial-800); box-shadow: 0 3px 10px -4px rgb(var(--yf-ink-DEFAULT) / .25); } .ios-segment a[aria-selected="false"]:hover{ color:var(--yfx-imperial-800); } .no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; } /* Native-app bottom tab bar (mobile only). Fixed, frosted, safe-area aware. */ .ios-tabbar{ position: fixed; left:0; right:0; bottom:0; z-index:45; display:flex; align-items:stretch; justify-content:space-around; background: rgb(var(--yf-ivory-DEFAULT) / .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgb(var(--yf-ivory-300) / .7); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -8px 24px -12px rgb(var(--yf-ink-DEFAULT) / .18); } .ios-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 4px 7px; font-size:10.5px; font-weight:600; color:var(--yfx-ink-muted); } .ios-tabbar a.is-active{ color:var(--yfx-imperial-800); } .ios-tabbar a .tab-dot{ position:absolute; transform: translate(9px,-9px); min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:var(--yfx-imperial-600); color:var(--yfx-ivory-DEFAULT); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; } @media (min-width: 1024px){ .ios-tabbar{ display:none; } } @media (max-width: 1023px){ body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); } #toTop{ bottom: calc(10rem + 60px); } body > div.fixed.bottom-6{ bottom: calc(1.5rem + 60px); } /* NOTE: the .sticky-cta offset that used to live here was DEAD. The base .sticky-cta rule below declares bottom:0 at equal specificity and comes later in the sheet, so it won at every viewport and the bar sat underneath the 56px fixed tab bar - on cart.php that put "Proceed to checkout" entirely under the tab bar and un-tappable. The offset is now the base value and desktop overrides it. Do not re-add it here. */ /* A page with a persistent CTA bar must lift the floating action cluster clear of it, or the WhatsApp button covers the bar's right-hand action. Driven by a body CLASS (set by the page) rather than :has(), so it also works in browsers without :has support. */ body.has-sticky-cta > div.fixed.bottom-6{ bottom: calc(1.5rem + 60px + 132px); } /* Reserve the bar's OWN height on the scroll container too. body's 60px above only clears the tab bar, so at full scroll the bar sat on top of the last ~133px of the footer. The section's pb-40 protects the content above the footer, not the page bottom. */ body.has-sticky-cta{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + 150px); } } @media (min-width: 1024px){ /* No tab bar on desktop, but the bar is still fixed and still ~77px tall. */ body.has-sticky-cta{ padding-bottom: 100px; } } /* Persistent bottom CTA bar (product/checkout pages) - fixed (not sticky) so the primary action stays reachable no matter how far the shopper scrolls, including past the bar's own section into the footer. `sticky` was tried first but un-sticks once its containing block's bottom edge scrolls past, which happens well before the page's real bottom once a footer follows it - the checkout button would vanish for good. Sits above the tab bar on mobile automatically via the offset in the media query below. */ .sticky-cta{ /* Mobile-first: clear the fixed bottom tab bar (56px + the iOS home indicator). Desktop, which has no tab bar, resets this to 0 below. z-index sits above the floating WhatsApp cluster (z-40) so that where the two overlap the primary purchase action wins the tap, and below the tab bar (z-45), which this bar never covers because of the offset. */ position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0)); z-index: 41; background: rgb(var(--yf-ivory-DEFAULT) / .92); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid rgb(var(--yf-ivory-300) / .7); } @media (min-width: 1024px){ .sticky-cta{ bottom: 0; } } /* Generous section rhythm + soft divider treatment used by restructured pages. */ .section-divider{ height:1px; background:linear-gradient(90deg,transparent,rgb(var(--yf-ink-muted) / .35) 20%,rgb(var(--yf-ink-muted) / .35) 80%,transparent); } /* Reveal-on-scroll (existing .reveal class elsewhere gets a nicer curve). */ .reveal{ transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } /* ================================================================== ELEVATION PASS v2 (2026-07-07) - world-class craft layer. NOT beta-only any more (stale note corrected 2026-08-20): header.php's $isBeta branch matches BOTH '/beta' and '/app', and this file exists as a byte-identical copy under each, so everything here is served on PRODUCTION. Treat every rule below as production CSS and change the two copies together. Goal: richer, more premium Morandi China-red with real depth; softer, more layered surfaces; refined primary actions; calmer, more expensive motion. Purely visual - no content, structure, or behaviour changes. Class backgrounds below are set with !important ONLY because site.css (loaded after this file) defines them from --grad-* custom properties; !important is the clean way to win that cascade without touching the shared header/site.css that also serve production. ================================================================== */ /* ---- Refined brand grounds: deeper, warmer, dimensional China-red ---- */ /* Hero ground - a lit cinnabar→wine field with a warm top sheen and a soft lower vignette so the copy/visual sit in a gently spotlit stage rather than on a flat maroon slab. */ .bg-imperial-radial{ background: radial-gradient(118% 92% at 74% 8%, rgb(var(--yf-gold-400) / .12) 0%, transparent 44%), radial-gradient(100% 100% at 50% 122%, rgb(var(--yf-imperial-950) / .38) 0%, transparent 56%), radial-gradient(122% 132% at 50% -10%, var(--grad-radial-1, var(--yfx-imperial-700)) 0%, var(--grad-radial-2, var(--yfx-imperial-900)) 45%, var(--grad-radial-3, var(--yfx-imperial-950)) 100%) !important; } /* Deep interior sections (brand story, testimonials, subscription card). */ .bg-imperial-deep{ background: radial-gradient(120% 96% at 68% 6%, rgb(var(--yf-gold-400) / .08) 0%, transparent 42%), radial-gradient(122% 105% at 50% -12%, var(--grad-deep-1, var(--yfx-imperial-800)) 0%, var(--grad-deep-2, var(--yfx-imperial-900)) 54%, var(--grad-deep-3, var(--yfx-imperial-950)) 100%) !important; } /* Product / gallery placeholder - a softly lit product stage (warm halo + graded cinnabar) so empty-image cards read as an intentional brand moment. */ .nest-ph{ background: radial-gradient(58% 52% at 50% 40%, rgb(var(--yf-gold-300) / .24) 0%, transparent 66%), radial-gradient(120% 120% at 30% 16%, var(--grad-nest-1, var(--yfx-imperial-800)) 0%, var(--grad-nest-2, var(--yfx-imperial-900)) 58%, var(--grad-nest-3, var(--yfx-imperial-950)) 100%) !important; box-shadow: inset 0 0 0 1px rgb(var(--yf-gold-300) / .08), inset 0 -30px 60px -30px rgba(0,0,0,.45); } /* ---- Surfaces: softer, more layered, more "iPadOS material" ---- */ /* Base soft-card treatment for every shared white bordered card. */ .bg-white.border-ivory-300{ border-color: rgb(var(--yf-ivory-300) / .55) !important; background: linear-gradient(180deg, #FFFFFF 0%, var(--yfx-ivory-50) 100%) !important; box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 2px 4px -2px rgb(var(--yf-ink-DEFAULT) / .06), 0 14px 34px -18px rgb(var(--yf-ink-DEFAULT) / .16) !important; } .bg-white.border-ivory-300:hover{ box-shadow: 0 1px 1px rgba(255,255,255,.9) inset, 0 4px 8px -3px rgb(var(--yf-ink-DEFAULT) / .08), 0 26px 52px -22px rgb(var(--yf-imperial-950) / .24) !important; } /* The generic shadow-card utility (buttons, panels) - gentle, diffuse. */ .shadow-card{ box-shadow: 0 1px 2px rgb(var(--yf-ink-DEFAULT) / .05), 0 12px 30px -14px rgb(var(--yf-ink-DEFAULT) / .14) !important; } /* ---- Primary action: a jewel-like capsule with a subtle sheen ---- */ /* Applies to CTA pills AND the small round add-to-cart / badge dots that share .rounded-full.bg-imperial-600 - a unified, tactile accent. */ .rounded-full.bg-imperial-600{ background-image: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.07) 100%); } a.rounded-full.bg-imperial-600, button.rounded-full.bg-imperial-600{ box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 8px 20px -8px rgb(var(--yf-imperial-700) / .55) !important; } a.rounded-full.bg-imperial-600:hover, button.rounded-full.bg-imperial-600:hover{ filter: brightness(1.04) saturate(1.03); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 12px 26px -8px rgb(var(--yf-imperial-700) / .62) !important; } /* ---- Hero visual: expensive framing + a slow, alive drift ---- */ .bg-imperial-radial figure.rounded-3xl{ box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 40px 80px -30px rgb(var(--yf-imperial-950) / .6); transition: transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .9s cubic-bezier(.2,.7,.2,1); } .bg-imperial-radial figure.rounded-3xl:hover{ transform: translateY(-4px); } /* Frosted "widget" cards over imagery get a crisper edge + deeper float. */ .glass-surface{ box-shadow: 0 1px 1px rgba(255,255,255,.7) inset, 0 1px 0 rgba(255,255,255,.5), 0 24px 60px -24px rgb(var(--yf-imperial-950) / .5) !important; } /* ---- Motion: calmer, more considered reveals ---- */ .reveal{ transform: translateY(22px) scale(.994); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in{ transform: none; } @media (prefers-reduced-motion: reduce){ .reveal{ transform:none; transition:none; } } /* ---- Fine details: eyebrow tracking, dividers, scrollbar, selection ---- */ .font-stamp{ letter-spacing:.22em; } .hairline-gold{ background:linear-gradient(90deg,transparent,rgb(var(--yf-gold-500) / .6) 50%,transparent) !important; } ::selection{ background:rgb(var(--yf-gold-400) / .5); color:var(--yfx-imperial-950); } :focus-visible{ outline:2px solid var(--yfx-imperial-600); outline-offset:2px; border-radius:4px; } * { scrollbar-width: thin; scrollbar-color: var(--yfx-stone-300) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:var(--yfx-stone-300); border-radius:999px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--yfx-stone-400); border:3px solid transparent; background-clip:content-box; } /* ================================================================== HOMEPAGE PREMIUM PASS (2026-07-09) - luxury wellness elevation. Beta-only. Purely additive utilities used by index.php's redesign; no existing selector is changed. Editorial rhythm, a slow credential marquee, refined eyebrows, numbered craft steps, and a jewel hero card. ================================================================== */ /* Eyebrow with a leading brass hairline - used above section titles. */ .eyebrow-rule{ display:inline-flex; align-items:center; gap:.6rem; } .eyebrow-rule::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,rgb(var(--yf-gold-500) / .9)); } .eyebrow-rule.on-dark::before{ background:linear-gradient(90deg,transparent,rgb(var(--yf-gold-400) / .9)); } /* Slow, tasteful credential marquee (respects reduced-motion). */ .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{ display:flex; flex-wrap:nowrap; width:max-content; align-items:center; will-change:transform; animation:marquee-scroll 34s linear infinite; } .marquee__track > *{ flex:0 0 auto; white-space:nowrap; } .marquee:hover .marquee__track{ animation-play-state:paused; } @keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } } /* Numbered index for editorial cards / craft steps. */ .lux-index{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:.01em; } /* Craft-step vertical/horizontal connector rail. */ .craft-rail{ position:relative; } @media (min-width:768px){ .craft-rail::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,rgb(var(--yf-gold-500) / .55) 12%,rgb(var(--yf-gold-500) / .55) 88%,transparent); } } /* Oversized editorial quote glyph for testimonials. */ .lux-quote::before{ content:"\201C"; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:4.5rem; line-height:.6; color:rgb(var(--yf-gold-400) / .55); display:block; height:2rem; } /* Soft product/section stage: a faint warm halo behind featured content. */ .lux-halo{ position:relative; } .lux-halo::after{ content:""; position:absolute; inset:auto 0 0 0; height:60%; z-index:-1; background:radial-gradient(60% 100% at 50% 100%, rgb(var(--yf-gold-500) / .12), transparent 70%); pointer-events:none; } /* Hero assurance card - jewel material that straddles image + ground. */ .assurance-card{ background:linear-gradient(180deg, rgb(var(--yf-imperial-900) / .74), rgb(var(--yf-imperial-950) / .84)); backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px); border:1px solid rgb(var(--yf-gold-400) / .28); box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 30px 70px -28px rgb(var(--yf-imperial-950) / .7); } /* Thin brass rule for in-card dividers. */ .rule-brass{ background:linear-gradient(90deg,transparent,rgb(var(--yf-gold-400) / .45),transparent); } .rule-brass-v{ background:linear-gradient(180deg,transparent,rgb(var(--yf-gold-400) / .35),transparent); } /* Zero-additive wax-seal medallion row (hero assurance card). The brass connector ribbon that used to thread behind the four medallions was removed 2026-08-03 at customer request (it read as a stray mark, not a rule). It lived HERE as well as in the homepage's inline block, so deleting only the inline copy just exposed this one again. */ .zero-seal-row{ position:relative; } .zero-seal{ position:relative; z-index:1; } .zero-seal__medallion{ width:52px; height:52px; border-radius:999px; background:radial-gradient(120% 120% at 50% 20%, rgb(var(--yf-gold-400) / .16), rgb(var(--yf-imperial-950) / .9) 70%); border:1px solid rgb(var(--yf-gold-400) / .4); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -8px rgb(var(--yf-imperial-950) / .6); } @media (min-width:640px){ .zero-seal__medallion{ width:62px; height:62px; } } /* Subtle scroll cue. */ .scroll-cue{ width:22px; height:34px; border:1.5px solid rgb(var(--yf-gold-400) / .55); border-radius:999px; position:relative; } .scroll-cue::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px; background:rgb(var(--yf-gold-400) / .9); transform:translateX(-50%); animation:scroll-cue 1.9s ease-in-out infinite; } @keyframes scroll-cue{ 0%,100%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 70%{ opacity:0; transform:translate(-50%,9px); } } @media (prefers-reduced-motion: reduce){ .scroll-cue::after{ animation:none; } } /* Light-ground hero refinements (2026-07-09 hero pass). */ .scroll-cue.on-light{ border-color:rgb(var(--yf-imperial-800) / .30); } .scroll-cue.on-light::after{ background:rgb(var(--yf-imperial-800) / .55); } /* Warm cream hero band that continues the banner's golden light. */ .hero-band{ background: radial-gradient(120% 85% at 50% -8%, rgb(var(--yf-gold-400) / .20) 0%, transparent 46%), linear-gradient(180deg,var(--yfx-gold-100) 0%, var(--yfx-ivory-100) 26%, var(--yfx-ivory-DEFAULT) 100%); } /* Light credential ticker. */ .marquee-light{ background:linear-gradient(180deg,var(--yfx-ivory-DEFAULT),var(--yfx-ivory-100)); } /* ---- Morandi China-red hero band (2026-07-09 red pass) -------------------- A warm, dimensional cinnabar->wine field. Its TOP colour (#c41e2a) matches the fade the golden banner melts into, so gold flows into a muted terracotta red with no hard seam; layered gold sheen + lower vignette give real depth instead of a flat maroon slab. */ .hero-band-red{ position:relative; background: radial-gradient(140% 46% at 50% 0%, rgb(var(--yf-gold-300) / .30) 0%, transparent 42%), radial-gradient(90% 70% at 50% 28%, rgb(var(--yf-imperial-500) / .22) 0%, transparent 60%), radial-gradient(120% 120% at 50% 122%, rgb(var(--yf-imperial-950) / .5) 0%, transparent 58%), linear-gradient(180deg, var(--yfx-imperial-600) 0%, var(--yfx-imperial-600) 24%, var(--yfx-imperial-800) 64%, var(--yfx-imperial-950) 100%); box-shadow: inset 0 1px 0 rgb(var(--yf-gold-300) / .35); } /* Warm brass CTA capsule - pops on the red ground where a red pill would not. */ .btn-brass{ background:linear-gradient(180deg,var(--yfx-gold-200) 0%,var(--yfx-gold-300) 100%); color:var(--yfx-imperial-800); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -10px rgb(var(--yf-imperial-950) / .55); } .btn-brass:hover{ filter:brightness(1.03) saturate(1.02); } /* Faint decorative brand motif corner (nest arcs) for luxe texture on red. */ .hero-motif{ position:absolute; pointer-events:none; opacity:.10; mix-blend-mode:screen; } /* ============================================================ SMALL-TYPE LEGIBILITY FLOOR (2026-08-09, bug reports #37 / #38 "make the words bigger") ------------------------------------------------------------ The storefront leaned on a lot of 10-13px micro-labels (hero eyebrow, trust row, the value-prop marquee, card meta, badges, form hints). On a real 1080p laptop - which is what the reporter sent screenshots from - those read as unreadably small and made the page feel cramped rather than refined. Rather than hand-edit every page (163 files, and the next new page would drift straight back), the type scale gets a floor here. theme.css is the per-environment sheet loaded on every storefront page, so these win over the Tailwind Play CDN utilities without !important. `html body` raises specificity above the CDN's own injected utility block, whose position in is decided at runtime and cannot be relied on. Line-height is restated with every size: Tailwind ships font-size and line-height together in one utility, so bumping only the size would leave the old, now-too-tight leading - especially punishing for CJK, which needs more leading than Latin at the same size. NOTE: the admin console does NOT load this sheet (it is a separate CSS realm - see admin/_common.php), so dense admin tables are deliberately untouched. It lives in theme.css (one copy per environment) rather than the shared site.css so it can be proven on beta before production sees it. ============================================================ */ html body .text-\[10px\]{ font-size:12px; line-height:1.5; } html body .text-\[11px\]{ font-size:12.5px; line-height:1.5; } html body .text-xs, html body .text-\[12px\]{ font-size:13.5px; line-height:1.55; } html body .text-\[13px\]{ font-size:14.5px; line-height:1.55; } html body .text-sm, html body .text-\[14px\]{ font-size:15.5px; line-height:1.6; } html body .text-\[15px\]{ font-size:16.5px; line-height:1.65; } /* Letter-spaced uppercase micro-labels (the hero eyebrow and the section eyebrows) carry wide tracking, which visually shrinks the glyphs further; give those a touch more size again. */ html body .text-\[10px\].tracking-\[\.2em\], html body .text-\[11px\].tracking-\[\.2em\], html body .text-xs.tracking-\[\.2em\]{ font-size:13px; } /* Responsive variants of the same utilities have to be restated - a `sm:text-sm` is a different class and would otherwise snap the text back DOWN at the breakpoint. */ @media (min-width:640px){ html body .sm\:text-\[11px\]{ font-size:12.5px; line-height:1.5; } html body .sm\:text-xs, html body .sm\:text-\[12px\]{ font-size:13.5px; line-height:1.55; } html body .sm\:text-\[13px\]{ font-size:14.5px; line-height:1.55; } html body .sm\:text-sm, html body .sm\:text-\[14px\]{ font-size:15.5px; line-height:1.6; } html body .sm\:text-\[15px\]{ font-size:16.5px; line-height:1.65; } } @media (min-width:768px){ html body .md\:text-xs{ font-size:13.5px; line-height:1.55; } html body .md\:text-sm{ font-size:15.5px; line-height:1.6; } html body .md\:text-\[15px\]{ font-size:16.5px; line-height:1.65; } }