/* ========================================================================== Mother Powers — Spiritual Healer & Reader Design system. Hand-built, no frameworks. ========================================================================== */ /* ---------- Tokens ---------- */ :root{ /* Deep amethyst dark — violet-black, never neutral grey */ --ink: #130c26; --ink-2: #1a1133; --plum: #241740; --plum-2: #2d1d4f; --velvet: #3a2764; --velvet-lt: #4a3480; /* Accent is moonlight, not metal: pale luminous parchment-cream */ --halo: #f0eda9; --halo-soft: #e3dfa0; --halo-dim: #b9b477; --halo-deep: #6f6b45; /* The mystic register */ --amethyst: #c9b4ff; --amethyst-2: #9d7fe4; --amethyst-3: #7457bb; --glow: rgba(160,120,240,.34); --glow-soft: rgba(160,120,240,.14); --crimson: #7d1b3a; --crimson-lt: #c85a7e; --bone: #fbf8ff; --parchment: #efe9fb; --muted: #cfc6e4; --muted-2: #a79dbe; --line: rgba(201,180,255,.34); --line-soft: rgba(201,180,255,.18); /* surfaces — every panel references these so a theme swap reaches everything */ --surf-1: rgba(74,52,128,.42); /* panel top */ --surf-2: rgba(26,17,50,.62); /* panel bottom */ --surf-solid-1: rgba(58,39,100,.97); /* dropdown, cart */ --surf-solid-2: rgba(26,17,50,.99); --scrim: rgba(16,9,32,.72); --shade-1: #241740; /* drawer / phero top */ --shade-2: #160e2b; /* drawer / phero bottom */ --ftr-bg: #100a22; --cta-1: #6f52b8; /* primary button ramp */ --cta-2: #9576dd; --cta-3: #c4aef5; --cta-ink: #170d2c; --smoke-filter: none; /* raw channels — every panel/glow is expressed through these, so one theme override repaints the entire surface family */ --surf-rgb: 58 39 100; --deep-rgb: 26 17 50; --glow-rgb: 95 67 160; --accent-rgb: 201 180 255; --shade-3: #180f30; --line-halo: rgba(240,237,169,.22); --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --wrap: 1180px; --wrap-narrow: 760px; --r: 2px; --ease: cubic-bezier(.22,.61,.36,1); --banner-h: 0px; --nav-h: 74px; /* Back-compat aliases so older rules keep working after the palette shift */ --gold: var(--halo); --gold-lt: var(--halo); --gold-dk: var(--halo-deep); --gold-glow: var(--glow); --ember: var(--amethyst); } /* ========================================================================== THEME TRIAL — burgundy & gold Everything above is expressed through tokens, so this block repaints the whole site. Flip it with the switch in the preview banner, or set data-theme="burgundy" on to make it the default. ========================================================================== */ :root, :root[data-theme="burgundy"]{ --ink: #180a0e; --ink-2: #220e14; --plum: #2f131a; --plum-2: #3c1821; --velvet: #4f1f2b; --velvet-lt: #672834; /* gold carries the accent role the moonlight cream had */ --halo: #f4e4b4; --halo-soft: #e9d49c; --halo-dim: #caa961; --halo-deep: #8b6f2f; --amethyst: #e3c179; --amethyst-2: #c59c46; --amethyst-3: #8f6b26; --glow: rgba(214,166,74,.34); --glow-soft: rgba(214,166,74,.14); --crimson: #6d1526; --crimson-lt: #c9566d; --bone: #fff8ec; --parchment: #f4e8d6; --muted: #dbc8af; --muted-2: #b09a80; --line: rgba(227,193,121,.34); --line-soft: rgba(227,193,121,.18); --line-halo: rgba(244,228,180,.24); --surf-rgb: 104 40 50; --deep-rgb: 40 15 21; --glow-rgb: 160 66 60; --accent-rgb: 238 208 148; --surf-1: rgb(104 40 50 / .44); --surf-2: rgb(40 15 21 / .64); --surf-solid-1: rgb(84 32 42 / .97); --surf-solid-2: rgb(36 13 19 / .99); --scrim: rgb(22 8 12 / .74); --shade-1: #3c1821; --shade-2: #1c0a0f; --shade-3: #240e14; --ftr-bg: #1b080d; /* gold plate, deep wine lettering */ --cta-1: #8b6a24; --cta-2: #c9a445; --cta-3: #f2dfa6; --cta-ink: #2b0a12; /* warm the keyed smoke so it reads as candle smoke, not cool vapour */ --smoke-filter: sepia(.34) saturate(1.35) hue-rotate(-8deg) brightness(1.02); } /* preview-only theme switch, lives in the banner */ .theme-switch{ position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; gap:1px; border:1px solid rgba(255,255,255,.28); border-radius:3px; overflow:hidden; letter-spacing:.1em; } .theme-switch button{ font-family:var(--sans); font-size:.55rem; text-transform:uppercase; letter-spacing:.12em; padding:5px 8px; color:rgba(255,255,255,.72); background:rgba(0,0,0,.18); line-height:1.2; } .theme-switch button[aria-pressed="true"]{ background:rgba(255,255,255,.9); color:#3a0d16; font-weight:500; } @media (max-width:900px){ .theme-switch{ display:none; } } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; } body{ margin:0; background:var(--ink); color:var(--parchment); font-family:var(--sans); font-size:17.5px; font-weight:400; line-height:1.78; letter-spacing:.008em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* `clip`, not `hidden`: `hidden` turns body into a scroll container and silently breaks position:sticky on the banner and header. */ overflow-x:clip; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.14; color:var(--bone); letter-spacing:.005em; } p{ margin:0 0 1.15em; } p:last-child{ margin-bottom:0; } ::selection{ background:var(--amethyst); color:var(--cta-ink); } /* ---------- Film grain + vignette (site-wide atmosphere) ---------- */ body::before{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(70% 50% at 12% 8%, rgb(var(--glow-rgb) / .16), transparent 62%), radial-gradient(60% 45% at 88% 22%, rgb(var(--glow-rgb) / .15), transparent 60%), radial-gradient(80% 55% at 50% 108%,rgb(var(--accent-rgb) / .10), transparent 65%), radial-gradient(125% 90% at 50% 32%, transparent 32%, rgba(16,9,32,.72) 100%); } body > *{ position:relative; z-index:2; } /* ---------- Type scale ---------- */ .d1{ font-size:clamp(2.9rem, 8.2vw, 5.6rem); line-height:1.02; letter-spacing:-.015em; } .d2{ font-size:clamp(2.2rem, 5.2vw, 3.5rem); line-height:1.08; } .d3{ font-size:clamp(1.6rem, 3.2vw, 2.25rem); } .d4{ font-size:clamp(1.28rem, 2.2vw, 1.55rem); } .script{ font-style:italic; font-weight:300; } .gold{ color:var(--halo); } .gold-solid{ color:var(--halo); } .crim{ color:var(--crimson-lt); } .eyebrow{ font-family:var(--sans); font-size:.7rem; font-weight:400; letter-spacing:.42em; text-transform:uppercase; color:var(--amethyst); margin:0 0 1.15rem; } .eyebrow.center{ text-align:center; } .lede{ font-family:var(--serif); font-size:clamp(1.24rem,2.2vw,1.5rem); line-height:1.66; color:var(--bone); font-weight:400; } .small{ font-size:.92rem; line-height:1.72; letter-spacing:.02em; color:var(--muted); } .tiny{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); } .dropcap::first-letter{ font-family:var(--serif); float:left; font-size:3.9em; line-height:.82; padding:.06em .11em 0 0; font-weight:500; background:linear-gradient(160deg,var(--halo),var(--amethyst)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px); } .narrow{ max-width:var(--wrap-narrow); } section{ position:relative; } .pad{ padding:clamp(70px,10vw,130px) 0; } .pad-sm{ padding:clamp(48px,6vw,78px) 0; } .center{ text-align:center; } .stack-lg > * + *{ margin-top:clamp(30px,4vw,48px); } .tint{ background:linear-gradient(180deg, var(--ink) 0%, var(--plum) 48%, var(--ink) 100%); } .tint::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 70% at 78% 30%, rgb(var(--glow-rgb) / .16), transparent 68%); } .tint > *{ position:relative; z-index:1; } .tint-plum{ background:var(--plum); } .tint-deep{ background:linear-gradient(180deg,var(--shade-2) 0%,var(--shade-1) 50%,var(--shade-3) 100%); } .tint-deep::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 60% at 20% 78%, rgb(var(--glow-rgb) / .22), transparent 66%); } .tint-deep > *{ position:relative; z-index:1; } /* ---------- Ornaments ---------- */ .rule{ display:flex; align-items:center; justify-content:center; gap:14px; margin:clamp(22px,3vw,34px) auto; max-width:340px; } .rule::before,.rule::after{ content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--amethyst-3) 35%,var(--halo-dim) 70%,transparent); } .rule i{ width:7px; height:7px; transform:rotate(45deg); flex:none; border:1px solid var(--halo-soft); box-shadow:0 0 12px var(--glow); } .rule.left{ margin-left:0; justify-content:flex-start; } .orn{ display:block; margin:0 auto; opacity:.75; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7em; font-family:var(--sans); font-size:.76rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; padding:1.02em 2.05em; border-radius:3px; position:relative; isolation:isolate; overflow:hidden; text-align:center; line-height:1.25; border:1px solid var(--line-halo); color:var(--halo); background:linear-gradient(170deg, rgb(var(--surf-rgb) / .34), rgb(var(--deep-rgb) / .34)); transition:color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } /* the engraved inner hairline — reads as a struck plate, not a flat block */ .btn::after{ content:''; position:absolute; inset:3px; border-radius:2px; pointer-events:none; border:1px solid rgba(240,237,169,.13); transition:border-color .4s var(--ease); } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,var(--halo-dim),var(--halo)); transform:translateY(101%); transition:transform .5s var(--ease); } .btn:hover{ color:var(--cta-ink); border-color:var(--halo); box-shadow:0 12px 34px -16px rgba(240,237,169,.4); } .btn:hover::before{ transform:translateY(0); } .btn:hover::after{ border-color:rgba(20,11,38,.18); } .btn:active{ transform:translateY(1px); } .btn-solid{ border-color:transparent; font-weight:500; color:var(--cta-ink); background:linear-gradient(128deg,var(--cta-1) 0%,var(--cta-2) 46%,var(--cta-3) 100%); box-shadow:0 14px 40px -16px var(--glow), inset 0 1px 0 rgba(255,255,255,.34); } .btn-solid::after{ border-color:rgba(255,255,255,.22); } .btn-solid::before{ background:linear-gradient(128deg,var(--cta-2),var(--cta-3)); } .btn-solid:hover{ color:var(--cta-ink); box-shadow:0 16px 46px -14px var(--glow); } .btn-solid:hover::after{ border-color:rgba(255,255,255,.34); } .btn-ghost{ border-color:var(--line); color:var(--parchment); background:transparent; } .btn-ghost::before{ background:linear-gradient(120deg,var(--amethyst-2),var(--amethyst)); } .btn-ghost::after{ border-color:rgb(var(--accent-rgb) / .12); } .btn-ghost:hover{ color:var(--cta-ink); border-color:var(--amethyst); } .btn-lg{ padding:1.2em 2.55em; font-size:.81rem; } .btn-sm{ padding:.82em 1.45em; font-size:.69rem; letter-spacing:.16em; } .btn-sm::after{ inset:2px; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; } .btn-row.center{ justify-content:center; } .tel-big{ font-family:var(--serif); font-size:clamp(1.9rem,5.4vw,2.9rem); color:var(--gold-lt); letter-spacing:.01em; line-height:1.1; display:inline-block; transition:color .3s var(--ease), text-shadow .5s var(--ease); } .tel-big:hover{ color:#fff6dd; text-shadow:0 0 34px var(--gold-glow); } /* ---------- Header ---------- */ .hdr{ position:sticky; top:var(--banner-h); z-index:50; background:rgb(var(--deep-rgb) / .84); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-soft); transition:background .4s var(--ease), border-color .4s var(--ease); } .hdr.solid{ background:rgb(var(--deep-rgb) / .97); border-bottom-color:var(--line); } .hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--nav-h); } .brand{ display:flex; align-items:center; gap:13px; flex:none; } .brand .mark{ width:38px; height:38px; flex:none; } .brand .txt{ display:flex; flex-direction:column; line-height:1; } .brand .n{ font-family:var(--serif); font-size:1.32rem; color:var(--bone); letter-spacing:.02em; font-weight:500; } .brand .s{ font-family:var(--sans); font-size:.53rem; letter-spacing:.34em; text-transform:uppercase; color:var(--amethyst); margin-top:5px; } .nav{ display:flex; align-items:center; gap:clamp(6px,1.1vw,18px); } .nav-item{ position:relative; } .nav-top{ display:inline-flex; align-items:center; gap:.45em; font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--parchment); position:relative; padding:10px 6px; white-space:nowrap; transition:color .3s var(--ease); } .nav-top::after{ content:''; position:absolute; left:6px; right:6px; bottom:4px; height:1px; background:linear-gradient(90deg,var(--amethyst),var(--halo)); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease); } .nav-top:hover{ color:var(--halo); } .nav-top:hover::after,.nav-top.on::after{ transform:scaleX(1); } .nav-top.on{ color:var(--halo); } .chev{ opacity:.6; transition:transform .35s var(--ease), opacity .3s; } .nav-item.has-sub:hover .chev,.nav-item.has-sub:focus-within .chev{ transform:rotate(180deg); opacity:1; } /* Dropdown panel */ .sub{ position:absolute; top:100%; left:50%; transform:translate(-50%,10px); padding-top:12px; min-width:246px; z-index:60; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; } .nav-item.has-sub:hover .sub, .nav-item.has-sub:focus-within .sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); } .sub-in{ position:relative; background:linear-gradient(168deg, var(--surf-solid-1), var(--surf-solid-2)); border:1px solid var(--line); border-radius:3px; padding:9px; display:grid; gap:1px; box-shadow:0 30px 70px -26px #000, 0 0 60px -26px var(--glow), inset 0 1px 0 rgb(var(--surf-rgb) / .14); backdrop-filter:blur(14px); } .sub-in::before{ content:''; position:absolute; top:-6px; left:50%; margin-left:-6px; width:11px; height:11px; transform:rotate(45deg); background:var(--surf-solid-1); border-left:1px solid var(--line); border-top:1px solid var(--line); } .sub-in a{ display:block; padding:.72em .95em; font-size:.76rem; letter-spacing:.1em; color:var(--parchment); border-radius:2px; white-space:nowrap; transition:background .28s var(--ease), color .28s var(--ease), padding-left .28s var(--ease); } .sub-in a:hover,.sub-in a:focus-visible{ background:linear-gradient(90deg, rgb(var(--glow-rgb) / .26), transparent); color:var(--halo); padding-left:1.3em; } .sub-in a.on{ color:var(--halo); } .hdr-cta{ display:flex; align-items:center; gap:16px; flex:none; } .hdr-tel{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; } .hdr-tel .l{ font-size:.55rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2); } .hdr-tel .n{ font-family:var(--serif); font-size:1.16rem; color:var(--gold-lt); } .hdr-tel:hover .n{ color:#fff6dd; } .burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{ display:block; width:22px; height:1px; background:var(--halo); transition:transform .4s var(--ease), opacity .3s; } body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); } body.menu-open .burger span:nth-child(2){ opacity:0; } body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Mobile drawer */ .drawer{ position:fixed; inset:0; z-index:55; background:linear-gradient(170deg,var(--shade-1),var(--shade-3)); display:flex; flex-direction:column; align-items:stretch; padding:calc(var(--nav-h) + var(--banner-h) + 26px) 0 40px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .42s var(--ease), transform .42s var(--ease), visibility .42s; overflow-y:auto; -webkit-overflow-scrolling:touch; } body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; } .drawer-in{ width:100%; max-width:520px; margin:0 auto; padding:0 clamp(20px,6vw,34px); } .dhome,.dgroup-t{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--serif); font-size:1.42rem; color:var(--bone); padding:.72em 0; border-bottom:1px solid var(--line-soft); text-align:left; } .dhome:hover,.dgroup-t:hover{ color:var(--halo); } .dgroup-t .ic{ flex:none; width:13px; height:13px; position:relative; } .dgroup-t .ic::before,.dgroup-t .ic::after{ content:''; position:absolute; background:var(--amethyst); left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .4s var(--ease), opacity .3s; } .dgroup-t .ic::before{ width:13px; height:1px; } .dgroup-t .ic::after{ width:1px; height:13px; } .dgroup.open .dgroup-t .ic::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .dgroup.open .dgroup-t{ color:var(--halo); } .dgroup-b{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); } .dgroup-in{ padding:.5em 0 1.1em; display:grid; gap:.1em; } .dgroup-in a{ display:block; padding:.6em .1em .6em 1.15em; font-size:.94rem; letter-spacing:.06em; color:var(--muted); border-left:1px solid var(--line-soft); } .dgroup-in a:hover,.dgroup-in a.on{ color:var(--halo); border-left-color:var(--amethyst); } .drawer-tel{ margin-top:2rem; width:100%; } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:clamp(560px, 88vh, 900px); display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line-soft); } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; animation:kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } } .hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgb(var(--deep-rgb) / .88) 0%, rgb(var(--deep-rgb) / .48) 38%, rgb(var(--deep-rgb) / .94) 100%), radial-gradient(70% 58% at 22% 46%, rgb(var(--glow-rgb) / .30), transparent 66%), radial-gradient(78% 62% at 50% 52%, transparent 18%, rgb(var(--deep-rgb) / .76) 100%); } .hero-in{ position:relative; z-index:2; width:100%; padding:clamp(70px,11vh,120px) 0; } .hero h1{ margin-bottom:.36em; } .hero .lede{ max-width:610px; } .hero .btn-row{ margin-top:clamp(28px,4vw,40px); } .hero-note{ margin-top:24px; } .flicker{ animation:flick 5.5s infinite ease-in-out; } @keyframes flick{ 0%,100%{ opacity:1; } 42%{ opacity:.93; } 46%{ opacity:1; } 70%{ opacity:.88; } 74%{ opacity:1; } } /* ---------- Hero smoke (real footage) ---------- Green screen keyed to a genuine alpha channel in VP9/WebM, so it needs no blend mode and leaves no box edge. Held at 50% and pinned to the bottom so it drifts up behind the copy. */ .hero-smoke{ position:absolute; left:0; right:0; bottom:0; height:82%; z-index:1; pointer-events:none; overflow:hidden; } .hero-smoke .smoke-vid{ filter:var(--smoke-filter); position:absolute; left:50%; bottom:-4%; transform:translateX(-50%); width:132%; min-width:900px; height:auto; opacity:.5; /* feather the edges so the frame boundary never shows */ -webkit-mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* if the video plays, the CSS plumes stand down */ body.has-smoke-video .hero .incense .smoke{ display:none; } @media (max-width:760px){ .hero-smoke{ height:64%; } .hero-smoke .smoke-vid{ width:190%; opacity:.42; } } @media (prefers-reduced-motion:reduce){ .hero-smoke{ display:none; } } /* ---------- Incense ---------- A real smoke plate, screen-blended so the black drops out completely, drifting up from a glowing coal. Two layers at different speeds so it never loops visibly. Transform + opacity only; off entirely for reduced-motion. */ .incense{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .incense .smoke{ position:absolute; bottom:-6%; width:clamp(210px,24vw,380px); aspect-ratio:560/766; /* the plume carries its own alpha, so no blend mode and therefore no box edge */ background:url("../claude-photos/smoke-plume.png") center bottom / contain no-repeat; opacity:0; transform-origin:50% 100%; will-change:transform,opacity; animation:plume 38s linear infinite; } .incense .smoke.s1{ left:4%; animation-duration:38s; animation-delay:-4s; } .incense .smoke.s2{ left:13%; animation:plume-flip 52s linear infinite; animation-delay:-26s; width:clamp(160px,18vw,290px); } .incense .smoke.s3{ right:8%; animation-duration:45s; animation-delay:-17s; width:clamp(150px,17vw,260px); } @keyframes plume{ 0% { transform:translateY(30%) translateX(0) scale(.56) rotate(-2deg); opacity:0; } 10% { opacity:.5; } 30% { transform:translateY(2%) translateX(10px) scale(.76) rotate(1deg); opacity:.56; } 55% { transform:translateY(-24%) translateX(-6px) scale(.98) rotate(-2deg); opacity:.5; } 78% { transform:translateY(-50%) translateX(12px) scale(1.2) rotate(2deg); opacity:.3; } 92% { opacity:.12; } 100% { transform:translateY(-78%) translateX(4px) scale(1.42) rotate(0deg); opacity:0; } } /* mirrored variant so the two left-hand plumes don't read as the same shape */ @keyframes plume-flip{ 0% { transform:scaleX(-1) translateY(30%) translateX(0) scale(.56) rotate(2deg); opacity:0; } 10% { opacity:.34; } 32% { transform:scaleX(-1) translateY(0) translateX(-8px) scale(.8) rotate(-1deg); opacity:.4; } 58% { transform:scaleX(-1) translateY(-26%) translateX(6px) scale(1) rotate(2deg); opacity:.34; } 80% { transform:scaleX(-1) translateY(-52%) translateX(-10px) scale(1.24) rotate(-3deg); opacity:.2; } 100% { transform:scaleX(-1) translateY(-80%) translateX(6px) scale(1.5) rotate(1deg); opacity:0; } } /* the coal the smoke lifts from */ .incense .ember{ position:absolute; left:calc(5% + clamp(100px,12vw,186px)); bottom:5%; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle,#ffe6bb 0%,#ff9d45 44%,rgba(255,140,50,0) 74%); box-shadow:0 0 16px 4px rgba(255,150,60,.35); animation:embern 4.2s ease-in-out infinite; } @keyframes embern{ 0%,100%{ opacity:.45; } 45%{ opacity:1; } } /* quieter drift for mid-page sections */ .incense.soft .smoke{ opacity:0; } .incense.soft .smoke.s1{ left:2%; animation-duration:56s; animation-delay:-9s; } .incense.soft .smoke.s3{ right:3%; animation-duration:64s; animation-delay:-31s; } .incense.soft .smoke{ width:clamp(180px,20vw,300px); } .incense.soft .smoke.s1, .incense.soft .smoke.s3{ animation-name:plume-soft; } @keyframes plume-soft{ 0% { transform:translateY(24%) scale(.6) rotate(-1deg); opacity:0; } 14% { opacity:.24; } 45% { transform:translateY(-8%) scale(.86) rotate(1deg); opacity:.26; } 76% { transform:translateY(-42%) scale(1.14) rotate(-2deg); opacity:.14; } 100% { transform:translateY(-70%) scale(1.36) rotate(0deg); opacity:0; } } @media (max-width:760px){ .incense .smoke.s2{ display:none; } .incense .smoke{ width:clamp(170px,44vw,260px); } .incense.soft{ display:none; } } @media (prefers-reduced-motion:reduce){ .incense{ display:none; } } /* ---------- Marquee trust strip ---------- */ .strip{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:linear-gradient(90deg,rgb(var(--deep-rgb) / .7),rgb(var(--deep-rgb) / .6),rgb(var(--deep-rgb) / .7)); overflow:hidden; padding:18px 0; } .strip-track{ display:flex; gap:clamp(34px,6vw,72px); width:max-content; animation:slide 42s linear infinite; } .strip:hover .strip-track{ animation-play-state:paused; } @keyframes slide{ to{ transform:translateX(-50%); } } .strip-item{ display:flex; align-items:center; gap:.7em; white-space:nowrap; font-size:.71rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); } .strip-item svg{ color:var(--amethyst); flex:none; } /* ---------- Cards / grids ---------- */ .grid{ display:grid; gap:clamp(16px,2.2vw,26px); align-items:stretch; } /* the reveal wrapper is the grid item; the card has to fill it or rows go ragged */ .grid > .rv{ display:flex; flex-direction:column; } .grid > .rv > .card, .grid > .rv > .quote{ flex:1 1 auto; height:100%; } .grid > .card, .grid > .quote{ height:100%; } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } .card{ position:relative; background:linear-gradient(165deg, rgb(var(--surf-rgb) / .66), rgb(var(--deep-rgb) / .9)); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); } .card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:0 26px 60px -26px rgba(0,0,0,.95), 0 0 44px -18px var(--glow); } .card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--plum); } .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .7s var(--ease); filter:saturate(.78) brightness(.86) contrast(1.06); } .card:hover .card-img img{ transform:scale(1.07); filter:saturate(.95) brightness(1) contrast(1.02); } /* violet wash over the photography — unifies every plate into one world */ .card-img::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(155deg, rgb(var(--glow-rgb) / .34), rgb(var(--glow-rgb) / .14) 55%, transparent); mix-blend-mode:soft-light; } .card-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%, rgb(var(--deep-rgb) / .58) 74%, rgb(var(--deep-rgb) / .93) 100%); } .card-body{ padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1 1 auto; gap:.85rem; min-height:0; } .card-body h3{ font-size:1.45rem; min-height:2.6em; display:flex; align-items:flex-end; } .card-body p{ font-size:1rem; color:var(--parchment); line-height:1.7; } .card-foot{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .card-price{ flex:0 0 auto; } .card-foot .add-btn{ flex:1 1 auto; min-width:0; } .card-price{ font-family:var(--serif); font-size:1.32rem; color:var(--gold-lt); } .card-price small{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); } .card-go{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.5em; } .card:hover .card-go{ color:var(--gold-lt); } .card-go svg{ transition:transform .4s var(--ease); } .card:hover .card-go svg{ transform:translateX(4px); } .card-tag{ position:absolute; top:14px; left:14px; z-index:3; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; background:rgb(var(--deep-rgb) / .78); border:1px solid var(--line); color:var(--halo); padding:.5em .9em; backdrop-filter:blur(6px); } .stretch{ position:absolute; inset:0; z-index:3; } /* Category tile (image-led, taller) */ .tile{ aspect-ratio:3/4; height:auto !important; } .tile .card-body h3{ min-height:0; } .tile .card-img{ aspect-ratio:auto; position:absolute; inset:0; } .tile .card-img::after{ background:linear-gradient(180deg, rgb(var(--deep-rgb) / .10) 0%, rgb(var(--deep-rgb) / .34) 38%, rgba(12,7,25,.78) 62%, rgb(var(--deep-rgb) / .95) 84%, rgb(var(--deep-rgb) / .99) 100%); } .tile .card-body{ position:relative; z-index:2; justify-content:flex-end; } .tile .card-body h3{ text-shadow:0 2px 18px rgba(0,0,0,.9); } .tile .card-body p{ color:var(--parchment); text-shadow:0 1px 12px rgba(0,0,0,.85); } /* ---------- Two-column splits ---------- These live in CSS (not inline styles) so the media queries below can actually collapse them on a phone. */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; } .split.top{ align-items:start; } .split.wide-left{ grid-template-columns:1.15fr .85fr; } .split.wide-right{ grid-template-columns:.85fr 1.15fr; } .split.narrow-left{ grid-template-columns:.8fr 1.2fr; } .split-img{ border:1px solid var(--line-soft); border-radius:var(--r); width:100%; } .sticky-col{ position:sticky; top:calc(var(--nav-h) + var(--banner-h) + 20px); } /* ---------- Numbered steps ---------- */ .steps{ counter-reset:s; } .step{ position:relative; padding-left:clamp(58px,7vw,84px); padding-bottom:clamp(30px,4vw,44px); } .step:not(:last-child)::before{ content:''; position:absolute; left:clamp(21px,2.6vw,29px); top:44px; bottom:6px; width:1px; background:linear-gradient(180deg,var(--line),transparent); } .step .num{ box-shadow:0 0 30px -12px var(--glow); counter-increment:s; position:absolute; left:0; top:0; width:clamp(43px,5.2vw,59px); height:clamp(43px,5.2vw,59px); border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.2rem; color:var(--gold-lt); background:var(--ink); } .step .num::before{ content:counter(s,decimal-leading-zero); } .step h3{ font-size:1.5rem; margin-bottom:.42rem; } .step p{ color:var(--parchment); font-size:1.02rem; line-height:1.75; } /* ---------- Testimonials ---------- */ .quote{ border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(26px,3.2vw,40px); background:linear-gradient(165deg, rgb(var(--surf-rgb) / .46), rgb(var(--deep-rgb) / .76)); display:flex; flex-direction:column; gap:1.1rem; height:100%; transition:border-color .5s var(--ease), transform .5s var(--ease); } .quote:hover{ border-color:var(--line); transform:translateY(-4px); } .quote .stars{ display:flex; gap:4px; color:var(--halo-dim); } .quote blockquote{ margin:0; font-family:var(--serif); font-size:clamp(1.08rem,1.7vw,1.24rem); line-height:1.6; color:var(--bone); font-style:italic; } .quote cite{ font-style:normal; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:auto; } .quote cite b{ display:block; color:var(--gold-lt); font-weight:400; letter-spacing:.16em; margin-bottom:3px; } /* ---------- Accordion (FAQ) ---------- */ .acc{ border-top:1px solid var(--line-soft); } .acc-item{ border-bottom:1px solid var(--line-soft); } .acc-q{ width:100%; text-align:left; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:1.5em 0; font-family:var(--serif); font-size:clamp(1.12rem,2vw,1.35rem); color:var(--bone); transition:color .35s var(--ease); } .acc-q:hover{ color:var(--gold-lt); } .acc-q .ic{ flex:none; width:15px; height:15px; position:relative; margin-top:.42em; } .acc-q .ic::before,.acc-q .ic::after{ content:''; position:absolute; background:var(--amethyst); left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .45s var(--ease), opacity .3s; } .acc-q .ic::before{ width:15px; height:1px; } .acc-q .ic::after{ width:1px; height:15px; } .acc-item.open .acc-q .ic::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .acc-item.open .acc-q{ color:var(--gold-lt); } .acc-a{ overflow:hidden; max-height:0; transition:max-height .55s var(--ease); } .acc-a-in{ padding:0 0 1.7em; color:var(--parchment); font-size:1.03rem; line-height:1.78; max-width:64ch; } /* ---------- Candle swatches ---------- */ .swatches{ display:grid; gap:clamp(14px,2vw,20px); } .swatch{ display:flex; gap:clamp(16px,2.4vw,26px); align-items:flex-start; border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); background:linear-gradient(155deg, rgb(var(--surf-rgb) / .4), rgb(var(--deep-rgb) / .66)); transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } .swatch:hover{ border-color:var(--line); transform:translateY(-3px); box-shadow:0 0 46px -22px var(--glow); } .swatch .dot{ flex:none; width:38px; height:60px; border-radius:4px 4px 3px 3px; margin-top:3px; background:linear-gradient(175deg, color-mix(in srgb, var(--c) 82%, white 18%), var(--c) 40%, color-mix(in srgb, var(--c) 72%, black 28%)); box-shadow:0 0 26px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.4); position:relative; } .swatch .dot::before{ content:''; position:absolute; left:50%; top:-11px; transform:translateX(-50%); width:7px; height:13px; border-radius:50% 50% 42% 42%; background:radial-gradient(ellipse at 50% 70%, #fff6d8, #ffb545 62%, rgba(255,140,40,0) 100%); box-shadow:0 0 16px 5px rgba(255,180,80,.5); animation:flick 4.5s infinite ease-in-out; } .swatch p{ color:var(--parchment); font-size:1rem; } .swatch .tiny{ color:var(--amethyst); letter-spacing:.16em; } /* ---------- Incense ---------- */ .incense-list{ display:grid; gap:clamp(14px,2vw,20px); } .inc-row{ display:flex; gap:clamp(16px,2.4vw,26px); align-items:flex-start; border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); background:linear-gradient(155deg, var(--surf-1), var(--surf-2)); transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } .inc-row:hover{ border-color:var(--line); transform:translateY(-3px); box-shadow:0 0 46px -22px var(--glow); } .inc-mark{ flex:none; width:16px; height:58px; margin-top:4px; position:relative; background:linear-gradient(180deg, rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / .05)); border-radius:3px; } .inc-mark::before{ /* the glowing coal */ content:''; position:absolute; left:50%; top:-3px; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#ffdca8 0%,#ff9d45 45%,rgba(255,140,50,0) 74%); animation:embern 4.2s ease-in-out infinite; } .inc-mark::after{ /* the thread of smoke */ content:''; position:absolute; left:50%; bottom:100%; margin-bottom:6px; width:26px; height:44px; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 100%, rgb(var(--accent-rgb) / .30), transparent 70%); filter:blur(7px); animation:incsmoke 7s ease-in-out infinite; } @keyframes incsmoke{ 0%,100%{ opacity:.25; transform:translateX(-50%) translateY(4px) scaleX(.8); } 50% { opacity:.6; transform:translateX(-52%) translateY(-6px) scaleX(1.15); } } .inc-row p{ color:var(--parchment); font-size:1rem; } .inc-row .tiny{ color:var(--amethyst); letter-spacing:.16em; } @media (prefers-reduced-motion:reduce){ .inc-mark::before,.inc-mark::after{ animation:none; } } /* ---------- Prayers ---------- */ .prayers{ display:grid; gap:clamp(14px,2vw,20px); } .prayer{ border-left:2px solid var(--amethyst-3); padding:clamp(4px,1vw,8px) 0 clamp(4px,1vw,8px) clamp(20px,3vw,30px); transition:border-color .5s var(--ease); } .prayer:hover{ border-left-color:var(--halo); } .prayer p{ color:var(--parchment); } .prayer .tiny{ color:var(--amethyst); } /* ---------- Dream dictionary ---------- */ .dreamdict .acc-q > span:first-child{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35em 1em; } .dreamdict .nums{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; color:var(--amethyst); white-space:nowrap; } /* ---------- Numerology ---------- */ .nums{ display:grid; gap:clamp(12px,1.8vw,18px); } .numrow{ display:flex; gap:clamp(18px,2.6vw,30px); align-items:center; border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(16px,2.2vw,24px); background:linear-gradient(155deg, rgb(var(--surf-rgb) / .36), rgb(var(--deep-rgb) / .62)); transition:border-color .5s var(--ease), transform .5s var(--ease); } .numrow:hover{ border-color:var(--line); transform:translateX(4px); } .numglyph{ flex:none; width:clamp(52px,6vw,66px); height:clamp(52px,6vw,66px); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.2rem); border:1px solid var(--line); border-radius:50%; background:linear-gradient(150deg, rgb(var(--glow-rgb) / .42), transparent); background-clip:padding-box; color:var(--halo); box-shadow:0 0 30px -12px var(--glow); } .numrow p{ color:var(--parchment); font-size:1rem; margin-top:.3rem; } @media (max-width:560px){ .swatch{ gap:16px; } .swatch .dot{ width:30px; height:48px; } .numrow{ gap:16px; } } /* ---------- Page hero (interior) ---------- */ .phero{ position:relative; padding:clamp(70px,10vw,120px) 0 clamp(52px,7vw,84px); border-bottom:1px solid var(--line-soft); overflow:hidden; background:linear-gradient(180deg,var(--shade-1),#0a0614); } .phero::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(55% 90% at 18% 40%, rgb(var(--glow-rgb) / .24), transparent 68%); } .phero-bg{ position:absolute; inset:0; z-index:0; opacity:.3; } .phero-bg img{ width:100%; height:100%; object-fit:cover; } .phero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgb(var(--deep-rgb) / .6),var(--ink)); } .phero .wrap{ position:relative; z-index:2; } .crumbs{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.5rem; } .crumbs a:hover{ color:var(--gold-lt); } .crumbs span{ opacity:.4; margin:0 .55em; } /* ---------- Offering detail ---------- */ .detail{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,68px); align-items:start; } .detail-media{ position:relative; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; } .detail-media img{ width:100%; aspect-ratio:1; object-fit:cover; } .detail-side{ position:sticky; top:calc(var(--nav-h) + var(--banner-h) + 20px); } .spec{ border-top:1px solid var(--line-soft); } .spec div{ display:flex; justify-content:space-between; gap:18px; padding:.95em 0; border-bottom:1px solid var(--line-soft); font-size:.94rem; } .spec dt{ color:var(--muted); letter-spacing:.11em; text-transform:uppercase; font-size:.72rem; } .spec dd{ margin:0; color:var(--bone); text-align:right; font-family:var(--serif); font-size:1.02rem; } .offer-box{ border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,34px); background:linear-gradient(165deg,rgb(var(--surf-rgb) / .5),rgb(var(--deep-rgb) / .86)); box-shadow:inset 0 1px 0 rgb(var(--surf-rgb) / .12), 0 0 60px -30px var(--glow); } .offer-price{ font-family:var(--serif); font-size:clamp(2.2rem,4.4vw,3rem); color:var(--gold-lt); line-height:1; } .offer-price sub{ font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); vertical-align:middle; margin-left:.7em; bottom:0; } .ul-gold{ list-style:none; margin:0; padding:0; display:grid; gap:.8em; } .ul-gold li{ position:relative; padding-left:1.85em; font-size:1.02rem; color:var(--parchment); line-height:1.68; } .ul-gold li::before{ content:''; position:absolute; left:.2em; top:.62em; width:6px; height:6px; transform:rotate(45deg); border:1px solid var(--amethyst); box-shadow:0 0 10px var(--glow); } /* ---------- Gallery ---------- */ .gal{ columns:3; column-gap:clamp(14px,2vw,22px); } .gal figure{ break-inside:avoid; margin:0 0 clamp(14px,2vw,22px); position:relative; cursor:zoom-in; } .gal img{ width:100%; border:1px solid var(--line-soft); border-radius:var(--r); transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), filter .55s var(--ease); /* The scans are bright paper against a near-black page — settle them into the palette at rest, and bring them fully up on hover / tap. */ filter:saturate(.7) brightness(.8) contrast(1.06) hue-rotate(-8deg); } .gal figure:hover img,.gal figure:focus-within img{ transform:translateY(-5px); border-color:var(--line); box-shadow:0 24px 54px -26px #000; filter:none; } .gal figcaption{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-top:.85em; line-height:1.6; } .lightbox{ position:fixed; inset:0; z-index:90; background:rgba(7,4,16,.97); display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,54px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; backdrop-filter:blur(8px); } .lightbox.on{ opacity:1; visibility:visible; } .lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border:1px solid var(--line); } .lightbox .close{ position:absolute; top:20px; right:24px; font-size:1.6rem; color:var(--gold-lt); padding:10px; } .lightbox .nav-b{ position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; color:var(--gold-lt); padding:16px; opacity:.65; } .lightbox .nav-b:hover{ opacity:1; } .lightbox .prev{ left:8px; } .lightbox .next{ right:8px; } /* ---------- Call CTA band ---------- */ .callband{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .callband-bg{ position:absolute; inset:0; z-index:0; } .callband-bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; } .callband-bg::after{ content:''; position:absolute; inset:0; background: radial-gradient(60% 80% at 50% 50%, rgb(var(--glow-rgb) / .26), transparent 68%), radial-gradient(72% 100% at 50% 50%, rgb(var(--deep-rgb) / .58), rgb(var(--deep-rgb) / .97)); } .callband .wrap{ position:relative; z-index:2; } /* ---------- Footer ---------- */ .ftr{ background:var(--ftr-bg); border-top:1px solid var(--line-soft); padding:clamp(56px,7vw,88px) 0 0; } .ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,54px); } .ftr h4{ font-family:var(--sans); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--amethyst); margin-bottom:1.35rem; font-weight:400; } .ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.72em; } .ftr a{ font-size:.94rem; color:var(--muted); transition:color .3s var(--ease); } .ftr a:hover{ color:var(--gold-lt); } .ftr p{ font-size:.94rem; line-height:1.75; color:var(--muted); } .ftr-bot{ margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--line-soft); padding:26px 0 calc(26px + var(--safe-bot,0px)); display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; } .ftr-bot p{ font-size:.74rem; letter-spacing:.06em; color:var(--muted-2); } .ftr-legal a{ font-size:.74rem; color:var(--muted-2); } .ftr-legal a:hover{ color:var(--halo); } .disclaim{ border:1px solid var(--line-soft); border-radius:var(--r); padding:20px 24px; font-size:.85rem; line-height:1.78; color:var(--muted); background:rgb(var(--deep-rgb) / .45); } /* ---------- Cart button ---------- */ .cart-btn{ position:relative; width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:3px; color:var(--halo); background:linear-gradient(165deg, rgb(var(--surf-rgb) / .42), rgb(var(--deep-rgb) / .42)); transition:border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); } .cart-btn:hover{ border-color:var(--amethyst); box-shadow:0 0 26px -8px var(--glow); } .cart-count{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:.63rem; font-weight:500; letter-spacing:0; background:linear-gradient(135deg,var(--cta-2),var(--cta-3)); color:var(--cta-ink); border-radius:19px; box-shadow:0 0 16px -2px var(--glow); } .cart-count[hidden]{ display:none; } .cart-btn.bump{ animation:bump .5s var(--ease); } @keyframes bump{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(1.18); } } /* ---------- Cart panel ---------- */ .cart-scrim{ position:fixed; inset:0; z-index:70; background:var(--scrim); backdrop-filter:blur(5px); opacity:0; transition:opacity .4s var(--ease); } .cart-scrim.on{ opacity:1; } .cart-scrim[hidden]{ display:none; } .cart-panel{ position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(430px,100%); display:flex; flex-direction:column; background:linear-gradient(190deg,var(--shade-1),var(--shade-2) 62%); border-left:1px solid var(--line); box-shadow:-40px 0 90px -40px #000; transform:translateX(101%); transition:transform .48s var(--ease); } .cart-panel.on{ transform:none; } .cart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:clamp(22px,3vw,30px); border-bottom:1px solid var(--line-soft); flex:none; } .cart-x{ font-size:1.7rem; line-height:1; color:var(--halo); padding:2px 8px; } .cart-body{ flex:1; overflow-y:auto; padding:clamp(16px,2.4vw,22px); display:grid; gap:12px; align-content:start; } .cart-foot{ flex:none; padding:clamp(20px,2.6vw,26px); border-top:1px solid var(--line); background:rgb(var(--deep-rgb) / .6); } .cart-foot[hidden]{ display:none; } .cart-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .cart-total b{ font-family:var(--serif); font-size:1.9rem; letter-spacing:0; color:var(--halo); text-transform:none; } .cart-go span{ display:flex; flex-direction:column; align-items:center; gap:.2em; line-height:1.15; } .cart-go b{ font-family:var(--serif); font-size:1.28rem; letter-spacing:.02em; text-transform:none; font-weight:500; } .checkout-note{ border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-top:1rem; background:linear-gradient(160deg,rgb(var(--surf-rgb) / .28),rgb(var(--deep-rgb) / .5)); } .checkout-note p{ font-size:.92rem; line-height:1.7; color:var(--parchment); } .cart-clear{ width:100%; margin-top:.9rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); padding:.7em; } .cart-clear:hover{ color:var(--crimson-lt); } .cart-line{ display:flex; gap:13px; align-items:center; border:1px solid var(--line-soft); border-radius:var(--r); padding:10px; background:linear-gradient(160deg, rgb(var(--surf-rgb) / .4), rgb(var(--deep-rgb) / .55)); } .cart-line img{ width:62px; height:62px; object-fit:cover; border-radius:2px; flex:none; } .cart-line .n{ font-family:var(--serif); font-size:1.06rem; color:var(--bone); line-height:1.3; } .cart-line .p{ font-size:.82rem; color:var(--amethyst); letter-spacing:.1em; margin-top:.2rem; } .cart-line .rm{ margin-left:auto; flex:none; color:var(--muted-2); padding:8px; } .cart-line .rm:hover{ color:var(--crimson-lt); } .cart-empty{ text-align:center; padding:clamp(30px,6vw,50px) 14px; color:var(--muted); } .cart-empty img{ max-width:120px; margin:0 auto 1.4rem; opacity:.65; } /* Add-to-cart control on cards and detail pages */ .add-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; padding:.72em 1.15em; border:1px solid var(--line); border-radius:3px; color:var(--halo); background:linear-gradient(165deg,rgb(var(--surf-rgb) / .4),rgb(var(--deep-rgb) / .4)); transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); position:relative; z-index:4; } .add-btn:hover{ border-color:var(--amethyst); background:linear-gradient(165deg,rgb(var(--surf-rgb) / .55),rgb(var(--deep-rgb) / .5)); } .add-btn.added{ color:var(--amethyst); border-color:var(--amethyst); } .toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:80; background:linear-gradient(160deg,var(--shade-1),var(--shade-2)); border:1px solid var(--line); color:var(--bone); padding:.95em 1.5em; border-radius:3px; font-size:.86rem; box-shadow:0 24px 60px -26px #000, 0 0 50px -22px var(--glow); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; max-width:calc(100% - 32px); text-align:center; } .toast.on{ opacity:1; visibility:visible; transform:translate(-50%,0); } /* ---------- Carousel ---------- */ .carousel{ position:relative; } .carousel-track{ display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:4px 4px 8px; -webkit-overflow-scrolling:touch; } .carousel-track::-webkit-scrollbar{ display:none; } .carousel-track > *{ scroll-snap-align:center; flex:0 0 auto; } .carousel-slide{ width:min(340px,76vw); display:flex; flex-direction:column; } .carousel-slide.wide{ width:min(560px,86vw); } .carousel-fig{ margin:0; position:relative; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; background:var(--plum); aspect-ratio:16/25; /* every slide the same shape, whatever lands in it */ transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } .carousel-fig img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; } .carousel-slide:hover .carousel-fig{ border-color:var(--line); transform:translateY(-4px); box-shadow:0 26px 60px -28px #000, 0 0 50px -24px var(--glow); } .carousel-cap{ padding:.95em .2em 0; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); line-height:1.6; min-height:4.6em; } .carousel-cap b{ display:block; color:var(--halo); font-weight:400; letter-spacing:.09em; margin-bottom:.25rem; } .carousel-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(18px,2.4vw,26px); } .car-btn{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:var(--halo); transition:border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s; } .car-btn:hover{ border-color:var(--amethyst); box-shadow:0 0 26px -8px var(--glow); } .car-btn[disabled]{ opacity:.25; pointer-events:none; } .car-dots{ display:flex; gap:8px; } .car-dots button{ width:7px; height:7px; border-radius:50%; padding:0; background:rgb(var(--accent-rgb) / .28); transition:background .3s var(--ease), transform .3s var(--ease); } .car-dots button.on{ background:var(--halo); transform:scale(1.35); } @media (max-width:560px){ .carousel-slide{ width:82vw; } .carousel-slide.wide{ width:88vw; } .cart-panel{ width:100%; } .callbar .a2{ gap:.5em; } } /* ---------- Sticky mobile call bar ---------- */ .callbar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; background:rgb(var(--deep-rgb) / .95); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px; } .callbar a,.callbar button{ flex:1; display:flex; align-items:center; justify-content:center; gap:.6em; padding:1em .6em; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; border-radius:var(--r); line-height:1.2; } .callbar .a1{ background:linear-gradient(125deg,var(--cta-1),var(--cta-2) 48%,var(--cta-3)); color:var(--cta-ink); font-weight:500; box-shadow:0 0 30px -10px var(--glow); } .callbar .a2{ border:1px solid var(--line); color:var(--halo); flex:0 0 42%; } /* ---------- Reveal on scroll ---------- */ .rv{ opacity:0; transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease); } .rv.in{ opacity:1; transform:none; } .rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; } .rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; } .rv-d5{ transition-delay:.45s; } .rv-d6{ transition-delay:.54s; } .rv-d7{ transition-delay:.63s; } .rv-d8{ transition-delay:.72s; } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .g4{ grid-template-columns:repeat(3,1fr); } .ftr-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:1040px){ .split,.split.wide-left,.split.wide-right,.split.narrow-left{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); } .split.reverse > *:first-child{ order:2; } .sticky-col{ position:static; } .nav{ display:none; } .burger{ display:flex; } .hdr-tel{ display:none; } .detail{ grid-template-columns:1fr; } .detail-side{ position:static; } .gal{ columns:2; } } @media (max-width:760px){ body{ font-size:16px; } .hero-bg img{ object-position:center bottom; animation:none; } .hero-bg::after{ background: linear-gradient(180deg, rgb(var(--deep-rgb) / .93) 0%, rgb(var(--deep-rgb) / .62) 26%, rgb(var(--deep-rgb) / .36) 48%, rgb(var(--deep-rgb) / .84) 82%, rgb(var(--deep-rgb) / .96) 100%), radial-gradient(80% 40% at 50% 18%, rgb(var(--glow-rgb) / .26), transparent 70%); } .hero-in{ padding-top:clamp(40px,7vh,70px); } .hdr-cta{ gap:8px; } .hdr-cta .btn{ padding:.85em 1.15em; letter-spacing:.12em; } .hdr-cta .btn span{ display:none; } .g3,.g4{ grid-template-columns:repeat(2,1fr); } .callbar{ display:flex; } body{ padding-bottom:0; } .ftr{ padding-bottom:76px; } .hero{ min-height:clamp(500px,80vh,760px); } } @media (max-width:560px){ .g2,.g3,.g4{ grid-template-columns:1fr; } .card-body h3{ min-height:0; } .card-foot{ gap:14px; } .card-foot .add-btn{ width:100%; flex:1 0 100%; } .hdr-cta > .btn{ display:none; } .brand .mark{ width:33px; height:33px; } .brand .n{ font-size:1.16rem; } :root{ --nav-h:64px; } .gal{ columns:1; } .demo-banner{ font-size:.6rem; letter-spacing:.14em; padding:10px 40px 10px 14px; } .demo-banner .sep{ display:none; } .demo-banner .hide-xs{ display:none; } .btn-row{ flex-direction:column; } .btn-row > .btn{ width:100%; } .card-tag{ font-size:.53rem; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .rv{ opacity:1; transform:none; } html{ scroll-behavior:auto; } } /* Focus */ a:focus-visible,button:focus-visible{ outline:2px solid var(--amethyst); outline-offset:3px; }