/* =====================================================================
BHAGYA LAKSHMI PG — DESIGN SYSTEM ("Warm Paper & Ink")
---------------------------------------------------------------------
Concept : the brand is an inked roofline and a red map pin printed on
warm paper. The whole site is built from that: cream paper
grounds, charcoal ink line-work, one decisive red, and gold
used only as a quiet keyline.
Type : Playfair Display — the wordmark's own family — for display,
Plus Jakarta Sans for everything operational, Caveat used
*only* for the brand's handwritten tagline.
Signature: the "roofrule" divider (a hairline that peaks into a roof)
and the pin-drop marker, replacing generic decoration.
Motion : IntersectionObserver + CSS only. No animation framework.
Every entrance is opacity + transform (compositor-only).
===================================================================== */
/* ============================= 1. TOKENS ============================= */
:root {
/* --- ground ------------------------------------------------------- */
--paper: #FCF8F1;
--paper-2: #F5EDE0;
--paper-3: #EFE4D3;
--surface: #FFFFFF;
--surface-2: #FFFCF6;
--night: #1B1512;
--night-2: #241C17;
/* --- ink ---------------------------------------------------------- */
--ink: #1B1512; /* 17.1:1 on paper */
--ink-2: #3A2E27; /* 12.4:1 */
--muted: #6B5A4E; /* 6.2:1 — smallest body text still passes AA */
--charcoal: #262626; /* logo ink */
/* --- brand -------------------------------------------------------- */
--red: #B3121B; /* 6.6:1 on paper · white on red 7.0:1 */
--red-deep: #7B0C13;
--red-lit: #D6202A; /* large display text / decoration only */
--gold-ink: #7E5B0E; /* 5.9:1 — the only gold allowed on text */
--gold: #9A731C;
--gold-lit: #C9A24A; /* decoration · 7.5:1 on night */
--gold-soft: #EFDFB8;
--saffron: #D2701A; /* decoration only */
--green: #12734A; /* 5.6:1 · white on green 5.9:1 */
--green-lit: #1D9560;
/* --- lines & shadow ---------------------------------------------- */
--line: #E7DCC9;
--line-2: #D8C6A9;
--sh-1: 0 1px 2px rgba(70,44,20,.05), 0 2px 8px rgba(70,44,20,.045);
--sh-2: 0 2px 6px rgba(70,44,20,.05), 0 12px 30px rgba(70,44,20,.08);
--sh-3: 0 4px 12px rgba(70,44,20,.06), 0 28px 64px rgba(60,36,16,.14);
--sh-red: 0 8px 22px rgba(179,18,27,.24);
--sh-green: 0 8px 22px rgba(18,115,74,.24);
/* --- radii -------------------------------------------------------- */
--r-xs: 6px; --r-sm: 10px; --r-md: 16px;
--r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
/* --- space (8px base) --------------------------------------------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px; --s-10: 120px;
/* --- layout ------------------------------------------------------- */
--shell: 1200px;
--gutter: clamp(18px, 4.6vw, 40px);
--sec-y: clamp(60px, 9vw, 118px);
--head-h: 70px;
/* --- type --------------------------------------------------------- */
--f-disp: "Playfair Display", "Iowan Old Style", Georgia, serif;
--f-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-sig: "Caveat", "Segoe Script", cursive;
--t-hero: clamp(2.35rem, 1.15rem + 5.1vw, 4.6rem);
--t-h2: clamp(1.85rem, 1.16rem + 2.7vw, 3.05rem);
--t-h3: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
--t-h4: clamp(1.02rem, .98rem + .2vw, 1.14rem);
--t-body: clamp(1rem, .975rem + .11vw, 1.06rem);
--t-lede: clamp(1.06rem, 1rem + .32vw, 1.22rem);
--t-sm: .905rem;
--t-xs: .8rem;
--t-eye: .715rem;
/* --- motion ------------------------------------------------------- */
--e-out: cubic-bezier(.22,1,.36,1);
--e-soft: cubic-bezier(.33,1,.68,1);
--e-inout: cubic-bezier(.65,0,.35,1);
--e-back: cubic-bezier(.34,1.42,.64,1);
--d-1: 160ms; --d-2: 260ms; --d-3: 420ms; --d-4: 700ms;
/* --- z-scale ------------------------------------------------------ */
--z-rail: 40; --z-dock: 45; --z-head: 60; --z-sheet: 80;
--z-chat: 90; --z-lb: 100; --z-progress: 110;
/* --- the mobile action bar's own height, so page content can clear it.
Two rows is the base layout, so this is the taller of the two; the
single-row value is set alongside the single-row grid below. ----- */
--dock-h: 130px;
}
/* ============================= 2. RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--head-h) + 18px);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--f-ui);
font-size: var(--t-body);
font-weight: 450;
line-height: 1.62;
color: var(--ink);
background-color: var(--paper);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-optical-sizing: auto;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
:where(p, li, blockquote, dd) { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
:focus-visible {
outline: 3px solid var(--red);
outline-offset: 3px;
border-radius: var(--r-xs);
}
::selection { background: var(--gold-soft); color: var(--ink); }
.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: fixed; top: -100px; left: 16px; z-index: 200;
background: var(--ink); color: var(--paper);
padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700;
transition: top var(--d-2) var(--e-out);
}
.skip-link:focus { top: 14px; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none;
stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* ============================ 3. LAYOUT ============================ */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
@media (min-width: 1600px) { :root { --shell: 1300px; } }
.section { padding-block: var(--sec-y); position: relative; }
/* section heads ----------------------------------------------------- */
.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 4.4vw, 56px); }
.sec-head--split {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
gap: clamp(16px, 3vw, 56px); align-items: end; max-width: none;
}
.sec-head--split .sec-sub { padding-bottom: .45em; }
.sec-sub { color: var(--muted); font-size: var(--t-lede); max-width: 46ch; }
.sec-head > .sec-sub { margin-top: 14px; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--t-eye); font-weight: 800; letter-spacing: .2em;
text-transform: uppercase; color: var(--gold-ink);
margin-bottom: var(--s-4);
}
.eyebrow i {
font-style: normal; font-family: var(--f-disp); font-weight: 700;
font-size: 1.35em; letter-spacing: 0; color: var(--red);
padding-right: 10px; border-right: 1px solid var(--line-2);
line-height: 1;
}
.h-display {
font-family: var(--f-disp); font-size: var(--t-h2);
font-weight: 600; letter-spacing: -.018em; line-height: 1.06; color: var(--ink);
}
.h-display em { font-style: italic; font-weight: 500; color: var(--red); }
.lede { font-size: var(--t-lede); color: var(--ink-2); max-width: 52ch; margin-top: var(--s-5); }
/* signature divider: a hairline that peaks into a roofline ----------- */
.roofrule {
--rr: var(--line-2);
height: 22px; margin-block: clamp(48px, 7vw, 92px);
background:
linear-gradient(var(--rr), var(--rr)) left 50% / calc(50% - 46px) 1px no-repeat,
linear-gradient(var(--rr), var(--rr)) right 50% / calc(50% - 46px) 1px no-repeat;
position: relative;
}
.roofrule::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 34px; height: 34px; transform: translate(-50%,-50%) rotate(45deg);
border-top: 1px solid var(--rr); border-left: 1px solid var(--rr);
border-radius: 4px 0 0 0;
}
.roofrule::after {
content: ""; position: absolute; left: calc(50% + 34px); top: 50%;
width: 9px; height: 9px; border-radius: 50% 50% 50% 0;
transform: translateY(-50%) rotate(-45deg);
background: var(--red);
}
/* ============================ 4. BUTTONS ============================ */
.btn {
--btn-y: 13px; --btn-x: 22px;
position: relative; display: inline-flex; align-items: center; justify-content: center;
gap: 9px; min-height: 46px; padding: var(--btn-y) var(--btn-x);
font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700;
letter-spacing: .005em; border-radius: var(--r-sm);
border: 1px solid transparent; cursor: pointer; text-align: center;
transition: transform var(--d-1) var(--e-out), box-shadow var(--d-2) var(--e-out),
background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
border-color var(--d-2) var(--e-out);
}
.btn .ic { width: 18px; height: 18px; }
.btn-sm { --btn-y: 9px; --btn-x: 16px; min-height: 40px; font-size: var(--t-xs); }
.btn-lg { --btn-y: 15px; --btn-x: 26px; min-height: 52px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn-primary:hover { background: var(--red-deep); box-shadow: 0 12px 28px rgba(123,12,19,.3); }
.btn-wa { background: var(--green); color: #fff; box-shadow: var(--sh-green); }
.btn-wa:hover { background: #0E5D3B; }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-1); }
.btn-outline:hover { border-color: var(--red); color: var(--red); }
.btn-quiet { background: rgba(27,21,18,.045); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: rgba(179,18,27,.07); color: var(--red); border-color: rgba(179,18,27,.24); }
.btn-dark { background: var(--night); color: var(--gold-soft); }
.btn-dark:hover { background: #2C221C; }
.btn-link { background: none; color: var(--ink-2); padding-inline: 10px; }
.btn-link::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 1px;
background: currentColor; transform: scaleX(.36); transform-origin: left;
transition: transform var(--d-3) var(--e-out); opacity: .5;
}
.btn-link:hover { color: var(--red); }
.btn-link:hover::after { transform: scaleX(1); opacity: 1; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 80ms; }
/* ============================ 5. HEADER ============================ */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-progress); pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%;
background: linear-gradient(90deg, var(--gold-lit), var(--red));
transform: scaleX(0); transform-origin: left; }
.site-head {
position: fixed; inset: 0 0 auto 0; z-index: var(--z-head);
transition: transform var(--d-3) var(--e-out), background-color var(--d-3),
box-shadow var(--d-3), border-color var(--d-3);
border-bottom: 1px solid transparent;
padding-top: env(safe-area-inset-top);
}
.site-head.is-stuck {
background: rgba(252,248,241,.86);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-bottom-color: var(--line);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 24px rgba(70,44,20,.06);
}
.site-head.is-hidden { transform: translateY(-102%); }
.head-in { display: flex; align-items: center; gap: var(--s-4); height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.brand-logo { height: 34px; width: auto; flex: none; transition: transform var(--d-3) var(--e-out); }
.brand:hover .brand-logo { transform: scale(1.04) rotate(-.6deg); }
.brand-txt { display: grid; }
.brand-name { font-family: var(--f-disp); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.12; white-space: nowrap; }
.brand-tag { font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
position: relative; display: block; padding: 9px 13px; border-radius: var(--r-sm);
font-size: .875rem; font-weight: 600; color: var(--ink-2);
transition: color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}
.nav a::after {
content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
border-radius: 2px; background: var(--red);
transform: scaleX(0); transform-origin: center; opacity: .35;
transition: transform var(--d-3) var(--e-out), opacity var(--d-3);
}
.nav a:hover { color: var(--ink); background: rgba(27,21,18,.04); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--red); }
.nav a.is-active::after { transform: scaleX(1); opacity: 1; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.head-call { display: none; }
.head-actions > .btn-primary { display: none; }
.burger {
width: 46px; height: 46px; display: grid; place-content: center; gap: 5px;
border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface);
box-shadow: var(--sh-1); transition: border-color var(--d-2), background-color var(--d-2);
}
.burger span {
display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink);
transition: transform var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out), width var(--d-3) var(--e-out);
}
.burger span:nth-child(2) { width: 14px; margin-left: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.burger:hover { border-color: var(--red); }
/* ---- mobile sheet ------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet-scrim {
position: absolute; inset: 0; background: rgba(27,21,18,.5);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
opacity: 0; transition: opacity var(--d-3) var(--e-out);
}
.sheet-panel {
position: absolute; inset: 0 0 0 auto; width: min(400px, 90vw);
display: flex; flex-direction: column;
background: var(--paper); border-left: 1px solid var(--line);
box-shadow: -30px 0 70px rgba(50,30,12,.24);
padding: calc(16px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
transform: translateX(100%); transition: transform var(--d-4) var(--e-out);
overflow-y: auto; overscroll-behavior: contain;
}
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet.is-open .sheet-panel { transform: translateX(0); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-logo { height: 46px; width: auto; }
.sheet-x {
width: 46px; height: 46px; flex: none; display: grid; place-content: center;
border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
}
.sheet-x .ic { width: 21px; height: 21px; }
.sheet-nav { display: flex; flex-direction: column; padding-block: 6px; }
.sheet-nav a {
display: flex; align-items: baseline; gap: 14px; min-height: 56px;
padding: 12px 6px; border-bottom: 1px solid var(--line);
font-family: var(--f-disp); font-size: 1.42rem; font-weight: 500; color: var(--ink);
opacity: 0; transform: translateX(22px);
transition: color var(--d-2), background-color var(--d-2),
opacity var(--d-4) var(--e-out) var(--sd, 0ms),
transform var(--d-4) var(--e-out) var(--sd, 0ms);
}
.sheet.is-open .sheet-nav a { opacity: 1; transform: none; }
.sheet-nav a i {
font-style: normal; font-family: var(--f-ui); font-size: .68rem; font-weight: 800;
letter-spacing: .16em; color: var(--gold-ink); min-width: 20px;
}
.sheet-nav a:hover, .sheet-nav a:focus-visible { color: var(--red); }
.sheet-nav a:active { background: rgba(179,18,27,.05); }
.sheet-foot { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }
.sheet-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-note { font-size: var(--t-xs); color: var(--muted); text-align: center; margin-top: 2px; }
@media (min-width: 1080px) {
:root { --head-h: 78px; }
.nav { display: block; }
.brand-name { font-size: 1.08rem; }
.brand-logo { height: 38px; }
.head-call, .head-actions > .btn-primary { display: inline-flex; }
.burger { display: none; }
}
@media (min-width: 1080px) and (max-width: 1219px) {
.nav a { padding-inline: 9px; font-size: .82rem; }
.brand-txt { display: none; }
}
/* ============================== 6. HERO ============================== */
.hero {
position: relative;
padding-top: calc(var(--head-h) + clamp(28px, 6vw, 62px));
padding-bottom: clamp(56px, 8vw, 96px);
overflow: clip;
}
.hero-wash {
position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: -1;
background:
radial-gradient(58% 46% at 78% 16%, rgba(201,162,74,.20), transparent 68%),
radial-gradient(52% 42% at 8% 4%, rgba(179,18,27,.075), transparent 66%),
linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 62%);
}
.hero-grid {
display: grid; gap: clamp(38px, 5vw, 60px);
grid-template-columns: 1fr; align-items: center;
}
/* --- hero copy ----------------------------------------------------- */
.hero-badge {
display: inline-flex; align-items: center; gap: 9px;
font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em; color: var(--red-deep);
background: rgba(179,18,27,.06); border: 1px solid rgba(179,18,27,.16);
padding: 8px 15px; border-radius: var(--r-pill); margin-bottom: var(--s-5);
}
.hero-badge .ic { width: 16px; height: 16px; color: var(--red); }
.hero-title { font-family: var(--f-disp); font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.028em; }
.ht-lead { display: block; font-weight: 500; color: var(--ink-2); font-size: .56em; letter-spacing: -.01em; margin-bottom: .12em; }
.ht-brand { position: relative; display: inline-block; font-weight: 800; }
.ht-brand-txt {
background-image: linear-gradient(100deg,
var(--gold) 0%, var(--saffron) 18%, var(--red-lit) 38%,
var(--red-deep) 55%, var(--red-lit) 72%, var(--saffron) 86%, var(--gold) 100%);
background-size: 320% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
animation: brandFlow 17s var(--e-inout) infinite;
}
@keyframes brandFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* one shimmer sweep on load — echoes the logo reveal's shine */
.ht-shine {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.72) 50%, transparent 58%);
mix-blend-mode: overlay;
}
.js-anim .ht-shine { animation: htShine 1.15s var(--e-inout) 1.65s 1; }
@keyframes htShine { 0% { opacity: 0; transform: translateX(-55%); }
18% { opacity: 1; } 82% { opacity: 1; }
100% { opacity: 0; transform: translateX(55%); } }
.hero-rule {
display: block; height: 3px; width: min(320px, 62%); border-radius: 2px;
background: var(--red); margin-top: clamp(14px, 2vw, 20px);
transform-origin: left; transform: scaleX(0);
}
.js-anim .hero-rule { animation: ruleDraw .62s var(--e-out) 1.5s forwards; }
@keyframes ruleDraw { to { transform: scaleX(1); } }
.hero-sig {
font-family: var(--f-sig); font-size: clamp(1.35rem, 1rem + 1.4vw, 1.95rem);
color: var(--ink-2); margin-top: 6px; line-height: 1.2;
}
.hero-sig span { display: inline-block; clip-path: inset(0 100% 0 0); }
.js-anim .hero-sig span { animation: sigWrite .9s var(--e-soft) 1.95s forwards; }
@keyframes sigWrite { to { clip-path: inset(0 -4% 0 0); } }
.hero-lead { font-size: var(--t-lede); color: var(--muted); max-width: 48ch; margin-top: var(--s-5); }
.hero-points {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
gap: 11px 22px; margin-top: var(--s-5); max-width: 520px;
}
.hero-points li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); font-weight: 600; }
.hero-points .tick {
width: 24px; height: 24px; flex: none; border-radius: 50%;
display: grid; place-content: center;
background: rgba(18,115,74,.1); color: var(--green);
}
.hero-points .tick .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: clamp(26px, 3.4vw, 38px); }
.hero-loc {
display: flex; align-items: center; gap: 8px; margin-top: var(--s-5);
font-size: var(--t-xs); color: var(--muted);
}
.hero-loc .ic { width: 16px; height: 16px; color: var(--red); }
/* --- hero visual --------------------------------------------------- */
.hero-visual { position: relative; }
.hv-frame {
position: absolute; inset: 22px -14px -18px 26px; border-radius: var(--r-xl);
border: 1px solid var(--line-2); background: rgba(255,255,255,.35); z-index: 0;
}
.hv-main {
position: relative; z-index: 1; border-radius: var(--r-xl); overflow: hidden;
border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-3);
}
.hv-main img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 58% 52%; }
.hv-cap {
position: absolute; inset: auto 0 0 0; color: #fff;
/* keep clear of the offset corner photo */
padding: 44px 20px 18px calc(clamp(96px, 24vw, 148px) + 14px);
background: linear-gradient(to top, rgba(24,14,8,.82), rgba(24,14,8,.34) 52%, transparent);
}
.hv-cap strong { display: block; font-family: var(--f-disp); font-size: 1.16rem; font-weight: 600; }
.hv-cap span { font-size: var(--t-xs); opacity: .88; }
.hv-chip {
position: absolute; z-index: 3; top: 16px; right: -6px;
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid var(--line); border-radius: var(--r-md);
padding: 10px 14px; box-shadow: var(--sh-2);
}
.hv-chip .ic { width: 20px; height: 20px; color: var(--green); }
.hv-chip b { display: block; font-size: var(--t-xs); font-weight: 800; line-height: 1.25; }
.hv-chip small { font-size: .68rem; color: var(--muted); }
.hv-photo {
position: absolute; z-index: 3; left: -14px; bottom: -22px;
width: clamp(96px, 24vw, 148px); aspect-ratio: 1;
border-radius: var(--r-md); overflow: hidden;
border: 4px solid var(--paper); box-shadow: var(--sh-2);
}
.hv-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-scroll { display: none; }
@media (min-width: 900px) {
.hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(36px, 4.4vw, 64px); }
.hv-main img { aspect-ratio: 4 / 4.05; }
.hero-scroll {
display: block; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
width: 22px; height: 34px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
}
.hero-scroll span {
display: block; width: 3px; height: 7px; border-radius: 2px; background: var(--red);
margin: 6px auto 0; animation: scrollDot 1.9s var(--e-inout) infinite;
}
@keyframes scrollDot { 0%,100% { transform: translateY(0); opacity: 1; }
55% { transform: translateY(12px); opacity: .2; } }
}
@media (min-width: 1200px) { .hv-chip { right: -22px; } .hv-photo { left: -30px; } }
/* ============================ 7. TRUSTBAR ============================ */
.trustbar { background: var(--night); color: var(--paper-2); position: relative; }
.trustbar::before, .trustbar::after {
content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-lit), transparent); opacity: .45;
}
.trustbar::after { inset: auto 0 0 0; }
.trust-in {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
padding-block: clamp(28px, 4vw, 44px);
}
.trust-in > div { text-align: center; padding: 14px 8px; position: relative; }
.trust-in > div::before {
content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
background: rgba(239,223,184,.16);
}
.trust-in > div:nth-child(odd)::before { content: none; }
.trust-num {
font-family: var(--f-disp); font-weight: 700; line-height: 1;
font-size: clamp(2rem, 1.1rem + 3.2vw, 3rem); color: var(--gold-lit);
font-variant-numeric: tabular-nums;
}
.trust-lbl { margin-top: 8px; font-size: var(--t-xs); letter-spacing: .04em; color: rgba(245,237,224,.82); }
@media (min-width: 760px) {
.trust-in { grid-template-columns: repeat(4, minmax(0,1fr)); }
.trust-in > div:nth-child(odd)::before { content: ""; }
.trust-in > div:first-child::before { content: none; }
}
/* ============================ 8. ABOUT ============================ */
.section--about { background: var(--paper); }
.about-grid {
display: grid; gap: clamp(32px, 4.6vw, 64px);
grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 940px) { .about-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.pull {
position: relative; margin-top: var(--s-6);
padding: 26px 24px 22px 26px; border-radius: var(--r-md);
background: linear-gradient(150deg, var(--surface-2), var(--paper-2));
border: 1px solid var(--line); border-left: 3px solid var(--red);
box-shadow: var(--sh-1);
}
.pull-q { position: absolute; top: 18px; right: 20px; width: 30px; height: 30px; color: var(--gold-lit); opacity: .5; }
.pull p { font-family: var(--f-disp); font-style: italic; font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem);
line-height: 1.42; color: var(--ink); max-width: 40ch; }
.pull cite { display: block; margin-top: 14px; font-family: var(--f-ui); font-style: normal;
font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--gold-ink); }
.pull cite::before { content: "— "; }
.about-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: var(--s-6); }
.about-side { display: grid; gap: 14px; }
.hilite {
display: flex; gap: 15px; align-items: flex-start;
padding: 24px; border-radius: var(--r-lg);
background: linear-gradient(155deg, var(--night), #33241C);
color: var(--paper-2); box-shadow: var(--sh-2);
}
.hilite-mark {
width: 46px; height: 46px; flex: none; border-radius: var(--r-sm);
display: grid; place-content: center;
background: rgba(201,162,74,.16); color: var(--gold-lit); border: 1px solid rgba(201,162,74,.28);
}
.hilite-mark .ic { width: 22px; height: 22px; }
.hilite strong { display: block; font-family: var(--f-disp); font-size: 1.22rem; font-weight: 600; color: #fff; }
.hilite p { font-size: var(--t-sm); color: rgba(245,237,224,.8); margin-top: 6px; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.minis li {
padding: 18px 16px; border-radius: var(--r-md); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-1);
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), border-color var(--d-3);
}
.minis li:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.minis .ic { width: 21px; height: 21px; color: var(--red); margin-bottom: 10px; }
.minis b { display: block; font-size: var(--t-sm); font-weight: 700; }
.minis small { font-size: var(--t-xs); color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
/* --- why cards ----------------------------------------------------- */
.why-grid { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 620px) { .why-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.wcard {
position: relative; padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px);
border-radius: var(--r-lg); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden;
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), border-color var(--d-3);
}
.wcard::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--red), var(--saffron), var(--gold-lit));
transform: scaleX(0); transform-origin: left;
transition: transform var(--d-4) var(--e-out);
}
.wcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.wcard:hover::before { transform: scaleX(1); }
.wcard-ic {
width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-content: center;
background: linear-gradient(150deg, rgba(179,18,27,.09), rgba(210,112,26,.09));
color: var(--red); border: 1px solid rgba(179,18,27,.14); margin-bottom: var(--s-4);
transition: transform var(--d-3) var(--e-back);
}
.wcard:hover .wcard-ic { transform: scale(1.07) rotate(-3deg); }
.wcard-ic .ic { width: 24px; height: 24px; }
.wcard h3 { font-family: var(--f-disp); font-size: var(--t-h3); font-weight: 600; margin-bottom: 8px; }
.wcard p { font-size: var(--t-sm); color: var(--muted); }
/* ========================== 9. PROPERTIES ========================== */
.section--props { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 45%, var(--paper) 100%); }
.prop-list { display: grid; gap: clamp(22px, 3vw, 34px); }
.prop {
--tier: var(--red);
display: grid; grid-template-columns: 1fr;
border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-2);
transition: box-shadow var(--d-4) var(--e-out);
}
.prop:hover { box-shadow: var(--sh-3); }
.prop.tier-original { --tier: var(--red); }
.prop.tier-elite { --tier: #3B3B3B; }
.prop.tier-premium { --tier: var(--gold-ink); }
.prop-media { position: relative; overflow: hidden; background: var(--paper-3); }
.prop-photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10;
transition: transform 1s var(--e-out); }
.prop:hover .prop-photo { transform: scale(1.05); }
.prop-badge {
position: absolute; top: 14px; left: 14px; z-index: 2;
display: inline-flex; align-items: center; gap: 7px;
font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
background: rgba(255,255,255,.94); color: var(--tier);
border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-pill);
padding: 7px 14px; box-shadow: var(--sh-1);
}
.prop-logo {
position: absolute; right: 14px; bottom: 14px; z-index: 2;
height: 44px; width: auto; padding: 7px 10px; border-radius: var(--r-sm);
background: rgba(255,255,255,.92); box-shadow: var(--sh-1);
}
.prop-body { padding: clamp(24px, 3vw, 36px); position: relative; }
.prop-body::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tier); }
.prop-body h3 { font-family: var(--f-disp); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); font-weight: 600; }
.prop-sub { color: var(--gold-ink); font-weight: 700; font-size: var(--t-xs);
letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.prop-about { color: var(--muted); font-size: var(--t-sm); margin-top: 14px; max-width: 62ch; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag {
font-size: var(--t-xs); font-weight: 700; color: var(--ink-2);
background: var(--paper-2); border: 1px solid var(--line);
padding: 5px 11px; border-radius: var(--r-xs);
}
.prop-addr {
display: flex; gap: 11px; margin-top: 18px; padding: 15px 16px;
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.prop-addr > .ic { width: 19px; height: 19px; color: var(--red); margin-top: 2px; }
.prop-addr b { display: block; font-size: var(--t-sm); font-weight: 700; }
.prop-addr small { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.prop-addr a {
display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
font-size: var(--t-xs); font-weight: 700; color: var(--red);
border-bottom: 1px solid rgba(179,18,27,.3); padding-bottom: 1px;
transition: border-color var(--d-2), gap var(--d-2) var(--e-out);
}
.prop-addr a:hover { border-color: var(--red); gap: 9px; }
.prop-addr a .ic { width: 13px; height: 13px; }
.note {
display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
padding: 12px 15px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600;
}
.note .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.note-price { background: rgba(126,91,14,.07); border: 1px dashed rgba(126,91,14,.32); color: var(--gold-ink); }
.note-refund { background: rgba(18,115,74,.07); border: 1px dashed rgba(18,115,74,.3); color: var(--green); }
.prop-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.prop-actions .btn { flex: 1 1 auto; min-width: 140px; }
.prop-fac { background: linear-gradient(165deg, var(--paper-2), var(--paper-3));
padding: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); }
.prop-fac h4 {
font-size: var(--t-eye); font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
color: var(--gold-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.prop-fac h4 .ic { width: 15px; height: 15px; }
.prop-fac ul { display: grid; gap: 7px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .prop-fac ul { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.prop-fac li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); line-height: 1.42; }
.prop-fac li .ic { width: 14px; height: 14px; color: var(--green); margin-top: 3px; stroke-width: 2.6; }
@media (min-width: 900px) {
.prop { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-rows: auto 1fr; }
.prop-media { grid-column: 1; grid-row: 1; }
.prop-photo { aspect-ratio: 21/8; }
.prop-body { grid-column: 1; grid-row: 2; }
.prop-fac { grid-column: 2; grid-row: 1 / -1; border-top: 0; border-left: 1px solid var(--line); }
.prop-fac ul { grid-template-columns: 1fr; }
}
@media (min-width: 1120px) { .prop { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
/* ========================== 10. FACILITIES ========================== */
.section--fac { background: var(--paper-2); border-block: 1px solid var(--line); }
.fac-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.fcard {
padding: 22px 20px; border-radius: var(--r-md); background: var(--surface);
border: 1px solid var(--line);
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), border-color var(--d-3);
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.fcard-ic {
width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-content: center;
background: var(--paper-2); color: var(--red); border: 1px solid var(--line); margin-bottom: 13px;
transition: background-color var(--d-3), color var(--d-3), border-color var(--d-3), transform var(--d-3) var(--e-back);
}
.fcard:hover .fcard-ic { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(-5deg); }
.fcard-ic .ic { width: 20px; height: 20px; }
.fcard h3 { font-family: var(--f-ui); font-size: var(--t-h4); font-weight: 700; margin-bottom: 5px; }
.fcard p { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
/* ============================ 11. MENU ============================ */
.menu-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 34px); }
.mtab {
display: inline-flex; align-items: center; gap: 9px; min-height: 48px;
padding: 11px 20px; border-radius: var(--r-pill);
background: var(--surface); border: 1px solid var(--line-2);
font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); box-shadow: var(--sh-1);
transition: transform var(--d-2) var(--e-out), background-color var(--d-2),
color var(--d-2), border-color var(--d-2), box-shadow var(--d-2);
}
.mtab .mt-e { font-size: 1.06rem; line-height: 1; }
.mtab:hover { transform: translateY(-2px); border-color: var(--red); color: var(--red); }
.mtab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--sh-2); }
.mtab[aria-selected="true"]:hover { color: var(--paper); }
.mpanel { display: none; }
.mpanel.is-on { display: block; animation: panelIn .5s var(--e-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.meal-head {
display: grid; gap: clamp(18px, 2.6vw, 30px); align-items: center;
grid-template-columns: 1fr; margin-bottom: clamp(22px, 3vw, 32px);
padding: clamp(22px, 2.8vw, 32px); border-radius: var(--r-xl);
border: 1px solid var(--line); background: var(--surface-2);
}
.meal-head.m-breakfast { background: linear-gradient(140deg, #FFF6E4, #FDEBCB); }
.meal-head.m-lunch { background: linear-gradient(140deg, #FDEEE9, #F9DCD4); }
.meal-head.m-dinner { background: linear-gradient(140deg, #EDEDF6, #E0E1EF); }
.meal-head h3 { font-family: var(--f-disp); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 600;
display: flex; align-items: center; gap: 12px; }
.meal-head h3 span { font-size: .9em; }
.meal-head p { color: var(--ink-2); margin-top: 10px; font-size: var(--t-sm); max-width: 52ch; }
.time-pill {
display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
}
.time-pill .ic { width: 15px; height: 15px; }
.meal-poster {
border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
box-shadow: var(--sh-2); cursor: zoom-in; background: var(--surface);
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out);
}
.meal-poster img { width: 100%; height: auto; display: block; }
.meal-poster:hover { transform: translateY(-4px) rotate(.5deg); box-shadow: var(--sh-3); }
@media (min-width: 820px) { .meal-head { grid-template-columns: minmax(0,1fr) minmax(0, 258px); } }
.dish-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); }
.dish {
padding: 18px 20px; border-radius: var(--r-md); background: var(--surface);
border: 1px solid var(--line);
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), border-color var(--d-3);
}
.dish:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.dish h4 { font-size: var(--t-h4); font-weight: 700; margin-bottom: 5px; }
.dish p { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.specials { margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.8vw, 32px);
border-radius: var(--r-xl); background: linear-gradient(160deg, var(--surface-2), var(--paper-2));
border: 1px solid var(--line-2); }
.specials > h3 {
font-family: var(--f-disp); font-size: 1.4rem; font-weight: 600; margin-bottom: 18px;
display: flex; align-items: center; gap: 10px;
}
.specials > h3 .ic { width: 20px; height: 20px; color: var(--gold-ink); }
.spec-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px,100%),1fr)); }
.spec { padding: 18px 20px; border-radius: var(--r-md); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-1); }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.chip { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--r-pill); }
.chip-day { background: rgba(126,91,14,.1); color: var(--gold-ink); border: 1px solid rgba(126,91,14,.22); }
.chip-veg { background: rgba(18,115,74,.1); color: var(--green); border: 1px solid rgba(18,115,74,.24); }
.chip-non { background: rgba(179,18,27,.09); color: var(--red); border: 1px solid rgba(179,18,27,.22); }
.spec h4 { font-size: var(--t-h4); font-weight: 700; margin-bottom: 5px; }
.spec p { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.gtk {
display: flex; gap: 15px; align-items: flex-start; margin-top: clamp(26px, 3vw, 38px);
padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-xl);
background: linear-gradient(155deg, var(--night), #2E231C); color: var(--paper-2);
}
.gtk-ic { width: 26px; height: 26px; flex: none; color: var(--gold-lit); margin-top: 2px; }
.gtk h3 { font-family: var(--f-disp); font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: 7px; }
.gtk p { font-size: var(--t-sm); color: rgba(245,237,224,.82); }
/* ============================ 12. GALLERY ============================ */
.section--gal { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.gal-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(20px, 2.6vw, 28px); }
.gfilt {
min-height: 42px; padding: 9px 18px; border-radius: var(--r-pill);
background: var(--surface); border: 1px solid var(--line-2);
font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); box-shadow: var(--sh-1);
transition: transform var(--d-2) var(--e-out), background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.gfilt:hover { transform: translateY(-2px); border-color: var(--red); color: var(--red); }
.gfilt[aria-selected="true"] { background: var(--red); color: #fff; border-color: var(--red); }
.gfilt[aria-selected="true"]:hover { color: #fff; }
.gal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(150px,46%),1fr)); }
@media (min-width: 700px) { .gal-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; } }
@media (min-width: 1100px) { .gal-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } }
.gtile {
position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
border: 1px solid var(--line); background: var(--paper-3); cursor: zoom-in;
box-shadow: var(--sh-1); padding: 0; width: 100%; display: block;
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out);
}
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--e-out); }
.gtile:hover { transform: translateY(-4px); box-shadow: var(--sh-2); z-index: 2; }
.gtile:hover img { transform: scale(1.07); }
.gtile figcaption {
position: absolute; inset: auto 0 0 0; padding: 30px 12px 11px; color: #fff;
font-size: .72rem; font-weight: 700; line-height: 1.28; text-align: left;
background: linear-gradient(to top, rgba(24,14,8,.86), transparent);
opacity: 0; transform: translateY(8px);
transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}
.gtile:hover figcaption, .gtile:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gtile figcaption { opacity: 1; transform: none; } }
.gtile-lg { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; border-radius: var(--r-xs);
background: rgba(255,255,255,.8); padding: 3px; }
.gtile-lg img { object-fit: contain; }
@media (min-width: 1100px) {
.gal-grid > .gtile:first-child { grid-column: span 2; grid-row: span 2; }
}
.gal-more { display: flex; justify-content: center; margin-top: clamp(20px, 2.6vw, 30px); }
/* ============================ 13. CONTACT ============================ */
.section--contact { background: var(--paper); }
.contact-grid { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); } }
/* /contact and /inquiry each carry one half of this pair, so the single
panel gets the column to itself rather than sitting in a half-empty grid */
@media (min-width: 980px) { .contact-grid.is-solo { grid-template-columns: minmax(0, 1fr); } }
.contact-grid.is-solo .enquiry { width: 100%; max-width: 720px; margin-inline: auto; }
.contact-cards { display: grid; gap: 14px; align-content: start; }
.ccard {
--tier: var(--red);
padding: 22px; border-radius: var(--r-lg); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--sh-1); position: relative; overflow: hidden;
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out);
}
.ccard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tier); }
.ccard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.ccard.tier-elite { --tier: #3B3B3B; }
.ccard.tier-premium { --tier: var(--gold-ink); }
.ccard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ccard-logo { height: 34px; width: auto; flex: none; }
.ccard-head h3 { font-family: var(--f-disp); font-size: 1.15rem; font-weight: 600; }
.ccard-loc { display: flex; gap: 9px; font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.ccard-loc .ic { width: 15px; height: 15px; color: var(--red); flex: none; margin-top: 2px; }
.ccard-maps {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
font-size: var(--t-xs); font-weight: 700; color: var(--red);
transition: gap var(--d-2) var(--e-out);
}
.ccard-maps:hover { gap: 10px; }
.ccard-maps .ic { width: 13px; height: 13px; }
.ccard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ccard-actions .btn { flex: 1 1 auto; min-width: 130px; }
.enquiry {
padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl);
background: linear-gradient(165deg, var(--surface), var(--surface-2));
border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.enq-head h3 { font-family: var(--f-disp); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 600; }
.enq-head p { font-size: var(--t-sm); color: var(--muted); margin-top: 6px; }
.enq-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%),1fr));
margin: 20px 0 22px; }
.enq-strip > div { display: flex; gap: 11px; align-items: center; padding: 13px 15px;
border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); }
.enq-strip .ic { width: 19px; height: 19px; color: var(--red); flex: none; }
.enq-strip small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); font-weight: 700; }
.enq-strip b { font-size: var(--t-xs); font-weight: 700; line-height: 1.35; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: var(--t-xs); font-weight: 700; margin-bottom: 7px; color: var(--ink-2); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
width: 100%; min-height: 50px; padding: 13px 15px;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--surface); font-size: 1rem; color: var(--ink);
transition: border-color var(--d-2), box-shadow var(--d-2), background-color var(--d-2);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; }
.field input::placeholder, .field textarea::placeholder { color: #A2917F; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,18,27,.13);
}
.field .err { display: none; font-size: var(--t-xs); font-weight: 600; color: var(--red); margin-top: 6px; }
.field.is-bad input, .field.is-bad select { border-color: var(--red); background: rgba(179,18,27,.03); }
.field.is-bad .err { display: flex; align-items: center; gap: 5px; }
.field.is-bad .err::before { content: "!"; display: grid; place-content: center; width: 15px; height: 15px;
border-radius: 50%; background: var(--red); color: #fff; font-size: .62rem; font-weight: 800; flex: none; }
.form-ok {
margin-top: 13px; padding: 0 14px; max-height: 0; overflow: hidden; opacity: 0;
border-radius: var(--r-sm); background: rgba(18,115,74,.09); border: 1px solid rgba(18,115,74,.26);
color: var(--green); font-size: var(--t-xs); font-weight: 700;
transition: max-height var(--d-3) var(--e-out), opacity var(--d-3), padding var(--d-3);
}
.form-ok.is-on { max-height: 100px; opacity: 1; padding: 13px 14px; }
/* highlight pulse used when the assistant sends you somewhere */
.is-spotlit { animation: spotlight 2.1s var(--e-out) 1; }
@keyframes spotlight {
0% { box-shadow: 0 0 0 0 rgba(179,18,27,.42); }
22% { box-shadow: 0 0 0 10px rgba(179,18,27,.14); }
100% { box-shadow: 0 0 0 26px rgba(179,18,27,0); }
}
/* ========================== 14. TESTIMONIALS ========================== */
.section--testi { background: var(--paper-2); border-top: 1px solid var(--line); }
.testi-ctrl { display: flex; gap: 9px; align-items: center; }
.sec-head--split .testi-ctrl { justify-content: flex-end; padding-bottom: .4em; }
.tc-btn {
width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center;
background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1);
transition: transform var(--d-2) var(--e-out), background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.tc-btn .ic { width: 20px; height: 20px; }
.tc-btn:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.tc-btn[disabled] { opacity: .38; pointer-events: none; }
.testi-rail {
display: grid; grid-auto-flow: column;
grid-auto-columns: minmax(min(340px, 86%), 1fr);
gap: clamp(12px, 1.8vw, 20px);
overflow-x: auto; scroll-snap-type: x mandatory;
padding: 4px 4px 18px; margin-inline: -4px;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.testi-rail::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .testi-rail { grid-auto-columns: minmax(0, calc(50% - 10px)); } }
@media (min-width: 1080px) { .testi-rail { grid-auto-columns: minmax(0, calc(33.333% - 14px)); } }
.tcard {
scroll-snap-align: start; display: flex; flex-direction: column;
padding: clamp(24px, 2.8vw, 32px); border-radius: var(--r-lg);
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
position: relative; overflow: hidden;
transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tcard::after {
content: "\201D"; position: absolute; right: 16px; top: -14px;
font-family: var(--f-disp); font-size: 7rem; line-height: 1; color: var(--gold-lit); opacity: .17;
}
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars .ic { width: 17px; height: 17px; fill: var(--gold-lit); stroke: var(--gold-lit); stroke-width: 1.2; }
.tquote { font-family: var(--f-disp); font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
line-height: 1.5; color: var(--ink); flex: 1; position: relative; }
.twho { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tav {
width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-content: center;
background: linear-gradient(140deg, var(--red), var(--saffron)); color: #fff;
font-family: var(--f-disp); font-weight: 700; font-size: 1.05rem;
}
.twho b { display: block; font-size: var(--t-sm); font-weight: 700; }
.twho small { font-size: var(--t-xs); color: var(--muted); }
.testi-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
.section--testi.is-static .testi-ctrl, .section--testi.is-static .testi-dots { display: none; }
.testi-dots button {
width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); padding: 0;
transition: width var(--d-3) var(--e-out), background-color var(--d-3);
}
.testi-dots button.is-on { width: 26px; border-radius: 4px; background: var(--red); }
.closing {
margin-top: clamp(40px, 5.5vw, 68px); text-align: center;
padding: clamp(30px, 4vw, 48px) clamp(20px, 3vw, 40px);
border-radius: var(--r-xl); background: linear-gradient(150deg, var(--night), #33241C);
color: var(--paper-2); box-shadow: var(--sh-2); position: relative; overflow: hidden;
}
.closing::before {
content: ""; position: absolute; inset: auto -10% -60% -10%; height: 100%;
background: radial-gradient(50% 60% at 50% 100%, rgba(201,162,74,.24), transparent 70%);
}
.closing p { position: relative; font-family: var(--f-disp); font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem);
font-weight: 600; color: #fff; }
.closing-cta { position: relative; display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 22px; }
/* ============================= 15. FOOTER ============================= */
.site-foot {
background: var(--night); color: rgba(245,237,224,.78);
padding-top: clamp(48px, 6vw, 74px);
padding-bottom: calc(20px + env(safe-area-inset-bottom));
border-top: 3px solid var(--red);
}
.foot-grid { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1.15fr; } }
.foot-brand img { height: 62px; width: auto; filter: brightness(0) invert(1); opacity: .93; }
.foot-sig { font-family: var(--f-sig); font-size: 1.4rem; color: var(--gold-lit); margin-top: 8px; }
.foot-about { font-size: var(--t-xs); line-height: 1.65; margin-top: 12px; max-width: 40ch; }
.foot-col h4 {
font-size: var(--t-eye); font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-lit); margin-bottom: 16px;
}
.foot-col > a {
display: block; font-size: var(--t-sm); padding: 6px 0; width: fit-content;
transition: color var(--d-2), transform var(--d-2) var(--e-out);
}
.foot-col > a:hover { color: #fff; transform: translateX(4px); }
.foot-info { display: grid; gap: 11px; }
.foot-info li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); }
.foot-info .ic { width: 17px; height: 17px; color: var(--gold-lit); flex: none; margin-top: 3px; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.site-foot .btn-quiet { background: rgba(255,255,255,.08); color: var(--paper-2); border-color: rgba(239,223,184,.2); }
.site-foot .btn-quiet:hover { background: rgba(255,255,255,.14); color: #fff; border-color: var(--gold-lit); }
.foot-bottom {
display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
margin-top: clamp(32px, 4vw, 52px); padding-top: 20px;
border-top: 1px solid rgba(239,223,184,.14); font-size: var(--t-xs);
}
.foot-credit { color: rgba(245,237,224,.5); letter-spacing: .02em; }
.foot-credit span { color: var(--gold-lit); font-weight: 700; }
/* ========================= 16. RAIL / DOCK ========================= */
.rail {
position: fixed; right: 18px; bottom: 20px; z-index: var(--z-rail);
display: none; flex-direction: column; gap: 10px;
}
.rail-btn {
width: 50px; height: 50px; border-radius: 50%; display: grid; place-content: center;
background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
box-shadow: var(--sh-2); position: relative;
transition: transform var(--d-2) var(--e-out), background-color var(--d-2), color var(--d-2);
}
.rail-btn .ic { width: 21px; height: 21px; }
.rail-btn:hover { transform: translateY(-3px) scale(1.05); }
.rail-call { background: var(--red); color: #fff; border-color: var(--red); }
.rail-wa { background: var(--green); color: #fff; border-color: var(--green); }
.rail-chat { background: var(--ink); color: var(--gold-lit); border-color: var(--ink); }
.rail-top { opacity: 0; visibility: hidden; transform: scale(.7);
transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out), visibility var(--d-3); }
.rail-top.is-on { opacity: 1; visibility: visible; transform: none; }
.rail-ping {
position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%;
background: var(--green-lit); border: 2px solid var(--ink);
}
.rail-ping::after {
content: ""; position: absolute; inset: -3px; border-radius: 50%;
border: 1.5px solid var(--green-lit); animation: ping 2.6s var(--e-out) infinite;
}
@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 70%,100% { transform: scale(1.9); opacity: 0; } }
.dock {
position: fixed; inset: auto 0 0 0; z-index: var(--z-dock);
/* The BASE layout is the two-row one — three contacts, then the CTA
across the full width — because that is the layout that survives a
narrow screen, a long label and even a stylesheet that only half
arrives. The single row below is the enhancement, not the fallback,
so the CTA can never end up stranded at a third of a row. */
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
background: rgba(252,248,241,.93);
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
border-top: 1px solid var(--line);
transform: translateY(115%); transition: transform var(--d-4) var(--e-out);
}
.dock.is-on { transform: none; }
.dock-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 50px; padding: 7px 4px; border-radius: var(--r-sm);
font-size: .68rem; font-weight: 700; letter-spacing: .01em; color: var(--ink-2);
background: var(--surface); border: 1px solid var(--line);
transition: background-color var(--d-2), color var(--d-2), transform var(--d-1) var(--e-out);
}
.dock-btn .ic { width: 19px; height: 19px; }
.dock-btn:active { transform: scale(.96); }
.dock-btn > span:not(.dock-ping) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dockCall { color: var(--red); }
#dockWa { color: var(--green); }
/* On its own row the CTA is a wide bar: icon and label side by side, and
it fills that row edge to edge. A stacked pair there would only make the
dock taller for no gain. */
.dock { row-gap: 7px; }
.dock-cta {
grid-column: 1 / -1; /* the whole of its own row, always */
flex-direction: row; gap: 8px; min-height: 46px;
font-size: .78rem; letter-spacing: .01em;
background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--sh-red);
}
.dock-cta .ic { width: 17px; height: 17px; }
/* Wide enough for four labels side by side: one row, with the CTA taking
the extra width rather than every label shrinking to fit the longest.
360px is the common small-Android width and four labels are still a
comfortable 70px there; below it they would start crowding, so that is
where the two-row layout takes over. */
@media (min-width: 360px) {
:root { --dock-h: 74px; }
.dock { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.52fr); }
.dock-cta {
grid-column: auto; flex-direction: column; gap: 3px;
min-height: 50px; font-size: .68rem;
}
.dock-cta .ic { width: 19px; height: 19px; }
}
/* the assistant — the dock twin of .rail-chat, in the same night/gold pair */
.dock-chat {
position: relative;
background: var(--ink); border-color: var(--ink); color: var(--gold-lit);
}
.dock-ping {
position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
background: var(--green-lit); border: 2px solid var(--ink);
}
.dock-ping::after {
content: ""; position: absolute; inset: -3px; border-radius: 50%;
border: 1.5px solid var(--green-lit); animation: ping 2.6s var(--e-out) infinite;
}
/* while the panel is open the dock would sit under it — send it away */
html.chat-on .dock { transform: translateY(115%); }
@media (min-width: 860px) {
.rail { display: flex; }
.dock { display: none; }
}
/* Nothing may come to rest underneath the dock: the footer carries the
bar's own height as extra padding, and anchored jumps stop short of it. */
@media (max-width: 859px) {
html { scroll-padding-bottom: calc(var(--dock-h) + 14px); }
.site-foot { padding-bottom: calc(20px + var(--dock-h) + env(safe-area-inset-bottom)); }
}
/* ===================== 16b. ROUTE-PAGE BREADCRUMB =====================
Only the pages that are NOT the homepage carry this: a quiet line back
up to the site root, sitting under the fixed header in the same warm
ground as the page it opens. */
.crumb {
padding-top: calc(var(--head-h) + 18px); padding-bottom: 2px;
background: var(--paper);
}
.crumb .shell { display: flex; align-items: center; gap: 8px;
font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.crumb a { color: var(--ink-2); border-bottom: 1px solid transparent; transition: color var(--d-2), border-color var(--d-2); }
.crumb a:hover { color: var(--red); border-bottom-color: var(--red); }
.crumb .ic { width: 14px; height: 14px; color: var(--line-2); }
.crumb span { color: var(--gold-ink); }
/* the section right after the crumb has already had its top air */
.crumb + .section { padding-top: clamp(18px, 2.4vw, 30px); }
/* ============================= 17. CHAT ============================= */
.chat {
position: fixed; z-index: var(--z-chat);
right: 0; left: 0; bottom: 0; top: auto;
height: min(84dvh, 660px);
display: flex; flex-direction: column;
background: var(--paper); border-top: 1px solid var(--line-2);
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: 0 -20px 60px rgba(50,30,12,.28);
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(102%); opacity: 0; visibility: hidden;
transition: transform var(--d-4) var(--e-out), opacity var(--d-3), visibility var(--d-3);
overflow: hidden;
}
.chat.is-open { transform: none; opacity: 1; visibility: visible; }
@media (min-width: 620px) {
.chat {
left: auto; right: 20px; bottom: 20px;
width: 396px; height: min(74vh, 640px);
border: 1px solid var(--line-2); border-radius: var(--r-xl);
transform: translateY(18px) scale(.97);
}
.chat.is-open { transform: none; }
}
@media (min-width: 860px) { .chat { right: 84px; } }
.chat-head {
display: flex; align-items: center; gap: 12px; flex: none;
padding: 15px 16px; background: linear-gradient(140deg, var(--night), #33241C); color: #fff;
}
.chat-ava {
width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-content: center;
background: rgba(201,162,74,.18); color: var(--gold-lit); border: 1px solid rgba(201,162,74,.34);
position: relative;
}
.chat-ava .ic { width: 21px; height: 21px; }
.chat-ava i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
background: var(--green-lit); border: 2px solid var(--night); }
.chat-id { flex: 1; min-width: 0; }
.chat-id b { display: block; font-family: var(--f-disp); font-size: 1.05rem; font-weight: 600; }
.chat-id small { font-size: .7rem; color: rgba(245,237,224,.66); }
.chat-x { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-content: center;
color: rgba(245,237,224,.8); transition: background-color var(--d-2), color var(--d-2); }
.chat-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.chat-x .ic { width: 19px; height: 19px; }
.chat-body {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
padding: 18px 14px 6px; display: flex; flex-direction: column; gap: 11px;
background:
radial-gradient(70% 40% at 100% 0%, rgba(201,162,74,.09), transparent 60%),
var(--paper);
}
.msg { display: flex; gap: 8px; max-width: 94%; animation: msgIn .38s var(--e-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.msg-bot { align-self: flex-start; }
.msg-me { align-self: flex-end; flex-direction: row-reverse; }
.msg-ic {
width: 27px; height: 27px; flex: none; border-radius: 50%; display: grid; place-content: center;
background: var(--ink); color: var(--gold-lit); margin-top: 2px;
}
.msg-ic .ic { width: 15px; height: 15px; }
.bub {
padding: 11px 14px; border-radius: 16px; font-size: .875rem; line-height: 1.55;
overflow-wrap: anywhere; min-width: 0;
}
.msg-bot .bub { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 5px;
box-shadow: var(--sh-1); color: var(--ink); }
.msg-me .bub { background: var(--red); color: #fff; border-bottom-right-radius: 5px; box-shadow: var(--sh-red); }
.bub strong { font-weight: 800; }
.bub a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.msg-me .bub a { color: #fff; }
.bub-act { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.act-btn {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
padding: 7px 13px; border-radius: var(--r-pill);
background: rgba(179,18,27,.07); border: 1px solid rgba(179,18,27,.24);
color: var(--red); font-size: .76rem; font-weight: 700;
transition: background-color var(--d-2), transform var(--d-1) var(--e-out);
}
.act-btn .ic { width: 14px; height: 14px; }
.act-btn:hover { background: rgba(179,18,27,.13); transform: translateY(-1px); }
.act-btn.act-wa { background: rgba(18,115,74,.08); border-color: rgba(18,115,74,.26); color: var(--green); }
.act-btn.act-wa:hover { background: rgba(18,115,74,.15); }
.review-card { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm);
background: var(--paper-2); border: 1px solid var(--line-2); font-size: .8rem; }
.review-card dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; }
.review-card dt { color: var(--muted); font-weight: 700; font-size: .72rem; }
.review-card dd { font-weight: 600; }
.typing { display: inline-flex; gap: 4px; padding: 14px 15px !important; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .45;
animation: dotty 1.25s var(--e-inout) infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dotty { 0%,100% { transform: translateY(0); opacity: .35; }
45% { transform: translateY(-4px); opacity: 1; } }
.chat-sugg {
flex: none; display: flex; gap: 7px; padding: 9px 14px 3px;
overflow-x: auto; scrollbar-width: none;
}
.chat-sugg::-webkit-scrollbar { display: none; }
.chat-sugg:empty { display: none; }
.sugg {
flex: none; min-height: 34px; padding: 7px 14px; border-radius: var(--r-pill);
background: var(--surface); border: 1px solid var(--line-2);
font-size: .765rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-1) var(--e-out);
}
.sugg:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); }
.chat-foot { flex: none; display: flex; gap: 8px; padding: 11px 14px 6px; align-items: flex-end; }
.chat-foot input {
flex: 1; min-width: 0; min-height: 46px; padding: 12px 16px;
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: var(--surface); font-size: 1rem;
transition: border-color var(--d-2), box-shadow var(--d-2);
}
.chat-foot input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,18,27,.12); }
.chat-send {
width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-content: center;
background: var(--red); color: #fff; box-shadow: var(--sh-red);
transition: transform var(--d-2) var(--e-out), background-color var(--d-2);
}
.chat-send .ic { width: 19px; height: 19px; }
.chat-send:hover { background: var(--red-deep); transform: scale(1.06); }
.chat-disc { flex: none; font-size: .655rem; color: var(--muted); text-align: center; padding: 0 14px 10px; }
/* =========================== 18. LIGHTBOX =========================== */
.lb {
position: fixed; inset: 0; z-index: var(--z-lb);
display: grid; place-items: center; padding: clamp(12px, 3vw, 36px);
background: rgba(20,12,6,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; transition: opacity var(--d-3) var(--e-out);
}
.lb.is-open { opacity: 1; }
.lb-card { max-width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column;
border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--sh-3);
transform: scale(.96); transition: transform var(--d-4) var(--e-out); }
.lb.is-open .lb-card { transform: none; }
.lb-vis { background: var(--paper-3); display: grid; place-items: center; overflow: hidden;
touch-action: pan-y; cursor: zoom-in; min-height: 0; }
.lb-vis img { width: 100%; max-height: min(70vh, 700px); object-fit: contain;
transition: transform var(--d-3) var(--e-out); }
.lb-vis.is-zoom { cursor: zoom-out; }
.lb-vis.is-zoom img { transform: scale(1.85); }
.lb-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 14px 18px; font-size: var(--t-sm); font-weight: 700; border-top: 1px solid var(--line); }
.lb-cap i { font-style: normal; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.lb-x, .lb-nav {
position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
display: grid; place-content: center; color: #fff;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background-color var(--d-2), transform var(--d-2) var(--e-out);
}
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.28); transform: scale(1.07); }
.lb-x { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-prev { left: 10px; top: 50%; margin-top: -23px; }
.lb-next { right: 10px; top: 50%; margin-top: -23px; }
.lb-nav .ic, .lb-x .ic { width: 22px; height: 22px; }
@media (min-width: 900px) { .lb-prev { left: 22px; } .lb-next { right: 22px; } }
body.is-locked { overflow: hidden; }
/* ========================= 19. SCROLL REVEALS ========================= */
/* Entrance choreography — opacity + transform only, so it stays on the
compositor and never causes layout shift. Delays come from --i (index). */
[data-reveal] {
opacity: 0;
transition:
opacity var(--d-4) var(--e-out) calc(var(--i, 0) * 72ms),
transform var(--d-4) var(--e-out) calc(var(--i, 0) * 72ms),
filter var(--d-4) var(--e-out) calc(var(--i, 0) * 72ms);
}
[data-reveal="up"] { transform: translate3d(0, 30px, 0); }
[data-reveal="left"] { transform: translate3d(34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(-34px, 0, 0); }
[data-reveal="zoom"] { transform: scale(.955); }
[data-reveal="ink"] { transform: translate3d(0, 12px, 0); filter: blur(5px); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* no-JS / crawler fallback: everything visible */
html:not(.js) [data-reveal] { opacity: 1; transform: none; filter: none; }
/* =========================== 20. REDUCED MOTION =========================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
.hero-rule { transform: scaleX(1); }
.hero-sig span{ clip-path: none; }
.ht-brand-txt { animation: none; background-position: 38% 50%; }
.ht-shine, .rail-ping::after, .dock-ping::after, .hero-scroll span { display: none; }
.gtile figcaption { opacity: 1; transform: none; }
}
/* ====================== 21. NARROW / FOLDABLE GUARDS ====================== */
/* Galaxy Z Flip cover displays and other very narrow viewports. */
@media (max-width: 400px) {
:root { --gutter: 15px; }
.btn { --btn-x: 16px; font-size: .84rem; }
.btn-lg { --btn-x: 18px; font-size: .875rem; }
.hero-cta .btn { flex: 1 1 100%; }
.hero-cta .btn-link { flex-basis: auto; }
.prop-actions .btn, .ccard-actions .btn { min-width: 0; flex-basis: 100%; }
.minis { grid-template-columns: 1fr; }
.dock { gap: 5px; padding-inline: 8px; }
.dock-btn { padding-inline: 3px; font-size: .655rem; letter-spacing: 0; }
.dock-btn .ic { width: 17px; height: 17px; }
}
@media (max-width: 340px) {
:root { --gutter: 12px; --t-hero: 2.05rem; }
.hero-badge { font-size: .72rem; padding: 7px 12px; }
/* Cover-screen widths (Flip-style): the hero's offset layers are pulled
back inside the gutter so nothing is shaved off by the hero's clip. */
.hv-frame { inset: 16px 0 -12px 12px; }
.hv-photo { left: 0; bottom: -14px; }
.hv-chip { right: 0; }
.enq-strip { grid-template-columns: 1fr; }
.gal-grid { grid-template-columns: 1fr; }
.foot-bottom { justify-content: flex-start; }
.testi-rail { grid-auto-columns: minmax(0, 94%); }
.sheet-duo { grid-template-columns: 1fr; }
/* the two-row dock is already the base here; only the type needs easing */
.dock { gap: 5px; }
.dock-btn { font-size: .63rem; letter-spacing: 0; }
}
/* Split section headers are two columns only where there is room for
two columns — below the desktop breakpoint they stack. */
@media (max-width: 899px) {
.sec-head--split { grid-template-columns: 1fr; align-items: start; }
.sec-head--split .sec-sub { padding-bottom: 0; }
.sec-head--split .testi-ctrl { justify-content: flex-start; padding-bottom: 0; }
}
@media (max-height: 460px) and (orientation: landscape) {
.hero { padding-top: calc(var(--head-h) + 20px); padding-bottom: 34px; }
.hero-scroll { display: none; }
.chat { height: 92dvh; }
.sheet-nav a { min-height: 46px; font-size: 1.14rem; padding-block: 7px; }
}
/* =================== 22. FULL-SCREEN BRANDED INTRO =================== */
/* A proper opening sequence: the real logo asset (never redrawn, never
re-proportioned) arrives on a warm bloom of light, a specular sweep runs
*through* the ink (masked to the logo's own alpha), the pin pings, the
signature writes itself, our three neighbourhoods cross-fade — then the
whole plate hands off to the site that has been loading behind it.
Choreography is CSS keyframes on a fixed timeline; JS only starts it,
waits for the document, and tears it down. Nothing here ever touches
the logo's geometry: one ![]()
, aspect-ratio locked, object-fit contain. */
.intro { display: none; }
html.js-intro .intro {
display: grid; place-items: center;
position: fixed; inset: 0; z-index: 9999;
background: var(--paper);
overflow: hidden;
transform-origin: 50% 46%;
}
html.is-intro, html.is-intro body { overflow: hidden !important; }
html.is-intro { scroll-behavior: auto; }
html.is-intro #main, html.is-intro .site-head, html.is-intro .site-foot { pointer-events: none; }
.intro > * { grid-area: 1 / 1; }
/* --- ground ------------------------------------------------------- */
.intro-bg {
position: absolute; inset: 0;
background:
radial-gradient(118% 92% at 50% 38%, #FFFEFA 0%, #FCF6EA 34%, #F2E5CE 70%, #E6D5B8 100%);
}
.intro-vig {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(74% 62% at 50% 44%, transparent 42%, rgba(93,62,26,.16) 100%);
}
.intro-bloom {
position: absolute; left: 50%; top: 44%;
width: min(148vw, 1420px); aspect-ratio: 1;
translate: -50% -50%;
max-width: none; pointer-events: none;
background: radial-gradient(circle,
rgba(201,162,74,.36) 0%, rgba(210,112,26,.17) 25%,
rgba(179,18,27,.075) 45%, transparent 68%);
opacity: 0; transform: scale(.42);
animation: iBloom 1.25s var(--e-out) .02s forwards;
}
@keyframes iBloom { to { opacity: 1; transform: scale(1); } }
/* a very slow conic sheen — reads as light moving across fine paper */
.intro-sheen {
position: absolute; left: 50%; top: 46%; width: 96vmax; aspect-ratio: 1;
translate: -50% -50%; pointer-events: none; opacity: 0;
background: conic-gradient(from 0deg,
transparent 0deg, rgba(255,255,255,.34) 42deg, transparent 96deg,
transparent 180deg, rgba(201,162,74,.11) 224deg, transparent 286deg, transparent 360deg);
animation: iSheenIn 1.6s var(--e-out) .25s forwards, iSheenSpin 30s linear infinite;
}
@keyframes iSheenIn { to { opacity: 1; } }
@keyframes iSheenSpin { to { rotate: 360deg; } }
/* --- warm dust ---------------------------------------------------- */
.intro-dust { position: absolute; inset: 0; pointer-events: none; opacity: 0;
animation: iDust 1.5s var(--e-out) .18s forwards; }
@keyframes iDust { to { opacity: 1; } }
.intro-dust i {
position: absolute; bottom: -6%; border-radius: 50%;
background: var(--gold-lit); box-shadow: 0 0 10px rgba(201,162,74,.75);
animation: iMote linear infinite;
}
.intro-dust i.is-red { background: var(--red-lit); box-shadow: 0 0 10px rgba(214,32,42,.5); }
@keyframes iMote {
0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
12% { opacity: 1; }
78% { opacity: 1; }
100% { transform: translate3d(var(--dx, 12px), -108vh, 0) scale(1); opacity: 0; }
}
/* --- stage -------------------------------------------------------- */
.intro-stage {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center;
padding-inline: var(--gutter); text-align: center;
}
/* --- the logo: EXACT asset, aspect locked, uniform scale only ------ */
.intro-logo {
position: relative; isolation: isolate;
width: min(78vw, 545px); aspect-ratio: 560 / 287;
opacity: 0; transform: translate3d(0, 24px, 0) scale(1.085); filter: blur(15px);
animation: iLogo 1.15s var(--e-out) .28s forwards;
will-change: transform, opacity, filter;
}
.intro-logo img { width: 100%; height: 100%; object-fit: contain; }
@keyframes iLogo {
60% { filter: blur(0); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
.intro-halo {
position: absolute; inset: -34% -16%; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side circle at 50% 48%,
rgba(201,162,74,.44) 0%, rgba(210,112,26,.16) 42%, transparent 72%);
filter: blur(16px); opacity: 0; transform: scale(.7);
animation: iHalo 1.1s var(--e-out) 1.02s forwards;
}
@keyframes iHalo { to { opacity: 1; transform: scale(1); } }
/* specular sweep, masked to the logo's own alpha so the light travels
THROUGH the ink instead of washing over the plate */
.intro-sweep {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
-webkit-mask-image: url("assets/logo-transparent.png");
mask-image: url("assets/logo-transparent.png");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
background: linear-gradient(102deg,
transparent 34%, rgba(255,232,176,.75) 45%, rgba(255,252,242,1) 50%,
rgba(255,232,176,.75) 55%, transparent 66%);
background-size: 260% 100%;
mix-blend-mode: screen;
animation: iSweep 1.15s var(--e-inout) 1.28s forwards;
}
@keyframes iSweep {
0% { opacity: 0; background-position: 118% 0; }
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; background-position: -18% 0; }
}
/* the map pin pings — decorative rings behind the plate. The pin itself
is never moved, scaled or separated from the house. */
.intro-ring {
position: absolute; left: 71.6%; top: 21.5%;
width: min(19vw, 118px); aspect-ratio: 1; z-index: -1;
translate: -50% -50%; border-radius: 50%;
border: 1.5px solid rgba(179,18,27,.55);
opacity: 0; transform: scale(.22);
animation: iRing 1.5s var(--e-out) 1.46s forwards;
}
.intro-ring-2 { animation-delay: 1.78s; border-color: rgba(201,162,74,.6); }
@keyframes iRing {
0% { opacity: 0; transform: scale(.22); }
16% { opacity: .85; }
100% { opacity: 0; transform: scale(2.5); }
}
/* --- rule + signature --------------------------------------------- */
.intro-rule {
display: block; width: min(58vw, 330px); height: 2px; margin-top: clamp(16px, 3vw, 26px);
border-radius: 2px; transform: scaleX(0);
background: linear-gradient(90deg, transparent, var(--gold-lit) 22%, var(--red) 50%, var(--gold-lit) 78%, transparent);
animation: iRule .78s var(--e-out) 1.92s forwards;
}
@keyframes iRule { to { transform: scaleX(1); } }
.intro-sig {
font-family: var(--f-sig); color: var(--ink-2);
font-size: clamp(1.35rem, 1rem + 1.9vw, 2.1rem);
line-height: 1.25; margin-top: clamp(8px, 1.4vw, 14px);
}
.intro-sig span { display: inline-block; clip-path: inset(0 100% 0 0);
animation: iSig 1s var(--e-soft) 2.2s forwards; }
@keyframes iSig { to { clip-path: inset(0 -5% 0 0); } }
/* --- the three neighbourhoods cross-fade -------------------------- */
.intro-places {
display: grid; margin-top: clamp(14px, 2.4vw, 22px);
font-size: var(--t-eye); font-weight: 800; letter-spacing: .3em;
text-transform: uppercase; color: var(--gold-ink);
min-height: 1.4em;
}
.intro-places span {
grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 7px, 0);
animation: iPlace .78s var(--e-inout) forwards;
}
.intro-places span:nth-child(1) { animation-delay: 2.66s; }
.intro-places span:nth-child(2) { animation-delay: 3.21s; }
.intro-places span:nth-child(3) { animation-delay: 3.76s; animation-name: iPlaceLast;
animation-duration: .6s; }
@keyframes iPlace {
0% { opacity: 0; transform: translate3d(0, 7px, 0); }
22% { opacity: 1; transform: none; }
62% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(0, -7px, 0); }
}
@keyframes iPlaceLast {
0% { opacity: 0; transform: translate3d(0, 7px, 0); }
28% { opacity: 1; transform: none; }
100% { opacity: 1; transform: none; }
}
/* --- the "still loading" hairline (only if the site is slow) ------- */
.intro-meter {
position: absolute; left: 50%; bottom: clamp(34px, 7vh, 68px);
translate: -50%; width: min(46vw, 190px); height: 2px; border-radius: 2px;
background: rgba(93,62,26,.14); overflow: hidden;
opacity: 0; transition: opacity var(--d-3) var(--e-out);
}
.intro.is-waiting .intro-meter { opacity: 1; }
.intro-meter i {
display: block; width: 42%; height: 100%; border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--red), var(--gold-lit), transparent);
animation: iMeter 1.25s var(--e-inout) infinite;
}
@keyframes iMeter { 0% { transform: translateX(-115%); } 100% { transform: translateX(348%); } }
/* --- handoff ------------------------------------------------------ */
.intro.is-out { animation: iOut .82s var(--e-inout) forwards; pointer-events: none; }
@keyframes iOut { to { opacity: 0; transform: scale(1.055); filter: blur(7px); } }
/* the site lifts in underneath as the plate lets go */
html.is-handoff .site-head, html.is-handoff #main > .hero {
animation: iSiteIn .82s var(--e-out) forwards;
}
@keyframes iSiteIn {
from { opacity: .45; transform: scale(.988) translate3d(0, 10px, 0); }
to { opacity: 1; transform: none; }
}
/* reduced motion: a still, dignified brand plate, no motion at all. */
@media (prefers-reduced-motion: reduce) {
html.js-intro .intro, html.js-intro .intro * { animation: none !important; }
.intro-bloom, .intro-halo, .intro-logo, .intro-sheen {
opacity: 1 !important; transform: none !important; filter: none !important;
}
.intro-rule { transform: scaleX(1) !important; }
.intro-sig span { clip-path: none !important; }
.intro-places span:nth-child(1), .intro-places span:nth-child(2) { display: none; }
.intro-places span:nth-child(3) { opacity: 1 !important; transform: none !important; }
.intro-sweep, .intro-ring, .intro-dust { display: none; }
}
/* very short viewports — keep the plate from crowding */
@media (max-height: 520px) {
.intro-logo { width: min(56vw, 320px); }
.intro-sig { font-size: 1.2rem; }
.intro-places { letter-spacing: .22em; }
}
/* ===================== 23. INTERACTION SYSTEM ======================= */
/* One vocabulary for every interactive surface on the site, so the whole
page feels like a single designed object rather than a pile of hover
rules. JS writes a tiny set of custom properties — --px/--py (pointer,
-1..1), --mx/--my (pointer, % within the box), --rx/--ry (tilt) — and
CSS decides what each component does with them. Everything animated is
transform / opacity, so it all stays on the compositor.
The whole system is gated behind (hover: hover) and (pointer: fine):
a touch screen gets entrance motion and honest tap states instead. */
:root {
--fx-in: 140ms; /* while tracking the cursor — close following */
--fx-out: 620ms; /* returning to rest — unhurried and graceful */
--fx-persp: 1000px;
}
/* ---------- the shared glow / sweep plate (injected by app.js) ------ */
.fx-glow {
position: absolute; inset: 0; z-index: 0;
border-radius: inherit; pointer-events: none; overflow: hidden;
opacity: 0; transition: opacity var(--d-3) var(--e-out);
}
.fx-glow::before {
content: ""; position: absolute; inset: -1px;
background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
rgba(201,162,74,.20), rgba(179,18,27,.055) 44%, transparent 72%);
}
.fx-glow::after {
content: ""; position: absolute; inset: -1px;
background: linear-gradient(112deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
background-size: 260% 100%; background-position: 132% 0;
}
.fx-on > .fx-glow { opacity: 1; }
.fx-on > .fx-glow::after { background-position: -34% 0; transition: background-position 1.1s var(--e-inout); }
/* keep real content above the plate */
.fx-glow ~ * { position: relative; z-index: 1; }
/* ---------- the tilt family ---------------------------------------- */
@media (hover: hover) and (pointer: fine) {
[data-tilt] {
transform:
perspective(var(--fx-persp))
rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
translate3d(0, var(--lift, 0px), 0);
transition:
transform var(--fx-out) var(--e-out),
box-shadow var(--d-3) var(--e-out),
border-color var(--d-3) var(--e-out);
}
[data-tilt].fx-on {
transition-duration: var(--fx-in), var(--d-3), var(--d-3);
will-change: transform;
}
}
/* the components opt in with their own rest/lift values and accents */
.wcard[data-tilt].fx-on { --lift: -7px; box-shadow: var(--sh-2); border-color: var(--line-2); }
.fcard[data-tilt].fx-on { --lift: -5px; box-shadow: var(--sh-2); border-color: var(--line-2); }
.ccard[data-tilt].fx-on { --lift: -5px; box-shadow: var(--sh-2); }
.minis li[data-tilt].fx-on{ --lift: -5px; box-shadow: var(--sh-2); border-color: var(--line-2); }
.gtile[data-tilt].fx-on { --lift: -5px; box-shadow: var(--sh-2); z-index: 2; }
.prop[data-tilt].fx-on { --lift: -5px; box-shadow: var(--sh-3); }
.tcard[data-tilt].fx-on { --lift: -6px; box-shadow: var(--sh-2); }
.hilite[data-tilt].fx-on { --lift: -5px; box-shadow: var(--sh-3); }
.pull[data-tilt].fx-on { --lift: -3px; box-shadow: var(--sh-2); }
.gtk[data-tilt].fx-on { --lift: -3px; box-shadow: var(--sh-2); }
/* --- why cards: the rule on top draws, the icon leans in ----------- */
.wcard[data-tilt].fx-on::before { transform: scaleX(1); }
.wcard[data-tilt].fx-on .wcard-ic {
transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px), 0) scale(1.09) rotate(-4deg);
background: linear-gradient(150deg, rgba(179,18,27,.16), rgba(210,112,26,.14));
border-color: rgba(179,18,27,.3);
}
.wcard-ic { transition: transform var(--fx-in) var(--e-out), background var(--d-3), border-color var(--d-3); }
.wcard h3 { transition: color var(--d-3) var(--e-out); }
.wcard[data-tilt].fx-on h3 { color: var(--red-deep); }
/* --- amenity cards: the icon fills, the title shifts --------------- */
.fcard[data-tilt].fx-on .fcard-ic {
background: var(--red); color: #fff; border-color: var(--red);
transform: translate3d(calc(var(--px, 0) * 4px), 0, 0) rotate(-6deg) scale(1.06);
}
.fcard h3 { transition: transform var(--d-3) var(--e-out), color var(--d-3); }
.fcard[data-tilt].fx-on h3 { transform: translateX(3px); color: var(--red-deep); }
/* --- contact cards: the tier bar widens --------------------------- */
.ccard::before { transition: width var(--d-3) var(--e-out); }
.ccard[data-tilt].fx-on::before { width: 6px; }
/* --- gallery tiles ------------------------------------------------ */
.gtile[data-tilt].fx-on img { transform: scale(1.08) translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -6px), 0); }
/* --- property cards: the photograph drifts under the cursor -------- */
.prop { --fx-persp: 1400px; }
.prop-photo { transition: transform 1s var(--e-out); }
.prop[data-tilt].fx-on .prop-photo {
transform: scale(1.055) translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -9px), 0);
transition-duration: var(--fx-in);
}
.prop-badge, .prop-logo { transition: transform var(--fx-in) var(--e-out), box-shadow var(--d-3); }
.prop[data-tilt].fx-on .prop-badge {
transform: translate3d(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 5px), 0) scale(1.04);
box-shadow: var(--sh-2);
}
.prop[data-tilt].fx-on .prop-logo {
transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 4px), 0);
}
/* the facilities column warms up with the card */
.prop-fac { transition: background var(--d-4) var(--e-out); }
.prop[data-tilt].fx-on .prop-fac {
background: linear-gradient(165deg, var(--paper-2), #EFDFC6);
}
.prop-fac li .ic { transition: transform var(--d-3) var(--e-back); }
.prop[data-tilt].fx-on .prop-fac li .ic { transform: scale(1.18); }
/* ---------- magnetic primary calls to action ---------------------- */
[data-magnet] {
transition: transform var(--fx-out) var(--e-out), box-shadow var(--d-2), background-color var(--d-2);
}
[data-magnet].fx-on {
transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px), 0) scale(1.025);
transition-duration: var(--fx-in), var(--d-2), var(--d-2);
}
/* ================= HERO — CURSOR-DRIVEN DEPTH ====================== */
/* At rest the hero is completely flat: no perspective, no transforms, no
composited layers — the browser paints the photographs exactly as it
always did. The 3D scene is built only while a cursor is actually
inside it (.fx-on), and --dep (depth, 0..1, lerped by app.js) opens and
closes it, so nothing ever pops forward the instant the cursor enters.
app.js lerps --px/--py (-1..1) toward the pointer; each layer below
just declares how deeply it sits in the composition. */
.hero-visual { --px: 0; --py: 0; --dep: 0; }
.hero-visual.fx-on {
perspective: 1150px; perspective-origin: 50% 50%;
--fx-out: 0ms; /* while live the JS lerp is the only smoothing */
}
.hv-main { transition: transform var(--fx-out) var(--e-out), box-shadow var(--d-4) var(--e-out); }
.hv-main img { transition: transform var(--fx-out) var(--e-out); }
.hv-frame { transition: transform var(--fx-out) var(--e-out); }
.hv-chip { transition: transform var(--fx-out) var(--e-out), box-shadow var(--d-3); }
.hv-photo { transition: transform var(--fx-out) var(--e-out), box-shadow var(--d-3) var(--e-out); }
.hero-visual.fx-on .hv-main {
transform:
translate3d(calc(var(--px) * -7px), calc(var(--py) * -6px), 0)
rotateY(calc(var(--px) * var(--dep) * 4.4deg))
rotateX(calc(var(--py) * var(--dep) * -3.4deg));
box-shadow: 0 6px 18px rgba(70,44,20,.08), 0 40px 80px rgba(60,36,16,.18);
}
.hero-visual.fx-on .hv-main img {
transform: scale(calc(1 + var(--dep) * .045))
translate3d(calc(var(--px) * -9px), calc(var(--py) * -7px), 0);
}
/* specular highlight that lives where the cursor is */
.hero-visual.fx-on .hv-main::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
opacity: var(--dep); mix-blend-mode: soft-light;
background: radial-gradient(42% 48% at var(--mx, 50%) var(--my, 50%),
rgba(255,255,255,.55), rgba(255,255,255,.12) 46%, transparent 72%);
}
.hero-visual.fx-on .hv-frame {
transform: translate3d(calc(var(--px) * -13px), calc(var(--py) * -10px),
calc(var(--dep) * -40px));
}
.hero-visual.fx-on .hv-chip {
transform: translate3d(calc(var(--px) * -17px), calc(var(--py) * -14px),
calc(var(--dep) * 48px));
box-shadow: var(--sh-3);
}
/* the foreground bedroom photo is the star: the deepest, liveliest layer */
.hero-visual.fx-on .hv-photo {
transform:
translate3d(calc(var(--px) * 27px), calc(var(--py) * 21px), calc(var(--dep) * 66px))
rotateY(calc(var(--px) * var(--dep) * 9deg))
rotateX(calc(var(--py) * var(--dep) * -7.5deg));
box-shadow: 0 18px 40px rgba(60,36,16,.26);
}
.hero-visual.fx-on .hv-photo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(calc(var(--px) * 40deg + 160deg),
rgba(255,255,255,.30), transparent 46%);
opacity: calc(var(--dep) * .85);
}
.hero-visual.fx-on .hv-main,
.hero-visual.fx-on .hv-main img,
.hero-visual.fx-on .hv-photo,
.hero-visual.fx-on .hv-chip,
.hero-visual.fx-on .hv-frame { will-change: transform; }
/* touch devices: no cursor to follow, so the layers simply arrive well */
@media (hover: none), (pointer: coarse) {
.hv-photo, .hv-chip {
opacity: 0; transform: translate3d(0, 18px, 0);
transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}
.hv-photo { transition-delay: .18s; }
.hv-chip { transition-delay: .28s; }
.hero-visual.is-live .hv-photo, .hero-visual.is-live .hv-chip { opacity: 1; transform: none; }
}
/* ================ TRUST BAR — INTERACTIVE FEATURE STRIP ============ */
.trust-in { gap: clamp(6px, 1vw, 12px); }
.trust-in > div::before { content: none !important; }
.tstat {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: clamp(16px, 2vw, 24px) 10px clamp(14px, 1.8vw, 20px);
border-radius: var(--r-lg);
border: 1px solid rgba(239,223,184,.12);
background: rgba(255,255,255,.022);
text-align: center;
transition:
transform var(--fx-out) var(--e-out),
background-color var(--d-3) var(--e-out),
border-color var(--d-3) var(--e-out),
box-shadow var(--d-3) var(--e-out);
will-change: transform;
}
/* the cursor spotlight + the sweep */
.tstat::before {
content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%),
rgba(201,162,74,.30), rgba(179,18,27,.10) 46%, transparent 74%);
transition: opacity var(--d-3) var(--e-out);
}
.tstat::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(112deg, transparent 38%, rgba(255,241,209,.16) 50%, transparent 62%);
background-size: 250% 100%; background-position: 130% 0;
}
.tstat.fx-on {
transform: translate3d(0, -6px, 0);
background-color: rgba(201,162,74,.07);
border-color: rgba(201,162,74,.42);
box-shadow: 0 18px 40px -18px rgba(0,0,0,.65);
transition-duration: var(--fx-in), var(--d-3), var(--d-3), var(--d-3);
}
.tstat.fx-on::before { opacity: 1; }
.tstat.fx-on::after { background-position: -30% 0; transition: background-position 1.05s var(--e-inout); }
/* the gold hairline that draws across the top on approach */
.tstat-line {
position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--gold-lit), var(--red-lit), transparent);
transform: scaleX(0); transform-origin: center;
transition: transform var(--d-4) var(--e-out);
}
.tstat.fx-on .tstat-line { transform: scaleX(1); }
.tstat-ic {
width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-content: center;
background: rgba(201,162,74,.12); color: var(--gold-lit);
border: 1px solid rgba(201,162,74,.24); margin-bottom: 10px;
transition: transform var(--d-3) var(--e-back), background-color var(--d-3),
color var(--d-3), border-color var(--d-3);
}
.tstat-ic .ic { width: 20px; height: 20px; }
.tstat.fx-on .tstat-ic {
transform: translateY(-3px) scale(1.1) rotate(-6deg);
background: var(--gold-lit); color: var(--night); border-color: var(--gold-lit);
}
.tstat .trust-num { transition: transform var(--d-3) var(--e-out), text-shadow var(--d-3); }
.tstat.fx-on .trust-num { transform: scale(1.05); text-shadow: 0 0 26px rgba(201,162,74,.5); }
.tstat .trust-lbl { transition: color var(--d-3); }
.tstat.fx-on .trust-lbl { color: #fff; }
.tstat-note {
display: block; margin-top: 5px; font-size: .68rem; letter-spacing: .06em;
color: rgba(239,223,184,.5);
transition: color var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}
.tstat.fx-on .tstat-note { color: var(--gold-lit); transform: translateY(-1px); }
@media (hover: none), (pointer: coarse) {
.tstat:active { transform: scale(.985); background-color: rgba(201,162,74,.06); }
}
/* ================= SCROLL CHOREOGRAPHY — EXTRA MOVES =============== */
[data-reveal] {
transition:
opacity var(--d-4) var(--e-out) calc(var(--i, 0) * 78ms),
transform var(--d-4) var(--e-out) calc(var(--i, 0) * 78ms),
filter var(--d-4) var(--e-out) calc(var(--i, 0) * 78ms),
clip-path 900ms var(--e-out) calc(var(--i, 0) * 78ms);
}
[data-reveal="rise"] { transform: translate3d(0, 46px, 0) rotate(.9deg); }
[data-reveal="drop"] { transform: translate3d(0, -26px, 0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="maskx"] { opacity: 1; clip-path: inset(0 100% 0 0); }
[data-reveal="maskx"].is-in { clip-path: inset(0 0 0 0); }
/* an image that reveals *and* settles out of a slow push-in */
[data-reveal="mask"] > img, [data-reveal="mask"] img.rv-img {
transform: scale(1.09); transition: transform 1.35s var(--e-out) calc(var(--i, 0) * 78ms);
}
[data-reveal="mask"].is-in > img, [data-reveal="mask"].is-in img.rv-img { transform: scale(1); }
html:not(.js) [data-reveal="mask"], html:not(.js) [data-reveal="maskx"] { clip-path: none; }
/* headings get a two-part entrance: the line lifts, the accent follows */
.h-display em { display: inline-block; }
[data-reveal] .h-display em {
opacity: 0; transform: translate3d(0, 18px, 0);
transition: opacity var(--d-4) var(--e-out) 190ms, transform var(--d-4) var(--e-out) 190ms;
}
[data-reveal].is-in .h-display em { opacity: 1; transform: none; }
html:not(.js) .h-display em { opacity: 1; transform: none; }
/* the eyebrow's number draws its own little rule */
.eyebrow i { position: relative; }
[data-reveal] .eyebrow i::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .7s var(--e-out) 260ms;
}
[data-reveal].is-in .eyebrow i::after { transform: scaleX(1); }
/* ==================== FOOTER — THE CREDIT ========================== */
.foot-credit .credit-name {
font-weight: 700; letter-spacing: .015em;
background-image: linear-gradient(100deg,
var(--gold-lit) 0%, #E0A94F 14%, var(--saffron) 30%,
#E2463A 46%, var(--red-lit) 60%, #8E1016 76%, #C08A2E 90%, var(--gold-lit) 100%);
background-size: 340% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
animation: creditFlow 21s var(--e-inout) infinite;
}
@keyframes creditFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ======================= REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
[data-tilt], [data-magnet], .tstat, .hv-main, .hv-photo, .hv-chip, .hv-frame, .hv-main img {
transform: none !important;
}
.fx-glow, .hv-main::after, .hv-photo::after { display: none; }
[data-reveal="mask"], [data-reveal="maskx"] { clip-path: none !important; }
[data-reveal] .h-display em { opacity: 1 !important; transform: none !important; }
[data-reveal] .eyebrow i::after { transform: scaleX(1) !important; }
.foot-credit .credit-name { animation: none; background-position: 34% 50%; }
.hv-photo, .hv-chip { opacity: 1 !important; }
}
/* ==================== 24. TOUCH TAP TARGETS ======================== */
/* Text links that act as buttons, and the testimonial dots, were under
24px tall — fine with a cursor, fiddly with a thumb. The hit area is
widened without changing how any of it looks. */
.prop-addr a, .ccard-maps { position: relative; }
.prop-addr a::after, .ccard-maps::after {
content: ""; position: absolute; left: -6px; right: -6px;
top: 50%; height: 44px; transform: translateY(-50%);
}
.testi-dots button { position: relative; }
.testi-dots button::after {
content: ""; position: absolute; left: -7px; right: -7px;
top: 50%; height: 40px; transform: translateY(-50%);
}
@media (hover: none), (pointer: coarse) {
.gfilt, .mtab { min-height: 44px; }
.foot-col > a { padding-block: 9px; }
.rail-btn, .dock-btn { touch-action: manipulation; }
}
/* =============== 25. NARROW-SCREEN MOTION ADJUSTMENTS =============== */
/* Sideways entrances read badly on a phone — the element travels most of
the screen's width — and their pre-reveal offset pushes against the
viewport edge. Below the tablet breakpoint they simply rise instead. */
@media (max-width: 640px) {
[data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 28px, 0); }
[data-reveal="rise"] { transform: translate3d(0, 34px, 0) rotate(.5deg); }
}
/* ================= 26. GRID BLOW-OUT GUARDS ======================== */
/* A grid item's default min-width is min-content, so one wide child can
push a whole column past the viewport. On a 260px foldable cover
display that pushed the entire hero column 33px off-screen. */
/* single column only where it IS single column — the desktop rule in
section 6 already uses minmax(0, …) and must keep winning */
@media (max-width: 899px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-grid > *,
.about-grid > *,
.contact-grid > *,
.foot-grid > *,
.prop > *,
.why-grid > *,
.fac-grid > *,
.minis > * { min-width: 0; }
.hero-title, .h-display, .hilite strong, .ccard-head h3 { overflow-wrap: break-word; }
/* ============= 27. ENQUIRY — THE REVIEW SLIP ======================= */
/* Two steps in one panel: fill it in, then read a printed-looking slip
back before anything leaves the device. The slip borrows the site's
own type and palette — Playfair for the wordmark and title, Jakarta
with wide tracking standing in for the "docket" labels. */
.enq-step { display: none; }
.enq-step.is-on { display: block; }
/* --- the little 1-2-3 rail ---------------------------------------- */
.enq-steps {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 20px; font-size: var(--t-xs); font-weight: 700;
color: var(--muted);
}
.enq-steps li { display: flex; align-items: center; gap: 8px; }
.enq-steps li + li::before {
content: ""; width: clamp(10px, 3vw, 26px); height: 1px;
background: var(--line-2); margin-right: 8px;
}
.enq-steps i {
font-style: normal; width: 22px; height: 22px; border-radius: 50%;
display: grid; place-content: center; font-size: .7rem; font-weight: 800;
background: var(--paper-2); border: 1px solid var(--line-2); color: var(--muted);
transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.enq-steps .is-now { color: var(--ink); }
.enq-steps .is-now i { background: var(--red); border-color: var(--red); color: #fff; }
.enq-steps .is-done i { background: var(--green); border-color: var(--green); color: #fff; }
.enq-duo { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .enq-duo { grid-template-columns: 1fr 1fr; } }
.field label small { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.enq-note {
margin-top: 12px; font-size: var(--t-xs); color: var(--muted); text-align: center;
}
/* --- the slip ------------------------------------------------------ */
.slip { display: block; margin-top: 4px; filter: drop-shadow(0 18px 34px rgba(70,44,20,.16)); }
.slip:focus { outline: none; }
.slip-paper {
position: relative; overflow: hidden;
padding: clamp(20px, 4vw, 30px) clamp(18px, 3.6vw, 30px) clamp(18px, 3vw, 24px);
background: linear-gradient(180deg, #FFFDF8 0%, var(--surface-2) 58%, #FAF3E7 100%);
border: 1px solid var(--line);
border-radius: var(--r-md) var(--r-md) 0 0;
}
/* the printed top edge */
.slip-paper::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
background: linear-gradient(90deg, rgba(179,18,27,.16), rgba(201,162,74,.14) 60%, transparent);
}
.slip-head { display: flex; align-items: center; gap: 12px; }
.slip-logo { width: 62px; height: auto; flex: none; }
.slip-org b {
display: block; font-family: var(--f-disp); font-size: 1.02rem; font-weight: 700;
letter-spacing: .04em; color: var(--ink);
}
.slip-org small {
display: block; margin-top: 3px; font-size: .7rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.slip-rule {
display: block; height: 2px; margin: 16px 0 15px; border-radius: 2px;
background: linear-gradient(90deg, var(--red), var(--saffron) 42%, var(--gold-lit) 74%, rgba(201,162,74,0));
}
.slip-title {
font-family: var(--f-disp); font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem);
font-weight: 700; letter-spacing: .05em; color: var(--ink);
}
.slip-when {
margin-top: 5px; font-size: .66rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* --- the rows ------------------------------------------------------ */
.slip-body { margin-top: 20px; }
.slip-sec {
font-size: .63rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
color: var(--gold-ink); margin: 20px 0 10px;
}
.slip-sec:first-child { margin-top: 0; }
.slip-grid { display: grid; gap: 12px 22px; grid-template-columns: 1fr; }
@media (min-width: 440px) { .slip-grid { grid-template-columns: 1fr 1fr; } }
.slip-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.slip-row.is-wide { grid-column: 1 / -1; }
.slip-row dt {
font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: #8A7868;
}
.slip-row dd {
font-size: var(--t-sm); font-weight: 600; color: var(--ink);
line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty;
}
.slip-row dd.is-blank { font-weight: 500; color: var(--muted); font-style: italic; }
.slip-row dd.is-long { font-weight: 500; }
.slip-dashes {
display: block; height: 1px; margin: 20px 0 12px;
background: repeating-linear-gradient(90deg,
rgba(107,90,78,.34) 0 5px, rgba(107,90,78,0) 5px 10px);
}
.slip-meta {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: #8A7868;
}
.slip-meta span { white-space: nowrap; }
.slip-note {
display: flex; gap: 10px; align-items: flex-start; margin-top: 15px;
padding: 12px 14px; border-radius: var(--r-sm);
background: linear-gradient(120deg, rgba(18,115,74,.07), rgba(201,162,74,.05));
border: 1px solid rgba(18,115,74,.2);
font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5;
}
.slip-note .ic { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
.slip-watermark {
position: absolute; left: 50%; top: 56%; width: min(56%, 210px); height: auto;
transform: translate(-50%, -50%); opacity: .045; pointer-events: none;
filter: grayscale(.6);
}
/* the torn-off bottom edge */
.slip-tear {
display: block; height: 10px;
background: linear-gradient(180deg, #FAF3E7, #F0E5D2);
border: 1px solid var(--line); border-top: 0;
clip-path: polygon(0 0, 100% 0, 100% 34%,
97% 100%, 94% 34%, 91% 100%, 88% 34%, 85% 100%, 82% 34%, 79% 100%, 76% 34%,
73% 100%, 70% 34%, 67% 100%, 64% 34%, 61% 100%, 58% 34%, 55% 100%, 52% 34%,
49% 100%, 46% 34%, 43% 100%, 40% 34%, 37% 100%, 34% 34%, 31% 100%, 28% 34%,
25% 100%, 22% 34%, 19% 100%, 16% 34%, 13% 100%, 10% 34%, 7% 100%, 4% 34%, 1% 100%, 0 34%);
}
.slip-check {
margin: 18px 0 14px; text-align: center;
font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
}
.slip-actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 460px) { .slip-actions { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
/* --- the phone receipt: same slip, tighter -------------------------
On a phone the desktop rhythm turns into a long scroll, so every
gap is pulled in and the panel gives its side padding back to the
content — nothing is removed, hidden or shrunk past reading size.
The label/value pairs keep their two-line hierarchy but sit two to
a row wherever the column is wide enough to hold them. */
@media (max-width: 640px) {
.enquiry { padding: 20px 15px 8px; }
.enq-head h3 { font-size: 1.24rem; }
.enq-head p { margin-top: 4px; }
.enq-steps { margin-bottom: 14px; }
.slip { margin-top: 0; filter: drop-shadow(0 12px 24px rgba(70,44,20,.14)); }
.slip-paper { padding: 15px 14px 14px; }
.slip-paper::before { height: 5px; }
.slip-head { gap: 10px; }
.slip-logo { width: 52px; }
.slip-org b { font-size: .94rem; letter-spacing: .03em; line-height: 1.2; }
.slip-org small { margin-top: 2px; font-size: .58rem; letter-spacing: .08em; line-height: 1.3; }
.slip-rule { margin: 11px 0 10px; }
.slip-title { font-size: 1.02rem; letter-spacing: .04em; }
.slip-when { margin-top: 3px; font-size: .58rem; letter-spacing: .12em; }
.slip-body { margin-top: 13px; }
.slip-sec { margin: 14px 0 7px; font-size: .58rem; letter-spacing: .16em; }
.slip-grid { gap: 10px 14px; }
.slip-row { gap: 1px; }
.slip-row dt { font-size: .6rem; letter-spacing: .08em; line-height: 1.25; }
.slip-row dd { font-size: .855rem; line-height: 1.32; }
.slip-dashes { margin: 13px 0 9px; }
/* the two docket stamps drop onto separate lines rather than being
shaved off by the paper's edge on the narrowest phones */
.slip-meta { flex-wrap: wrap; gap: 2px 10px; font-size: .575rem; letter-spacing: .05em; }
.slip-note { margin-top: 11px; gap: 8px; padding: 9px 11px; line-height: 1.42; }
.slip-note .ic { width: 14px; height: 14px; margin-top: 1px; }
.slip-watermark { width: min(52%, 150px); }
.slip-check { margin: 12px 0 10px; font-size: .82rem; }
}
/* two to a row as soon as the column can hold a label and its value */
@media (min-width: 360px) and (max-width: 640px) {
.slip-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* the receipt must clear the fixed dock — the last line of the enquiry
and the Confirm button are never tucked underneath it */
@media (max-width: 859px) {
.enq-step { padding-bottom: calc(var(--dock-h) - 8px + env(safe-area-inset-bottom)); }
.slip, .slip-actions { scroll-margin-bottom: calc(var(--dock-h) + 16px); }
}
/* ================= THE PRINTER, THE PAPER AND THE HAND ==============
A direct port of the Hitex Health Nest AppointmentTicket sequence:
the same layer stack, the same 7.2s timeline, the same keyframes —
recoloured from its deep blue to this site's night/gold/maroon.
The nesting is not decorative: each layer owns one transform, because
two animations on one element fight over the property and only the
last one applies.
.tk-machine tkRecede the whole unit falls back at the end
.tk-float tkFloat it breathes on its stand
.tk-buzz tkBuzz it judders while the head is running
.tk-paper tkClip the slot clips the sheet until it clears
.tk-pull tkPull the hand draws it out and lifts it
.tk-emerge tkEmerge the sheet feeds out of the slot
.tk-shake tkShake the judder carried into the paper
.tk-bend tkBend the sheet flexes as it is pulled
.tk-hand / .tk-thumb tkHand + tkGrip, thumb painted over the paper
------------------------------------------------------------------ */
/* all three only exist while the machine is running — the hand especially,
or a stray forearm is left lying across the page afterwards */
.tk, .tk-hand, .tk-thumb { display: none; }
.enq-step.is-printing .tk {
display: block; position: relative; z-index: 3;
width: 100%; margin: 0 auto -10px; pointer-events: none;
perspective: 1500px; perspective-origin: 50% 34%;
animation: tkCam 7.2s cubic-bezier(.4,0,.25,1) both;
}
.enq-step.is-printing .tk-machine { animation: tkRecede 7.2s cubic-bezier(.4,0,.25,1) both; }
.enq-step.is-printing .tk-float { animation: tkFloat 6s ease-in-out infinite; }
.enq-step.is-printing .tk-buzz { animation: tkBuzz .12s linear .45s 28 both; }
/* ---- the machine ---------------------------------------------------- */
/* A desk printer, not a wall unit: a deep casing with a raised lid, a
vented flank, a paper tray lip and a recessed mouth underneath. */
.tk-body {
position: relative; height: clamp(96px, 21vw, 132px); overflow: hidden;
border-radius: 14px 14px 8px 8px;
border: 1px solid rgba(201,162,74,.28);
background:
linear-gradient(168deg, #4A3B31 0%, #2E241E 40%, #1B1512 100%);
box-shadow:
0 34px 60px -26px rgba(27,21,18,.95),
inset 0 0 0 1px rgba(255,255,255,.05),
inset 0 2px 0 rgba(239,223,184,.28);
}
.tk-body-gloss {
position: absolute; inset: 0 0 auto 0; height: 46%;
background: linear-gradient(180deg, rgba(239,223,184,.16), transparent);
}
.tk-body-sheen {
position: absolute; top: -60%; left: -30%; width: 70%; height: 220%;
transform: rotate(18deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
/* the lid seam and the vented flank read as a machine, not a box */
.tk-vents {
position: absolute; right: 22px; bottom: 26px; display: flex; gap: 4px;
}
.tk-vents i { width: 3px; height: 16px; border-radius: 2px; background: rgba(0,0,0,.45);
box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(239,223,184,.07); }
.tk-tray {
position: absolute; left: 18px; right: 18px; bottom: 15px; height: 7px;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, rgba(239,223,184,.16), rgba(0,0,0,.3));
box-shadow: inset 0 1px 0 rgba(239,223,184,.22);
}
.tk-scan {
position: absolute; left: 24px; right: 24px; top: 26px;
height: 3px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,.55);
}
.tk-scan i {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(201,162,74,0), var(--gold-lit) 42%, #F2D79A, rgba(201,162,74,0));
}
.tk-id { position: absolute; left: 24px; top: 48px; display: flex; align-items: center; gap: 8px; }
.tk-led { width: 7px; height: 7px; border-radius: 50%; background: var(--red-lit);
box-shadow: 0 0 8px 1px rgba(214,32,42,.5); }
.tk-id em {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal;
font-size: 8.5px; letter-spacing: .22em; color: rgba(239,223,184,.5); white-space: nowrap;
}
.tk-bars { position: absolute; right: 24px; top: 46px; display: flex; align-items: flex-end; gap: 5px; }
.tk-bars i { width: 3px; border-radius: 2px; background: rgba(201,162,74,.55); }
.tk-bars i:nth-child(1) { height: 9px; }
.tk-bars i:nth-child(2) { height: 14px; }
.tk-bars i:nth-child(3) { height: 7px; }
.enq-step.is-printing .tk-scan i { animation: tkScan 1.05s cubic-bezier(.5,0,.5,1) .3s 4 both; }
.enq-step.is-printing .tk-led {
animation: tkWake 7.2s ease-in-out both, tkBreathe 3.4s ease-in-out 7.2s infinite;
}
.enq-step.is-printing .tk-bars i { animation: tkStripe 1.4s ease-in-out infinite; }
.enq-step.is-printing .tk-bars i:nth-child(2) { animation-delay: .2s; }
.enq-step.is-printing .tk-bars i:nth-child(3) { animation-delay: .4s; }
/* the mouth the paper is pushed out of */
.tk-slot {
position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
width: 94%; height: 18px; border-radius: 0 0 12px 12px;
border: 1px solid rgba(201,162,74,.2); border-top: 0;
background: linear-gradient(180deg, #241C17, #14100D);
box-shadow: inset 0 6px 12px rgba(0,0,0,.75);
}
.tk-slot i {
position: absolute; left: 22px; right: 22px; top: 5px; height: 5px;
border-radius: 4px; background: #080605;
box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 14px rgba(201,162,74,.3);
}
.tk-underglow {
position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
width: 70%; height: 22px; border-radius: 50%; filter: blur(4px);
background: radial-gradient(ellipse at center, rgba(201,162,74,.24), transparent 70%);
}
/* ---- the paper -------------------------------------------------------- */
/* Deliberately NOT preserve-3d. Under preserve-3d the browser orders these
siblings by 3D depth and ignores z-index, which buries the thumb behind
the sheet. There is no ancestor perspective on the paper anyway, so the
Z component of tkPull has nothing to project against. */
.tk-paper, .tk-pull, .tk-emerge, .tk-shake, .tk-bend { transform-style: flat; }
.tk-shadow { display: none; }
.enq-step.is-printing .tk-shadow {
display: block; position: absolute; left: 50%; bottom: -26px; z-index: -1;
width: 82%; height: 26px; transform: translateX(-50%);
border-radius: 50%; filter: blur(9px);
background: radial-gradient(ellipse at center, rgba(27,10,4,.6), transparent 72%);
animation: tkShadow 7.2s ease-out both;
}
.enq-step.is-printing .tk-paper { animation: tkClip 7.2s linear both; }
.enq-step.is-printing .tk-pull { animation: tkPull 7.2s cubic-bezier(.36,.02,.22,1) both; }
.enq-step.is-printing .tk-emerge { animation: tkEmerge 2.9s cubic-bezier(.32,.02,.24,1) .5s both; }
.enq-step.is-printing .tk-shake { animation: tkShake .13s linear .56s 22 both; }
.enq-step.is-printing .tk-bend { animation: tkBend 7.2s cubic-bezier(.4,0,.25,1) both;
transform-origin: 50% 0%; }
/* The original leaves the slip floating in the hand for good. Here the
visitor still has to read it and press Confirm, so once the sequence has
played the paper eases down into its place on the page and the machine
and hand fade out — a settle, not a snap. */
.enq-step.is-settling .tk,
.enq-step.is-settling .tk-hand,
.enq-step.is-settling .tk-thumb { display: block; animation: tkClear .55s var(--e-out) both; }
.enq-step.is-settling .tk-pull { animation: tkSettle .55s var(--e-out) both; }
@keyframes tkClear { from { opacity: 1; } to { opacity: 0; } }
@keyframes tkSettle { from { transform: translate3d(0,-60px,0) scale(1.05); }
to { transform: none; } }
/* The original holds its CTAs back until 6.7s. Not done here: those two
elements already run enqSwap, and swapping the `animation` shorthand at
the hand-off restarts it — the Edit and Confirm buttons would blink out
and back at the 7.2s mark. They stay put and readable throughout. */
.enq-step.is-printing .slip-tear { animation: tkInk .3s ease-out 3.95s both; }
.enq-step.is-printing .slip-paper > * { animation: tkInk .45s ease-out both; }
.enq-step.is-printing .slip-head { animation-delay: .85s; }
.enq-step.is-printing .slip-rule { animation-delay: 1.12s; }
.enq-step.is-printing .slip-title { animation-delay: 1.28s; }
.enq-step.is-printing .slip-when { animation-delay: 1.4s; }
.enq-step.is-printing .slip-body { animation-delay: 1.48s; }
.enq-step.is-printing .slip-dashes { animation-delay: 3.02s; }
.enq-step.is-printing .slip-meta { animation-delay: 3.12s; }
.enq-step.is-printing .slip-note { animation-delay: 3.22s; }
/* the watermark lands faint — a `both`-filled animation would otherwise
override the 4.5% set on the class, so it gets its own keyframe */
.enq-step.is-printing .slip-watermark { animation: tkInkFaint .6s ease-out 3.3s both; }
.enq-step.is-printing .slip-body .slip-sec,
.enq-step.is-printing .slip-body .slip-row { animation: tkInk .45s ease-out both; }
/* ---- the hand --------------------------------------------------------- */
/* Drawn at the reference 430px width the original used, then scaled to
whatever width this panel actually is so it meets the paper properly. */
.enq-step.is-printing, .enq-step.is-settling { position: relative; }
/* The hand reaches in from beyond the panel's right edge. `clip` (not
`hidden`) keeps it from ever widening the page, without turning the
section into a scroll container. */
.section--contact { overflow-x: clip; }
.enq-step.is-printing .tk-hand,
.enq-step.is-printing .tk-thumb {
/* Anchored to .tk-pull — the sheet's own box — so the grip stays put on
the paper while tkPull carries them both. The shell hangs 246px off the
right edge, as the original does, so the fingers close on the sheet's
right side and never over its middle. --tk-k rescales the 430px
reference drawing to this panel's real width. */
display: block; position: absolute;
/* the original's -246px is tuned to its 430px ticket; on this narrower
panel that leaves the hand hanging off the sheet, so it is brought in
until the thumb and fingers plainly straddle the paper's edge */
right: calc(-186px * var(--tk-k, 1));
top: calc(96px * var(--tk-k, 1));
width: 390px; height: 300px; pointer-events: none;
animation: tkHand 7.2s cubic-bezier(.34,.02,.24,1) both;
}
/* The sheet has to pass BETWEEN the fingers and the thumb, or the hand just
reads as a fist floating next to the paper. Fingers behind the sheet, the
sheet next, the thumb in front of it — all three inside .tk-pull. */
.enq-step.is-printing .tk-pull { position: relative; }
.enq-step.is-printing .tk-hand { z-index: 1; }
.enq-step.is-printing .tk-emerge { position: relative; z-index: 2; }
.enq-step.is-printing .tk-thumb { z-index: 3; }
.tk-hand-scale {
position: absolute; inset: 0;
transform: scale(calc(.9 * var(--tk-k, 1))); transform-origin: 100% 100%;
}
.tk-grip {
position: relative; width: 100%; height: 100%;
transform-origin: 66% 56%;
animation: tkGrip 7.2s cubic-bezier(.4,0,.25,1) both;
}
.tk-hand .tk-grip { filter: drop-shadow(-22px 26px 30px rgba(27,10,4,.45)); }
.tk-hand span, .tk-thumb span { position: absolute; display: block; }
/* sleeve — the one piece that carries the brand colour */
.h-sleeve {
left: 196px; top: 130px; height: 152px; width: 900px;
transform-origin: left; transform: rotate(16deg); border-radius: 74px 0 0 74px;
background: linear-gradient(180deg,#B3121B 0%,#9A0F17 22%,#7B0C13 52%,#5C0910 82%,#3E0609 100%);
box-shadow: inset 0 3px 0 rgba(255,255,255,.18), inset 0 -16px 26px rgba(30,4,6,.5);
}
.h-sleeve-lit {
left: 214px; top: 142px; height: 30px; width: 860px;
transform-origin: left; transform: rotate(16deg); border-radius: 20px; filter: blur(3px);
background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
}
.h-cuff {
left: 188px; top: 124px; height: 164px; width: 46px;
transform-origin: left; transform: rotate(16deg); border-radius: 24px;
background: linear-gradient(90deg,#C9A24A,#9A731C); box-shadow: 3px 0 16px rgba(30,10,4,.5);
}
.h-wrist {
left: 156px; top: 132px; height: 144px; width: 132px; transform: rotate(12deg);
border-radius: 58px 40px 40px 58px;
background: linear-gradient(150deg,#E5A46D,#BE7440 72%,#9C5628 100%);
}
.h-palm {
left: 64px; top: 94px; height: 176px; width: 212px; transform: rotate(-6deg);
border-radius: 98px 78px 74px 106px;
background: radial-gradient(120% 140% at 30% 16%,#FBCB9E 0%,#F0AE76 38%,#D28A50 74%,#AB6231 100%);
box-shadow: inset -16px -20px 36px rgba(120,58,18,.32), inset 14px 16px 28px rgba(255,225,196,.32);
}
.h-finger-3 {
left: 64px; top: 202px; height: 48px; width: 136px; transform: rotate(4deg); border-radius: 26px;
background: linear-gradient(180deg,#CD8850,#B3702F 62%,#91501F 100%);
box-shadow: 0 6px 14px rgba(96,44,12,.34);
}
.h-finger-4 {
left: 78px; top: 240px; height: 42px; width: 114px; transform: rotate(9deg); border-radius: 22px;
background: linear-gradient(180deg,#C27F49,#A5652B 64%,#86491C 100%);
box-shadow: 0 6px 12px rgba(96,44,12,.3);
}
.h-finger-2 {
left: 32px; top: 158px; height: 56px; width: 184px; transform: rotate(-2deg); border-radius: 30px;
background: linear-gradient(172deg,#FFD9B2,#F3B37F 36%,#DB9153 76%,#B76B34 100%);
box-shadow: inset 0 -10px 20px rgba(126,60,20,.26), inset 0 8px 14px rgba(255,236,214,.4),
0 12px 22px rgba(84,38,10,.28);
}
.h-finger-1 {
left: 6px; top: 110px; height: 60px; width: 212px; transform: rotate(-8deg); border-radius: 34px;
background: linear-gradient(170deg,#FFE3C4,#F9C193 30%,#E5A268 72%,#C07A41 100%);
box-shadow: inset 0 -12px 22px rgba(132,64,22,.24), inset 0 10px 16px rgba(255,242,226,.5),
0 14px 26px rgba(84,38,10,.28);
}
.h-knuckle {
left: 104px; top: 116px; height: 60px; width: 110px; transform: rotate(-12deg);
border-radius: 50%; filter: blur(5px);
background: radial-gradient(closest-side, rgba(255,252,246,.4), transparent 74%);
}
/* the thumb, over the paper */
.t-shadow {
left: -6px; top: 70px; height: 96px; width: 150px; transform: rotate(10deg);
border-radius: 50%; filter: blur(9px);
background: radial-gradient(closest-side, rgba(40,14,4,.34), transparent 74%);
}
.t-thumb {
left: 18px; top: 64px; height: 60px; width: 196px; transform: rotate(10deg);
border-radius: 32px 36px 36px 26px;
background: linear-gradient(184deg,#FFEAD3,#F8C398 32%,#E2A066 74%,#BC7439 100%);
box-shadow: inset 0 -10px 18px rgba(132,64,22,.22), inset 0 10px 16px rgba(255,244,230,.6),
-8px 14px 26px rgba(30,16,6,.32);
}
.t-nail {
left: 30px; top: 74px; height: 36px; width: 52px; transform: rotate(8deg);
border-radius: 20px 14px 16px 20px;
background: linear-gradient(170deg, rgba(255,246,236,.7), rgba(240,196,158,.35));
box-shadow: inset 0 0 0 1px rgba(180,116,70,.22);
}
.t-lit {
left: 96px; top: 70px; height: 26px; width: 86px; transform: rotate(9deg);
border-radius: 20px; filter: blur(2.5px);
background: linear-gradient(180deg, rgba(255,250,242,.6), transparent);
}
/* ---- the timeline, exactly as the original ---------------------------- */
@keyframes tkBreathe {
0%,100% { opacity: .45; box-shadow: 0 0 8px 1px rgba(214,32,42,.35); }
50% { opacity: 1; box-shadow: 0 0 18px 3px rgba(214,32,42,.7); }
}
@keyframes tkWake {
0% { opacity: .4; }
12% { opacity: 1; box-shadow: 0 0 26px 6px rgba(214,32,42,.9); }
62% { opacity: 1; }
100% { opacity: .55; box-shadow: 0 0 10px 1px rgba(214,32,42,.4); }
}
@keyframes tkScan {
0% { transform: translateX(-108%); opacity: 0; }
8% { opacity: 1; }
46% { opacity: 1; }
100% { transform: translateX(108%); opacity: 0; }
}
@keyframes tkStripe { 0%,100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes tkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tkBuzz {
0% { transform: translate3d(0,0,0) rotate(0deg); }
25% { transform: translate3d(-.6px,.3px,0) rotate(-.05deg); }
50% { transform: translate3d(.5px,-.3px,0) rotate(.05deg); }
75% { transform: translate3d(.3px,.4px,0) rotate(-.03deg); }
100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes tkEmerge { from { transform: translate3d(0,-100%,0); } to { transform: translate3d(0,0,0); } }
@keyframes tkShake {
0% { transform: translate3d(0,0,0) rotate(0deg); }
20% { transform: translate3d(-1.1px,0,0) rotate(-.07deg); }
55% { transform: translate3d(.9px,0,0) rotate(.06deg); }
80% { transform: translate3d(-.4px,0,0) rotate(-.02deg); }
100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes tkInk {
0% { opacity: 0; filter: blur(2.5px); transform: translateY(1.5px); }
60% { opacity: 1; filter: blur(.2px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes tkInkFaint {
0% { opacity: 0; filter: blur(3px) grayscale(.6); }
100% { opacity: .045; filter: blur(0) grayscale(.6); }
}
@keyframes tkPull {
0%,55% { transform: translate3d(0,0,0) rotateX(0deg) scale(1); }
60% { transform: translate3d(0,8px,0) rotateX(-1.5deg) scale(1); }
64% { transform: translate3d(-2px,26px,0) rotateX(-3deg) scale(1.005); }
80% { transform: translate3d(0,268px,90px) rotateX(-7deg) scale(1); }
91% { transform: translate3d(0,-74px,0) rotateX(0deg) scale(1.055); }
95.5% { transform: translate3d(0,-52px,0) rotateX(0deg) scale(1.04); }
100% { transform: translate3d(0,-60px,0) rotateX(0deg) scale(1.05); }
}
@keyframes tkClip {
0%,55% { clip-path: inset(0px -700px -1400px -700px); }
59%,100% { clip-path: inset(-1600px -900px -1600px -900px); }
}
@keyframes tkBend {
0%,57% { transform: perspective(900px) rotateX(0deg) skewX(0deg); }
66% { transform: perspective(900px) rotateX(3deg) skewX(-1.1deg); }
78% { transform: perspective(900px) rotateX(1.5deg) skewX(-.5deg); }
88%,100% { transform: perspective(900px) rotateX(0deg) skewX(0deg); }
}
@keyframes tkHand {
0%,47% { transform: translate3d(300px,190px,0) rotate(9deg); opacity: 0; }
51% { transform: translate3d(190px,120px,0) rotate(6deg); opacity: 1; }
58%,100% { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
}
@keyframes tkGrip {
0%,57% { transform: rotate(0deg) scale(1); }
61% { transform: rotate(-2.6deg) scale(.988); }
78% { transform: rotate(-1.4deg) scale(.993); }
100% { transform: rotate(0deg) scale(1); }
}
@keyframes tkCam {
0%,58% { transform: scale(1) translateY(0); }
76% { transform: scale(1.055) translateY(10px); }
92%,100% { transform: scale(1) translateY(0); }
}
@keyframes tkRecede {
0%,62% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
84%,100% { opacity: .28; filter: blur(5px); transform: translateY(-14px) scale(.975); }
}
@keyframes tkShadow {
0%,78% { opacity: 0; transform: scaleX(.7); }
100% { opacity: 1; transform: scaleX(1); }
}
/* the panel cross-fades between the two steps */
.enq-step.is-on > .enq-head, .enq-step.is-on > .enq-strip, .enq-step.is-on > .enq-steps,
.enq-step.is-on > form, .enq-step.is-on > .slip-check, .enq-step.is-on > .slip-actions {
animation: enqSwap .45s var(--e-out) both;
}
.enq-step.is-on > .slip-check { animation-delay: .26s; }
.enq-step.is-on > .slip-actions { animation-delay: .32s; }
@keyframes enqSwap { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.enq-step.is-on .slip, .enq-step.is-on .slip-paper > *:not(.slip-watermark),
.slip-body .slip-sec, .slip-body .slip-row, .enq-step.is-on > * {
animation: none !important; opacity: 1 !important; transform: none !important;
clip-path: none !important;
}
/* the watermark is a 4.5% ghost under the text — a blanket opacity:1 here
turns it into a full-strength logo sitting on top of the details */
.enq-step.is-on .slip-watermark, .enq-step.is-printing .slip-watermark {
animation: none !important; opacity: .045 !important;
transform: translate(-50%, -50%) !important;
}
/* app.js never sets is-printing under reduced motion, but if it is left
over from before the preference changed, the machine, the hand and the
whole feed stay out of the way and the slip is simply there. */
.tk, .tk-thumb, .tk-hand, .tk-shadow,
.enq-step.is-printing .tk, .enq-step.is-printing .tk-thumb,
.enq-step.is-printing .tk-hand, .enq-step.is-printing .tk-shadow,
.enq-step.is-settling .tk, .enq-step.is-settling .tk-thumb,
.enq-step.is-settling .tk-hand { display: none !important; }
.enq-step.is-printing .tk-paper, .enq-step.is-printing .tk-pull,
.enq-step.is-printing .tk-emerge, .enq-step.is-printing .tk-shake,
.enq-step.is-printing .tk-bend, .enq-step.is-settling .tk-pull,
.enq-step.is-printing .slip, .enq-step.is-printing .slip-paper,
.enq-step.is-printing .slip-paper > *, .enq-step.is-printing .slip-tear,
.enq-step.is-printing .slip-body .slip-sec, .enq-step.is-printing .slip-body .slip-row,
.enq-step.is-printing .slip-check, .enq-step.is-printing .slip-actions {
animation: none !important; opacity: 1 !important; transform: none !important;
clip-path: none !important;
}
.enq-step.is-printing .slip-watermark { opacity: .045 !important; }
}
/* ========== 28. DARK FEATURE SECTION — THE INTERACTIVE SURFACE ====== */
/* The existing per-item animation is untouched; this adds a light that
moves across the dark ground underneath it. app.js lerps --sx/--sy
(the light's position) and --aura (its strength) so the glow trails
slightly behind the pointer instead of snapping to it.
Touch devices get the same light: it follows a finger dragged across
the strip, and drifts gently on its own the rest of the time. */
.trustbar { position: relative; overflow: hidden; isolation: isolate;
--sx: 50%; --sy: 50%; --aura: 0; }
.trust-in { position: relative; z-index: 2; }
.trust-aura {
position: absolute; inset: -12% -6%; z-index: 0; pointer-events: none;
opacity: var(--aura);
transition: opacity .75s var(--e-out);
background:
/* the warm core, then the brand reds, then a wide maroon wash */
radial-gradient(15% 34% at var(--sx) var(--sy), rgba(233,196,116,.30), transparent 70%),
radial-gradient(26% 52% at var(--sx) var(--sy), rgba(214,32,42,.30), transparent 72%),
radial-gradient(46% 88% at var(--sx) var(--sy), rgba(123,12,19,.42), transparent 74%);
}
/* a second, lazier layer gives the light some body as it moves */
.trust-grain {
position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none;
opacity: calc(var(--aura) * .7);
transition: opacity .9s var(--e-out);
background: radial-gradient(70% 130% at var(--sx) var(--sy),
rgba(210,112,26,.16), rgba(179,18,27,.06) 46%, transparent 72%);
}
/* the stat cards sit above the light and stay legible */
.tstat { z-index: 2; }
.trustbar.is-lit .tstat { border-color: rgba(239,223,184,.2); }
.trustbar.is-lit .trust-lbl { color: rgba(255,250,240,.92); }
@media (prefers-reduced-motion: reduce) {
.trust-aura, .trust-grain { transition: none; }
.trustbar { --sx: 50%; --sy: 50%; }
}