/* ------------------------------------------------------------------ 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. */ .text-gold-grad{ background:linear-gradient(92deg,#7A1F1F 0%,#B83A2E 30%,#D3C3A8 52%,#B83A2E 74%,#7A1F1F 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hairline-gold{ background:linear-gradient(90deg,transparent,#BFA98A 50%,transparent); } .ring-gold{ box-shadow:0 0 0 1px rgba(191,169,138,.45) inset; } .link-underline{ background-image:linear-gradient(#9C2B27,#9C2B27); } /* Cart badge + fly-to-cart dot recolored to the China-red accent */ .fly-to-cart-dot{ background:#9C2B27 !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 #B83A2E; 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: rgba(220,211,197,.6); background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF8 100%); box-shadow: 0 1px 1px rgba(255,255,255,.7) inset, 0 10px 28px -14px rgba(46,42,38,.14); } .bg-white.border-ivory-300:hover{ box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 18px 40px -16px rgba(46,42,38,.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 rgba(46,42,38,.28); } .glass-dark{ background: rgba(58,14,15,.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:#EAE4DA; box-shadow: 0 1px 2px rgba(46,42,38,.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:#5C574F; white-space:nowrap; text-align:center; } .ios-segment button[aria-selected="true"], .ios-segment a[aria-selected="true"]{ background:#FFFFFF; color:#7A1F1F; box-shadow: 0 3px 10px -4px rgba(46,42,38,.25); } .ios-segment a[aria-selected="false"]:hover{ color:#7A1F1F; } .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: rgba(250,248,245,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(220,211,197,.7); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -8px 24px -12px rgba(46,42,38,.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:#948C7F; } .ios-tabbar a.is-active{ color:#7A1F1F; } .ios-tabbar a .tab-dot{ position:absolute; transform: translate(9px,-9px); min-width:15px; height:15px; padding:0 3px; border-radius:9999px; background:#B83A2E; color:#FAF8F5; 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); } .sticky-cta{ bottom: calc(60px + env(safe-area-inset-bottom, 0)); } } /* 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{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(250,248,245,.92); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid rgba(220,211,197,.7); } /* Generous section rhythm + soft divider treatment used by restructured pages. */ .section-divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(151,140,124,.35) 20%,rgba(151,140,124,.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. Beta-only (this file is loaded solely on /beta via header.php's $isBeta branch), so every override here is 100% isolated from production /app/. 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%, rgba(214,198,170,.12) 0%, transparent 44%), radial-gradient(100% 100% at 50% 122%, rgba(24,7,7,.55) 0%, transparent 56%), radial-gradient(122% 132% at 50% -10%, #9a4034 0%, #6b2723 45%, #401512 100%) !important; } /* Deep interior sections (brand story, testimonials, subscription card). */ .bg-imperial-deep{ background: radial-gradient(120% 96% at 68% 6%, rgba(214,198,170,.08) 0%, transparent 42%), radial-gradient(122% 105% at 50% -12%, #7c2d27 0%, #4c1a17 54%, #2b100e 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%, rgba(228,210,178,.24) 0%, transparent 66%), radial-gradient(120% 120% at 30% 16%, #7d3a32 0%, #4e211d 58%, #2d1310 100%) !important; box-shadow: inset 0 0 0 1px rgba(228,210,178,.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: rgba(220,211,197,.55) !important; background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%) !important; box-shadow: 0 1px 1px rgba(255,255,255,.8) inset, 0 2px 4px -2px rgba(46,42,38,.06), 0 14px 34px -18px rgba(46,42,38,.16) !important; } .bg-white.border-ivory-300:hover{ box-shadow: 0 1px 1px rgba(255,255,255,.9) inset, 0 4px 8px -3px rgba(46,42,38,.08), 0 26px 52px -22px rgba(58,14,15,.24) !important; } /* The generic shadow-card utility (buttons, panels) — gentle, diffuse. */ .shadow-card{ box-shadow: 0 1px 2px rgba(46,42,38,.05), 0 12px 30px -14px rgba(46,42,38,.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 rgba(156,43,39,.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 rgba(156,43,39,.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 rgba(20,6,6,.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 rgba(20,6,6,.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,rgba(191,169,138,.6) 50%,transparent) !important; } ::selection{ background:rgba(211,195,168,.5); color:#3A0E0F; } :focus-visible{ outline:2px solid #B83A2E; outline-offset:2px; border-radius:4px; } * { scrollbar-width: thin; scrollbar-color: #CBBFAE transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:#CBBFAE; border-radius:999px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:#B3AA9B; 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,rgba(191,169,138,.9)); } .eyebrow-rule.on-dark::before{ background:linear-gradient(90deg,transparent,rgba(211,195,168,.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,rgba(191,169,138,.55) 12%,rgba(191,169,138,.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:rgba(211,195,168,.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%, rgba(191,169,138,.12), transparent 70%); pointer-events:none; } /* Hero assurance card — jewel material that straddles image + ground. */ .assurance-card{ background:linear-gradient(180deg, rgba(58,14,15,.72), rgba(43,16,14,.82)); backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px); border:1px solid rgba(211,195,168,.28); box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 30px 70px -28px rgba(20,6,6,.7); } /* Thin brass rule for in-card dividers. */ .rule-brass{ background:linear-gradient(90deg,transparent,rgba(211,195,168,.45),transparent); } .rule-brass-v{ background:linear-gradient(180deg,transparent,rgba(211,195,168,.35),transparent); } /* Zero-additive wax-seal medallion row (hero assurance card). A thin brass ribbon threads behind four sealed medallions instead of a flat text grid. */ .zero-seal-row{ position:relative; } .zero-seal-row::before{ content:""; position:absolute; left:12%; right:12%; top:26px; height:1px; background:linear-gradient(90deg,transparent,rgba(211,195,168,.4) 12%,rgba(211,195,168,.4) 88%,transparent); z-index:0; } @media (min-width:640px){ .zero-seal-row::before{ top:31px; } } .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%, rgba(211,195,168,.16), rgba(43,16,14,.9) 70%); border:1px solid rgba(211,195,168,.4); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -8px rgba(20,6,6,.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 rgba(211,195,168,.55); border-radius:999px; position:relative; } .scroll-cue::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px; background:rgba(211,195,168,.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:rgba(122,31,31,.30); } .scroll-cue.on-light::after{ background:rgba(122,31,31,.55); } /* Warm cream hero band that continues the banner's golden light. */ .hero-band{ background: radial-gradient(120% 85% at 50% -8%, rgba(214,177,102,.20) 0%, transparent 46%), linear-gradient(180deg,#F5EDDF 0%, #F3EFE9 26%, #FAF8F5 100%); } /* Light credential ticker. */ .marquee-light{ background:linear-gradient(180deg,#FAF8F5,#F3EFE9); } /* ---- Morandi China-red hero band (2026-07-09 red pass) -------------------- A warm, dimensional cinnabar->wine field. Its TOP colour (#8a4034) 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%, rgba(233,203,158,.30) 0%, transparent 42%), radial-gradient(90% 70% at 50% 28%, rgba(201,79,61,.22) 0%, transparent 60%), radial-gradient(120% 120% at 50% 122%, rgba(20,6,6,.5) 0%, transparent 58%), linear-gradient(180deg, #9a4a37 0%, #7d3024 24%, #5c1e17 64%, #401512 100%); box-shadow: inset 0 1px 0 rgba(233,203,158,.35); } /* Warm brass CTA capsule - pops on the red ground where a red pill would not. */ .btn-brass{ background:linear-gradient(180deg,#EFE7D8 0%,#DBC9A6 100%); color:#7A1F1F; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -10px rgba(20,6,6,.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; }