/* Built by Shaiya Che Madunda — Beast of Africa · Copyright (c) Shaiya Che Madunda */ /* ========================================================================== Lumoni v1.3 — visual layer Loads after main.css / chanua-glass.css and re-skins the whole theme through the existing design tokens, then adds the new homepage sections, the full-screen menu, the dark preloader / currency gate, and the form restyle. Everything is scoped so main.css keeps working untouched. ========================================================================== */ /* ---------- Fonts: light editorial serif + Geist ---------- */ @font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:100 900; font-display:swap; src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); } @font-face { font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/geist-latin-wght-normal.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { --c-cream:#ECE5D6; --c-cream-2:#E2D9C6; --c-card:#F6F1E6; --c-green:#1b1812; --c-green-dark:#12100c; --c-green-deep:#171410; --c-gold:#B8603A; --c-gold-soft:#E3A74A; --c-gold-ink:#8A3F22; --c-text:#1d1a14; --c-text-light:rgba(29,26,20,.68); --c-cream-text:#F7EEDF; --c-cream-text-soft:rgba(247,238,223,.66); --c-line:rgba(29,26,20,.16); --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif; --font-sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; --font-hand:'Instrument Serif',Georgia,serif; --header-h:84px; --r-sm:2px; --r-md:4px; --r-lg:6px; --night:#14171a; --oxblood:#2e080d; --clay:#c2653f; --ochre:#e3a74a; --v13-ease:cubic-bezier(.2,.7,.2,1); } html, body { background:var(--c-cream); } body { font-family:var(--font-sans); color:var(--c-text); transition:background-color .9s ease,color .9s ease; -webkit-font-smoothing:antialiased; } /* Tone morph: the homepage re-colours the whole page as you move through it. Everything in main.css reads these tokens, so cards, text and lines follow. */ body[data-tone="night"] { --c-cream:#14171a; --c-cream-2:#1b1f23; --c-card:#1f2428; --c-text:#ece6da; --c-text-light:rgba(236,230,218,.66); --c-line:rgba(236,230,218,.18); --c-gold:#E3A74A; --c-gold-ink:#E3A74A; } body[data-tone="dawn"] { --c-cream:#3a2b33; --c-cream-2:#46343d; --c-card:#4a3a43; --c-text:#f6eadb; --c-text-light:rgba(246,234,219,.7); --c-line:rgba(246,234,219,.2); --c-gold:#E3A74A; --c-gold-ink:#E3A74A; } body[data-tone="day"] { --c-cream:#ECE5D6; --c-cream-2:#E2D9C6; --c-card:#F6F1E6; --c-text:#1f2420; --c-text-light:rgba(31,36,32,.68); --c-line:rgba(31,36,32,.18); } body[data-tone="sage"] { --c-cream:#CDD7C1; --c-cream-2:#C0CCB3; --c-card:#DCE5D2; --c-text:#1c291e; --c-text-light:rgba(28,41,30,.7); --c-line:rgba(28,41,30,.2); --c-gold-ink:#7a3a1c; } body[data-tone="dusk"] { --c-cream:#4a2b24; --c-cream-2:#573229; --c-card:#5e382e; --c-text:#f7e8d7; --c-text-light:rgba(247,232,215,.72); --c-line:rgba(247,232,215,.2); --c-gold:#E3A74A; --c-gold-ink:#E3A74A; } body[data-tone="dawn"] .site-header, body[data-tone="night"] .site-header, body[data-tone="dusk"] .site-header { border-bottom-color:rgba(255,255,255,.1); } /* Fine film grain over everything */ body::after { content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.06; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Type ---------- */ h1, h2, h3, h4 { font-family:var(--font-serif); font-weight:400; letter-spacing:-.012em; } h1 { font-size:clamp(3.2rem,8.4vw,7.6rem); line-height:.96; } h2 { line-height:1; } em { font-family:var(--font-serif); font-style:italic; } .eyebrow { font-family:var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--c-text-light); padding-top:0; margin:0 0 1.1rem; line-height:1.4; } .eyebrow::before { position:static; display:inline-block; vertical-align:middle; width:34px; height:1px; margin:0 14px 0 0; background:currentColor; opacity:.6; } .hero .eyebrow { color:var(--ochre); } .hero__heading em, .philosophy__heading em { font-family:var(--font-serif); font-style:italic; font-size:1em; color:var(--ochre); } .hero__heading { font-weight:400; font-size:clamp(3.6rem,10.4vw,9.4rem); line-height:.9; letter-spacing:-.025em; } .hero__lede { font-size:clamp(1rem,1.25vw,1.2rem); } /* ---------- Buttons: ghost with a travelling glint ---------- */ .btn { border-radius:2px; padding:1.05rem 1.9rem; font-size:.7rem; font-weight:700; letter-spacing:.24em; overflow:hidden; background:transparent; color:var(--c-text); border:1px solid currentColor; box-shadow:none; position:relative; transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .35s var(--v13-ease); } .btn::before { content:""; position:absolute; top:-1px; left:-45%; width:40%; height:1px; background:linear-gradient(90deg,transparent,currentColor,transparent); animation:v13glint 3.8s linear infinite; pointer-events:none; } @keyframes v13glint { to { left:145%; } } .btn:hover { box-shadow:none; transform:translateY(-2px); } .btn--dark { background:var(--c-green); color:var(--c-cream-text); border-color:var(--c-green); } .btn--dark:hover { background:var(--clay); border-color:var(--clay); color:#fff; } .btn--gold { background:var(--clay); color:#fff; border-color:var(--clay); } .btn--gold:hover { background:var(--c-cream-text); color:var(--c-green-dark); border-color:var(--c-cream-text); } .btn--outline-light { color:var(--c-cream-text); border-color:rgba(255,255,255,.5); background:transparent; } .btn--outline-light:hover { background:rgba(255,255,255,.12); border-color:#fff; } .hero .btn--dark { background:transparent; color:#fbeedd; border-color:rgba(255,255,255,.55); } .hero .btn--dark:hover { background:#fbeedd; color:#14171a; border-color:#fbeedd; } .text-link { font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; } @media (prefers-reduced-motion:reduce){ .btn::before{ animation:none; } } /* ---------- Cards, radii ---------- */ .glass { background:color-mix(in srgb,var(--c-card) 78%,transparent); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:none; } .glass--dark { background:rgba(20,17,14,.72); border-color:rgba(255,255,255,.12); color:var(--c-cream-text); } .glass--dark h1,.glass--dark h2,.glass--dark h3,.glass--dark h4 { color:var(--c-cream-text); } .reveal-img, .service-card__media, .staff-card__media, .staff-card__avatar { border-radius:var(--r-md); } /* ---------- Header: slim bar, centred logo disc, MENU label ---------- */ .site-header { height:var(--header-h); background:color-mix(in srgb,var(--c-cream) 94%,transparent); border-bottom:1px solid var(--c-line); transition:background-color .9s ease,border-color .9s ease,transform .5s cubic-bezier(.4,0,.2,1); } body.has-bg-video .site-header:not(.is-scrolled) { background:transparent; } .site-header__inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:none; padding:0 clamp(16px,3vw,40px); gap:1rem; } .site-header__actions { display:contents; } .site-header__actions > .currency-toggle { grid-column:1; grid-row:1; justify-self:start; } .site-header__logo { grid-column:2; grid-row:1; justify-self:center; position:relative; z-index:3; } .site-header__book { grid-column:3; grid-row:1; justify-self:end; margin-right:calc(44px + 78px); } .nav-toggle { grid-column:3; grid-row:1; justify-self:end; position:relative; z-index:3; width:auto; min-width:44px; height:44px; flex-direction:row; align-items:center; gap:12px; padding:0; } .nav-toggle::before { content:"Menu"; order:-1; font-size:.68rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--c-text); transition:color .4s; } .nav-toggle[aria-expanded="true"]::before { content:"Close"; color:#fff; } .nav-toggle__bar { width:22px; background:var(--c-text); } .nav-toggle { display:grid; grid-template-columns:auto 22px; grid-template-rows:5px 5px 5px; align-content:center; column-gap:12px; row-gap:4px; } .nav-toggle::before { grid-row:1/4; grid-column:1; align-self:center; } .nav-toggle__bar { grid-column:2; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background:#fff; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform:translateY(9px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform:translateY(-9px) rotate(-45deg); } body.has-bg-video .site-header:not(.is-scrolled) .nav-toggle::before { color:#fff; } body.has-bg-video .site-header:not(.is-scrolled) .nav-toggle__bar { background:#fff; } .site-header__logo a, .site-header__logo .custom-logo-link { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#f4ecdc; box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.18); overflow:hidden; transition:transform .5s var(--v13-ease); } .site-header__logo a:hover { transform:scale(1.06) rotate(-4deg); } .site-header__logo img, .brandmark--image .site-logo-img { height:50px; width:auto; max-width:56px; object-fit:contain; } .currency-toggle { border-radius:2px; border:1px solid var(--c-line); background:transparent; padding:2px; } .currency-toggle__btn { border-radius:1px; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-light); } body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle { border-color:rgba(255,255,255,.4); } body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn { color:rgba(255,255,255,.8); } .site-header__book { padding:.8rem 1.3rem; } @media (max-width:760px){ .site-header__book { display:none; } .site-header__actions > .currency-toggle { display:none; } .site-header__logo a { width:56px; height:56px; } .site-header__logo img { height:44px; } } /* ---------- Full-screen menu (oxblood, huge serif links) ---------- */ .site-nav { position:fixed; inset:0; top:0; right:0; left:0; width:auto; max-height:none; height:100vh; height:100dvh; z-index:2; background:var(--oxblood); border:0; border-radius:0; box-shadow:none; padding:calc(var(--header-h) + 2vh) 6vw 10vh; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; opacity:1; transform:none; visibility:hidden; clip-path:circle(0 at calc(100% - 64px) 42px); transition:clip-path .9s cubic-bezier(.7,0,.2,1), visibility 0s .9s; } .site-nav.is-open { visibility:visible; clip-path:circle(150% at calc(100% - 64px) 42px); transition:clip-path .9s cubic-bezier(.7,0,.2,1), visibility 0s; } .site-nav::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background: linear-gradient(135deg,transparent 0 38%,rgba(255,255,255,.03) 38% 62%,transparent 62%), radial-gradient(circle at 15% 90%,rgba(227,167,74,.14),transparent 45%), radial-gradient(circle at 90% 10%,rgba(194,101,63,.2),transparent 40%); } .site-nav .nav-menu { position:relative; display:grid; text-align:center; gap:0; } .site-nav .nav-menu li { border:0; white-space:normal; overflow:hidden; } .site-nav .nav-menu a { display:block; padding:0; font-family:var(--font-serif); font-size:clamp(2.6rem,8.6vw,6.8rem); line-height:1.04; letter-spacing:-.01em; text-transform:uppercase; color:#fff !important; transform:translateY(105%); transition:transform .8s var(--v13-ease), color .3s, letter-spacing .4s, padding 0s; } .site-nav.is-open .nav-menu a { transform:none; } .site-nav.is-open .nav-menu li:nth-child(1) a { transition-delay:.25s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(2) a { transition-delay:.32s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(3) a { transition-delay:.39s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(4) a { transition-delay:.46s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(5) a { transition-delay:.53s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(6) a { transition-delay:.60s,0s,0s; } .site-nav.is-open .nav-menu li:nth-child(n+7) a { transition-delay:.67s,0s,0s; } .site-nav .nav-menu a:hover, .site-nav .nav-menu a:focus-visible { color:var(--ochre) !important; letter-spacing:.03em; padding-left:0; } .site-nav .nav-menu .current-menu-item > a { color:var(--ochre) !important; } .site-nav__currency { display:flex !important; position:absolute; left:50%; bottom:5vh; transform:translateX(-50%); border-color:rgba(255,255,255,.3); } .site-nav__currency .currency-toggle__btn { color:rgba(255,255,255,.75); } @media (max-width:760px){ .site-nav .nav-menu a { font-size:clamp(2.2rem,11vw,3.6rem); } } body.v13-menu-open .site-header { transform:none !important; background:transparent; border-bottom-color:transparent; } body.v13-menu-open { overflow:hidden; } /* ---------- Dark preloader + currency gate (logo + decode + question) ---------- */ .lumoni-loader { background:#0b0c0e; color:#fff; } .lumoni-loader * { color:inherit; } .lumoni-loader__mark { display:grid; place-items:center; width:168px; height:168px; border-radius:50%; background:#f4ecdc; overflow:hidden; margin:0 auto 2.2rem; box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 60px rgba(0,0,0,.5); } .lumoni-loader__logo { width:130px !important; height:auto !important; max-height:none; } .lumoni-loader__word { font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,2.8rem); text-transform:none; letter-spacing:.02em; color:#fff; } .lumoni-loader__tagline { font-family:var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.5); } .lumoni-loader__bar { background:rgba(255,255,255,.15); } .lumoni-loader__bar-fill { background:#fff; } .currency-gate { background:#0b0c0e; color:#fff; } .currency-gate__panel { background:transparent; border:0; box-shadow:none; color:#fff; text-align:center; max-width:720px; } .currency-gate__logo { display:block; width:168px !important; height:168px !important; padding:18px; border-radius:50%; background:#f4ecdc; object-fit:contain; margin:0 auto 1.6rem; box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 60px rgba(0,0,0,.5); } .currency-gate .eyebrow { color:rgba(255,255,255,.55); justify-content:center; } .currency-gate__title { font-family:var(--font-serif); font-size:clamp(2rem,5vw,3.4rem); color:#fff; font-weight:400; } .currency-gate__desc, .currency-gate__note { color:rgba(255,255,255,.62); font-size:.9rem; max-width:48ch; margin:.8rem auto 0; } .currency-gate__choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1.6rem; text-align:left; } .currency-gate__choice { background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:2px; color:#fff; padding:18px 22px; display:grid; gap:4px; transition:border-color .3s,background .3s,transform .3s; position:relative; } .currency-gate__choice:hover, .currency-gate__choice:focus-visible { border-color:#fff; background:rgba(255,255,255,.07); transform:translateY(-2px); } .currency-gate__choice-title { font-weight:600; font-size:1rem; color:#fff; } .currency-gate__choice-sub { font-size:.78rem; color:rgba(255,255,255,.6); letter-spacing:.04em; } .currency-gate__hint { color:var(--ochre); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; } @media (max-width:640px){ .currency-gate__choices { grid-template-columns:1fr; } .currency-gate__logo,.lumoni-loader__mark { width:128px !important; height:128px !important; } .lumoni-loader__logo { width:98px !important; } } /* ---------- Scroll progress line + section label (homepage) ---------- */ .scroll-progress { height:2px; background:var(--clay); } .v13-foot { position:fixed; left:clamp(16px,3vw,40px); right:clamp(16px,3vw,40px); bottom:14px; z-index:45; display:flex; align-items:center; gap:18px; color:var(--c-text); font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; pointer-events:none; mix-blend-mode:normal; transition:color .9s,opacity .4s; } .v13-foot span { white-space:nowrap; min-width:200px; } .v13-foot i { flex:1; height:1px; background:var(--c-line); position:relative; display:block; } .v13-foot i b { position:absolute; left:0; top:-1px; height:3px; width:100%; background:var(--c-text); transform-origin:0 50%; transform:scaleX(0); } @media (max-width:760px){ .v13-foot { display:none; } } /* ---------- Homepage: hero scatter ---------- */ .hero { --hp:0; } .hero__content { transform:translateY(calc(var(--hp)*-60px)); opacity:calc(1 - var(--hp)*1.15); filter:blur(calc(var(--hp)*12px)); will-change:transform,opacity,filter; } .hero__heading { letter-spacing:calc(-.025em + var(--hp)*.1em); } .hero__scroll { opacity:calc(1 - var(--hp)*3); } /* ---------- Homepage: statement ---------- */ .v13-statement { padding:clamp(6rem,22vh,14rem) var(--section-pad-x); background:transparent; position:relative; } .v13-statement__inner { max-width:var(--container); margin:0 auto; } .v13-statement__p { font-family:var(--font-serif); font-size:clamp(2.4rem,6vw,5.4rem); line-height:1.08; max-width:20ch; color:var(--c-text); letter-spacing:-.015em; } .v13-statement__p .w { display:inline-block; opacity:.14; filter:blur(7px); transition:opacity .5s,filter .6s; } .v13-statement__p .w.on { opacity:1; filter:none; } .v13-statement__p .w.key.on { color:var(--ochre); font-style:italic; } .v13-statement small { display:block; margin-top:2.4rem; max-width:48ch; color:var(--c-text-light); font-size:1rem; line-height:1.6; } .v13-statement .text-link { margin-top:2rem; display:inline-flex; } /* ---------- Homepage: approach window ---------- */ .v13-appr { height:380vh; position:relative; } .v13-stk { position:sticky; top:0; height:100vh; overflow:hidden; } .v13-appr .v13-stk { display:grid; place-items:center; } .v13-win { position:relative; width:min(1100px,88vw); height:min(520px,70vh); overflow:hidden; background:#000; color:#f6eadb; } .v13-win__bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 1.2s var(--v13-ease); } .v13-win__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,12,.55),rgba(10,10,12,.2) 60%,rgba(10,10,12,.5)); } .v13-win__track { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; gap:7vw; padding:0 5vw; width:max-content; transform:translateX(var(--tx,0px)); } .v13-win__h { font-size:clamp(3.4rem,8vw,7.2rem); line-height:.95; white-space:nowrap; color:#fbeedd; } .v13-win__list { display:flex; gap:clamp(24px,4vw,56px); margin:0; padding:0; list-style:none; font-size:.8rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; white-space:nowrap; color:#fbeedd; } .v13-win__t { width:min(34ch,70vw); color:#fbeedd; } .v13-win__t p { margin-bottom:22px; font-size:1.02rem; line-height:1.6; } .v13-win .btn { color:#fbeedd; } /* ---------- Homepage: pillars ---------- */ .v13-pil { height:440vh; position:relative; } .v13-pil__bg { position:absolute; inset:-12%; background-size:cover; background-position:center; filter:blur(50px) brightness(.55) saturate(1.2); transform:scale(1.1); } .v13-pil__card { position:absolute; left:max(6vw,24px); top:50%; translate:0 -50%; width:min(36vw,430px); aspect-ratio:4/5; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); background:#111; } .v13-pil__art { position:absolute; inset:0; background-size:cover; background-position:center; } .v13-pil__mos { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(8,1fr); } .v13-pil__mos i { background:#0d0f12; opacity:0; } .v13-pil__txt { position:absolute; left:calc(max(6vw,24px) + min(36vw,430px) + 7vw); right:6vw; top:50%; translate:0 -50%; color:#fbeedd; } .v13-pil__cnt { font-family:var(--font-serif); font-size:1.6rem; margin-bottom:6px; color:#fbeedd; } .v13-pil__cnt b { font-weight:400; font-size:2rem; } .v13-pil__w { font-family:var(--font-serif); font-size:clamp(4.4rem,13vw,11rem); line-height:.9; letter-spacing:-.01em; color:#fbeedd; } .v13-pil__txt p { max-width:38ch; margin:18px 0 26px; color:#ead9c4; } .v13-pil__txt .btn { color:#fbeedd; } /* ---------- Homepage: services deck ---------- */ .v13-svc { position:relative; } .v13-svc__row { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; } .v13-svc__st { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:10vh 5vw 10vh max(6vw,24px); gap:18px; } .v13-svc__st h2 { font-size:clamp(3.2rem,7.4vw,6.4rem); } .v13-svc__st p:not(.eyebrow) { max-width:36ch; color:var(--c-text-light); font-size:1.02rem; line-height:1.6; } .v13-svc__sp { position:relative; clip-path:inset(var(--c,0%) 0 0 0); overflow:hidden; min-height:100vh; background:#222; } .v13-svc__img { position:absolute; inset:0; background-size:cover; background-position:center; transform:translateY(calc((1 - var(--pp,1))*8%)); will-change:transform; } .v13-svc__img::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%); } .v13-svc__no { position:absolute; left:24px; bottom:10px; font-family:var(--font-serif); font-size:clamp(6rem,15vw,13rem); line-height:.8; color:rgba(255,246,234,.9); } /* split letters (ember reveal) */ .lt { opacity:.2; transition:opacity .35s,color .35s; } .lt.on { opacity:1; } .lt.ember { opacity:1; color:var(--clay); } /* Existing home sections: transparent so the tone morph shows through */ .philosophy, .trust-strip, .staff-spotlight-section, .marquee { background:transparent; } .marquee__word { font-family:var(--font-serif); font-weight:400; } /* ---------- CTA band + footer ---------- */ .cta-band__action h3 { font-weight:400; } .site-footer { background:#10100f; border-radius:0; border:0; color:var(--c-cream-text); position:relative; z-index:2; } .site-footer h4 { font-family:var(--font-sans); font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--ochre); } .site-footer a { color:var(--c-cream-text); } .site-footer a:hover { color:var(--ochre); } .site-footer__tagline { font-family:var(--font-serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1; color:var(--c-cream-text); max-width:16ch; margin-top:1.2rem; } .site-footer .brandmark__name { font-family:var(--font-serif); font-weight:400; font-size:2.4rem; letter-spacing:.2em; text-transform:uppercase; } .site-footer__bottom { border-top:1px solid rgba(255,255,255,.12); } /* ---------- Inner pages ---------- */ .page-header { padding-top:calc(var(--header-h) + clamp(3rem,8vw,6rem)); padding-bottom:clamp(2rem,5vw,4rem); } .page-header h1 { font-size:clamp(3.4rem,9.4vw,8.4rem); line-height:.92; letter-spacing:-.02em; } .page-header__inner { position:relative; } .page-header__inner::after { content:""; display:block; height:1px; margin-top:clamp(1.6rem,4vw,3rem); background:linear-gradient(90deg,var(--c-text),transparent 70%); opacity:.35; } .generic-page .rich-content p, .generic-page__inner p { font-size:1.06rem; line-height:1.7; } .rich-content h2, .generic-page__inner h2 { font-size:clamp(2rem,4vw,3.2rem); margin:2.4rem 0 1rem; } .service-item, .staff-card, .product-card, .package-card, .contact-card, .info-card { transition:transform .5s var(--v13-ease), box-shadow .5s; } .service-item:hover, .staff-card:hover, .product-card:hover, .package-card:hover { transform:translateY(-4px); } .staff-card__name, .product-card__title, .service-item__title { font-weight:400; font-size:1.5rem; } .staff-card__avatar { background:linear-gradient(160deg,var(--clay),#3a1a2a); font-weight:400; } .pill-btn, .time-slot, .staff-card__tag { border-radius:2px; } .pill-btn:hover, .time-slot:hover { border-color:var(--c-text); } .pill-btn.is-selected, .pill-btn[aria-pressed="true"], .time-slot.is-selected { background:var(--c-green); color:var(--c-cream-text); border-color:var(--c-green); } /* ---------- Forms: line fields, small-caps labels, big serif values ---------- */ .booking-inline-wrap, .booking-overlay__panel, .consult-section, .review-form, .contact-form, .order-cart { position:relative; background:color-mix(in srgb,var(--c-card) 86%,transparent); border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:0 30px 70px -30px rgba(20,17,14,.35); } .booking-inline-wrap { max-width:760px; margin-inline:auto; padding:clamp(1.6rem,4vw,3.2rem); } .booking-overlay__panel { padding:clamp(1.8rem,4vw,3rem); } .booking-overlay { background:rgba(11,12,14,.72); backdrop-filter:blur(8px); } .booking-overlay__title { font-family:var(--font-serif); font-weight:400; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.01em; } .booking-form__field label, .review-form__field label, .contact-form label, .consult-section label { font-size:.66rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--c-text-light); } .booking-form__field input, .booking-form__field select, .booking-form__field textarea, .consult-section .booking-form__field input, .consult-section .booking-form__field select, .consult-section .booking-form__field textarea, .review-form__field input, .review-form__field textarea, .review-form textarea, .contact-form input, .contact-form select, .contact-form textarea, .order-cart #orderForm input, .order-cart #orderForm textarea, .order-cart #orderForm select { background:transparent !important; border:0 !important; border-bottom:1px solid var(--c-line) !important; border-radius:0 !important; padding:.7rem 0 .75rem !important; font-family:var(--font-serif); font-size:1.35rem; color:var(--c-text); width:100%; transition:border-color .3s, box-shadow .3s; -webkit-appearance:none; appearance:none; } .booking-form__field select, .contact-form select, .consult-section select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right .2rem center !important; padding-right:1.6rem !important; } .booking-form__field input:focus, .booking-form__field select:focus, .booking-form__field textarea:focus, .review-form__field input:focus, .review-form__field textarea:focus, .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .consult-section input:focus, .consult-section select:focus, .consult-section textarea:focus { outline:none !important; border-bottom-color:var(--clay) !important; box-shadow:0 1px 0 0 var(--clay); } .booking-form__field input::placeholder, .booking-form__field textarea::placeholder, .contact-form ::placeholder, .review-form ::placeholder { color:var(--c-text-light); opacity:.55; font-style:italic; } .booking-form__field input.is-invalid, .booking-form__field select.is-invalid { border-bottom-color:#c0392b !important; box-shadow:0 1px 0 0 #c0392b; } .booking-form__row { gap:1.6rem; margin-bottom:1.6rem; } .booking-form__fixed { background:transparent; border:0; border-bottom:1px dashed var(--c-line); border-radius:0; padding:.7rem 0; font-family:var(--font-serif); font-size:1.35rem; } .booking-form__submit, .contact-form button[type="submit"], .review-form button[type="submit"], .consult-section button[type="submit"] { width:100%; margin-top:1rem; padding:1.2rem 1.6rem; background:var(--c-green); color:var(--c-cream-text); border:1px solid var(--c-green); } .booking-form__submit:hover { background:var(--clay); border-color:var(--clay); color:#fff; } .booking-form__fineprint, .booking-form__status { letter-spacing:.04em; } .booking-form__status.is-error { color:#c0392b; } .booking-form__done { font-family:var(--font-serif); font-size:1.7rem; line-height:1.2; } .booking-form__done-check { background:var(--clay); border-radius:50%; width:64px; height:64px; animation:v13pop .6s var(--v13-ease) both; } @keyframes v13pop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } } .booking-overlay__close { border-radius:50%; } .time-slot { padding:.6rem 1rem; font-size:.78rem; letter-spacing:.08em; background:transparent; } input[type="checkbox"], input[type="radio"] { accent-color:var(--clay); } input[type="date"] { min-height:3rem; } /* ---------- Motion safety ---------- */ html.v13-static .v13-appr, html.v13-static .v13-pil { height:auto; } html.v13-static .v13-stk { position:static; height:auto; overflow:visible; } html.v13-static .v13-win__track { transform:none; flex-wrap:wrap; } html.v13-static .v13-statement__p .w { opacity:1; filter:none; } html.v13-static .lt { opacity:1; } html.v13-static .v13-svc__sp { clip-path:none; } /* ---------- Mobile ---------- */ @media (max-width:820px){ .v13-appr { height:340vh; } .v13-pil__card { width:60vw; top:27%; left:50%; translate:-50% -50%; } .v13-pil__txt { left:6vw; right:6vw; top:auto; bottom:7vh; translate:none; } .v13-pil__w { font-size:3.6rem; } .v13-pil__cnt { display:none; } .v13-svc__row { grid-template-columns:1fr; } .v13-svc__sp { min-height:60vh; order:-1; } .v13-svc__st { padding:36px 22px 56px; } .v13-win__h { font-size:3.2rem; } } /* Hero fallback when no background video/photo is configured: painted Kilimanjaro dawn instead of the bundled "REPLACE: hero.jpg" placeholder. */ body:not(.has-bg-video) .hero { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='1180' cy='600' r='90' fill='%23f6c88e' opacity='.9'/%3E%3Cpath d='M0 900V640L260 500 430 600 720 330 980 560 1240 470 1600 640V900Z' fill='%232a1f2e'/%3E%3Cpath d='M0 900V740L300 660 620 760 940 680 1260 770 1600 700V900Z' fill='%23150f17'/%3E%3C/svg%3E") center bottom/cover no-repeat, linear-gradient(#171a2b 0%,#3d2a45 38%,#b8573f 74%,#e8a255 100%); } .site-header__book { background:transparent !important; color:var(--c-text) !important; border:1px solid currentColor !important; } .site-header__book:hover { background:var(--clay) !important; border-color:var(--clay) !important; color:#fff !important; } body.has-bg-video .site-header:not(.is-scrolled) .site-header__book { color:#fff !important; } /* ===== v1.3 CTA band — editorial stack ===== */ .cta-band { padding: clamp(5rem,10vw,9rem) clamp(1.5rem,5vw,4rem); } .cta-band__inner { display: grid !important; grid-template-columns: 1fr 1.4fr; gap: 3rem clamp(2rem,6vw,6rem); max-width: 1280px; margin: 0 auto; align-items: start; } .cta-band__action { grid-column: 1 / -1; grid-row: 1; text-align: center !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 0 3rem !important; backdrop-filter: none !important; } .cta-band__action h3 { font-size: clamp(2.6rem,7vw,6.5rem) !important; line-height: .98 !important; letter-spacing: -.02em; margin: 0 0 2.2rem !important; font-family: var(--font-serif); } .cta-band__decor { display: none !important; } .cta-band__quote, .cta-band__points { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border-top: 1px solid rgba(236,229,214,.18) !important; padding: 2rem 0 0 !important; border-radius: 0 !important; } .cta-band__quote { grid-row: 2; } .cta-band__points { grid-row: 2; display: grid !important; grid-template-columns: repeat(3,1fr); gap: 1.5rem; } .cta-band .trust-point { padding: 0 !important; text-align: left; } .cta-band .trust-point h4 { margin: .6rem 0 .4rem; } @media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } .cta-band__quote, .cta-band__points { grid-row: auto; } .cta-band__points { grid-template-columns: 1fr; } } /* ===== v1.3 form + header fixes ===== */ .page-header__inner { border-bottom:0 !important; padding-bottom:0 !important; } .booking-form__field { margin-bottom:1.6rem; } .booking-form__row .booking-form__field { margin-bottom:0; } .booking-form__field label { margin-bottom:.15rem; } .contact-form { display:grid !important; grid-template-columns:1fr 1fr; gap:1.8rem clamp(1.4rem,3vw,2.6rem); padding:clamp(1.6rem,4vw,3rem); max-width:900px; margin-inline:0; } .contact-form .booking-form__field { margin-bottom:0; } .contact-form .booking-form__field--full, .contact-form .booking-form__actions, .contact-form .booking-form__fineprint, .contact-form .booking-form__status { grid-column:1 / -1; } .contact-form .booking-form__actions { margin-top:.4rem; } .btn--wa, .booking-form__submit.is-wa { display:inline-flex !important; align-items:center; justify-content:center; gap:.8rem; width:100%; filter:none !important; transform:none; background:#1f2a1f !important; color:#f4ecdc !important; border:1px solid #1f2a1f !important; background-image:none !important; box-shadow:none !important; } .btn--wa svg, .is-wa svg { width:1.15rem; height:1.15rem; flex:none; position:static !important; margin:0 !important; color:#7be39a; } .btn--wa:hover, .booking-form__submit.is-wa:hover { background:var(--clay) !important; border-color:var(--clay) !important; } @media (max-width:700px){ .contact-form { grid-template-columns:1fr; } } .is-wa .lwa-btn__icon { margin-right:0 !important; display:inline-grid !important; } .is-wa .lwa-btn__icon svg { width:100%; height:100%; } html[data-currency-gate="open"] .currency-gate { background:#0b0c0e; -webkit-backdrop-filter:none; backdrop-filter:none; color:#fff; } html[data-currency-gate="open"] .currency-gate__panel { background:transparent; } /* ===== v1.3.1 — beat the clear-glass layer (live site runs with background video) ===== */ body.lumoni-clear-glass.has-bg-video .cta-band { background: var(--c-green-deep, #14110e); } body.lumoni-clear-glass.has-bg-video :is(.cta-band__quote, .cta-band__points, .cta-band__action) { background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding-left:0 !important; padding-right:0 !important; } body.lumoni-clear-glass.has-bg-video .cta-band__action { padding:0 0 3rem !important; } body.lumoni-clear-glass.has-bg-video :is(.cta-band__quote, .cta-band__points) { border-top:1px solid rgba(236,229,214,.18) !important; padding-top:2rem !important; padding-bottom:0 !important; } body.lumoni-clear-glass.has-bg-video .cta-band .trust-point { background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; } body.lumoni-clear-glass.has-bg-video .cta-band__action .btn--gold { background:var(--clay) !important; border-color:var(--clay) !important; } /* Footer: flat, full-bleed, no floating glass box */ body.lumoni-clear-glass.has-bg-video .site-footer, .site-footer { background:#0f0e0c !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding-bottom:5.5rem !important; } /* progress label steps aside over the footer */ .v13-foot { transition:opacity .4s, color .9s; } body.v13-at-foot .v13-foot { opacity:0; } /* Menu fits any screen height (customizer preview, laptops, landscape phones) */ .site-nav { padding:calc(var(--header-h) + 1vh) 1.5rem 11vh; box-sizing:border-box; overflow-y:auto; } .site-nav .nav-menu a { font-size:clamp(1.7rem, min(8.6vw, 6.2vh), 6rem); } @media (max-width:760px){ .site-nav .nav-menu a { font-size:clamp(1.7rem, min(11vw, 6vh), 3.4rem); } } .site-nav__currency { bottom:3vh; } .site-nav { padding-top:calc(var(--header-h) + 3vh); } .site-footer__col ul, .site-footer .menu { column-count:1; } .site-footer__col li, .site-footer .menu li { padding:0 !important; } .site-footer__col li a, .site-footer .menu a { display:block; padding:.55rem 0 !important; font-size:.78rem; letter-spacing:.16em; } /* ===== v1.3.2 — ritual scenes ===== */ .v13-rit { position:relative; } .rit { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,6vw,6rem); min-height:100vh; padding:clamp(5rem,12vh,9rem) clamp(1.5rem,6vw,6rem); position:relative; overflow:hidden; color:#f4ecdc; } .rit h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.4rem,5.4vw,5rem); line-height:1; letter-spacing:-.015em; margin:.8rem 0 1.2rem; color:inherit; } .rit__txt p:not(.eyebrow) { max-width:44ch; font-size:1.05rem; line-height:1.65; opacity:.85; } .rit .eyebrow { color:inherit; opacity:.7; } .rit__btns { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; } .rit .btn { background:var(--clay); border-color:var(--clay); color:#fff; } .rit .btn--ghost { background:transparent; border-color:currentColor; color:inherit; } .rit__art { display:grid; place-items:center; min-height:min(60vh,520px); } .rit--stone { background:#15171a; } .rit--glow { background:#a9b79c; color:#1d2a1f; } .rit--sauna { background:#4a2514; } .rit--nails { background:#b8603a; } .rit--juice { background:#14110e; } .rit--glow .btn { background:#1d2a1f; border-color:#1d2a1f; } /* stones */ .rit-stack { display:flex; flex-direction:column-reverse; align-items:center; position:relative; cursor:pointer; padding-bottom:26px; } .rit-stack i { display:block; height:clamp(48px,8vh,72px); max-width:80vw; border-radius:50%/60% 60% 40% 40%; background:radial-gradient(ellipse at 35% 25%,#555b62,#1b1d20 72%); box-shadow:0 6px 0 rgba(0,0,0,.45),inset 0 -6px 12px rgba(0,0,0,.6); margin-top:-14px; transform:translateY(-90vh); opacity:0; } .rit-stack.in i { animation:ritDrop 1s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:calc(var(--k)*.17s); } @keyframes ritDrop { from { transform:translateY(-90vh) rotate(-20deg); opacity:1; } to { transform:none; opacity:1; } } .rit-stack.wob i { animation:ritWob .9s ease both; animation-delay:calc(var(--k)*.06s); opacity:1; } @keyframes ritWob { 0%,100%{transform:none} 30%{transform:translateX(calc(var(--k)*3px - 8px)) rotate(calc(var(--k)*1.4deg - 3deg))} 60%{transform:translateX(calc(8px - var(--k)*3px))} } .rit-stack::after { content:""; position:absolute; left:50%; bottom:-6px; width:130%; height:70px; translate:-50% 0; background:radial-gradient(ellipse,rgba(227,167,74,var(--heat,0)),transparent 70%); transition:.6s; pointer-events:none; } .rit-stack.warm { --heat:.8; } .rit-stack.warm i { background:radial-gradient(ellipse at 35% 25%,#7a5a45,#2a1d17 72%); } /* glow */ .rit-light { position:relative; width:min(100%,520px); aspect-ratio:1/1.05; border-radius:6px; overflow:hidden; --mx:60%; --my:50%; cursor:crosshair; touch-action:none; } .rit-light__dim, .rit-light__lit { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem; font-family:var(--font-serif); font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.1; } .rit-light__dim { background:radial-gradient(circle at 30% 20%,#6f7f66,#3f4d3c); color:#2a3828; } .rit-light__lit { background:radial-gradient(circle at 30% 20%,#fff1d9,#f2c9a0); color:#7a3418; -webkit-mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 40%,transparent 100%); mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 40%,transparent 100%); } .rit-light small { position:absolute; left:18px; bottom:14px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#1d2a1f; z-index:2; font-weight:700; } /* sauna */ .rit-sauna { position:relative; width:min(100%,520px); aspect-ratio:1/1.05; border-radius:6px; overflow:hidden; background:linear-gradient(#3c1f13,#7a4224); } .rit-sauna canvas { position:absolute; inset:0; width:100%; height:100%; } .rit-sauna__t { position:absolute; left:24px; top:20px; font-family:var(--font-serif); font-size:clamp(3.4rem,7vw,5.6rem); line-height:1; color:#ffd9a3; font-variant-numeric:tabular-nums; } .rit-sauna__t small { display:block; font-family:var(--font-sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; margin-top:8px; color:#f6c88e; } .rit-sauna .btn { position:absolute; right:18px; bottom:18px; color:#ffd9a3; border-color:#ffd9a3; } /* hand */ .rit-hand { width:min(100%,430px); text-align:center; } .rit-hand svg { width:100%; height:auto; overflow:visible; transition:transform .5s var(--v13-ease); } .rit-hand .nl { transition:fill .5s; } .rit-hand .gl { opacity:0; } .rit-hand .gl.run { animation:ritGloss 1.1s ease both; } @keyframes ritGloss { from { transform:translateY(8px); opacity:0; } 40% { opacity:.85; } to { transform:translateY(-8px); opacity:0; } } .rit-sw { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.4rem; } .rit-sw button { width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,255,255,.55); padding:0; cursor:pointer; transition:transform .2s, border-color .2s; } .rit-sw button[aria-pressed="true"] { transform:scale(1.2); border-color:#fff; } .rit-polish { margin-top:.8rem; font-family:var(--font-serif); font-size:1.5rem; } /* juice */ .rit-flv { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1rem; } .rit-flv button { background:transparent; color:inherit; border:1px solid rgba(244,236,214,.4); border-radius:999px; padding:.6rem 1.2rem; font:inherit; font-size:.9rem; cursor:pointer; transition:background .3s,color .3s; } .rit-flv button[aria-pressed="true"] { background:#f4ecdc; color:#14110e; } .rit-fname { font-family:var(--font-serif); font-size:2rem; margin-top:.4rem; } .rit-glass { width:min(100%,300px); margin-inline:auto; } .rit-glass svg { width:100%; height:auto; overflow:visible; } .rit-bub { animation:ritBub 4s linear infinite; animation-delay:var(--dl); opacity:0; } @keyframes ritBub { from { transform:translateY(0); opacity:0; } 15% { opacity:.8; } to { transform:translateY(-230px); opacity:0; } } .rit-wave { animation:ritWave 3s linear infinite; } @keyframes ritWave { to { transform:translateX(-120px); } } @media (max-width:860px){ .rit { grid-template-columns:1fr; min-height:auto; padding-top:5rem; padding-bottom:5rem; } .rit__art { min-height:0; } } html.v13-static .rit-stack i { transform:none; opacity:1; animation:none; } .rit--nails .btn { background:#1c1410; border-color:#1c1410; color:#f4ecdc; } .rit--nails .btn:hover { background:#f4ecdc; color:#1c1410; } .rit-sauna .btn { z-index:3; background:rgba(60,31,19,.0); } .rit-sauna .btn:hover { background:#ffd9a3; color:#4a2412; } .rit-sauna__t { z-index:3; } .rit-light__dim { align-items:start; padding-top:18%; } .rit-light__lit { align-items:end; padding-bottom:20%; } /* ===== v1.3.3 — juice bar page ===== */ .juice-page { background:#14110e; color:#f4ecdc; } .juice-page .jb-hero { position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem; min-height:92vh; padding:calc(var(--header-h) + 3rem) clamp(1.5rem,6vw,6rem) 4rem; overflow:hidden; --jc:#6f9d4a; background:radial-gradient(circle at 78% 55%, color-mix(in srgb,var(--jc) 38%, #14110e) 0, #14110e 62%); transition:background 1.2s; } .jb-hero h1 { font-family:var(--font-serif); font-weight:400; font-size:clamp(3.4rem,9vw,8rem); line-height:.92; letter-spacing:-.02em; color:#f4ecdc; margin:1rem 0 1.4rem; } .jb-hero .eyebrow { color:#f4ecdc; opacity:.7; } .jb-hero__intro { max-width:46ch; font-size:1.05rem; line-height:1.65; opacity:.85; } .jb-hero__intro p { margin:0 0 1rem; } .jb-hero__flavour { margin-top:2rem; font-family:var(--font-serif); font-size:clamp(1.6rem,3vw,2.4rem); font-style:italic; color:var(--jc); transition:color 1s; } .jb-hero__flavour::before { content:"Now pouring — "; font-style:normal; font-family:var(--font-sans); font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#f4ecdc; opacity:.6; margin-right:.6rem; } .jb-hero__glass { width:min(100%,340px); margin-inline:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); position:relative; z-index:2; } .jb-hero__glass svg { width:100%; height:auto; overflow:visible; } #jbLiq { transform:translateY(0); } #jbLiq.jb-fill { animation:jbRise 3.4s cubic-bezier(.3,.7,.2,1) both; } #jbWaves { transform:translateY(32px); } #jbWaves.jb-fill { animation:jbRiseW 3.4s cubic-bezier(.3,.7,.2,1) both; } @keyframes jbRise { from { transform:translateY(0); } to { transform:translateY(-320px); } } @keyframes jbRiseW { from { transform:translateY(352px); } to { transform:translateY(32px); } } .jb-wave { animation:jbWave 3s linear infinite; } @keyframes jbWave { to { transform:translateX(-120px); } } .jb-bub { animation:jbBub 4s linear infinite; animation-delay:var(--dl); opacity:0; } @keyframes jbBub { from { transform:translateY(0); opacity:0; } 15% { opacity:.8; } to { transform:translateY(-230px); opacity:0; } } .jb-orb { position:absolute; border-radius:50%; background:var(--jc); opacity:.8; transition:background 1.2s; animation:jbFloat 7s ease-in-out infinite; } @keyframes jbFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(calc(var(--d)*.25px)); } } .jb-menu { padding:4rem clamp(1.5rem,6vw,6rem) 7rem; max-width:1500px; margin:0 auto; } .jb-filters { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3rem; } .jb-pill { background:transparent; color:#f4ecdc; border:1px solid rgba(244,236,214,.35); border-radius:999px; padding:.65rem 1.3rem; font:inherit; font-size:.82rem; letter-spacing:.06em; cursor:pointer; transition:background .3s,color .3s; } .jb-pill:hover { border-color:#f4ecdc; } .jb-pill.is-on { background:#f4ecdc; color:#14110e; } .jb-sec { margin-bottom:4.5rem; } .jb-sec[hidden] { display:none; } .jb-sec__title { font-family:var(--font-serif); font-weight:400; font-size:clamp(2rem,4vw,3.2rem); color:#f4ecdc; margin:0 0 1.8rem; display:flex; align-items:baseline; gap:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(244,236,214,.18); } .jb-sec__title span { font-family:var(--font-sans); font-size:.7rem; font-weight:700; letter-spacing:.24em; opacity:.5; } .jb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem; } .jb-card { position:relative; display:flex; flex-direction:column; border:1px solid rgba(244,236,214,.14); border-radius:6px; padding:1.6rem 1.5rem 1.5rem; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,color-mix(in srgb,var(--jc) 14%,#1b1814) 0,#17140f 70%); transition:transform .5s var(--v13-ease), border-color .4s; } .jb-card::before { content:""; position:absolute; inset:auto -20% -60% -20%; height:90%; background:radial-gradient(ellipse at 50% 100%,var(--jc),transparent 65%); opacity:.22; z-index:-1; transition:opacity .5s; } .jb-card:hover { transform:translateY(-6px); border-color:var(--jc); } .jb-card:hover::before { opacity:.5; } .jb-card__art { height:170px; display:grid; place-items:center; margin-bottom:1.1rem; } .jb-cup { height:100%; width:auto; overflow:visible; } .jb-cup__liq { transform-origin:50% 100%; transform:translateY(34px); transition:transform .8s var(--v13-ease); } .jb-card:hover .jb-cup__liq { transform:translateY(0); } .jb-card__img { width:100%; height:100%; border-radius:4px; overflow:hidden; } .jb-card__img img { width:100%; height:100%; object-fit:cover; } .jb-card h3 { font-family:var(--font-serif); font-weight:400; font-size:1.7rem; line-height:1.05; margin:0 0 .5rem; color:#f4ecdc; } .jb-card p { font-size:.88rem; line-height:1.55; opacity:.72; margin:0; } .jb-card__price { margin-top:1.1rem; align-self:flex-start; font-size:.8rem; font-weight:700; letter-spacing:.14em; padding:.4rem .9rem; border-radius:999px; background:var(--jc); color:#14110e; } @media (max-width:860px){ .juice-page .jb-hero { grid-template-columns:1fr; min-height:auto; } .jb-hero__glass { width:min(70%,260px); } } /* ===== v1.3.3 — booking page ===== */ .book-page .bk { display:grid; grid-template-columns:minmax(260px,.8fr) 1.3fr; gap:clamp(1.5rem,4vw,4rem); max-width:1240px; margin:0 auto; padding:2rem clamp(1.5rem,5vw,3rem) 7rem; align-items:start; } .bk__aside { position:sticky; top:calc(var(--header-h) + 24px); background:#16110d; color:#f4ecdc; padding:clamp(1.6rem,3vw,2.6rem); border-radius:6px; overflow:hidden; isolation:isolate; } .bk__aside::before { content:""; position:absolute; inset:-30% -30% auto auto; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(194,101,63,.55),transparent 65%); z-index:-1; animation:bkGlow 9s ease-in-out infinite; } @keyframes bkGlow { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-12%,10%) scale(1.15); } } .bk__lede { font-family:var(--font-serif); font-size:clamp(2rem,3.4vw,3rem); line-height:1; margin:0 0 1rem; } .bk__intro { font-size:.95rem; opacity:.8; line-height:1.6; margin-bottom:1.4rem; } .bk__intro p { margin:0 0 .8rem; } .bk__steps { list-style:none; margin:1.4rem 0 1.8rem; padding:0; display:grid; gap:.9rem; } .bk__steps li { display:flex; align-items:center; gap:.9rem; font-size:.92rem; opacity:.65; transition:opacity .4s; } .bk__steps li b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid rgba(244,236,214,.5); font-size:.78rem; transition:background .4s,color .4s,border-color .4s,transform .4s; flex:none; } .bk__steps li.is-done { opacity:1; } .bk__steps li.is-done b { background:#e3a74a; border-color:#e3a74a; color:#16110d; transform:scale(1.1); } .bk__steps li.is-done b::before { content:"✓"; } .bk__steps li.is-done b { font-size:0; } .bk__steps li.is-done b::before { font-size:.85rem; font-weight:700; } .bk__facts { border-top:1px solid rgba(244,236,214,.18); padding-top:1.2rem; font-size:.85rem; line-height:1.55; opacity:.8; } .bk__facts p { margin:0 0 .8rem; } .bk__facts strong { font-family:var(--font-serif); font-weight:400; font-size:1.2rem; } .book-page .booking-inline-wrap { max-width:none; margin:0; overflow:hidden; padding-top:clamp(2rem,4vw,3.4rem); } .bk__bar { position:absolute; left:0; right:0; top:0; height:4px; background:rgba(0,0,0,.08); } .bk__bar i { display:block; height:100%; background:linear-gradient(90deg,#b8603a,#e3a74a); transform-origin:0 50%; transform:scaleX(0); transition:transform .6s var(--v13-ease); } .book-page .time-slot { border-radius:999px; transition:background .25s,color .25s,transform .25s,border-color .25s; } .book-page .time-slot:hover { transform:translateY(-2px); border-color:var(--c-text); } .book-page .time-slot.is-selected { background:#1c1410; color:#f4ecdc; border-color:#1c1410; transform:scale(1.06); } .book-page .pill-btn { border-radius:999px; transition:all .25s; } .book-page .pill-btn.is-selected { transform:scale(1.04); } .booking-form__submit.is-ready { animation:bkReady 1.8s ease-in-out infinite; } @keyframes bkReady { 0%,100% { box-shadow:0 0 0 0 rgba(184,96,58,.5); } 50% { box-shadow:0 0 0 14px rgba(184,96,58,0); } } @media (max-width:900px){ .book-page .bk { grid-template-columns:1fr; } .bk__aside { position:relative; top:0; } } @media (prefers-reduced-motion:reduce){ .booking-form__submit.is-ready, .bk__aside::before, .jb-orb { animation:none; } } main.juice-page.site-main { background:#14110e !important; color:#f4ecdc; } .jb-cup { width:104px !important; height:170px !important; flex:none; } .jb-card__art { height:190px; overflow:visible; padding-top:14px; } .jb-card__body { position:relative; z-index:1; } /* ===== v1.3.4 — real photography ===== */ body:not(.has-bg-video) .hero { background: linear-gradient(100deg,rgba(14,11,9,.88) 0%,rgba(14,11,9,.62) 45%,rgba(14,11,9,.25) 100%), var(--v13-hero-photo) center/cover no-repeat, #14110e; } .v13-win__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,12,10,.6),rgba(10,12,10,.15) 55%); } .v13-gal { background:#14110e; color:#f4ecdc; padding:clamp(4rem,10vw,8rem) 0 clamp(4rem,9vw,7rem); } .v13-gal__head { padding:0 clamp(1.5rem,6vw,6rem); margin-bottom:2.4rem; } .v13-gal__head h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.2rem,5vw,4.4rem); line-height:1; margin:.8rem 0 0; color:#f4ecdc; max-width:16ch; } .v13-gal .eyebrow { color:#f4ecdc; opacity:.7; } .v13-gal__track { display:flex; align-items:flex-end; gap:clamp(12px,1.6vw,22px); overflow-x:auto; padding:0 clamp(1.5rem,6vw,6rem) 1.4rem; scroll-snap-type:x proximity; cursor:grab; scrollbar-width:thin; scrollbar-color:rgba(244,236,214,.35) transparent; } .v13-gal__track.is-drag { cursor:grabbing; scroll-snap-type:none; } .v13-gal figure { position:relative; flex:none; margin:0; width:min(var(--w),82vw); height:var(--h); border-radius:4px; overflow:hidden; scroll-snap-align:start; } .v13-gal img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--v13-ease); user-select:none; } .v13-gal figure:hover img { transform:scale(1.06); } .v13-gal figcaption { position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1rem .9rem; font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#f4ecdc; background:linear-gradient(to top,rgba(10,8,6,.75),transparent); } @media (max-width:700px){ .v13-gal figure { height:calc(var(--h)*.72); } } /* ===== v1.3.5 — tone morph must work WITH the background video on ===== With a site video set, is transparent (the video sits behind it), so the tone colours were invisible and the homepage looked static. After the hero, every homepage block now paints its own tone colour (which still eases between tones as you scroll); the video stays in the hero. */ body.has-bg-video .front-page > *:not(.hero):not(script):not(style) { background-color:var(--c-cream); transition:background-color .9s ease, color .9s ease; } body.has-bg-video .v13-statement { background-color:var(--c-cream); } body.has-bg-video .front-page > .v13-rit, body.has-bg-video .front-page > .v13-gal { background-color:#14110e; } body.has-bg-video .front-page > .cta-band { background-color:var(--c-cream); } /* the glass frosting on cards inside the toned sections: calm it so tones read */ body.lumoni-clear-glass.has-bg-video .front-page .staff-spotlight__slide { background:var(--c-card) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; border:1px solid var(--c-line) !important; } body.lumoni-clear-glass.has-bg-video .front-page .staff-spotlight__slide, body.lumoni-clear-glass.has-bg-video .front-page .trust-point p { color:var(--c-text) !important; } /* ===== header follows the tone in video mode too ===== */ body.has-bg-video .site-header, body.has-bg-video .site-header:not(.is-scrolled) { background:color-mix(in srgb,var(--c-cream) 92%,transparent) !important; border-bottom:1px solid var(--c-line) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } body.has-bg-video .site-header:not(.is-scrolled) .nav-toggle__bar, body.has-bg-video .site-header .nav-toggle__bar { background:var(--c-text) !important; } body.has-bg-video .site-header:not(.is-scrolled) .site-header__book { color:var(--c-text) !important; border-color:currentColor !important; background:transparent !important; } body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn { color:var(--c-text-light); } body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn.is-active, body.has-bg-video .site-header:not(.is-scrolled) .currency-toggle__btn[aria-pressed="true"] { color:var(--c-cream) !important; background:var(--c-text) !important; } /* open menu: transparent header, white bars */ body.v13-menu-open.has-bg-video .site-header, body.v13-menu-open.has-bg-video .site-header:not(.is-scrolled) { background:transparent !important; border-bottom-color:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none; } body.v13-menu-open .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background:#fff !important; } body.v13-menu-open .nav-toggle::before { color:#fff; } body.v13-menu-open .site-header__book { opacity:0; pointer-events:none; } /* ===== v1.3.6 — glass backdrop (like the Pillars section) for gallery, ritual scenes and footer, video mode only ===== The site video shows through a soft tinted blur instead of flat solid blocks. */ body.has-bg-video .front-page > .v13-rit, body.has-bg-video .front-page > .v13-gal { background:transparent !important; } body.has-bg-video .v13-gal, body.has-bg-video .rit { -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); } body.has-bg-video .v13-gal { background:rgba(20,17,14,.52) !important; } body.has-bg-video .rit--stone { background:rgba(21,23,26,.55) !important; } body.has-bg-video .rit--glow { background:rgba(169,183,156,.58) !important; } body.has-bg-video .rit--sauna { background:rgba(74,37,20,.58) !important; } body.has-bg-video .rit--nails { background:rgba(184,96,58,.55) !important; } body.has-bg-video .rit--juice { background:rgba(20,17,14,.55) !important; } body.lumoni-clear-glass.has-bg-video .site-footer { background:rgba(15,14,12,.62) !important; -webkit-backdrop-filter:blur(18px) saturate(1.1) !important; backdrop-filter:blur(18px) saturate(1.1) !important; } /* ===== v1.3.6 — second gallery row (food + treatments) ===== */ .v13-gal--b { padding-top:clamp(2rem,5vw,4rem); } body.has-bg-video .v13-gal--b { background:rgba(26,18,22,.52) !important; } /* ===== v1.3.7 — inner-page photo band (Nail Studio, Wellness) ===== */ .v13-ph { padding:0 clamp(1.5rem,6vw,6rem); margin:2rem auto 3rem; max-width:1400px; } .v13-ph__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,22px); align-items:end; } .v13-ph figure { position:relative; margin:0; border-radius:6px; overflow:hidden; aspect-ratio:3/4; background:#14110e; } .v13-ph figure:nth-child(2) { aspect-ratio:3/3.6; } .v13-ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--v13-ease,ease); } .v13-ph figure:hover img { transform:scale(1.05); } .v13-ph figcaption { position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem .9rem; font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#f4ecdc; background:linear-gradient(to top,rgba(10,8,6,.75),transparent); } @media (max-width:700px){ .v13-ph__grid { grid-template-columns:1fr 1fr; } .v13-ph figure:nth-child(3) { grid-column:1/-1; aspect-ratio:4/3; } } /* ===== v1.4.0 — the hand: alive, not robotic ===== */ .rit-hand .fg { animation:ritFingerSway 5.2s ease-in-out infinite alternate; will-change:transform; } .rit-hand .rh { animation:ritHandBreath 6.4s ease-in-out infinite alternate; transform-origin:50% 100%; } @keyframes ritFingerSway { from { transform:rotate(-1.8deg); } to { transform:rotate(2deg); } } @keyframes ritHandBreath { from { transform:translateY(0) scale(1); } to { transform:translateY(-5px) scale(1.008); } } .rit-hand .rh.wave .fg { animation:ritFingerWave 1s ease-in-out; } @keyframes ritFingerWave { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-6deg); } 60% { transform:rotate(5deg); } } .rit-hand svg { transition:none; } @media (prefers-reduced-motion:reduce){ .rit-hand .fg, .rit-hand .rh { animation:none; } } /* ===== v1.4.0 — light that hovers on buttons ===== */ .btn, .filter-btn, .nail-pills button, .booking-form__submit { position:relative; overflow:hidden; isolation:isolate; } .btn::after, .filter-btn::after, .nail-pills button::after, .booking-form__submit::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(255,226,170,.75), rgba(255,200,120,.18) 55%, transparent 72%); } .btn:hover::after, .filter-btn:hover::after, .nail-pills button:hover::after, .booking-form__submit:hover::after { opacity:1; } .btn:hover, .booking-form__submit:hover { box-shadow:0 0 28px -6px rgba(255,200,120,.55); } /* ghost buttons on light backgrounds glow clay instead of cream */ body:not([data-tone="night"]):not([data-tone="dusk"]) .btn:not(.btn--dark):not(.btn--gold)::after, .filter-btn::after, .nail-pills button::after { background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(194,101,63,.42), rgba(194,101,63,.1) 55%, transparent 72%); } .rit .btn::after, .jb-hero .btn::after, .v13-svc .btn::after { background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(255,226,170,.7), rgba(255,200,120,.16) 55%, transparent 72%); } /* ===== v1.4.0 — inner pages: photo hero, glass filters, spotlight cards ===== */ .generic-page > .page-header, .generic-page .page-header:first-child { position:relative; margin:0 0 clamp(2rem,5vw,4rem); padding-bottom:clamp(3rem,7vw,5.5rem); background:linear-gradient(to top,rgba(14,11,9,.88),rgba(14,11,9,.45) 60%,rgba(14,11,9,.6)), var(--v13-page-hero, none) center/cover no-repeat, #14110e; color:#f4ecdc; overflow:hidden; } .generic-page .page-header h1, .generic-page .page-header .eyebrow { color:#f4ecdc; } .generic-page .page-header .eyebrow { opacity:.75; } .generic-page .page-header__inner { padding-left:clamp(1.5rem,6vw,6rem); padding-right:clamp(1.5rem,6vw,6rem); } .generic-page .page-header__inner::after { background:linear-gradient(90deg,#f4ecdc,transparent 70%); opacity:.4; } .generic-page .page-header::after { content:""; position:absolute; inset:auto 0 0 0; height:90px; background:linear-gradient(to top,var(--c-cream),transparent); pointer-events:none; opacity:.0; } .service-filter { position:sticky; top:calc(var(--header-h,72px) + 8px); z-index:20; padding:.6rem; margin-bottom:2.2rem; border-radius:999px; width:max-content; max-width:100%; overflow-x:auto; background:color-mix(in srgb,var(--c-cream) 82%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--c-line); } .filter-btn { border-radius:999px !important; padding:.65rem 1.25rem !important; } .service-list { display:grid; gap:clamp(14px,2vw,24px); } .service-item { position:relative; overflow:hidden; padding:clamp(1.2rem,2.4vw,2rem) !important; border:1px solid var(--c-line) !important; border-radius:14px; background:color-mix(in srgb,var(--c-card) 82%,transparent); transition:transform .5s var(--v13-ease,ease), box-shadow .5s, border-color .4s; } .service-item::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,214,150,.30), transparent 60%); } .service-item:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--clay,#c2653f) 55%,transparent) !important; box-shadow:0 24px 50px -28px rgba(0,0,0,.45); } .service-item:hover::before { opacity:1; } .service-item__row { position:relative; } .service-item__index { font-family:var(--font-serif); font-size:clamp(2rem,4vw,3.2rem) !important; font-weight:400; opacity:.28; line-height:1; } .service-item__media { border-radius:10px; overflow:hidden; } .service-item__media img { transition:transform 1.1s var(--v13-ease,ease); } .service-item:hover .service-item__media img { transform:scale(1.08); } .service-item__title { font-size:clamp(1.5rem,2.4vw,2.1rem) !important; font-weight:400 !important; } .service-item__price { display:inline-block; padding:.2rem .7rem; border-radius:999px; border:1px solid var(--c-line); } .staff-card, .product-card, .package-card { position:relative; overflow:hidden; border-radius:14px; } .staff-card::before, .product-card::before, .package-card::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,214,150,.28), transparent 60%); } .staff-card:hover::before, .product-card:hover::before, .package-card:hover::before { opacity:1; } body.has-bg-video .generic-page > .page-header { margin-top:0; } .generic-page__inner--intro:has(> .rich-content:empty), .generic-page__inner--intro:has(.rich-content:empty):not(:has(.rich-content:not(:empty))) { display:none; } /* ===== v1.4.1 — preloader sits ABOVE the local/international gate (was drawn through it) ===== */ html.lumoni-anim .lumoni-loader { z-index:300 !important; } /* ===== v1.4.1 — homepage treatment menu ===== */ .v13-menu { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); padding:clamp(4rem,10vw,8rem) clamp(1.5rem,6vw,6rem); color:var(--c-text); align-items:start; } .v13-menu__side { position:sticky; top:calc(var(--header-h,72px) + 24px); } .v13-menu h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.6rem,6vw,5.4rem); line-height:.95; letter-spacing:-.02em; margin:.8rem 0 1.6rem; } .v13-menu h2 em { color:var(--clay,#c2653f); font-style:italic; } .v13-menu__pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; } .v13-menu__pills button { font:inherit; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:.65rem 1.1rem; border-radius:999px; border:1px solid var(--c-line); background:transparent; color:var(--c-text); cursor:pointer; transition:background .3s,color .3s,border-color .3s; } .v13-menu__pills button:hover { border-color:var(--c-text); } .v13-menu__pills button.is-on { background:var(--c-text); color:var(--c-cream); border-color:var(--c-text); } .v13-menu__info { display:grid; gap:1rem; padding-top:1.6rem; border-top:1px solid var(--c-line); max-width:30rem; } .v13-menu__info span { display:block; font-size:.64rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; opacity:.6; margin-bottom:.2rem; } .v13-menu__info b { font-weight:500; font-size:.95rem; line-height:1.45; } .v13-menu__info .btn { justify-self:start; margin-top:.4rem; } .v13-menu__list { list-style:none; margin:0; padding:0; } .v13-menu__list li[hidden] { display:none; } .v13-menu__list li { border-bottom:1px dotted var(--c-line); } .v13-menu__list a { display:grid; grid-template-columns:1fr auto auto 1.4rem; gap:1rem; align-items:baseline; padding:1.15rem .4rem; color:inherit; text-decoration:none; position:relative; transition:padding .35s var(--v13-ease,ease), background .35s; } .v13-menu__list a:hover { padding-left:1.1rem; background:color-mix(in srgb,var(--clay,#c2653f) 10%,transparent); } .mn-t { font-family:var(--font-serif); font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.1; } .mn-d { font-size:.74rem; letter-spacing:.08em; opacity:.65; white-space:nowrap; } .mn-p { font-weight:700; font-size:.95rem; white-space:nowrap; } .mn-go { opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; color:var(--clay,#c2653f); } .v13-menu__list a:hover .mn-go { opacity:1; transform:none; } @media (max-width:860px){ .v13-menu { grid-template-columns:1fr; } .v13-menu__side { position:static; } .v13-menu__list a { grid-template-columns:1fr auto; } .mn-d { grid-column:1; } .mn-go { display:none; } } /* ===== v1.4.2 — preloader: ~6s photo slideshow behind the logo ===== */ .lumoni-loader__bg { position:absolute; inset:0; overflow:hidden; background:#0b0c0e; z-index:0; } .lumoni-loader__bg i { position:absolute; inset:-3%; background-size:cover; background-position:center; opacity:0; transform:scale(1.06); animation:lmFade .75s ease-out forwards, lmKen 6.4s linear forwards; animation-delay:calc(var(--k) * 1.25s), calc(var(--k) * 1.25s); will-change:opacity,transform; } .lumoni-loader__bg i.is-barber { background-position:50% 84%; } .lumoni-loader__bg::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 46%,rgba(8,8,10,.30),rgba(8,8,10,.78) 78%), linear-gradient(to top,rgba(8,8,10,.8),transparent 38%), linear-gradient(to bottom,rgba(8,8,10,.55),transparent 28%); } @keyframes lmFade { to { opacity:1; } } @keyframes lmKen { from { transform:scale(1.06) translate3d(0,0,0); } to { transform:scale(1.2) translate3d(-1.2%,-1%,0); } } .lumoni-loader__inner, .lumoni-loader__bar, .lumoni-loader__tagline, .lumoni-loader__skip { position:relative; z-index:3; } .lumoni-loader__bar, .lumoni-loader__tagline { position:absolute; } .lumoni-loader__mark { box-shadow:0 0 0 1px rgba(255,255,255,.25),0 24px 70px rgba(0,0,0,.6); } .lumoni-loader__word { text-shadow:0 2px 24px rgba(0,0,0,.6); } .lumoni-loader__bar { height:3px; background:rgba(255,255,255,.2); } .lumoni-loader__bar-fill { background:linear-gradient(90deg,#e3a74a,#fff); } .lumoni-loader__skip { position:absolute; right:clamp(16px,3vw,36px); bottom:clamp(22px,4vh,40px); font:700 .66rem/1 var(--font-sans); letter-spacing:.24em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.75rem 1.2rem; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .3s; } .lumoni-loader__skip:hover { background:rgba(255,255,255,.28); } @media (max-aspect-ratio:3/4){ .lumoni-loader__bg i.is-barber { background-size:auto 240%; background-position:50% 100%; } } @media (prefers-reduced-motion:reduce){ .lumoni-loader__bg i { animation:none; opacity:0; } .lumoni-loader__bg i:first-child { opacity:1; } } /* ===== v1.4.3 — Book Now, stunning ===== */ .book-page { position:relative; } .book-page .page-header { padding-bottom:clamp(5rem,9vw,8rem); } .book-page .bk { position:relative; margin-top:calc(clamp(3.5rem,7vw,6rem) * -1); z-index:3; align-items:stretch; gap:clamp(1rem,2.4vw,2rem); } .book-page .bk::before { content:""; position:absolute; z-index:-1; width:42vw; max-width:520px; aspect-ratio:1; right:-6%; top:12%; border-radius:50%; background:radial-gradient(circle,rgba(227,167,74,.35),transparent 66%); filter:blur(30px); animation:bkDrift 14s ease-in-out infinite alternate; pointer-events:none; } @keyframes bkDrift { to { transform:translate(-8%,18%) scale(1.15); } } .book-page .bk__aside { padding:0; border-radius:22px; display:flex; flex-direction:column; box-shadow:0 30px 70px -28px rgba(0,0,0,.7); border:1px solid rgba(244,236,214,.12); animation:bkIn .9s var(--v13-ease) both; } .bk__photo { position:relative; height:clamp(170px,22vw,240px); background-size:cover; background-position:center 60%; flex:none; } .bk__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,17,13,0) 35%,#16110d 100%); } .bk__photo span { position:absolute; left:1.4rem; top:1.2rem; z-index:2; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; padding:.45rem .85rem; border-radius:999px; background:rgba(22,17,13,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(244,236,214,.25); } .book-page .bk__aside > *:not(.bk__photo) { margin-left:clamp(1.4rem,2.6vw,2.2rem); margin-right:clamp(1.4rem,2.6vw,2.2rem); } .book-page .bk__lede { margin-top:-.4rem; } .book-page .bk__facts { margin-bottom:0; } .bk__steps li { position:relative; padding:.55rem .8rem .55rem .55rem; border-radius:14px; background:rgba(244,236,214,.05); border:1px solid rgba(244,236,214,.08); transition:opacity .4s,background .4s,transform .4s; } .bk__steps li:hover { background:rgba(244,236,214,.1); transform:translateX(4px); opacity:1; } .bk__steps li.is-done { background:rgba(227,167,74,.14); border-color:rgba(227,167,74,.4); } .bk__next { list-style:none; display:grid; gap:.5rem; margin-top:1.2rem !important; margin-bottom:clamp(1.4rem,2.6vw,2.2rem) !important; padding:1.1rem 0 0; border-top:1px solid rgba(244,236,214,.18); font-size:.8rem; letter-spacing:.04em; opacity:.9; } .bk__next li { display:flex; align-items:center; gap:.7rem; } .bk__next i { width:7px; height:7px; border-radius:50%; background:#e3a74a; box-shadow:0 0 0 0 rgba(227,167,74,.6); animation:bkReady 2.4s ease-in-out infinite; } .bk__next li:nth-child(2) i { animation-delay:.4s; } .bk__next li:nth-child(3) i { animation-delay:.8s; } .book-page .bk__main { animation:bkIn .9s .12s var(--v13-ease) both; } @keyframes bkIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } } .book-page .booking-inline-wrap { position:relative; border-radius:22px; padding:clamp(2.4rem,4.4vw,3.8rem) clamp(1.4rem,3.4vw,3rem) clamp(1.6rem,3vw,2.6rem); background:linear-gradient(160deg,rgba(255,252,246,.92),rgba(246,238,224,.86)); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); border:1px solid rgba(255,255,255,.55); box-shadow:0 40px 90px -36px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.8); color:#1c1410; --c-text:#1c1410; --c-line:rgba(28,20,16,.22); } .book-page .booking-inline-wrap::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(520px circle at var(--mx,70%) var(--my,0%),rgba(227,167,74,.2),transparent 60%); pointer-events:none; transition:opacity .3s; } .bk__bar { border-radius:22px 22px 0 0; overflow:hidden; height:5px; } .book-page .booking-form__field label { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#7a5a45; } .book-page .booking-form__field input, .book-page .booking-form__field select, .book-page .booking-form__field textarea { background:rgba(255,255,255,.7); border:1px solid rgba(28,20,16,.14); border-radius:14px; padding:.95rem 1.1rem; font-size:1rem; transition:border-color .25s,box-shadow .25s,background .25s,transform .25s; } .book-page .booking-form__field input:hover, .book-page .booking-form__field select:hover, .book-page .booking-form__field textarea:hover { background:#fff; border-color:rgba(184,96,58,.5); } .book-page .booking-form__field input:focus, .book-page .booking-form__field select:focus, .book-page .booking-form__field textarea:focus { background:#fff; border-color:#b8603a; box-shadow:0 0 0 4px rgba(184,96,58,.16),0 10px 24px -12px rgba(184,96,58,.5); outline:none; transform:translateY(-1px); } .book-page .pill-btn, .book-page .time-slot { background:rgba(255,255,255,.65); border:1px solid rgba(28,20,16,.16); padding:.7rem 1.2rem; } .book-page .pill-btn:hover, .book-page .time-slot:hover { background:#fff; border-color:#b8603a; box-shadow:0 8px 20px -10px rgba(184,96,58,.6); } .book-page .pill-btn.is-selected, .book-page .time-slot.is-selected { background:linear-gradient(135deg,#2a1d15,#1c1410); color:#f4ecdc; border-color:#1c1410; box-shadow:0 10px 24px -10px rgba(0,0,0,.6),0 0 0 3px rgba(227,167,74,.35); } .book-page .booking-form__submit { position:relative; overflow:hidden; border-radius:999px; padding:1.3rem 1.8rem; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; background:linear-gradient(135deg,#1f6b4a,#154d36); border-color:transparent; box-shadow:0 18px 36px -16px rgba(21,77,54,.9); transition:transform .3s var(--v13-ease),box-shadow .3s,background .3s; } .book-page .booking-form__submit::before { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); animation:bkShine 4.5s ease-in-out infinite; } @keyframes bkShine { 0%,55% { left:-60%; } 100% { left:130%; } } .book-page .booking-form__submit:hover { transform:translateY(-3px); background:linear-gradient(135deg,#b8603a,#e3a74a); box-shadow:0 24px 44px -16px rgba(184,96,58,.8); } @media (max-width:900px){ .book-page .bk { margin-top:-3rem; padding-left:1rem; padding-right:1rem; } .book-page .bk__main { order:-1; } .bk__photo { height:150px; } } @media (prefers-reduced-motion:reduce){ .book-page .bk::before, .book-page .booking-form__submit::before, .bk__next i { animation:none; } .book-page .bk__aside, .book-page .bk__main { animation:none; } } /* v1.4.3b — beat the underline-field !important rules inside the booking card */ .book-page { overflow-x:clip; } body.book-page-body, .book-page .bk { max-width:min(1240px,100%); } .book-page .booking-form__field input, .book-page .booking-form__field select, .book-page .booking-form__field textarea { background-color:rgba(255,255,255,.72) !important; border:1px solid rgba(28,20,16,.14) !important; border-radius:14px !important; padding:.95rem 1.1rem !important; font-size:1.15rem; } .book-page .booking-form__field select { padding-right:2.4rem !important; background-position:right 1rem center !important; } .book-page .booking-form__field input:hover, .book-page .booking-form__field select:hover, .book-page .booking-form__field textarea:hover { background-color:#fff !important; border-color:rgba(184,96,58,.55) !important; } .book-page .booking-form__field input:focus, .book-page .booking-form__field select:focus, .book-page .booking-form__field textarea:focus { background-color:#fff !important; border-color:#b8603a !important; box-shadow:0 0 0 4px rgba(184,96,58,.16),0 10px 24px -12px rgba(184,96,58,.5) !important; } .book-page .booking-form__field input.is-invalid, .book-page .booking-form__field select.is-invalid { border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.15) !important; } .book-page .booking-form__field--full textarea { min-height:110px; } @media (max-width:900px){ .book-page .bk::before { right:0; } } /* ===== v1.4.4 — mobile fixes ===== */ /* filter bars: wrapped pills no longer become a giant ellipse */ .service-filter { display:flex; flex-wrap:wrap; gap:.5rem; border-radius:26px; width:auto; max-width:100%; justify-content:flex-start; overflow:visible; } .service-filter .filter-btn { flex:none; } @media (max-width:760px){ /* one swipeable row — compact, clean, nothing clipped */ .service-filter { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; width:auto; border-radius:999px; padding:.45rem; gap:.4rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; mask-image:linear-gradient(90deg,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); } .service-filter::-webkit-scrollbar { display:none; } .service-filter .filter-btn { scroll-snap-align:start; padding:.55rem 1rem !important; font-size:.7rem !important; white-space:nowrap; } /* experiences has many filters: two swipe rows */ .page-template-page-experiences .service-filter, .service-filter--rows { flex-wrap:wrap; overflow:visible; border-radius:22px; mask-image:none; -webkit-mask-image:none; } } /* header "Menu" word stays readable on the light header in every tone */ body .site-header .nav-toggle::before { color:#1c1410; } body .site-header .nav-toggle[aria-expanded="true"]::before { color:#fff; } /* service thumbnails: soft placeholder while loading / if an image fails */ .service-item__media { background:linear-gradient(135deg,rgba(184,96,58,.28),rgba(227,167,74,.2)); } .service-item__media img[data-broken] { display:none; } @media (max-width:760px){ .book-page .booking-form__submit { padding:1.15rem 1.2rem; letter-spacing:.16em; } } @media (max-width:760px){ .page-template-page-experiences .service-filter, .service-filter--rows { position:static; } } /* ===== v1.4.6 — buttons: hover, touch and idle animation everywhere ===== */ .btn, .filter-btn, .pill-btn, .time-slot, .nail-pills button, .booking-form__submit, .service-item__details, .v13-menu__go { transition:transform .35s var(--v13-ease,cubic-bezier(.2,.8,.2,1)), box-shadow .35s, background-color .3s, color .3s, border-color .3s; -webkit-tap-highlight-color:transparent; will-change:transform; } .btn { position:relative; overflow:hidden; isolation:isolate; } /* light sweep */ .btn::before, .booking-form__submit::before, .filter-btn::before { content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; z-index:-1; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-22deg); opacity:0; } .btn:hover::before, .btn:focus-visible::before, .btn.is-pressed::before, .filter-btn:hover::before, .booking-form__submit:hover::before { opacity:1; animation:lxSweep .85s var(--v13-ease,ease) both; } @keyframes lxSweep { from { left:-70%; } to { left:135%; } } @media (hover:hover){ .btn:hover, .booking-form__submit:hover, .filter-btn:hover, .nail-pills button:hover { transform:translateY(-3px); box-shadow:0 16px 30px -12px rgba(184,96,58,.65), 0 0 0 1px rgba(227,167,74,.35); } } .btn:active, .filter-btn:active, .pill-btn:active, .time-slot:active, .booking-form__submit:active, .nail-pills button:active { transform:scale(.96) !important; transition-duration:.12s; } .btn:focus-visible, .filter-btn:focus-visible, .pill-btn:focus-visible, .time-slot:focus-visible { outline:2px solid #e3a74a; outline-offset:3px; } /* arrow / icon nudge */ .btn svg, .btn .arrow { transition:transform .35s var(--v13-ease,ease); } .btn:hover svg, .btn:hover .arrow { transform:translateX(5px); } /* touch ripple (JS adds .lx-ripple) */ .lx-ripple { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; background:rgba(255,226,170,.75); animation:lxRip .7s ease-out forwards; } .filter-btn .lx-ripple, .pill-btn .lx-ripple, .time-slot .lx-ripple { background:rgba(184,96,58,.35); } @keyframes lxRip { to { transform:scale(28); opacity:0; } } /* idle: primary CTAs glint now and then so they invite a tap */ .site-header__book::before, .service-item .btn::before, .booking-form__submit::before { animation:lxGlint 6.5s ease-in-out infinite; opacity:.9; } .service-item:nth-child(2n) .btn::before { animation-delay:1.6s; } .service-item:nth-child(3n) .btn::before { animation-delay:3.1s; } @keyframes lxGlint { 0%,70% { left:-70%; } 100% { left:135%; } } /* buttons rise in when they reveal */ [data-reveal] .btn, .reveal .btn, .service-item .btn { animation:lxBtnIn .8s var(--v13-ease,ease) backwards; } @keyframes lxBtnIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .btn::before, .booking-form__submit::before, .filter-btn::before, .lx-ripple, [data-reveal] .btn, .service-item .btn { animation:none !important; } } /* ===== v1.4.7 — Juice bar kitchen showcase ===== */ .kit { position:relative; overflow:hidden; isolation:isolate; padding:clamp(4.5rem,10vw,8.5rem) clamp(1.2rem,5vw,5rem) clamp(3.5rem,7vw,6rem); color:#f4ecdc; background:#14110e; } body.has-bg-video .kit, body.lumoni-clear-glass .kit { background:#14110e !important; } .kit--page { margin-top:-3.2rem; border-radius:38px 38px 0 0; z-index:2; } .kit__orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); pointer-events:none; } .kit__orb--a { width:46vw; max-width:620px; aspect-ratio:1; left:-10%; top:-8%; background:radial-gradient(circle,rgba(227,167,74,.34),transparent 65%); animation:kitDrift 16s ease-in-out infinite alternate; } .kit__orb--b { width:40vw; max-width:540px; aspect-ratio:1; right:-8%; bottom:4%; background:radial-gradient(circle,rgba(111,157,74,.3),transparent 65%); animation:kitDrift 20s -6s ease-in-out infinite alternate-reverse; } @keyframes kitDrift { to { transform:translate(10%,14%) scale(1.2); } } .kit__head { max-width:1240px; margin:0 auto clamp(2rem,5vw,3.6rem); } .kit .eyebrow { color:#e3a74a; letter-spacing:.24em; } .kit__h { font-family:var(--font-serif,Georgia,serif); font-weight:400; font-size:clamp(2.8rem,8vw,6.6rem); line-height:.95; margin:.6rem 0 1.2rem; color:#f4ecdc; letter-spacing:-.01em; } .kit__h em { font-style:italic; background:linear-gradient(100deg,#e3a74a,#f6d58b,#c2653f,#e3a74a); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:kitShine 7s linear infinite; } @keyframes kitShine { to { background-position:-240% 0; } } .kit__lede { max-width:56ch; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65; opacity:.82; margin:0; } .kit__grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:330px 330px 460px; gap:clamp(12px,1.6vw,22px); } .kit__card--xl { grid-column:1 / 6; grid-row:1 / 3; } .kit__card:nth-child(2) { grid-column:6 / 13; grid-row:1; } .kit__card:nth-child(3) { grid-column:6 / 13; grid-row:2; } .kit__card:nth-child(n+4) { grid-row:3; grid-column:span 3; } .kit__card:nth-child(4) { grid-column:1 / 4; } .kit__card:nth-child(5) { grid-column:4 / 7; } .kit__card:nth-child(6) { grid-column:7 / 10; } .kit__card:nth-child(7) { grid-column:10 / 13; } .kit__card { position:relative; border-radius:20px; overflow:hidden; background:#241a14; box-shadow:0 30px 60px -34px rgba(0,0,0,.9); transform-style:preserve-3d; } .kit__img, .kit__img img { position:absolute; inset:0; width:100%; height:100%; } .kit__img { overflow:hidden; } .kit__img img { object-fit:cover; object-position:var(--pos,50% 50%); transform:translate3d(0,var(--py,0px),0) scale(1.16); transition:transform 1.1s var(--v13-ease,cubic-bezier(.2,.8,.2,1)), filter .6s; filter:saturate(1.06) contrast(1.03); will-change:transform; } .kit__card::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,226,170,.22),transparent 60%); opacity:0; transition:opacity .4s; } .kit__card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(20,14,10,0) 30%,rgba(20,14,10,.55) 62%,rgba(20,14,10,.95) 100%); transition:background .5s; } .kit__num { position:absolute; z-index:3; left:1.1rem; top:.8rem; font-family:var(--font-serif,Georgia,serif); font-size:2.6rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(244,236,214,.7); opacity:.9; transition:transform .6s var(--v13-ease,ease), -webkit-text-stroke-color .4s; } .kit__body { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(1rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.5rem; } .kit__tag { align-self:flex-start; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; padding:.38rem .75rem; border-radius:999px; background:rgba(244,236,214,.14); border:1px solid rgba(244,236,214,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .kit__body h3 { margin:0; font-family:var(--font-serif,Georgia,serif); font-weight:400; font-size:clamp(1.35rem,2.1vw,2rem); line-height:1.05; color:#f4ecdc; } .kit__card--xl .kit__body h3 { font-size:clamp(1.8rem,3.2vw,3rem); } .kit__body p { margin:0; font-size:.9rem; line-height:1.55; opacity:.85; max-width:46ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .kit__row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; margin-top:.35rem; } .kit__price { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#e3a74a; } .kit__wa { display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1.05rem; border-radius:999px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; text-decoration:none; color:#fff; background:linear-gradient(135deg,#2bd26b,#128c4a); box-shadow:0 12px 24px -12px rgba(18,140,74,.9); transition:transform .3s var(--v13-ease,ease), box-shadow .3s; position:relative; overflow:hidden; } .kit__wa:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 18px 30px -12px rgba(18,140,74,1); } .kit__wa::before { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation:lxGlint 5.5s ease-in-out infinite; } .kit__foot { max-width:1240px; margin:2.2rem auto 0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; } @media (hover:hover){ .kit__card:hover { box-shadow:0 0 0 1px rgba(227,167,74,.6), 0 40px 70px -26px rgba(227,167,74,.35); } .kit__card:hover::before { opacity:1; } .kit__card:hover .kit__img img { transform:translate3d(0,var(--py,0px),0) scale(1.26); filter:saturate(1.15) contrast(1.05); } .kit__card:hover .kit__num { transform:translateY(-4px); -webkit-text-stroke-color:#e3a74a; } .kit__card:hover::after { background:linear-gradient(180deg,rgba(20,14,10,.05) 20%,rgba(20,14,10,.7) 55%,rgba(20,14,10,.97) 100%); } .kit__body p { max-height:0; opacity:0; transition:max-height .6s var(--v13-ease,ease), opacity .5s; } .kit__card:hover .kit__body p, .kit__card--xl .kit__body p { max-height:6em; opacity:.88; } } /* scroll reveal: clip-path unveil, staggered. Only when JS has armed the section */ .kit.is-ready .kit__card { clip-path:inset(14% 10% 14% 10% round 28px); opacity:0; transform:translateY(46px) scale(.95); } .kit.is-ready .kit__card.is-in { clip-path:inset(0 round 20px); opacity:1; transform:none; transition:clip-path 1.1s var(--v13-ease,cubic-bezier(.2,.8,.2,1)) calc(var(--i) * 110ms), opacity .8s calc(var(--i) * 110ms), transform 1.1s var(--v13-ease,cubic-bezier(.2,.8,.2,1)) calc(var(--i) * 110ms); } .kit.is-ready .kit__card.is-in.is-done { transition:transform .25s ease-out, box-shadow .4s; transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); } .kit.is-ready .kit__card.is-in .kit__img img { animation:kitZoom 1.8s var(--v13-ease,ease) both; animation-delay:calc(var(--i) * 110ms); } @keyframes kitZoom { from { scale:1.25; } to { scale:1; } } /* tablet */ @media (max-width:1000px){ .kit__grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:380px; } .kit__card, .kit__card:nth-child(n) { grid-column:auto !important; grid-row:auto !important; } .kit__card--xl { grid-column:1 / -1 !important; grid-row:span 2 !important; } .kit__body p { max-height:none !important; opacity:.85 !important; } } /* phones: swipeable cards */ @media (max-width:640px){ .kit { padding-left:0; padding-right:0; } .kit__head, .kit__foot { padding:0 1.3rem; } .kit__grid { display:flex; gap:12px; overflow-x:auto; padding:.4rem 1.3rem 1.4rem; grid-template-columns:none; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .kit__grid::-webkit-scrollbar { display:none; } .kit__card, .kit__card--xl { flex:none; width:80vw; max-width:340px; height:480px; scroll-snap-align:center; grid-column:auto !important; grid-row:auto !important; } .kit__body p { -webkit-line-clamp:3; font-size:.84rem; } .kit.is-ready .kit__card.is-in.is-done { transform:none; } .kit--page { margin-top:-2rem; border-radius:28px 28px 0 0; } } @media (prefers-reduced-motion:reduce){ .kit__orb, .kit__h em, .kit__wa::before, .kit.is-ready .kit__card.is-in .kit__img img { animation:none; } .kit.is-ready .kit__card { clip-path:none; opacity:1; transform:none; } }