/* ============================================================ SHIZU UI Kit — local stylesheet Extends colors_and_type.css with component-level rules needed by the click-through prototype. ============================================================ */ /* Reset — kill browser default body margin (was showing as a strip above the sticky header) */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Global guard: never allow horizontal scroll on any page/viewport. overflow-x: clip (not hidden) prevents a horizontal scrollbar without creating a scroll container that would break position: sticky. */ html, body { max-width: 100%; overflow-x: clip; } img, svg, video, canvas { max-width: 100%; } /* Container & sections */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 430px) { .container { padding: 0 16px; } } @media (max-width: 390px) { .container { padding: 0 14px; } } .section { padding: 80px 0; } @media (max-width: 768px) { .section { padding: 56px 0; } } @media (max-width: 430px) { .section { padding: 40px 0; } } /* ============================================================ THEMING — Day (default) vs Night Adds a semantic surface layer over the brand tokens so the header toggle can re-skin the whole page. The teal / gold brand colors stay constant; only neutrals + surfaces swap. ============================================================ */ :root { --bg: var(--white); --bg-elevated: var(--pure-white); --surface: var(--pure-white); --surface-2: var(--gray-100); --surface-soft: var(--menthol); --fg: var(--charcoal); --fg-muted: var(--gray-600); --fg-dim: var(--gray-400); --border: var(--gray-200); --border-soft: var(--gray-100); --header-bg: var(--pure-white); --footer-bg: var(--ink); } [data-theme="night"] { /* Night surfaces are sampled from the SAME navy-teal water ramp as the global shader (--gwa-base #07111F · --gwa-top #102134), so cards, panels and the page all belong to one body of water instead of a separate bluer navy. Each step is one elevation up that same ramp. */ --bg: #081521; /* == water base family; page merges into the field */ --bg-elevated: #102134; /* == --gwa-top: elevated sections sit at the water's own top tone */ --surface: #172B3D; /* card surface — one step up the water ramp, faint teal lift */ --surface-2: #20384A; /* hover / second elevation */ --surface-soft: rgba(127,217,217,0.06); --fg: #F1F5F4; --fg-muted: #9AB1B0; --fg-dim: #607A78; --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.04); --header-bg: rgba(10,23,38,0.85); --footer-bg: #050D17; /* even deeper than --bg */ } /* Smooth color transitions when the toggle is flipped. */ html, body, .header, .footer, .product-card, .benefit-card, .cart-item, .cart-summary, .preorder-banner, .nika-note, .trust-chip, .filter-btn, .qty-btn, .page-hero, .pd-trust { transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } body { background: var(--bg); color: var(--fg); } /* Header swap rules live in the main /* HEADER */ block below — kept together so the two-tier nav + theming are easy to read in one place. */ .nav-link { color: var(--fg); } /* Day/night toggle pill (lives in nav-actions) */ .theme-toggle { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; cursor: pointer; font-family: inherit; } [data-theme="day"] .theme-toggle { background: var(--gray-100); border-color: var(--gray-200); } .theme-toggle .opt { background: none; border: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--fg-dim); cursor: pointer; font-family: inherit; transition: all 0.2s; } [data-theme="day"] .theme-toggle .opt.day, [data-theme="night"] .theme-toggle .opt.night { background: var(--bg-elevated); color: var(--teal-accent); box-shadow: 0 1px 4px rgba(0,0,0,0.12); } [data-theme="day"] .theme-toggle .opt.day { color: var(--gold); } /* Page hero swap */ [data-theme="night"] .page-hero { background: var(--bg-elevated); } [data-theme="night"] .page-hero h1 { color: var(--teal-accent); } [data-theme="night"] .page-hero p { color: var(--fg-muted); } /* Statement strip swap */ [data-theme="night"] .statement-strip { background: var(--bg-elevated); } [data-theme="night"] .statement-quote { color: var(--fg); } [data-theme="night"] .statement-byline { color: var(--teal-accent); } /* Product / benefit / cart cards swap */ [data-theme="night"] .product-card { background: var(--surface); box-shadow: 0 4px 24px rgba(0,0,0,0.35); border: 1px solid var(--border); } [data-theme="night"] .benefit-card { background: transparent; box-shadow: none; border: 0; border-left: 1px solid var(--border); } [data-theme="night"] .benefit-card:first-child { border-left: 0; } [data-theme="night"] .benefits-grid { border-top-color: var(--border); } [data-theme="night"] .product-card-name { color: var(--fg); } [data-theme="night"] .product-card-category { color: var(--fg-dim); } [data-theme="night"] .product-card-feature { color: var(--fg-muted); } [data-theme="night"] .benefit-card h3 { color: var(--teal-accent); } [data-theme="night"] .benefit-card p { color: var(--fg-muted); } [data-theme="night"] .benefit-icon { background: rgba(127,217,217,0.12); color: var(--teal-accent); } [data-theme="night"] .benefit-stat { border-top-color: var(--border); } [data-theme="night"] .section-title { color: var(--teal-accent); } [data-theme="night"] .filter-bar { border-bottom-color: var(--border); } [data-theme="night"] .filter-btn { background: var(--surface); border-color: var(--border); color: var(--fg-muted); } [data-theme="night"] .filter-btn.active { background: var(--teal-accent); color: var(--bg-elevated); border-color: var(--teal-accent); } /* Cart night theme */ [data-theme="night"] .cart-item { background: var(--surface); border-color: var(--border); } [data-theme="night"] .cart-item-info h4 { color: var(--fg); } [data-theme="night"] .cart-item-info p { color: var(--fg-muted); } [data-theme="night"] .qty-btn { background: var(--surface-2); border-color: var(--border); color: var(--fg); } [data-theme="night"] .cart-summary { background: var(--bg-elevated); } [data-theme="night"] .cart-summary h3 { color: var(--teal-accent); } [data-theme="night"] .summary-row { color: var(--fg-muted); } [data-theme="night"] .summary-row.total { color: var(--teal-accent); border-top-color: var(--border); } [data-theme="night"] .preorder-banner { background: linear-gradient(135deg, rgba(127,217,217,0.08) 0%, rgba(127,217,217,0.04) 100%); border-color: var(--border); } [data-theme="night"] .preorder-body h4 { color: var(--teal-accent); } [data-theme="night"] .preorder-body p { color: var(--fg-muted); } [data-theme="night"] .preorder-pill { background: rgba(127,217,217,0.12); color: var(--teal-accent); } [data-theme="night"] .nika-note { background: var(--surface); border-color: var(--border); border-left-color: var(--gold); } [data-theme="night"] .nika-note-body p { color: var(--fg); } [data-theme="night"] .nika-note-body, [data-theme="night"] .nika-signature { color: var(--fg-muted); } [data-theme="night"] .trust-chip { background: var(--surface); border-color: var(--border); } [data-theme="night"] .trust-chip-title { color: var(--fg); } [data-theme="night"] .trust-chip-sub { color: var(--fg-muted); } [data-theme="night"] .trust-chip i { color: var(--teal-accent); } /* Product detail night */ [data-theme="night"] .pd-title { color: var(--fg); } [data-theme="night"] .pd-tagline { color: var(--fg-muted); } [data-theme="night"] .pd-highlights li { color: var(--fg); } [data-theme="night"] .pd-trust { background: var(--bg-elevated); } [data-theme="night"] .pd-trust > div { color: var(--teal-accent); } [data-theme="night"] .breadcrumb button { color: var(--fg-muted); } [data-theme="night"] .breadcrumb span { color: var(--teal-accent); } /* Footer (already dark — night just deepens it) */ /* Form inputs in BoG don't change (BoG checkout has its own brand chrome) */ /* ============================================================ END THEMING ============================================================ */ /* HEADER */ .header-wrap { position: sticky; top: 0; z-index: 100; } /* Utility bar — top tier */ .util-bar { background: var(--teal); color: var(--pure-white); font-size: 11px; letter-spacing: 0.4px; overflow: hidden; max-height: 80px; transition: max-height 0.4s cubic-bezier(0.35, 0, 0.25, 1), opacity 0.3s ease; opacity: 1; } .util-bar.hide { max-height: 0; opacity: 0; } @media (max-width: 600px) { .util-bar { min-height: auto; } } .util-inner { display: flex; justify-content: space-between; align-items: center; padding: 7px 24px; flex-wrap: nowrap; } @media (max-width: 600px) { .util-inner { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 6px 12px; justify-content: center; } } .util-left { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; white-space: nowrap; } @media (max-width: 600px) { .util-left { gap: 8px; justify-content: center; width: 100%; } } .util-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; } @media (max-width: 600px) { .util-item { font-size: 9px; gap: 3px; } } .util-item i { color: var(--teal-accent); font-size: 10px; } .util-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-accent); text-decoration: none; font-weight: 600; } .util-link i { font-size: 12px; } .util-link:hover { color: var(--pure-white); } .util-pill { background: rgba(127,217,217,0.15); color: var(--teal-accent); padding: 2px 8px; border-radius: 100px; font-size: 9px; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; } /* Main nav — bottom tier */ .header { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; } @media (max-width: 768px) { .nav-container { gap: 12px; padding: 10px 16px; } } @media (max-width: 430px) { .nav-container { gap: 8px; padding: 10px 14px; } } .logo-link { display: flex; align-items: center; gap: 9px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; } .logo-img { width: 30px; height: 30px; color: var(--fg); } @media (max-width: 430px) { .logo-img { width: 26px; height: 26px; } } /* Classic teal wordmark — the brand colour */ .logo-text { font-size: 17px; font-weight: 700; letter-spacing: 3.5px; color: var(--teal); } @media (max-width: 768px) { .logo-text { font-size: 15px; letter-spacing: 2.5px; } } @media (max-width: 430px) { .logo-text { font-size: 13px; letter-spacing: 2px; } } /* (logo gold water-droplet dot removed) */ .nav-menu { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: nowrap; } .nav-link { font-size: 12.5px; font-weight: 500; color: var(--fg); background: none; border: none; cursor: pointer; font-family: inherit; padding: 6px 0; position: relative; transition: color 0.2s; white-space: nowrap; } @media (max-width: 430px) { .nav-link { font-size: 11px; padding: 4px 0; } } .nav-link:hover { color: var(--teal); } .nav-link.active { color: var(--teal); } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; background: var(--gold); border-radius: 2px; } .nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .lang-toggle { background: var(--menthol); color: var(--teal); border: none; padding: 5px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 600; cursor: pointer; letter-spacing: 0.8px; font-family: inherit; transition: all 0.2s; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; } @media (max-width: 768px) { .lang-toggle { padding: 6px 10px; font-size: 10px; min-height: 36px; } } @media (max-width: 430px) { .lang-toggle { padding: 6px 8px; font-size: 9px; } } .lang-toggle i { font-size: 10px; opacity: 0.7; } .lang-toggle:hover { background: var(--teal); color: var(--pure-white); } /* Gold cart CTA replaces the simple icon button */ .cart-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: #3D2914; border: none; padding: 7px 12px; border-radius: 100px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; font-family: inherit; cursor: pointer; transition: all 0.2s; white-space: nowrap; line-height: 1; min-height: 36px; } @media (max-width: 768px) { .cart-cta { padding: 8px 10px; font-size: 11px; min-height: 40px; } } @media (max-width: 430px) { .cart-cta { padding: 7px 9px; font-size: 10px; } } .cart-cta:hover { background: var(--gold-hover); color: var(--pure-white); transform: translateY(-1px); box-shadow: var(--shadow-gold); } .cart-cta:hover .cart-cta-count { background: var(--pure-white); color: var(--gold-hover); } .cart-cta i { font-size: 11px; } .cart-cta-count { background: #3D2914; color: var(--gold); width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; transition: all 0.2s; } /* Night-mode overrides for header */ [data-theme="night"] .header-wrap { /* container */ } [data-theme="night"] .util-bar { background: #050D17; } [data-theme="night"] .util-item, [data-theme="night"] .util-link { color: var(--teal-accent); } [data-theme="night"] .util-link:hover { color: var(--pure-white); } [data-theme="night"] .header { background: rgba(10,23,38,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: none; } [data-theme="night"] .logo-text { color: var(--teal-accent); } /* .logo-img ripple arcs follow --fg (light at night); the droplet stays aqua — no filter needed */ [data-theme="night"] .nav-link { color: #E2E8E7; } [data-theme="night"] .lang-toggle { background: rgba(127,217,217,0.12); color: var(--teal-accent); } [data-theme="night"] .lang-toggle:hover { background: var(--teal-accent); color: var(--navy); } [data-theme="night"] .theme-toggle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); } [data-theme="night"] .theme-toggle .opt { color: rgba(255,255,255,0.45); } [data-theme="night"] .theme-toggle .opt.night { background: var(--navy); color: var(--teal-accent); box-shadow: none; } /* HERO */ .hero { /* A floating premium glass slab — NOT a full-bleed rectangle. It lifts off the page on all four sides so the global water shader flows around it, its corners are fully rounded, and its photographic surface is feathered into that field (mask in water.css) so every edge dissolves rather than cuts. What remains here is the glass itself: a protective base wash + rim light. */ color: var(--pure-white); padding: 92px 0 104px; position: relative; isolation: isolate; margin: clamp(10px, 1.3vw, 18px) clamp(12px, 1.7vw, 26px) 0; border-radius: clamp(30px, 3.2vw, 48px); overflow: hidden; /* Protective base wash BEHIND the photo: a soft deep-teal glow anchored under the headline (keeps white type crisp) that fades to transparent toward the corners — so where the photo feathers out, the water shows, not a hard teal block. */ background: radial-gradient(140% 125% at 24% 60%, rgba(7,38,37,0.94) 0%, rgba(10,54,53,0.64) 40%, rgba(12,66,65,0.20) 66%, transparent 82%); /* Glass physics: floats on the water (layered drop shadow), a lit top rim + hairline aqua frame, and a faint inner aqua reflection rising from the base like a waterline glancing off the underside of the slab. */ box-shadow: 0 46px 92px -46px rgba(5,20,28,0.58), 0 10px 34px -24px rgba(5,20,28,0.50), inset 0 1px 0 rgba(206,242,242,0.22), inset 0 0 0 1px rgba(176,228,228,0.15), inset 0 -72px 104px -72px rgba(127,217,217,0.28); } @media (max-width: 768px) { .hero { padding: 64px 0 64px; border-radius: clamp(26px, 5vw, 36px); } } @media (max-width: 430px) { .hero { padding: 48px 0 48px; margin: 8px 8px 0; } } /* Full-bleed lifestyle photo behind the hero — tells visitors at a glance this is a luxury smart-bathroom brand. */ .hero-photo { position: absolute; inset: 0; z-index: 0; background: url("assets/hero.webp") center / cover no-repeat; } /* Brand duotone wash: deep teal on the left (keeps headline crisp), clearing toward the right so the warm bathroom reads behind the panel. */ .hero-photo-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(102deg, rgba(7,38,37,0.95) 0%, rgba(11,64,63,0.88) 32%, rgba(13,76,75,0.62) 56%, rgba(13,76,75,0.34) 78%, rgba(13,76,75,0.20) 100%), linear-gradient(to top, rgba(6,32,31,0.55) 0%, transparent 34%); } .hero-bg-pattern { position: absolute; inset: 0; z-index: 0; opacity: 0.5; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(127,217,217,0.15) 0%, transparent 50%); } .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 920px) { .hero-content { grid-template-columns: 1fr; text-align: center; gap: 36px; } } @media (max-width: 768px) { .hero-panel-scene { display: grid; } } @media (max-width: 430px) { .hero-content { gap: 20px; } .hero-panel-scene { display: grid; } } .hero-eyebrow { font-size: clamp(10px, 0.55rem + 0.2vw, 12px); letter-spacing: 0.34em; font-weight: 600; color: var(--teal-accent); margin-bottom: 20px; text-transform: uppercase; } /* ───────────────────────────────────────────────────────────────────── HERO TITLE — bilingual display system (EN: Satoshi · KA: Noto Sans Georgian) The two scripts have very different vertical metrics and line counts, so a single rule made the hero jump on language toggle. Fix: • per-script fluid clamp() sizes + line-height + tracking • each language tuned to break to TWO lines (forced via
in copy) • a reserved min-height = the taller script's footprint, so the block occupies a CONSTANT height in both languages → zero layout shift. ───────────────────────────────────────────────────────────────────── */ .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 1.15rem + 3.9vw, 3.8rem); /* ~37 → 60.8px */ line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 24px; color: var(--pure-white); max-width: 18ch; text-wrap: balance; overflow-wrap: break-word; /* Constant footprint across languages — the anti-shift anchor. */ min-height: clamp(4.6rem, 3rem + 6.6vw, 8rem); } .hero-title em { font-style: normal; /* Futuristic accent: a soft cyan glow instead of a flat color block. */ color: var(--teal-accent); text-shadow: 0 0 22px rgba(127, 217, 217, 0.35); } /* Georgian: smaller cap-equivalent + looser leading + near-zero tracking so the taller Mkhedruli glyphs fill the same box and stay on two lines. */ :lang(ka) .hero-title { font-family: var(--font-display-ka); font-weight: 700; font-size: clamp(1.95rem, 1.05rem + 3.2vw, 3.3rem); line-height: 1.14; letter-spacing: -0.004em; max-width: 20ch; } :lang(ka) .hero-eyebrow { letter-spacing: 0.2em; font-weight: 500; } .hero-sub { font-size: clamp(15px, 0.85rem + 0.35vw, 18px); font-weight: 300; line-height: 1.6; opacity: 0.9; max-width: 520px; margin: 0 0 32px; color: var(--pure-white); text-wrap: pretty; } /* Georgian body needs a touch more weight + leading to read at the same size. */ :lang(ka) .hero-sub { font-weight: 400; line-height: 1.72; max-width: 560px; } @media (max-width: 920px) { .hero-title { max-width: 22ch; margin-inline: auto; min-height: clamp(4.4rem, 8vw + 2rem, 7rem); } :lang(ka) .hero-title { max-width: 24ch; } .hero-sub { margin-left: auto; margin-right: auto; } } @media (max-width: 430px) { .hero-title { font-size: clamp(1.8rem, 5.5vw, 2.8rem); min-height: clamp(3.4rem, 6vw + 1rem, 5rem); } .hero-eyebrow { font-size: 9px; margin-bottom: 14px; } .hero-sub { font-size: clamp(13px, 3.5vw, 15px); margin: 0 0 20px; } .hero-cta-row { gap: 8px; } .hero-meta-row { gap: 12px 16px; font-size: 10px; margin-top: 18px; } } .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 920px) { .hero-cta-row { justify-content: center; } } .hero-meta-row { display: flex; gap: 24px; margin-top: 28px; font-size: 12px; color: rgba(255,255,255,0.75); letter-spacing: 1px; text-transform: uppercase; font-weight: 500; } .hero-meta-row > div { display: inline-flex; align-items: center; gap: 7px; } .hero-meta-row i { color: var(--teal-accent); font-size: 14px; } @media (max-width: 920px) { .hero-meta-row { justify-content: center; flex-wrap: wrap; gap: 14px 24px; } } /* Hero showcase card — the floating product preview on the right of the split hero */ /* Hero panel — premium floating display (template-matched: dark glass, glowing recess) */ .hero-panel-scene { display: grid; place-items: center; perspective: 1100px; min-height: 460px; } @media (max-width: 768px) { .hero-panel-scene { min-height: 380px; } } @media (max-width: 430px) { .hero-panel-scene { min-height: 320px; } } .hero-panel { position: relative; width: min(440px, 100%); padding: 30px 30px 28px; border-radius: 18px; transform-style: preserve-3d; will-change: transform; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); background: linear-gradient(158deg, rgba(22,44,66,0.55), rgba(8,18,32,0.66)); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 34px 90px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 64px -14px rgba(52,226,208,0.18); color: var(--pure-white); } @media (max-width: 430px) { .hero-panel { width: min(100%, calc(100% - 20px)); padding: 20px 20px 18px; margin: 0 10px; } } .hero-panel-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(420px circle at var(--px,50%) var(--py,28%), rgba(255,255,255,0.14), rgba(255,255,255,0) 45%); } .hero-panel-content { position: relative; z-index: 2; text-align: center; } .hero-panel-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; letter-spacing: 4px; color: var(--teal-accent); font-weight: 600; } .hero-panel-mark { width: 19px; height: 19px; flex: none; } .hero-panel-screen { position: relative; isolation: isolate; width: 100%; display: flex; flex-direction: column; align-items: center; margin: 14px 0 6px; padding: 30px 20px 32px; border-radius: 16px; } .hero-panel-screen::after { content: ""; position: absolute; left: 50%; top: 44%; width: 240px; height: 124px; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; filter: blur(10px); animation: heroPanelBreathe 6s ease-in-out infinite; background: radial-gradient(ellipse, rgba(52,226,208,0.40), rgba(52,226,208,0) 68%); } @keyframes heroPanelBreathe { 50% { opacity: 0.62; } } .hero-panel-temp { position: relative; z-index: 1; font-size: clamp(46px, 9vw, 60px); font-weight: 300; line-height: 1; color: var(--teal-accent); letter-spacing: 1px; text-shadow: 0 0 22px rgba(52,226,208,0.5); } @media (max-width: 430px) { .hero-panel-temp { font-size: clamp(36px, 7vw, 48px); } } .hero-panel-temp span { font-size: 0.38em; vertical-align: super; color: var(--teal); margin-left: 2px; } .hero-panel-icons { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; margin-top: 18px; } @media (max-width: 430px) { .hero-panel-icons { gap: 14px; margin-top: 12px; } } .hero-panel-icons svg { width: 25px; height: 25px; stroke: var(--teal-accent); stroke-width: 1.6; fill: none; opacity: 0.92; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(52,226,208,0.45)); } @media (max-width: 430px) { .hero-panel-icons svg { width: 20px; height: 20px; } } .hero-panel-tag { margin-top: 22px; font-size: 13px; letter-spacing: 0.3px; color: rgba(255,255,255,0.78); } @media (max-width: 430px) { .hero-panel-tag { margin-top: 14px; font-size: 11px; } } .hero-panel-priceline { margin-top: 6px; font-size: 14px; font-weight: 500; } @media (max-width: 430px) { .hero-panel-priceline { margin-top: 4px; font-size: 12px; } } .hero-panel-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 24px; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; cursor: pointer; background: linear-gradient(180deg, #15243b, #0c1626); color: #e9eff4; border: 1px solid rgba(201,169,110,0.45); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.3s; min-height: 40px; } @media (max-width: 430px) { .hero-panel-cta { margin-top: 14px; padding: 10px 18px; font-size: 12px; min-height: 36px; } } .hero-panel-cta:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.7), 0 0 22px -6px rgba(52,226,208,0.4); } @media (prefers-reduced-motion: reduce) { .hero-panel { transform: none !important; } .hero-panel-screen::after { animation: none; } } /* Product photo sits in the top portion of the card; text lives below it on the card's own translucent surface, so the "Editor's pick" tag stays legible. */ /* Floating droplet decoration in the hero background (subtle, brand-rich) */ /* CONTACT SCREEN ─ online-first, showroom opening soon */ .contact-online-note { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto 44px; padding: 16px 22px; border-radius: 12px; background: var(--menthol); border: 1px solid rgba(13,76,75,0.08); color: var(--teal); font-size: 14px; line-height: 1.6; } .contact-online-note i { font-size: 18px; } .contact-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; } @media (max-width: 768px) { .contact-methods { grid-template-columns: 1fr; } } @media (max-width: 430px) { .contact-methods { gap: 14px; } } .contact-method { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 28px; border-radius: 14px; background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } a.contact-method:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-accent); } .contact-method-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--menthol); color: var(--teal); font-size: 19px; margin-bottom: 16px; } .contact-method-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--gray-400); margin-bottom: 8px; } .contact-method-value { font-size: 19px; font-weight: 600; color: var(--teal); letter-spacing: -0.01em; } .contact-method-sub { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin-top: 8px; max-width: 30ch; } .contact-social { display: flex; gap: 10px; margin: 2px 0 2px; } .contact-social a { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--menthol); color: var(--teal); font-size: 16px; transition: background 0.2s, color 0.2s, transform 0.2s; } .contact-social a:hover { background: var(--teal); color: #fff; transform: translateY(-2px); } [data-theme="night"] .contact-online-note { background: var(--bg-elevated); border-color: var(--border); color: var(--fg); } [data-theme="night"] .contact-method { background: var(--bg-elevated); border-color: var(--border); box-shadow: none; } [data-theme="night"] .contact-method-value { color: var(--teal-accent); } [data-theme="night"] .contact-method-sub { color: var(--fg-muted); } [data-theme="night"] .contact-method-icon, [data-theme="night"] .contact-social a { background: rgba(127,217,217,0.12); color: var(--teal-accent); } [data-theme="night"] .contact-social a:hover { background: var(--teal-accent); color: var(--navy); } @media (max-width: 720px) { .contact-methods { grid-template-columns: 1fr; } } /* CONTACT FORM ─ callback request, matches luxury card styling */ .contact-form-wrap { max-width: 760px; margin: 0 auto 44px; } /* Shader stage: WebGL water field frames the frosted-glass form card */ .cf-stage { position: relative; border-radius: 22px; padding: 14px; overflow: hidden; background-color: #e6f1ef; box-shadow: var(--shadow-md); } [data-theme="night"] .cf-stage { background-color: #082423; box-shadow: none; } .cf-shader-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 0; } .cf-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; } .cf-stage .cf-card { position: relative; z-index: 1; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 18px 50px -24px rgba(11,46,45,0.5); } [data-theme="night"] .cf-stage .cf-card { background: rgba(8,32,31,0.6); border-color: rgba(127,217,217,0.18); } .cf-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 36px 36px 32px; box-shadow: var(--shadow-md); } [data-theme="night"] .cf-card { background: var(--bg-elevated); border-color: var(--border); box-shadow: none; } .cf-head { margin-bottom: 26px; } .cf-title { font-size: 23px; font-weight: 700; color: var(--fg); letter-spacing: -0.3px; margin: 0 0 8px; } [data-theme="night"] .cf-title { color: var(--teal-accent); } .cf-sub { font-size: 14px; line-height: 1.65; color: var(--gray-600); margin: 0; max-width: 56ch; } [data-theme="night"] .cf-sub { color: var(--fg-muted); } .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cf-field-full { grid-column: 1 / -1; } .cf-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--gray-400); } .cf-input { width: 100%; box-sizing: border-box; padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 11px; transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease); } .cf-input::placeholder { color: var(--gray-400); } .cf-input:focus { outline: none; border-color: var(--teal-accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(127,217,217,0.18); } [data-theme="night"] .cf-input { background: var(--bg); border-color: var(--border); } [data-theme="night"] .cf-input:focus { background: var(--bg-elevated); } .cf-textarea { resize: vertical; min-height: 110px; line-height: 1.6; } .cf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; } .cf-submit { min-width: 180px; } .cf-submit:disabled { opacity: 0.65; cursor: progress; } .cf-msg { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 0; } .cf-msg i { font-size: 16px; } .cf-msg-ok { color: var(--teal); } [data-theme="night"] .cf-msg-ok { color: var(--teal-accent); } .cf-msg-err { color: #c0392b; } [data-theme="night"] .cf-msg-err { color: #ff8a7a; } @media (max-width: 560px) { .cf-card { padding: 26px 22px 24px; } .cf-grid { grid-template-columns: 1fr; gap: 16px; } .cf-foot { gap: 14px; } .cf-submit { width: 100%; } } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; border: none; cursor: pointer; font-family: inherit; transition: all 0.2s; text-decoration: none; min-height: 44px; } @media (max-width: 430px) { .btn { padding: 12px 20px; font-size: 13px; min-height: 40px; } } .btn-primary { background: var(--gold); color: var(--charcoal); } .btn-primary:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: var(--shadow-gold); } .btn-ghost { background: transparent; color: var(--pure-white); border: 1.5px solid rgba(255,255,255,0.3); } .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } .btn-outline { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); } .btn-outline:hover { background: var(--teal); color: var(--pure-white); } /* NIGHT readability (Nika): dark-teal (--teal) text/controls that sit on transparent or dark (water) surfaces blend into the background and can't be read — lift them to the light aqua accent. Teal-on-light-chip cases (lang-toggle, product badges) and elements that already have night overrides (section titles, prices, logo wordmark) are intentionally left as-is. */ [data-theme="night"] .btn-outline { color: var(--teal-accent); border-color: color-mix(in oklab, var(--teal-accent) 55%, transparent); } [data-theme="night"] .btn-outline:hover { background: var(--teal-accent); color: var(--navy); border-color: var(--teal-accent); } [data-theme="night"] .nav-link:hover, [data-theme="night"] .nav-link.active { color: var(--teal-accent); } [data-theme="night"] .breadcrumb span, [data-theme="night"] .breadcrumb button:hover { color: var(--teal-accent); } [data-theme="night"] .filter-btn:hover { color: var(--teal-accent); border-color: color-mix(in oklab, var(--teal-accent) 45%, transparent); } /* Section */ .section-label { font-size: 12px; letter-spacing: 4px; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; } .section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.5px; color: var(--teal); margin: 0 0 48px; line-height: 1.2; } @media (max-width: 430px) { .section-title { margin: 0 0 32px; font-size: clamp(22px, 5vw, 32px); } } .section-title.center { text-align: center; } /* STATEMENT STRIP — full-width menthol with a single editorial sentence */ .statement-strip { background: var(--menthol); padding: 64px 0; position: relative; overflow: hidden; } .statement-strip .container { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } @media (max-width: 820px) { .statement-strip .container { grid-template-columns: 1fr; } } .statement-quote { font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; color: var(--teal); letter-spacing: -0.4px; line-height: 1.3; text-wrap: pretty; margin: 0; } .statement-quote em { font-style: normal; font-weight: 600; } .statement-byline { font-size: 11px; letter-spacing: 3px; font-weight: 600; color: var(--teal-light); text-transform: uppercase; white-space: nowrap; } /* BENEFITS — editorial, number-led columns split by hairline rules (no floating cards — quiet-luxury, intentional whitespace) */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; border-top: 1px solid var(--gray-200); } .benefit-card { background: transparent; border: 0; border-left: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 44px 48px 10px 48px; transition: none; position: relative; display: flex; flex-direction: column; } .benefit-card:first-child { border-left: 0; padding-left: 0; } .benefit-card:last-child { padding-right: 0; } .benefit-card:hover { transform: none; box-shadow: none; } /* Hero stat leads each column */ .benefit-stat { display: block; border: 0; padding: 0; margin: 0 0 26px; } .benefit-stat .num { display: block; font-size: 60px; font-weight: 300; color: #009CA6; letter-spacing: -0.03em; line-height: 0.95; } .benefit-stat .label { display: block; max-width: 22ch; margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--gray-500, #6b7775); letter-spacing: 0.2px; text-transform: none; } /* Title row: small line mark + heading (no chip) */ .benefit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .benefit-card h3 { font-size: 18px; font-weight: 600; color: var(--teal); margin: 0; letter-spacing: -0.01em; } .benefit-card p { color: var(--gray-600); font-size: 14px; line-height: 1.65; margin: 0; max-width: 32ch; } [data-theme="night"] .benefit-stat .label { color: var(--fg-muted); } @media (max-width: 820px) { .benefits-grid { grid-template-columns: 1fr; } .benefit-card { border-left: 0; border-top: 1px solid var(--gray-200); padding: 36px 0 4px; } .benefit-card:first-child { border-top: 0; padding-top: 8px; } [data-theme="night"] .benefit-card { border-left: 0; border-top: 1px solid var(--border); } [data-theme="night"] .benefit-card:first-child { border-top: 0; } .benefit-stat .num { font-size: 52px; } } /* ── WHY SHIZU · Cards mode ───────────────────────────────────────── Governed by the header Editorial⇄Cards toggle. In "off"/Cards mode the number-led editorial columns become soft floating cards, so the toggle now A/Bs the whole homepage direction in step with the spec grid. */ [data-editorial="off"] .benefits-grid { gap: 24px; margin-top: 36px; border-top: 0; } [data-editorial="off"] .benefit-card { background: var(--pure-white); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-md); padding: 32px 30px; gap: 14px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } [data-editorial="off"] .benefit-card:first-child { padding-left: 30px; } [data-editorial="off"] .benefit-card:last-child { padding-right: 30px; } [data-editorial="off"] .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-accent); } /* reorder the existing markup into a card: icon+title → copy → stat footer */ [data-editorial="off"] .benefit-head { order: 1; margin-bottom: 2px; } [data-editorial="off"] .benefit-card p { order: 2; max-width: none; } [data-editorial="off"] .benefit-stat { order: 3; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--gray-200); } /* line-mark icon → the brand's signature menthol icon tile */ [data-editorial="off"] .benefit-glyph { width: 52px; height: 52px; border-radius: 13px; background: var(--menthol); color: var(--teal); } [data-editorial="off"] .benefit-glyph svg { width: 26px; height: 26px; } /* demote the oversized numeral to a tidy stat lead */ [data-editorial="off"] .benefit-stat .num { font-size: 30px; font-weight: 600; } [data-editorial="off"] .benefit-stat .label { margin-top: 6px; font-size: 11.5px; } /* night surfaces for card mode */ [data-theme="night"][data-editorial="off"] .benefit-card { background: var(--surface); border-color: var(--border); box-shadow: none; } [data-theme="night"][data-editorial="off"] .benefit-card:hover { border-color: var(--teal-accent); } [data-theme="night"][data-editorial="off"] .benefit-glyph { background: rgba(127,217,217,0.12); color: var(--teal-accent); } [data-theme="night"][data-editorial="off"] .benefit-stat { border-top-color: var(--border); } /* PRODUCT GRID + CARD */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1600px; } @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; gap: 18px; } } .product-card { background: var(--pure-white); border-radius: 16px; overflow: visible; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: box-shadow 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s; display: flex; flex-direction: column; cursor: pointer; font-family: inherit; text-align: left; padding: 0; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; } /* Inner wrapper clips the image to the card radius while the card itself keeps overflow visible so lifted 3D layers aren't cut off. */ .product-card-3d { display: flex; flex-direction: column; flex: 1; transform-style: preserve-3d; border-radius: inherit; overflow: hidden; } .product-card:hover { box-shadow: 0 12px 36px rgba(13,76,75,0.12); border-color: rgba(13,76,75,0.18); } /* Lifted, reactive shadow + layered parallax while the card is tilting */ .product-card.is-tilting { box-shadow: 0 34px 60px -26px rgba(13,76,75,0.42), 0 10px 26px -18px rgba(13,76,75,0.28); border-color: rgba(13,76,75,0.22); } .product-card-img, .product-card-body { transition: transform 0.45s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; } .product-card.is-tilting .product-card-img { transform: translateZ(46px) scale(1.04); } .product-card.is-tilting .product-card-body { transform: translateZ(24px); } .product-card-pill, .product-card-price-block { transition: transform 0.45s cubic-bezier(.2,.8,.2,1); } .product-card.is-tilting .product-card-pill { transform: translateZ(16px); } .product-card.is-tilting .product-card-price-block { transform: translateZ(12px); } /* Specular glare that tracks the cursor across the glass */ .product-card-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 26%, transparent 60%); mix-blend-mode: soft-light; } .product-card.is-tilting .product-card-glare { opacity: 1; } [data-theme="night"] .product-card-glare { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(127,217,217,0.30) 0%, rgba(127,217,217,0.08) 28%, transparent 62%); mix-blend-mode: screen; } [data-theme="night"] .product-card.is-tilting { box-shadow: 0 36px 64px -24px rgba(0,0,0,0.7), 0 0 40px -14px rgba(127,217,217,0.32); } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .product-card { transform: none; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .product-card:hover { transform: translateY(-4px); } .product-card-glare { display: none; } } /* Calm motion: flat, fast cards — no cursor tilt, glare, or lifted 3D layers. A simple hover-lift remains as the click affordance. */ [data-motion="calm"] .product-card { transform: none !important; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } [data-motion="calm"] .product-card:hover { transform: translateY(-4px) !important; } [data-motion="calm"] .product-card-glare { display: none !important; } [data-motion="calm"] .product-card-img, [data-motion="calm"] .product-card-body, [data-motion="calm"] .product-card-pill, [data-motion="calm"] .product-card-price-block { transform: none !important; transition: none; } .product-card-img { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; } .product-card-img::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 50%); } .product-card-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.95); color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; padding: 5px 10px; border-radius: 4px; z-index: 2; } .product-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } @media (max-width: 430px) { .product-card-body { padding: 16px; } } .product-card-category { font-size: 10px; letter-spacing: 2px; color: var(--gray-400); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; } .product-card-name { font-size: 19px; font-weight: 700; color: var(--charcoal); margin: 0 0 6px; line-height: 1.3; letter-spacing: -0.3px; } @media (max-width: 430px) { .product-card-name { font-size: 16px; } } .product-card-feature { font-size: 13px; color: var(--gray-600); margin-bottom: 14px; flex: 1; line-height: 1.5; } @media (max-width: 430px) { .product-card-feature { font-size: 12px; margin-bottom: 10px; } } .product-card-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--teal); background: var(--menthol); padding: 4px 10px; border-radius: 100px; margin-bottom: 16px; align-self: flex-start; } [data-theme="night"] .product-card-pill { background: rgba(127,217,217,0.12); color: var(--teal-accent); } .product-card-pill i { font-size: 9px; } .product-card-price-block { padding-top: 14px; border-top: 1px solid var(--gray-200); margin-bottom: 16px; } [data-theme="night"] .product-card-price-block { border-top-color: var(--border); } .product-card-from { font-size: 10px; letter-spacing: 1.8px; color: var(--gray-400); font-weight: 500; text-transform: uppercase; margin-bottom: 2px; } .product-card-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .product-card-price { font-size: 22px; font-weight: 700; color: var(--teal); letter-spacing: -0.4px; } @media (max-width: 430px) { .product-card-price { font-size: 18px; } } [data-theme="night"] .product-card-price { color: var(--teal-accent); } .product-card-price-old { font-size: 13px; color: var(--gray-400); text-decoration: line-through; font-weight: 500; } .product-card-installment { font-size: 11px; color: var(--gray-600); margin-top: 4px; } .product-card-actions { display: flex; gap: 8px; margin-top: auto; } .product-card-btn { flex: 1; padding: 11px !important; font-size: 12.5px !important; min-height: 40px; } @media (max-width: 430px) { .product-card-btn { padding: 10px !important; font-size: 11px !important; min-height: 36px; } } /* Hover arrow on the gradient image — a small affordance */ .product-card-hover-arrow { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 11px; z-index: 3; opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(-4px); } .product-card:hover .product-card-hover-arrow { opacity: 1; transform: translateY(0); } /* RITUAL SECTION — dark editorial strip with morning timeline */ .ritual-section { /* Frosted-glass band, NOT a hard opaque rectangle (Nika). A translucent navy over the always-on water field + a soft backdrop-blur reads as premium frosted glass; the top/bottom edges are feathered (mask) so the band dissolves into the page rather than cutting a blunt border line. The water-on override in water.css re-tints this per theme; the blur + feather are inherited from here so both water states stay soft-edged. */ background: linear-gradient(180deg, rgba(22,38,59,0.80) 0%, rgba(14,26,43,0.86) 100%); color: var(--pure-white); padding: 80px 0; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); } @media (max-width: 768px) { .ritual-section { padding: 56px 0; } } @media (max-width: 430px) { .ritual-section { padding: 40px 0; } } .ritual-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 20%, rgba(127,217,217,0.08) 0%, transparent 55%), radial-gradient(circle at 10% 80%, rgba(201,169,110,0.06) 0%, transparent 50%); pointer-events: none; } .ritual-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } @media (max-width: 920px) { .ritual-grid { grid-template-columns: 1fr; gap: 40px; } } .ritual-eyebrow { font-size: 11px; letter-spacing: 4px; font-weight: 500; color: var(--teal-accent); margin-bottom: 14px; text-transform: uppercase; } .ritual-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin: 0 0 18px; color: var(--pure-white); } @media (max-width: 430px) { .ritual-title { font-size: clamp(22px, 5vw, 32px); margin: 0 0 14px; } } .ritual-title em { font-style: normal; } .ritual-lede { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 24px; max-width: 460px; } .ritual-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .ritual-step { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 16px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transition: all 0.25s var(--ease); } .ritual-step:hover { background: rgba(255,255,255,0.07); border-color: rgba(127,217,217,0.25); transform: translateX(4px); } .ritual-step-num { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-accent) 0%, var(--teal-light) 100%); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--navy); } .ritual-step-body h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--pure-white); } .ritual-step-body p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; } .ritual-step-time { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } /* NEWSLETTER */ .newsletter-section { background: var(--teal); color: var(--pure-white); padding: 64px 0; position: relative; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 30%, rgba(127,217,217,0.18) 0%, transparent 55%); pointer-events: none; } .newsletter-box { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; } @media (max-width: 820px) { .newsletter-box { grid-template-columns: 1fr; } } .newsletter-box h2 { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: var(--pure-white); letter-spacing: -0.4px; } .newsletter-box p { font-size: 14px; opacity: 0.85; margin: 0; color: var(--pure-white); } .newsletter-form input { flex: 1; padding: 14px 18px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; font-size: 14px; font-family: inherit; background: rgba(255,255,255,0.08); color: var(--pure-white); } .newsletter-form input::placeholder { color: rgba(255,255,255,0.55); } .newsletter-form input:focus { outline: none; background: rgba(255,255,255,0.14); border-color: var(--teal-accent); } .newsletter-form { display: flex; gap: 8px; } @media (max-width: 520px) { .newsletter-form { flex-direction: column; } } @media (max-width: 430px) { .newsletter-form { gap: 6px; } } .newsletter-form { position: relative; flex-wrap: wrap; } .newsletter-form input:disabled { opacity: 0.6; cursor: not-allowed; } .newsletter-form .btn[disabled] { opacity: 0.7; cursor: progress; } .newsletter-form input[aria-invalid="true"] { border-color: var(--gold, #c9a96a); background: rgba(255,255,255,0.16); } .newsletter-error { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--pure-white); background: rgba(0,0,0,0.18); border-radius: 8px; padding: 8px 12px; margin: 0; } .newsletter-done { display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--pure-white); min-height: 52px; letter-spacing: -0.2px; } /* PAGE HERO (subpages) */ .page-hero { background: var(--menthol); padding: 56px 0 44px; } .page-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--teal); margin: 0 0 12px; letter-spacing: -0.5px; } .page-hero p { font-size: 15px; color: var(--gray-600); max-width: 620px; line-height: 1.65; margin: 0; } /* FILTER BAR */ .filter-bar { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); } .filter-btn { background: var(--pure-white); border: 1px solid var(--gray-200); color: var(--gray-600); padding: 9px 18px; border-radius: 24px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.2s; } .filter-btn:hover { border-color: var(--teal); color: var(--teal); } .filter-btn.active { background: var(--teal); color: var(--pure-white); border-color: var(--teal); } /* CROSS-SELL — "You may also like" row on product detail */ .cross-sell { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); } .cross-sell-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } .cross-sell-head h3 { font-size: 22px; font-weight: 600; color: var(--teal); margin: 0; } [data-theme="night"] .cross-sell-head h3 { color: var(--teal-accent); } .cross-sell-head a, .cross-sell-head button { font-size: 12px; letter-spacing: 1.5px; font-weight: 600; color: var(--gold); text-transform: uppercase; background: none; border: none; cursor: pointer; font-family: inherit; } .cross-sell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 820px) { .cross-sell-grid { grid-template-columns: 1fr; } } /* PD spec list — replaces the simple