/* ============================================================================
VALOIR — Grand Chronographe Calibre I
Static hero. Plain HTML + CSS. No JS, no build step, no external resources.
COORDINATE SYSTEM
-----------------
.page is exactly 100vw x 100vh and is pulled back up/left by the frame
thickness so its origin IS the page origin. Every UI element therefore uses
STUDY.md percentages directly: x -> vw, y -> vh.
Conversion used throughout: 1px = 0.05981vw (x) / 0.10627vh (y)
on the 1672 x 941 reference raster.
Vertical text placement is specified by CAP TOP (what STUDY.md measures).
--cap-k is the distance from an element's line box top to the cap top,
expressed in em, for line-height:1. Every text element pulls itself up by
that amount, so `top:` is literally the measured cap top. One knob
re-registers every piece of type if the font metrics ever change.
========================================================================= */
:root{
/* ── motion system ────────────────────────────────────────────────────────
Four curves, each with a job, so nothing on the page moves by accident.
--e-arrive long-tailed out-curve: anything entering the viewport
--e-index slow-in, hard-through, long settle: a mechanism finding a detent
--e-ui short and even: pointer feedback
Scroll-driven motion uses LINEAR by design — the scroll is the easing, and
layering a curve on top makes things accelerate against the user's thumb. */
--e-arrive : cubic-bezier(.16,.84,.24,1);
--e-index : cubic-bezier(.65,0,.20,1);
--e-ui : cubic-bezier(.22,.61,.36,1);
--t-ui : .24s;
--t-index : .52s;
--stagger : 95ms;
/* hairline used by the reduced-motion section dividers */
--hair-1 : 1px;
/* the logo box outline — matched to the hero mark so both lockups agree */
--box-line : rgba(226,208,182,.42);
--focus-ring : #f0e1c9;
/* ── frame ───────────────────────────────────────────────────────────── */
--frame-inset : 0.12vw; /* dark page colour visible outside */
--frame-w : 0.778vw; /* 13px warm-white band */
--frame-r-outer : 1.02vw; /* 17px */
--frame-r-inner : 0.18vw; /* 3px */
--frame-color : #f7f7f7;
--page-color : #0a0705;
/* how far the page origin sits above/left of the canvas origin */
--page-offset : calc(var(--frame-inset) + var(--frame-w));
/* ── watch (SQUARE png — width MUST be vh, never vw) ─────────────────── */
--watch-x : 48.75vw; /* centre x */
--watch-y : 57.99vh; /* centre y */
--watch-w : 100.1vh; /* width — vh so it cannot swallow wordmark */
/* ── giant wordmark (VALOIR) ─────────────────────────────────────────── */
--fable-left : 12.8vw;
--fable-width : 79.2vw; /* = target span / --fable-sx */
--fable-sx : 0.940;
--fable-top : 12.6vh;
--fable-size : 32.4vh;
--fable-opacity : 0.86;
--fable-c1 : #d48332; /* gradient core */
--fable-c2 : #b05c1b; /* mid stop (42%) */
--fable-c3 : #753b12; /* outer stop(88%) */
--fable-blur : 0.5px;
--fable-grain : 11.5vh; /* tile size of the fine grain layer */
/* ── type scale (vh so type tracks the same axis as the hero) ────────── */
--fs-logo : 1.913vh; /* 18.0px logo VALOIR */
--fs-meta : 1.275vh; /* 12.0px MANUFACTURE / GENÈVE */
--fs-nav-num : 1.328vh; /* 12.5px 01 02 03 04 */
--fs-nav-label : 1.381vh; /* 13.0px CALIBRE … */
--fs-series-lbl : 1.169vh; /* 11.0px SERIES */
--fs-series-val : 1.328vh; /* 12.5px 01 / 04 */
--fs-tagline : 1.700vh; /* 16.0px both taglines */
--fs-eyebrow : 1.222vh; /* 11.5px MANIFESTO */
--fs-manifesto : 2.657vh; /* 25.0px Precision, … */
--fs-enter : 1.435vh; /* 13.5px ENTER */
--fs-spec-num : 3.507vh; /* 33.0px 72H / 41 */
--fs-spec-tag : 1.116vh; /* 10.5px SPEC. A / SPEC. B */
--fs-spec-cap : 1.647vh; /* 15.5px panel captions */
/* ── tracking ────────────────────────────────────────────────────────── */
--ls-logo : 0.42em;
--ls-meta : 0.225em;
--ls-nav-num : 0.18em;
--ls-nav-label : 0.16em;
--ls-series-lbl : 0.30em;
--ls-series-val : 0.130em;
--ls-eyebrow : 0.25em;
--ls-enter : 0.335em;
--ls-spec-tag : 0.155em;
/* ── line-heights (unitless) ─────────────────────────────────────────── */
--lh-tagline : 1.4375; /* 23 / 16 */
--lh-manifesto : 1.24; /* 31 / 25 */
/* ── cap-top registration ────────────────────────────────────────────── */
--cap-k : 0.109;
/* ── colours ─────────────────────────────────────────────────────────── */
--c-logo : #fdf6db;
--c-meta : #c6b096;
--c-nav-num : #d9c8b2;
--c-nav-label : rgba(255,255,255,.96);
--c-series : #f0e1c9;
--c-tagline : rgba(255,255,255,.95);
--c-eyebrow : #cdb595;
--c-manifesto : #ffffff;
--c-enter : #ffffff;
--c-spec-num : #f7edd8;
--c-spec-tag : #d6cdb8;
--c-spec-cap : rgba(255,255,255,.93);
--c-rule : rgba(255,255,255,.26);
--c-underline : rgba(255,255,255,.80);
--c-mark : rgba(226,208,182,.55);
/* ── cards ───────────────────────────────────────────────────────────── */
--enter-fill : rgba(15,10,3,.28);
--enter-border : rgba(255,255,255,.45);
--enter-blur : 7px;
--spec-fill : rgba(24,17,10,.56);
--spec-border : rgba(255,255,255,.36);
--spec-divider : rgba(255,255,255,.55);
--spec-blur : 9px;
/* ── hairline weights (kept in px: hairlines should not scale) ───────── */
--hair : 1px;
--hair-15 : 1.5px;
/* ── UI geometry ─────────────────────────────────────────────────────── */
--mark-x : 2.960vw; /* 49.5px */
--mark-y : 5.207vh; /* 49.0px */
--mark-size : 5.760vh; /* 54.2px, square (sized on one axis) */
--brand-x : 7.536vw; /* 126px */
--brand-y : 6.588vh; /* 61px cap top (+1px optical) */
--meta-y : 9.246vh; /* 87px cap top */
--rule-a-x : 35.288vw; /* 590px */
--rule-b-x : 70.456vw; /* 1178px */
--rule-y : 5.260vh; /* 49.5px */
--rule-h : 5.898vh; /* 55.5px */
--nav-x1 : 37.262vw; /* 623px */
--nav-x2 : 45.456vw; /* 760px */
--nav-x3 : 55.564vw; /* 929px */
--nav-x4 : 63.817vw; /* 1067px */
--nav-num-y : 6.269vh; /* 57.5px cap top (+1.5px optical) */
--nav-label-y : 8.608vh; /* 81px cap top */
--underline-x : 35.288vw; /* 590px */
--underline-w : 7.177vw; /* 120px */
--underline-y : 11.052vh; /* 104px */
--series-r : 4.306vw; /* right edge 1600px */
--series-lbl-y: 6.801vh; /* 64px cap top */
--series-val-y: 8.608vh; /* 81px cap top */
/* x values below are box lefts: 2px less than the measured INK left, which is
the left side bearing of the first glyph at these sizes. */
--tag-l-x : 2.931vw; /* 49px -> ink at 51px */
--tag-l-y : 14.134vh; /* 133px cap top */
--tag-r-r : 3.888vw; /* right edge 1607px */
--tag-r-y : 14.240vh; /* 134px cap top */
--eyebrow-x : 2.931vw; /* 49px -> ink at 51px */
--eyebrow-y : 84.697vh; /* 797px cap top (see NOTE in report) */
--manifesto-x : 2.931vw; /* 49px -> ink at 51px */
--manifesto-y : 88.310vh; /* 831px cap top */
--enter-x : 42.362vw; /* 708.3px */
--enter-y : 88.417vh; /* 832.0px */
--enter-w : 14.421vw; /* 241.1px */
--enter-h : 5.664vh; /* 53.3px */
--enter-lbl-x : 3.869vw; /* +64.7px -> ink at 775px */
--enter-lbl-y : 2.338vh; /* +22.0px */
--enter-arr-x : 10.808vw; /* +180.7px */
--enter-arr-y : 2.232vh; /* +21.0px */
--enter-arr-w : 1.701vh; /* 16px (vh: keeps the arrow undistorted) */
--enter-arr-h : 1.381vh; /* 13px */
--spec-x : 74.763vw; /* 1250px */
--spec-y : 70.850vh; /* 666.7px */
--spec-w : 22.159vw; /* 370.5px */
--spec-h : 23.220vh; /* 218.5px */
--spec-div-y : 11.541vh; /* +108.6px */
--spec-pad-x : 1.435vw; /* +24px -> ink at 1276px */
--spec-tag-r : 1.286vw; /* right edge 1597px */
--spec-num-a-y: 2.795vh; /* +26.3px cap top */
--spec-tag-a-y: 3.858vh; /* +36.3px cap top */
--spec-cap-a-y: 7.471vh; /* +70.3px cap top */
--spec-num-b-y: 14.379vh; /* +135.3px cap top */
--spec-tag-b-y: 15.442vh; /* +145.3px cap top */
--spec-cap-b-y: 19.161vh; /* +180.3px cap top */
/* ── procedural grain for the wordmark (inline SVG, no external file) ── */
/* NOTE: color-interpolation-filters='sRGB' is mandatory. The SVG default is
linearRGB, which renders mid-grey noise at ~0.74 sRGB and blows the fill
out to pale yellow. The feColorMatrix maps the turbulence ALPHA channel
into an opaque grey centred exactly on 0.5, so the blend stays neutral
and only the amplitude (the 4th column) controls grain strength. */
--noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0.13 0.435 0 0 0 0.13 0.435 0 0 0 0.13 0.435 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
--noise-broad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.010 0.017' numOctaves='5' seed='23'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0.26 0.37 0 0 0 0.26 0.37 0 0 0 0.26 0.37 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='900' height='420' filter='url(%23b)'/%3E%3C/svg%3E");
}
/* ==========================================================================
RESET
========================================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{
margin:0;
padding:0;
min-height:100%;
}
html{
scroll-behavior:smooth;
}
body{
overflow-x:clip;
background:var(--page-color);
font-family:"Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
p{ margin:0; }
a{ text-decoration:none; color:inherit; }
/* ==========================================================================
FRAME / CANVAS / PAGE
========================================================================== */
.frame{
position:fixed;
inset:var(--frame-inset);
background:var(--frame-color);
border-radius:var(--frame-r-outer);
}
.canvas{
position:absolute;
inset:var(--frame-w);
border-radius:var(--frame-r-inner);
overflow:hidden;
background:#0d0906;
}
/* origin of .page == origin of the viewport */
.page{
position:absolute;
top:calc(var(--page-offset) * -1);
left:calc(var(--page-offset) * -1);
width:100vw;
height:100vh;
}
/* ── layer 1: background plate ─────────────────────────────────────────── */
.bg{
position:absolute;
inset:0;
z-index:1;
}
.bg img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
/* ── layer 2: vignette ─────────────────────────────────────────────────── */
.vignette{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
radial-gradient(118% 96% at 50% 56%,
rgba(0,0,0,0) 36%,
rgba(0,0,0,.22) 66%,
rgba(0,0,0,.52) 86%,
rgba(0,0,0,.74) 100%),
linear-gradient(to bottom,
rgba(0,0,0,.30) 0%,
rgba(0,0,0,0) 16%,
rgba(0,0,0,0) 84%,
rgba(0,0,0,.30) 100%);
}
/* ── layer 3: giant wordmark (real HTML text) ──────────────────────────── */
.wordmark{
position:absolute;
z-index:3;
left:var(--fable-left);
top:var(--fable-top);
width:var(--fable-width);
display:flex;
justify-content:space-between;
align-items:flex-start;
/* Letterform matched to the reference by shape-overlap scoring of the "E":
Arial Black scored IoU 0.840 against the reference glyph, the best of every
system face tested; Avenir Next (previously used) scored only 0.732 — its
E has short stubby arms where the reference has long arms and deep counters.
Arial Black is natively wider than the reference letterform, so the whole
wordmark is condensed horizontally and its width pre-divided to compensate. */
font-family:"Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:900;
font-size:var(--fable-size);
line-height:1;
letter-spacing:0;
white-space:nowrap;
user-select:none;
transform:scaleX(var(--fable-sx));
transform-origin:left top;
/* fill: warm gradient + two low-alpha turbulence fields (irregular grain and
broad mottling). Plain compositing — overlay/soft-light blow the fill out. */
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,'),
radial-gradient(75% 130% at 36% 72%,
var(--fable-c1),
var(--fable-c2) 42%,
var(--fable-c3) 88%);
background-size:auto, auto, 100% 100%;
background-repeat:repeat, repeat, no-repeat;
background-blend-mode:normal, normal, normal;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
opacity:var(--fable-opacity);
filter:blur(var(--fable-blur)); /* sit the edges back into the photograph */
}
.wordmark span{ display:block; }
/* ── layer 4: hero subject ─────────────────────────────────────────────── */
.watch{
position:absolute;
z-index:4;
left:var(--watch-x);
top:var(--watch-y);
width:var(--watch-w); /* vh — a square asset must never be sized in vw */
aspect-ratio:1 / 1;
transform:translate(-50%,-50%);
pointer-events:none;
}
.watch img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
/* ==========================================================================
MODERN GLOBAL LUXURY NAVBAR
========================================================================== */
.valoir-navbar {
position: fixed;
top: calc(var(--frame-inset) + var(--frame-w));
left: calc(var(--frame-inset) + var(--frame-w));
right: calc(var(--frame-inset) + var(--frame-w));
height: 68px;
z-index: 1000;
background: rgba(10, 7, 5, 0.85);
-webkit-backdrop-filter: blur(24px) saturate(160%);
backdrop-filter: blur(24px) saturate(160%);
border-bottom: 1px solid rgba(226, 197, 152, 0.18);
border-top-left-radius: var(--frame-r-inner);
border-top-right-radius: var(--frame-r-inner);
overflow: hidden;
transition: background 0.3s ease, border-color 0.3s ease;
}
.valoir-nav-container {
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
padding: 0 clamp(16px, 2.5vw, 40px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Brand Lockup */
.valoir-brand-lockup {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
flex-shrink: 0;
}
.valoir-crest {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(226, 197, 152, 0.35);
border-radius: 2px;
background: rgba(226, 197, 152, 0.05);
flex-shrink: 0;
}
.valoir-crest svg {
width: 20px;
height: 20px;
color: #e4cba4;
}
.valoir-crest circle { fill: none; stroke: currentColor; stroke-width: 1.8; }
.valoir-crest line { stroke: currentColor; stroke-width: 1.8; }
.valoir-brand-text {
display: flex;
flex-direction: column;
}
.valoir-name {
font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.34em;
color: #fdf6db;
line-height: 1.1;
}
.valoir-sub {
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.2em;
color: #c6b096;
margin-top: 2px;
white-space: nowrap;
}
/* Nav Links */
.valoir-nav-links {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2px, 0.8vw, 14px);
flex-shrink: 1;
min-width: 0;
}
.v-nav-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: clamp(10px, 0.72vw, 11px);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
padding: 6px clamp(4px, 0.5vw, 8px);
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.24s ease, background 0.24s ease;
}
.v-nav-link span {
font-size: 9px;
color: var(--gold-soft, #c9ad84);
font-weight: 600;
opacity: 0.85;
}
.v-nav-link:hover {
color: #ffffff;
background: rgba(226, 197, 152, 0.08);
}
.v-nav-link.is-active {
color: #fdf6db;
}
/* Nav Actions */
.valoir-nav-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.v-audio-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(20, 14, 9, 0.7);
border: 1px solid rgba(226, 197, 152, 0.25);
border-radius: 20px;
color: #e4cba4;
cursor: pointer;
white-space: nowrap;
transition: all 0.25s ease;
}
.v-audio-toggle-btn:hover {
border-color: #e4cba4;
background: rgba(226, 197, 152, 0.15);
}
.v-soundwave {
display: flex;
align-items: flex-end;
gap: 2.5px;
height: 12px;
}
.v-soundwave span {
width: 2px;
height: 4px;
background: #e4cba4;
border-radius: 1px;
transition: height 0.2s ease;
}
.v-audio-toggle-btn.is-playing .v-soundwave span:nth-child(1) { animation: wavePulse 0.8s infinite ease-in-out 0.1s; }
.v-audio-toggle-btn.is-playing .v-soundwave span:nth-child(2) { animation: wavePulse 0.8s infinite ease-in-out 0.3s; }
.v-audio-toggle-btn.is-playing .v-soundwave span:nth-child(3) { animation: wavePulse 0.8s infinite ease-in-out 0.2s; }
.v-audio-toggle-btn.is-playing .v-soundwave span:nth-child(4) { animation: wavePulse 0.8s infinite ease-in-out 0.4s; }
.v-audio-txt {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
}
.v-header-salon-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: linear-gradient(135deg, rgba(226,197,152,0.18), rgba(180,140,90,0.1));
border: 1px solid #e4cba4;
border-radius: 20px;
color: #fff;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
}
.v-header-salon-btn svg {
width: 11px;
height: 9px;
stroke: #e4cba4;
stroke-width: 1.5;
fill: none;
transition: transform 0.25s ease;
}
.v-header-salon-btn:hover {
background: #e4cba4;
color: #0b0705;
}
.v-header-salon-btn:hover svg {
stroke: #0b0705;
transform: translateX(3px);
}
/* ==========================================================================
HERO CINEMATIC STAGE & TELEMETRY
========================================================================== */
.hero-stage-overlay {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(80px, 10vh, 100px) clamp(24px, 4.5vw, 80px) clamp(24px, 4vh, 48px);
opacity: calc(1 - var(--s-enter, 0) * 1.5);
transform: translateY(calc(var(--s-enter, 0) * -30px));
transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-wings-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
gap: 24px;
}
/* Symmetrical Twin Cards (Left & Right Wings) */
.hero-wing-card {
width: clamp(280px, 20vw, 320px);
padding: 22px 24px;
background: rgba(14, 9, 6, 0.75);
border: 1px solid rgba(226, 197, 152, 0.28);
border-radius: 4px;
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(228, 203, 164, 0.06);
pointer-events: auto;
margin-top: clamp(24px, 4.5vh, 48px);
}
.prov-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.prov-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
color: #e4cba4;
text-transform: uppercase;
}
.prov-status {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: #50e3c2;
background: rgba(80, 227, 194, 0.14);
padding: 2px 7px;
border-radius: 2px;
border: 1px solid rgba(80, 227, 194, 0.3);
}
.prov-calibre-badge {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: #e4cba4;
background: rgba(226, 197, 152, 0.14);
padding: 2px 7px;
border-radius: 2px;
border: 1px solid rgba(226, 197, 152, 0.3);
}
.prov-title {
margin: 0 0 14px;
font-size: 15px;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.06em;
text-transform: uppercase;
min-height: 20px;
}
.brand-valoir-title {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.14em;
background: linear-gradient(180deg, #ffffff 0%, #fdf6db 60%, #c9ad84 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.prov-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px 0;
border-top: 1px solid rgba(226, 197, 152, 0.15);
border-bottom: 1px solid rgba(226, 197, 152, 0.15);
margin-bottom: 16px;
}
.prov-spec-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.prov-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.prov-value {
font-size: 12px;
font-weight: 600;
color: #f0e1c9;
}
.hero-btn-plaque {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
background: rgba(226, 197, 152, 0.12);
border: 1px solid rgba(226, 197, 152, 0.45);
border-radius: 2px;
color: #e4cba4;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.28s ease;
}
.hero-btn-plaque svg {
width: 12px;
height: 10px;
stroke: #e4cba4;
stroke-width: 1.5;
fill: none;
transition: transform 0.25s ease;
}
.hero-btn-plaque:hover {
background: #e4cba4;
color: #0b0705;
border-color: #e4cba4;
}
.hero-btn-plaque:hover svg {
stroke: #0b0705;
transform: translateX(3px);
}
.hero-eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(22, 15, 10, 0.65);
border: 1px solid rgba(226, 197, 152, 0.3);
border-radius: 20px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--gold-soft, #c9ad84);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
margin-bottom: 18px;
}
.pill-dot {
width: 6px;
height: 6px;
background: #e4cba4;
border-radius: 50%;
box-shadow: 0 0 8px #e4cba4;
animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.2); }
}
.pill-sep {
color: rgba(226, 197, 152, 0.4);
}
.hero-main-title {
margin: 0 0 12px;
font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1;
background: linear-gradient(180deg, #ffffff 0%, #fdf6db 60%, #c9ad84 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
}
.hero-desc {
margin: 0 0 20px;
max-width: 44ch;
font-size: clamp(12px, 0.85vw, 14px);
line-height: 1.58;
color: rgba(255, 255, 255, 0.80);
}
.hero-action-row {
display: flex;
align-items: center;
gap: 16px;
margin-top: 0;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 28px;
background: linear-gradient(135deg, #e4cba4 0%, #ba9560 100%);
color: #0b0705;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
box-shadow: 0 4px 20px rgba(228, 203, 164, 0.25);
transition: all 0.28s ease;
}
.hero-btn-primary svg {
width: 14px;
height: 10px;
stroke: #0b0705;
stroke-width: 1.6;
fill: none;
transition: transform 0.25s ease;
}
.hero-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(228, 203, 164, 0.4);
}
.hero-btn-primary:hover svg {
transform: translateX(4px);
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background: rgba(20, 14, 9, 0.5);
border: 1px solid rgba(226, 197, 152, 0.35);
color: #ffffff;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all 0.25s ease;
}
.hero-btn-secondary:hover {
border-color: #e4cba4;
background: rgba(226, 197, 152, 0.15);
color: #fdf6db;
}
/* Bottom Floating Telemetry Dock */
.hero-telemetry-dock {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 960px;
pointer-events: auto;
}
.telemetry-card {
display: flex;
flex-direction: column;
padding: 16px 20px;
background: rgba(14, 9, 6, 0.68);
border: 1px solid rgba(226, 197, 152, 0.22);
border-radius: 2px;
text-decoration: none;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.telemetry-card:hover {
border-color: #e4cba4;
background: rgba(26, 17, 11, 0.85);
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(228, 203, 164, 0.15);
}
.telemetry-val {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.05em;
color: #fdf6db;
line-height: 1.2;
}
.telemetry-val small {
font-size: 10px;
color: #e4cba4;
font-weight: 600;
letter-spacing: 0.12em;
margin-left: 2px;
}
.telemetry-lbl {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.65);
text-transform: uppercase;
margin-top: 4px;
}
/* Scroll Cue */
.hero-scroll-cue {
position: absolute;
right: clamp(24px, 4vw, 80px);
bottom: clamp(24px, 4vh, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(226, 197, 152, 0.6);
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.scroll-mouse-wheel {
width: 18px;
height: 28px;
border: 1px solid rgba(226, 197, 152, 0.4);
border-radius: 12px;
display: flex;
justify-content: center;
padding-top: 4px;
}
.wheel-dot {
width: 3px;
height: 6px;
background: #e4cba4;
border-radius: 2px;
animation: mouseWheel 1.8s infinite ease;
}
@keyframes mouseWheel {
0% { opacity: 0; transform: translateY(0); }
30% { opacity: 1; }
100% { opacity: 0; transform: translateY(12px); }
}
/* ==========================================================================
SCROLL-DRIVEN FILM
The hero becomes the first viewport of a tall scroll track. Scrolling scrubs
a pre-rendered film of the watch exploding; scrolling back reassembles it.
========================================================================== */
:root{
--track-h : 520vh; /* scroll distance that maps to the film */
--chapter-x : 5.0vw;
--chapter-y : 40.5vh;
--fs-chapter-num : 1.328vh;
--fs-chapter-name: 2.10vh;
--fs-chapter-line: 1.700vh;
}
/* the hero was locked to exactly one viewport; the page scrolls now */
html,body{ height:auto; overflow:visible; }
/* clip, not hidden: overflow:hidden on body makes it a scroll container
and position:sticky then stops pinning to the viewport */
body{ overflow-x:clip; }
.scroll-track{ position:relative; height:var(--track-h); }
.pin{
position:sticky;
top:0;
height:100vh;
overflow:hidden;
}
/* the sticky .pin supplies the pinning, so the frame no longer fixes itself */
.frame{ position:absolute; }
/* the composed still: background, vignette, wordmark and watch, faded as one */
.hero-static{
position:absolute;
inset:0;
z-index:1;
}
/* The film. Offset by --page-offset: the start frame was captured with the
frame collapsed, which moved the scene up-left by exactly that much, so this
puts the film back in register with the still it crossfades from. */
.film{
position:absolute;
top:var(--page-offset);
left:var(--page-offset);
width:100vw;
height:100vh;
object-fit:cover;
z-index:2;
opacity:0;
pointer-events:none;
will-change:opacity;
background:#0d0906;
}
/* ── chapters ───────────────────────────────────────────────────────────── */
.chapters{
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
}
.chapter{
position:absolute;
right:clamp(24px, 4.5vw, 80px);
left:auto;
bottom:clamp(40px, 7vh, 80px);
top:auto;
max-width:clamp(270px, 24vw, 360px);
padding:18px 22px;
background:rgba(12, 8, 5, 0.82);
border:1px solid rgba(226, 197, 152, 0.32);
border-radius:3px;
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
box-shadow:0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(228, 203, 164, 0.08);
opacity:0;
will-change:opacity, transform;
transform:translateY(var(--cy, 0px));
}
.chapter-badge{
display:inline-block;
font-size:9px;
font-weight:700;
letter-spacing:0.24em;
color:#e4cba4;
text-transform:uppercase;
margin-bottom:8px;
padding:3px 8px;
background:rgba(226, 197, 152, 0.12);
border-radius:2px;
border:1px solid rgba(226, 197, 152, 0.2);
}
.chapter-name{
margin:0 0 8px;
font-size:clamp(15px, 1.3vw, 19px);
font-weight:600;
line-height:1.24;
letter-spacing:0.06em;
color:#ffffff;
text-transform:uppercase;
}
.chapter-line{
margin:0;
font-size:clamp(11.5px, 0.78vw, 13px);
line-height:1.55;
color:rgba(255, 255, 255, 0.75);
}
/* ── reduced motion ─────────────────────────────────────────────────────── */
.rm-sections{ display:none; }
@media (prefers-reduced-motion: reduce){
.scroll-track{ height:100vh; }
.film{ display:none !important; }
.hero-static{ opacity:1 !important; }
.chapters{ display:none; }
.rm-sections{
display:block;
background:var(--page-color);
padding:12vh 5vw 14vh;
}
.rm-sections section{
max-width:52ch;
padding:5.2vh 0;
border-top:var(--hair-1) solid var(--c-hairline, rgba(255,255,255,.18));
}
.rm-sections section:first-child{ border-top:0; }
.rm-num{
display:block;
font-size:var(--fs-nav-num);
font-weight:500;
letter-spacing:var(--ls-nav-num);
color:var(--c-nav-num);
}
.rm-sections h2{
margin:1.6vh 0 0;
font-size:var(--fs-chapter-name);
font-weight:600;
letter-spacing:var(--ls-nav-label);
color:var(--c-nav-label);
}
.rm-sections p{
margin:1.8vh 0 0;
font-size:var(--fs-chapter-line);
font-weight:400;
line-height:1.5;
color:var(--c-tagline);
}
}
/* if the film file is missing, fall back to the still and drop the dead scroll */
html.film-missing .scroll-track{ height:100vh; }
html.film-missing .film{ display:none; }
html.film-missing .hero-static{ opacity:1 !important; }
html.film-missing .chapters{ display:none; }
/* ── interface protection over the film ─────────────────────────────────────
The film exposes bright rose-gold and steel that sweep through the nav row
and park under the manifesto, making both unreadable. These two soft grounds
ride in with the film (opacity is driven alongside it), so at scroll 0 the
composition is byte-identical to the approved still. */
.ui-scrims{
position:absolute;
inset:0;
z-index:4;
opacity:0;
pointer-events:none;
will-change:opacity;
}
.ui-scrims::before{ /* top band: logo, nav, series, taglines */
content:"";
position:absolute;
left:0; right:0; top:0;
height:27vh;
background:linear-gradient(180deg,
rgba(6,3,2,.74) 0%,
rgba(6,3,2,.46) 46%,
rgba(6,3,2,0) 100%);
}
.ui-scrims::after{ /* bottom-left pool: MANIFESTO block */
content:"";
position:absolute;
left:0; bottom:0;
width:54vw; height:36vh;
background:radial-gradient(74% 92% at 16% 90%,
rgba(6,3,2,.82) 0%,
rgba(6,3,2,.48) 46%,
rgba(6,3,2,0) 100%);
}
/* ============================================================================
SECTIONS BELOW THE HERO · client art direction
Language borrowed from the client's board:
· display type is UPPERCASE, widely letterspaced, warm cream-gold
· the colossal words are OUTLINED, not filled, and very widely tracked
· eyebrows read "02 / COLLECTION"
· split compositions: copy left, photograph bleeding off the right edge
· a stat rail divided by vertical hairlines
· underlined arrow links rather than boxes, except the closing pair
========================================================================= */
:root{
--sec-x : 3.05vw;
--fs-eye : clamp(9.5px,.63vw,12px);
--fs-dsp : clamp(26px,2.55vw,50px);
--fs-body : clamp(13px,.88vw,17px);
--fs-micro : clamp(9px,.6vw,11.5px);
--rule-soft : rgba(255,255,255,.13);
--gold-dsp : #e4cba4; /* the board's warm display gold */
--gold-soft : #c9ad84;
--ghost-line : rgba(226,197,152,.30);
}
.page-frame{
position:fixed; inset:var(--frame-inset);
border:var(--frame-w) solid var(--frame-color);
border-radius:var(--frame-r-outer);
pointer-events:none; z-index:1200;
}
.below{
position:relative; z-index:2;
background:
radial-gradient(120% 38% at 14% 0%, rgba(120,62,20,.16) 0%, rgba(120,62,20,0) 60%),
radial-gradient(90% 44% at 86% 40%, rgba(104,54,18,.12) 0%, rgba(104,54,18,0) 64%),
var(--page-color);
}
/* ── atoms ───────────────────────────────────────────────────────────────── */
.eye{
display:block; margin:0 0 clamp(20px,2.6vh,34px);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.34em; color:var(--gold-soft);
text-transform:uppercase;
}
.dsp{
margin:0;
font-size:var(--fs-dsp); font-weight:400;
line-height:1.24; letter-spacing:.13em;
color:var(--gold-dsp); text-transform:uppercase;
}
.body-copy{
margin:clamp(18px,2.4vh,30px) 0 0; max-width:34ch;
font-size:var(--fs-body); line-height:1.62;
color:rgba(255,255,255,.72);
}
/* outlined colossal word */
.ghost{
display:block;
font-weight:400;
line-height:.9;
letter-spacing:.30em;
text-transform:uppercase;
white-space:nowrap;
color:transparent;
-webkit-text-stroke:.0135em var(--ghost-line); /* was a fixed 1px */
pointer-events:none; user-select:none;
/* the hero already sits its giant wordmark back into the plate with
filter:blur(.5px); carrying that same depth cue below the fold is
consistency, not a new trick */
filter:blur(.35px);
clip-path:inset(0 0 100% 0);
}
/* an outline that draws down from the cap line reads as a watermark being
impressed into the section, rather than a word fading up */
.rise.in .ghost{ clip-path:inset(0 0 0 0); transition:clip-path 1.25s var(--e-arrive); }
@media (prefers-reduced-motion: reduce){ .ghost{ clip-path:none; } }
/* underlined arrow link */
.alink{
display:inline-flex; align-items:center; gap:1.5em;
margin-top:clamp(26px,3.4vh,46px);
padding-bottom:.85em;
border-bottom:1px solid rgba(226,197,152,.42);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.26em; color:var(--gold-dsp);
text-decoration:none; text-transform:uppercase;
}
.alink svg{ width:15px; height:11px; flex:none; }
.alink svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
/* ── reveal tiers ─────────────────────────────────────────────────────────────
The container is now only the trigger; it no longer fades in as a slab with
its contents welded to it. Each tier of the hierarchy has its OWN verb and its
own moment, and they arrive in reading order: label, headline, copy, control.
Intervals grow rather than repeat — an even stagger reads mechanical.
clip-path and mask cause no reflow, keep text selectable, and are invisible to
the accessibility tree, so nothing here costs legibility. */
.rise{ opacity:1; transform:none; }
/* LABEL — commits first and fastest. A wipe, not a fade. */
.rise .eye, .rise .trio-rule > span{ opacity:0; clip-path:inset(0 100% 0 0); }
.rise.in .eye, .rise.in .trio-rule > span{
opacity:1; clip-path:inset(0 0 0 0);
transition:opacity .34s linear, clip-path .74s var(--e-arrive); }
/* DISPLAY — develops downward, the way a print comes up in the tray. */
.rise .dsp{
opacity:0;
-webkit-mask-image:linear-gradient(180deg,#000 0 42%,transparent 78%);
mask-image:linear-gradient(180deg,#000 0 42%,transparent 78%);
-webkit-mask-size:100% 240%; mask-size:100% 240%;
-webkit-mask-position:0 100%; mask-position:0 100%;
}
.rise.in .dsp{
opacity:1;
-webkit-mask-position:0 0; mask-position:0 0;
transition:opacity .50s linear .12s,
-webkit-mask-position 1.15s var(--e-arrive) .12s,
mask-position 1.15s var(--e-arrive) .12s;
}
/* BODY — the only tier that travels, and only 8px of it. */
.rise .body-copy{ opacity:0; transform:translateY(8px); }
.rise.in .body-copy{ opacity:1; transform:none;
transition:opacity .90s var(--e-arrive) .30s, transform .90s var(--e-arrive) .30s; }
/* CONTROL — arrives last, opacity only. A thing you can press should not slide. */
.rise .alink, .rise .btn, .rise .play, .rise .sig-count{ opacity:0; }
.rise.in .alink, .rise.in .btn, .rise.in .play, .rise.in .sig-count{
opacity:1; transition:opacity .70s var(--e-arrive) calc(.46s + var(--i,0) * var(--stagger)); }
/* REPEATED CHILDREN — one gesture, three beats. */
.rail > div, .trio-grid > li, .sig-foot .sig-name{ opacity:0; transform:translateY(1.4vh); }
.rail.rise.in > div, .rise.in .trio-grid > li, .rise.in .sig-name{
opacity:1; transform:none;
transition:opacity .80s var(--e-ui) calc(var(--i,0) * var(--stagger)),
transform 1.02s var(--e-arrive) calc(var(--i,0) * var(--stagger)); }
/* THE PLATE — the product is the slowest thing on the page, deliberately.
.sig already clips, so the overscale cannot reflow anything. */
.sig .alive{ transform:scale(1.035); transform-origin:50% 62%; }
.sig.in .alive{ transform:none; transition:transform 1.9s var(--e-arrive); }
/* ── split composition: copy left, photograph bleeding off the right ─────── */
.split{
position:relative;
display:grid;
grid-template-columns:1fr 1.08fr;
align-items:center;
border-top:1px solid var(--rule-soft);
}
.split-copy{
position:relative; z-index:2;
/* deep bottom padding reserves a clear band for the outlined word */
padding:clamp(64px,9vh,124px) clamp(30px,3.4vw,64px) clamp(140px,20vh,250px) var(--sec-x);
}
.split-media{ position:relative; align-self:stretch; min-height:clamp(420px,66vh,700px); }
.split-media img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
}
/* let the photograph dissolve into the copy side rather than butting against it */
.split-media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, var(--page-color) 0%, rgba(10,7,5,.55) 24%, rgba(10,7,5,0) 62%);
}
/* the outlined word sits low behind the copy */
.split .ghost{
position:absolute; z-index:1;
left:var(--sec-x); bottom:clamp(30px,4.4vh,62px);
font-size:clamp(44px,6.6vw,124px);
}
/* ── stat rail ───────────────────────────────────────────────────────────── */
.rail{
display:grid; grid-template-columns:repeat(3,1fr);
border-bottom:1px solid var(--rule-soft);
}
.rail div{
padding:clamp(40px,6vh,78px) 1em;
text-align:center;
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.28em; color:var(--gold-soft);
text-transform:uppercase;
}
.rail div + div{ border-left:1px solid var(--rule-soft); }
/* ── signature: outlined word, product on a plinth ───────────────────────── */
.sig{ position:relative; overflow:hidden; }
.sig-media{ position:relative; }
.sig-media img{ display:block; width:100%; height:clamp(430px,76vh,820px); object-fit:cover; }
/* ── the signature watch, running ─────────────────────────────────────────────
The still is split into a base plate plus the parts that turn. Each part keeps
the photograph's own pixels, so nothing is drawn on except the sweep hand the
dial was missing. preserveAspectRatio="slice" is object-fit:cover, which lets
every layer crop identically and stay in register at any window size.
--k is the measured foreshortening of the dial (the watch leans back), so parts
turn in the DIAL's plane: un-squash vertically, rotate, re-squash. A flat
screen-plane spin would make the balance wheel wobble instead of run. */
.alive{ display:block; width:100%; height:clamp(430px,76vh,820px); --k:.9255; }
.alive .hh, .alive .mh, .alive .sh, .alive .bal{
transform-box:view-box; will-change:transform; animation-play-state:paused;
}
.alive .hh, .alive .mh, .alive .sh{ transform-origin:999px 540px; }
.alive .bal{ transform-origin:1001px 631px; }
.alive.is-live .hh, .alive.is-live .mh,
.alive.is-live .sh, .alive.is-live .bal{ animation-play-state:running; }
.sh-shadow{ fill:rgba(6,3,1,.42); transform:translate(1.4px,1.9px); }
@keyframes hand-turn{
from{ transform:scaleY(var(--k)) rotate(0deg) scaleY(calc(1 / var(--k))); }
to { transform:scaleY(var(--k)) rotate(360deg) scaleY(calc(1 / var(--k))); }
}
@keyframes beat{
from{ transform:scaleY(var(--k)) rotate(var(--amp)) scaleY(calc(1 / var(--k))); }
to { transform:scaleY(var(--k)) rotate(calc(var(--amp) * -1)) scaleY(calc(1 / var(--k))); }
}
.alive .hh{ animation:hand-turn 43200s linear infinite; } /* one turn / 12 h */
.alive .mh{ animation:hand-turn 3600s linear infinite; } /* one turn / hour */
.alive .sh{ animation:hand-turn 60s linear infinite; } /* one turn / minute */
/* 28,800 vph is 8 beats a second, so one half-swing lasts an eighth of a second.
ease-in-out on an alternating pair is simple harmonic motion, which is what a
balance spring actually does. */
.alive .bal{ --amp:58deg; animation:beat .125s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
.alive .hh, .alive .mh, .alive .sh, .alive .bal{ animation:none; }
}
.sig-media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,7,5,.72) 0%, rgba(10,7,5,0) 34%, var(--page-color) 100%);
}
.sig .ghost{
position:absolute; z-index:2;
top:clamp(26px,4.4vh,64px); left:50%; translate:-50% 0;
font-size:clamp(38px,7.4vw,140px);
}
.sig-foot{
position:absolute; z-index:2; inset:auto var(--sec-x) clamp(28px,4.4vh,58px) var(--sec-x);
display:flex; align-items:flex-end; justify-content:space-between; gap:2em;
}
.sig-name{
margin:0; font-size:var(--fs-eye); font-weight:600;
letter-spacing:.3em; color:var(--gold-dsp); text-transform:uppercase;
}
.sig-right{ text-align:right; }
.sig-right .alink{ margin-top:0; }
.sig-count{
margin:1.1em 0 0; font-size:var(--fs-micro);
letter-spacing:.26em; color:var(--gold-soft);
}
/* ── the three variations ────────────────────────────────────────────────── */
.trio{ padding:clamp(56px,8vh,110px) var(--sec-x) clamp(70px,10vh,130px); }
.trio-rule{
display:flex; align-items:center; gap:1.7em;
margin:0 0 clamp(32px,4.6vh,60px);
font-size:var(--fs-eye); font-weight:600;
letter-spacing:.32em; color:var(--gold-soft); text-transform:uppercase;
}
.trio-rule::before,.trio-rule::after{ content:""; height:1px; background:var(--rule-soft); flex:1 1 auto; }
.trio-grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,68px);
}
.trio-grid li{ position:relative; padding-top:clamp(30px,3.2vw,62px); }
.trio-num{
position:absolute; top:0; left:-.04em; z-index:0;
font-size:clamp(42px,4.6vw,86px); font-weight:400;
line-height:.86; letter-spacing:.14em;
color:transparent; -webkit-text-stroke:1px var(--ghost-line);
pointer-events:none; user-select:none;
}
.trio-grid img,
.trio-grid .turn{
position:relative; z-index:1; display:block; width:100%;
aspect-ratio:4/5; object-fit:cover; border:1px solid var(--rule-soft);
}
/* the clips are there-and-back loops, so they never jump at the join */
.trio-grid .turn{ background:#0a0705; }
.trio-name{
position:relative; z-index:1; margin:clamp(16px,2.2vh,26px) 0 0;
font-size:var(--fs-eye); font-weight:600; letter-spacing:.28em;
color:var(--gold-dsp); text-transform:uppercase;
}
.trio-desc{ margin:.85em 0 0; font-size:var(--fs-body); line-height:1.55; color:rgba(255,255,255,.66); }
.trio-ed{
margin:clamp(13px,1.7vh,20px) 0 0; padding-top:clamp(11px,1.4vh,16px);
border-top:1px solid var(--rule-soft);
font-size:var(--fs-micro); letter-spacing:.26em; color:var(--gold-soft); text-transform:uppercase;
}
/* ── atelier play control ────────────────────────────────────────────────── */
.play{
margin-top:clamp(28px,3.8vh,50px);
width:clamp(44px,3.4vw,62px); aspect-ratio:1;
display:grid; place-items:center;
border:1px solid rgba(226,197,152,.5); border-radius:50%;
color:var(--gold-dsp); text-decoration:none;
}
.play svg{ width:32%; height:32%; margin-left:8%; fill:currentColor; }
/* ── closing call to action ──────────────────────────────────────────────── */
.close{
padding:clamp(78px,11vh,150px) var(--sec-x);
text-align:center;
border-top:1px solid var(--rule-soft);
}
.close .dsp{ letter-spacing:.28em; }
.close .body-copy{ margin-left:auto; margin-right:auto; max-width:38ch; }
.close-actions{
margin-top:clamp(34px,4.6vh,62px);
display:flex; flex-wrap:wrap; gap:clamp(14px,1.6vw,26px); justify-content:center;
}
.btn{
display:inline-flex; align-items:center; gap:1.6em;
padding:clamp(15px,1.8vh,22px) clamp(26px,2.6vw,46px);
border:1px solid rgba(226,197,152,.42);
font-size:var(--fs-eye); font-weight:600; letter-spacing:.26em;
color:var(--gold-dsp); text-decoration:none; text-transform:uppercase;
}
.btn svg{ width:15px; height:11px; flex:none; }
.btn svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
/* ── site footer ─────────────────────────────────────────────────────────── */
.site-foot{
padding:clamp(40px,5.4vh,70px) var(--sec-x) clamp(34px,4.6vh,58px);
border-top:1px solid var(--rule-soft);
display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(26px,3vw,64px);
align-items:start;
}
.foot-mark{ display:flex; align-items:center; gap:1.1em; }
.foot-box{
width:clamp(30px,2.3vw,40px); aspect-ratio:1;
border:1px solid var(--box-line); display:grid; place-items:center; flex:none;
}
.foot-box svg{ width:64%; height:64%; }
.foot-name{ margin:0; font-size:var(--fs-eye); font-weight:600; letter-spacing:.34em; color:var(--c-logo); text-transform:uppercase; }
.foot-sub{ margin:.55em 0 0; font-size:var(--fs-micro); letter-spacing:.22em; color:var(--gold-soft); text-transform:uppercase; }
.foot-cities{
margin:clamp(22px,3vh,38px) 0 0; display:flex; gap:1.4em;
font-size:var(--fs-micro); letter-spacing:.26em; color:var(--gold-soft); text-transform:uppercase;
}
.foot-cities span{ color:rgba(226,197,152,.4); }
.foot-h{ margin:0 0 1.4em; font-size:var(--fs-micro); font-weight:600; letter-spacing:.28em; color:var(--gold-soft); text-transform:uppercase; }
.signup{ display:flex; align-items:center; gap:1em; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:.85em; max-width:22rem; }
.signup input{
flex:1 1 auto; min-width:0; background:none; border:0;
font:inherit; font-size:var(--fs-body); color:#fff;
}
.signup input::placeholder{ color:rgba(255,255,255,.42); }
.signup button{ background:none; border:0; padding:0; color:var(--gold-dsp); cursor:pointer; line-height:0; }
.signup svg{ width:15px; height:11px; }
.signup svg *{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:.95em; }
.foot-links a{ font-size:var(--fs-micro); letter-spacing:.24em; color:rgba(255,255,255,.62); text-decoration:none; text-transform:uppercase; }
.foot-copy{ margin:clamp(22px,3vh,38px) 0 0; font-size:var(--fs-micro); letter-spacing:.24em; color:rgba(255,255,255,.36); text-transform:uppercase; }
/* ── the poster yields to the film ────────────────────────────────────────────
The hero is two things at once: a poster (taglines, MANIFESTO, ENTER, the spec
panel) and the film's own chrome (mark, wordmark, rules, nav, series). Held at
full strength, the poster competed with the chapter text for five viewports,
and an ENTER call-to-action sat dead centre long after you had entered.
Each element leaves on its OWN ramp, so it reads as choreography rather than a
global dim, and each moves outward from the centre of interest — taglines up,
spec right, ENTER down — so nothing crosses the frame.
Every ramp begins at or after 2% of scroll, so scroll 0 is byte-identical to
the approved composition; the same contract .ui-scrims already honours. */
.tagline { opacity:calc(1 - var(--s-tag, 0)); transform:translateY(calc(var(--s-tag, 0) * -0.9vh)); }
.enter { opacity:calc(1 - var(--s-enter, 0)); transform:translateY(calc(var(--s-enter, 0) * 0.7vh)); }
.spec { opacity:calc(1 - var(--s-spec, 0)); transform:translateX(calc(var(--s-spec, 0) * 1.1vw)); }
.eyebrow,.manifesto{ opacity:calc(1 - var(--s-manif, 0)); transform:translateY(calc(var(--s-manif, 0) * -0.9vh)); }
/* once the MANIFESTO has gone the bottom-left pool is protecting nothing and is
only costing the film contrast, so it leaves with the text it was shielding */
.ui-scrims::after { opacity:calc(1 - var(--s-manif, 0)); }
@media (prefers-reduced-motion: reduce){
.tagline,.enter,.spec,.eyebrow,.manifesto{ opacity:1; transform:none; }
.ui-scrims::after{ opacity:1; }
}
/* ── interaction layer ────────────────────────────────────────────────────────
Before this, the stylesheet contained zero :hover, :focus and :active rules.
One vocabulary, applied by purpose: arrows travel, edges warm, nothing bounces.
Hover is gated behind a real pointer so it can never stick on touch, and every
hover has a :focus-visible twin so the keyboard gets the same affordance. */
*:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
a, button, input{ -webkit-tap-highlight-color:transparent; }
/* .nav-item computes to 0x0 — both its children are absolutely positioned — so a
focus ring had nothing to enclose and a keyboard user saw nothing on the first
four stops. This hangs a real ring-and-hit surface off the label without
moving a single pixel of the matched composition. */
.nav-label{ position:relative; }
.nav-label::after{
content:""; position:absolute;
left:-.62vw; right:-.62vw; top:-3.0vh; bottom:-1.25vh;
border-radius:2px;
}
.nav-item:focus-visible{ outline:none; }
.nav-item:focus-visible .nav-label::after{ outline:2px solid var(--focus-ring); }
/* .alink is 22px tall; give it a 30px target without touching the box model */
.alink{ position:relative; }
.alink::before{ content:""; position:absolute; inset:-8px -4px 0; }
/* the submit glyph is 15x11 — nowhere near a usable target */
.signup button{ position:relative; }
.signup button::after{
content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
width:44px; height:44px;
}
.signup{ transition:border-color var(--t-ui) var(--e-ui); }
.signup:focus-within{ border-bottom-color:var(--gold-dsp); }
/* footer links were distinguished from the adjacent city list by colour alone */
.foot-links a{
display:inline-block; padding:5.5px 0; margin:-5.5px 0;
border-bottom:1px solid rgba(255,255,255,.18);
transition:color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui);
}
.foot-links{ gap:1.35em; }
@media (hover:hover) and (pointer:fine){
.enter{ transition:background-color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui); }
.enter:hover{ background:rgba(15,10,3,.44); border-color:rgba(255,255,255,.78); }
.enter-arrow{ transition:transform var(--t-ui) var(--e-ui); }
.enter:hover .enter-arrow{ transform:translateX(4px); }
.alink, .btn{ transition:color var(--t-ui) var(--e-ui), border-color var(--t-ui) var(--e-ui),
background-color var(--t-ui) var(--e-ui); }
.alink svg, .btn svg{ transition:transform var(--t-ui) var(--e-ui); }
.alink:hover svg, .btn:hover svg{ transform:translateX(5px); }
.alink:hover{ color:#fff; border-bottom-color:rgba(226,197,152,.95); }
.btn:hover{ border-color:rgba(226,197,152,.95); background:rgba(226,197,152,.07); }
.play{ transition:border-color var(--t-ui) var(--e-ui), background-color var(--t-ui) var(--e-ui); }
.play svg{ transition:transform var(--t-ui) var(--e-ui); }
.play:hover{ border-color:rgba(226,197,152,.9); background:rgba(226,197,152,.09); }
.play:hover svg{ transform:scale(1.12); }
.signup button{ transition:color var(--t-ui) var(--e-ui); }
.signup button:hover{ color:#fff; }
.foot-links a:hover{ color:#fff; border-bottom-color:rgba(226,197,152,.7); }
/* the tiles have nowhere to go, so they warm rather than lift — a pointer
cursor and a hover-lift on something unclickable is a lie. filter runs on
the video's existing composited layer; a scale would spill past the 1px
border, since .trio-grid li has no overflow clip. */
.trio-grid .turn{ transition:filter .45s var(--e-ui), border-color .45s var(--e-ui); }
.trio-grid li:hover .turn{ filter:brightness(1.06) saturate(1.03); border-color:rgba(226,197,152,.34); }
.trio-num{ transition:-webkit-text-stroke-color .38s var(--e-ui); }
.trio-grid li:hover .trio-num{ -webkit-text-stroke-color:rgba(226,197,152,.5); }
}
/* Touch gets no hover, so press feedback is the only feedback it has.
.enter darkens rather than scales: it carries backdrop-filter, and scaling a
backdrop-filtered element re-samples everything behind it every frame. */
.btn:active, .alink:active, .play:active, .foot-links a:active{ transform:scale(.985); }
.enter:active{ background:rgba(15,10,3,.52); }
.signup button:active{ transform:translateX(2px); }
@media (prefers-reduced-motion: reduce){
.alink svg, .btn svg, .play svg, .enter-arrow{ transition:none; transform:none !important; }
.btn:active, .alink:active, .play:active, .foot-links a:active,
.signup button:active{ transform:none; }
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){
.split{ grid-template-columns:1fr; }
.split-media{ min-height:clamp(280px,44vh,420px); order:-1; }
.split-media::after{ background:linear-gradient(180deg, rgba(10,7,5,.2), rgba(10,7,5,.75)); }
.split .ghost{ position:static; margin-top:clamp(28px,4vh,48px); }
.trio-grid{ grid-template-columns:1fr; }
.site-foot{ grid-template-columns:1fr; }
.sig-foot{ flex-direction:column; align-items:flex-start; gap:1.2em; }
.sig-right{ text-align:left; }
}
@media (max-width:620px){
.rail{ grid-template-columns:1fr; }
.rail div + div{ border-left:0; border-top:1px solid var(--rule-soft); }
.close-actions{ flex-direction:column; align-items:stretch; }
.btn{ justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){
.rise, .rise .eye, .rise .dsp, .rise .body-copy, .rise .alink, .rise .btn,
.rise .play, .rise .sig-count, .rise .trio-rule > span,
.rail > div, .trio-grid > li, .sig-foot .sig-name, .sig .alive{
opacity:1 !important; transform:none !important; clip-path:none !important;
-webkit-mask-image:none !important; mask-image:none !important;
transition:none !important;
}
}
/* ============================================================================
VALOIR EXPANDED LUXURY SUITE & INTERACTIVE SYSTEM
========================================================================= */
/* ── Fixed Ambiance Controls ─────────────────────────────────────────────── */
.valoir-floating-controls{
position:fixed;
top:clamp(20px, 3.2vh, 36px);
right:clamp(20px, 3.4vw, 48px);
z-index:950;
display:flex;
align-items:center;
gap:12px;
}
.valoir-audio-btn,
.valoir-salon-quick-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:rgba(15,10,6,0.65);
border:1px solid rgba(226,197,152,0.35);
border-radius:100px;
color:var(--gold-dsp);
font-family:inherit;
font-size:var(--fs-micro);
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
cursor:pointer;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
transition:all var(--t-ui) var(--e-ui);
}
.valoir-audio-btn:hover,
.valoir-salon-quick-btn:hover{
border-color:rgba(226,197,152,0.85);
background:rgba(226,197,152,0.12);
color:#fff;
transform:translateY(-1px);
}
.audio-soundwave{
display:flex;
align-items:center;
gap:2px;
height:12px;
}
.audio-soundwave span{
display:block;
width:2px;
height:4px;
background:currentColor;
border-radius:1px;
transition:height 0.2s ease;
}
.valoir-audio-btn.is-playing .audio-soundwave span:nth-child(1){ animation:audioWave 0.8s ease-in-out infinite alternate; }
.valoir-audio-btn.is-playing .audio-soundwave span:nth-child(2){ animation:audioWave 1.1s ease-in-out infinite alternate 0.2s; }
.valoir-audio-btn.is-playing .audio-soundwave span:nth-child(3){ animation:audioWave 0.7s ease-in-out infinite alternate 0.4s; }
@keyframes audioWave{
from{ height:3px; }
to{ height:12px; }
}
/* ── 01.5 / Specifications Matrix Section ────────────────────────────────── */
.spec-matrix-section{
padding:clamp(60px, 9vh, 120px) var(--sec-x);
border-top:1px solid var(--rule-soft);
position:relative;
}
.spec-matrix-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
flex-wrap:wrap;
gap:32px;
margin-bottom:clamp(36px, 5vh, 64px);
}
.spec-tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
border-bottom:1px solid var(--rule-soft);
padding-bottom:1px;
}
.spec-tab-btn{
background:none;
border:none;
padding:10px 18px;
color:rgba(255,255,255,0.6);
font-family:inherit;
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.22em;
text-transform:uppercase;
cursor:pointer;
position:relative;
transition:color var(--t-ui) var(--e-ui);
}
.spec-tab-btn::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:1.5px;
background:var(--gold-dsp);
transform:scaleX(0);
transform-origin:left center;
transition:transform var(--t-ui) var(--e-ui);
}
.spec-tab-btn.is-active{
color:var(--gold-dsp);
}
.spec-tab-btn.is-active::after{
transform:scaleX(1);
}
.spec-tab-btn:hover{
color:#fff;
}
.spec-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:clamp(20px, 2.5vw, 36px);
}
.spec-card{
background:rgba(20,14,9,0.45);
border:1px solid rgba(226,197,152,0.18);
padding:clamp(24px, 3.2vh, 38px);
position:relative;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:border-color var(--t-ui) var(--e-ui), background-color var(--t-ui) var(--e-ui), transform var(--t-ui) var(--e-ui);
}
.spec-card:hover{
border-color:rgba(226,197,152,0.45);
background:rgba(25,18,12,0.65);
transform:translateY(-3px);
}
.spec-card-num{
display:block;
font-size:var(--fs-dsp);
font-weight:400;
letter-spacing:-0.01em;
color:var(--c-spec-num);
margin-bottom:8px;
line-height:1;
}
.spec-card-label{
display:block;
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.24em;
color:var(--gold-soft);
text-transform:uppercase;
margin-bottom:12px;
}
.spec-card-desc{
font-size:var(--fs-body);
line-height:1.6;
color:rgba(255,255,255,0.72);
margin:0;
}
/* ── 02.5 / Savoir-Faire Pillars Section ─────────────────────────────────── */
.craft-section{
padding:clamp(60px, 9vh, 120px) var(--sec-x);
border-top:1px solid var(--rule-soft);
position:relative;
}
.craft-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:clamp(20px, 2.5vw, 40px);
margin-top:clamp(36px, 5vh, 64px);
}
.craft-card{
background:linear-gradient(180deg, rgba(22,15,10,0.55) 0%, rgba(12,8,5,0.75) 100%);
border:1px solid rgba(226,197,152,0.22);
padding:clamp(28px, 4vh, 46px) clamp(22px, 2.4vw, 36px);
position:relative;
overflow:hidden;
transition:all var(--t-ui) var(--e-ui);
}
.craft-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:linear-gradient(90deg, transparent, var(--gold-dsp), transparent);
transform:scaleX(0);
transition:transform 0.6s var(--e-arrive);
}
.craft-card:hover{
border-color:rgba(226,197,152,0.55);
transform:translateY(-4px);
box-shadow:0 20px 40px -10px rgba(0,0,0,0.6);
}
.craft-card:hover::before{
transform:scaleX(1);
}
.craft-index{
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.3em;
color:var(--gold-soft);
display:block;
margin-bottom:18px;
}
.craft-title{
font-size:clamp(16px, 1.3vw, 22px);
font-weight:600;
letter-spacing:0.12em;
color:var(--gold-dsp);
text-transform:uppercase;
margin:0 0 16px;
line-height:1.3;
}
.craft-desc{
font-size:var(--fs-body);
line-height:1.65;
color:rgba(255,255,255,0.72);
margin:0;
}
/* ── 03.5 / Bespoke Journey Section ─────────────────────────────────────── */
.journey-section{
padding:clamp(60px, 9vh, 120px) var(--sec-x);
border-top:1px solid var(--rule-soft);
position:relative;
}
.journey-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 2vw, 32px);
margin-top:clamp(40px, 6vh, 72px);
position:relative;
}
.journey-step{
position:relative;
padding-top:24px;
border-top:1px solid rgba(226,197,152,0.3);
}
.journey-step-num{
display:block;
font-size:var(--fs-dsp);
font-weight:300;
color:rgba(226,197,152,0.35);
margin-bottom:12px;
line-height:1;
}
.journey-step-title{
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.24em;
color:var(--gold-dsp);
text-transform:uppercase;
margin:0 0 12px;
}
.journey-step-desc{
font-size:var(--fs-body);
line-height:1.6;
color:rgba(255,255,255,0.68);
margin:0;
}
/* ── Collection Filtering & Action Enhancements ──────────────────────────── */
.collection-filter-bar{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin:clamp(20px, 3vh, 36px) 0 clamp(30px, 4.5vh, 50px);
}
.col-filter-btn{
background:rgba(20,14,9,0.6);
border:1px solid rgba(226,197,152,0.25);
color:rgba(255,255,255,0.7);
padding:7px 16px;
border-radius:40px;
font-family:inherit;
font-size:var(--fs-micro);
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
cursor:pointer;
transition:all var(--t-ui) var(--e-ui);
}
.col-filter-btn.is-active,
.col-filter-btn:hover{
border-color:var(--gold-dsp);
background:rgba(226,197,152,0.15);
color:#fff;
}
.trio-actions{
margin-top:16px;
display:flex;
gap:10px;
}
.trio-btn{
flex:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 14px;
background:rgba(226,197,152,0.08);
border:1px solid rgba(226,197,152,0.32);
color:var(--gold-dsp);
font-family:inherit;
font-size:var(--fs-micro);
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
cursor:pointer;
text-decoration:none;
transition:all var(--t-ui) var(--e-ui);
}
.trio-btn:hover{
background:rgba(226,197,152,0.22);
border-color:rgba(226,197,152,0.85);
color:#fff;
}
/* ── Salon Salons & Locations Grid ───────────────────────────────────────── */
.salon-locations{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:20px;
margin-top:clamp(36px, 5vh, 60px);
text-align:left;
}
.salon-card{
background:rgba(18,12,8,0.5);
border:1px solid rgba(226,197,152,0.2);
padding:24px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:all var(--t-ui) var(--e-ui);
}
.salon-card:hover{
border-color:rgba(226,197,152,0.5);
background:rgba(24,16,11,0.7);
}
.salon-city{
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.28em;
color:var(--gold-dsp);
text-transform:uppercase;
margin:0 0 8px;
}
.salon-address{
font-size:var(--fs-micro);
line-height:1.6;
color:rgba(255,255,255,0.7);
margin:0 0 12px;
}
.salon-phone{
font-size:var(--fs-micro);
letter-spacing:0.15em;
color:var(--gold-soft);
text-decoration:none;
display:inline-block;
}
.salon-phone:hover{
color:#fff;
}
/* ── Modal Architecture & Glass Dialogs ──────────────────────────────────── */
.v-modal-overlay{
position:fixed;
inset:0;
z-index:9999;
background:rgba(6,4,3,0.86);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
display:grid;
place-items:center;
padding:20px;
opacity:0;
pointer-events:none;
transition:opacity 0.38s var(--e-arrive);
}
.v-modal-overlay.is-open{
opacity:1;
pointer-events:auto;
}
.v-modal-dialog{
background:radial-gradient(120% 100% at 50% 0%, #1c140d 0%, #0d0906 100%);
border:1px solid rgba(226,197,152,0.38);
width:100%;
max-width:680px;
max-height:90vh;
overflow-y:auto;
border-radius:4px;
box-shadow:0 30px 80px -10px rgba(0,0,0,0.9);
padding:clamp(28px, 4vh, 48px);
position:relative;
transform:scale(0.96) translateY(12px);
transition:transform 0.4s var(--e-arrive);
}
.v-modal-overlay.is-open .v-modal-dialog{
transform:scale(1) translateY(0);
}
.v-modal-close{
position:absolute;
top:20px;
right:20px;
background:none;
border:none;
color:rgba(255,255,255,0.6);
font-size:24px;
line-height:1;
cursor:pointer;
padding:6px;
transition:color var(--t-ui) var(--e-ui);
}
.v-modal-close:hover{
color:var(--gold-dsp);
}
.v-modal-title{
font-size:clamp(20px, 2vw, 28px);
font-weight:400;
letter-spacing:0.15em;
color:var(--gold-dsp);
text-transform:uppercase;
margin:0 0 10px;
}
.v-modal-subtitle{
font-size:var(--fs-body);
line-height:1.6;
color:rgba(255,255,255,0.72);
margin:0 0 28px;
}
/* Form Controls */
.v-form-group{
margin-bottom:20px;
}
.v-label{
display:block;
font-size:var(--fs-micro);
font-weight:600;
letter-spacing:0.24em;
color:var(--gold-soft);
text-transform:uppercase;
margin-bottom:8px;
}
.v-input,
.v-select,
.v-textarea{
width:100%;
background:rgba(12,8,5,0.7);
border:1px solid rgba(226,197,152,0.3);
padding:12px 16px;
color:#fff;
font-family:inherit;
font-size:var(--fs-body);
border-radius:2px;
outline:none;
transition:border-color var(--t-ui) var(--e-ui);
}
.v-input:focus,
.v-select:focus,
.v-textarea:focus{
border-color:var(--gold-dsp);
box-shadow:0 0 0 1px rgba(226,197,152,0.4);
}
.v-choice-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
gap:10px;
margin-bottom:20px;
}
.v-choice-card{
border:1px solid rgba(226,197,152,0.25);
background:rgba(18,12,8,0.5);
padding:14px 10px;
text-align:center;
cursor:pointer;
border-radius:2px;
transition:all var(--t-ui) var(--e-ui);
}
.v-choice-card input{ display:none; }
.v-choice-card.is-selected,
.v-choice-card:hover{
border-color:var(--gold-dsp);
background:rgba(226,197,152,0.14);
}
.v-choice-card .city-title{
display:block;
font-size:var(--fs-eye);
font-weight:600;
letter-spacing:0.2em;
color:#fff;
text-transform:uppercase;
}
.v-choice-card .city-sub{
display:block;
font-size:10px;
color:var(--gold-soft);
margin-top:4px;
}
.v-btn-gold{
width:100%;
background:linear-gradient(180deg, #dfc49c 0%, #b8925e 100%);
border:none;
padding:15px 24px;
color:#0b0805;
font-family:inherit;
font-size:var(--fs-eye);
font-weight:700;
letter-spacing:0.26em;
text-transform:uppercase;
cursor:pointer;
border-radius:2px;
transition:all var(--t-ui) var(--e-ui);
margin-top:12px;
}
.v-btn-gold:hover{
filter:brightness(1.12);
transform:translateY(-1px);
box-shadow:0 8px 24px rgba(223,196,156,0.3);
}
/* Booking Success Ticket */
.v-ticket-card{
background:rgba(12,8,5,0.85);
border:1px dashed rgba(226,197,152,0.45);
padding:24px;
text-align:center;
margin:24px 0;
border-radius:4px;
}
.v-ticket-ref{
font-family:"Courier New", monospace;
font-size:24px;
font-weight:700;
letter-spacing:0.18em;
color:var(--gold-dsp);
margin:10px 0;
}
/* Video Lightbox */
.v-video-frame{
width:100%;
aspect-ratio:16/9;
background:#000;
border:1px solid rgba(226,197,152,0.3);
position:relative;
}
.v-video-frame video{
width:100%;
height:100%;
object-fit:cover;
}
/* Toast Notifications */
.toast-container{
position:fixed;
bottom:30px;
right:30px;
z-index:10000;
display:flex;
flex-direction:column;
gap:12px;
pointer-events:none;
}
.toast-card{
background:rgba(16,11,7,0.92);
border:1px solid rgba(226,197,152,0.5);
padding:14px 22px;
border-radius:4px;
color:#fff;
font-family:inherit;
font-size:var(--fs-body);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 12px 30px rgba(0,0,0,0.7);
display:flex;
align-items:center;
gap:12px;
pointer-events:auto;
animation:toastIn 0.35s var(--e-arrive) forwards;
}
@keyframes toastIn{
from{ opacity:0; transform:translateY(16px); }
to{ opacity:1; transform:translateY(0); }
}
/* ── Expanded Responsive Adaptations ─────────────────────────────────────── */
@media (max-width:1024px){
.hero-wings-row{ flex-direction:column; gap:20px; }
.hero-wing-card{ width:100%; max-width:100%; margin-top:0; }
.valoir-nav-links{ display:none; }
.hero-telemetry-dock{ grid-template-columns:repeat(2, 1fr); max-width:540px; }
.hero-stage-overlay{ padding:80px 24px 30px; }
.hero-scroll-cue{ display:none; }
.journey-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:680px){
.valoir-navbar{ height:62px; }
.valoir-nav-container{ padding:0 16px; }
.v-audio-txt{ display:none; }
.v-audio-toggle-btn{ padding:7px 10px; }
.v-header-salon-btn{ padding:7px 12px; font-size:10px; }
.chapter{ left:16px; right:16px; max-width:none; bottom:20px; padding:14px 16px; }
.hero-telemetry-dock{ grid-template-columns:1fr; gap:8px; }
.hero-action-row{ flex-direction:column; align-items:stretch; }
.hero-btn-primary, .hero-btn-secondary{ justify-content:center; }
.telemetry-card{ padding:10px 14px; }
.telemetry-val{ font-size:15px; }
.journey-grid{ grid-template-columns:1fr; }
.spec-matrix-header{ flex-direction:column; align-items:flex-start; }
.toast-container{ left:16px; right:16px; bottom:16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
03.0 ATELIER 3D WATCH CUSTOMIZER & WEBCAM AR STYLES
═══════════════════════════════════════════════════════════════════════════ */
.customizer-section {
padding: clamp(80px, 12vh, 140px) clamp(24px, 4.5vw, 80px);
position: relative;
background: radial-gradient(circle at 50% 30%, #170f0a 0%, #0c0805 70%, #070402 100%);
border-top: 1px solid rgba(226, 197, 152, 0.18);
border-bottom: 1px solid rgba(226, 197, 152, 0.18);
}
.customizer-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 24px;
}
.ar-launch-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
cursor: pointer;
box-shadow: 0 0 24px rgba(228, 203, 164, 0.2);
}
.customizer-workbench {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: clamp(24px, 3vw, 40px);
align-items: stretch;
}
/* ── 3D Viewport Stage ─────────────────────────────────────────────────── */
.customizer-viewport-col {
display: flex;
flex-direction: column;
}
.customizer-viewport {
position: relative;
width: 100%;
height: 640px;
background: radial-gradient(circle at 50% 50%, #1f140c 0%, #110b07 60%, #080503 100%);
border: 1px solid rgba(226, 197, 152, 0.28);
border-radius: 4px;
overflow: hidden;
box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.85), 0 20px 50px rgba(0, 0, 0, 0.7);
cursor: grab;
user-select: none;
touch-action: none;
}
.customizer-viewport:active {
cursor: grabbing;
}
.customizer-telemetry-hud {
position: absolute;
top: 18px;
left: 20px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(14, 9, 6, 0.75);
border: 1px solid rgba(226, 197, 152, 0.25);
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: #e4cba4;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hud-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #50e3c2;
box-shadow: 0 0 8px #50e3c2;
animation: pulseDot 2s infinite ease-in-out;
}
.customizer-orbit-hint {
position: absolute;
top: 18px;
right: 20px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
background: rgba(14, 9, 6, 0.6);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.customizer-controls-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(14, 9, 6, 0.85);
border: 1px solid rgba(226, 197, 152, 0.35);
border-radius: 30px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.c-ctrl-btn {
background: transparent;
border: 1px solid transparent;
border-radius: 16px;
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
padding: 5px 12px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s ease;
}
.c-ctrl-btn:hover, .c-ctrl-btn.is-active {
color: #0b0705;
background: #e4cba4;
}
.c-ctrl-sep {
width: 1px;
height: 14px;
background: rgba(226, 197, 152, 0.25);
margin: 0 2px;
}
/* ── 3D WebGL Canvas Stage ─────────────────────────────────────────────── */
.watch-webgl-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.watch-webgl-canvas {
width: 100%;
height: 100%;
display: block;
cursor: grab;
outline: none;
}
.watch-webgl-canvas:active {
cursor: grabbing;
}
/* Dial Finishes */
.dial-finish-midnight {
position: absolute;
top: 18%;
left: 15%;
width: 70%;
height: 48%;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 52, 110, 0.4) 0%, rgba(6, 20, 48, 0.65) 60%, transparent 80%);
mix-blend-mode: color-dodge;
pointer-events: none;
}
.dial-finish-meteorite {
position: absolute;
top: 18%;
left: 15%;
width: 70%;
height: 48%;
border-radius: 50%;
background-image: repeating-linear-gradient(60deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 3px, transparent 3px, transparent 10px);
mix-blend-mode: overlay;
pointer-events: none;
}
.dial-finish-champagne {
position: absolute;
top: 18%;
left: 15%;
width: 70%;
height: 48%;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 167, 106, 0.35) 0%, rgba(140, 95, 40, 0.5) 60%, transparent 80%);
mix-blend-mode: color-dodge;
pointer-events: none;
}
/* Photographic Tourbillon Balance Wheel */
.photo-balance-container {
position: absolute;
top: 57.8%;
left: 50%;
transform: translate(-50%, -50%);
width: 66px;
height: 66px;
pointer-events: none;
z-index: 4;
}
.photo-balance-wheel {
width: 100%;
height: 100%;
object-fit: contain;
animation: photoBalanceOscillate 0.125s infinite alternate ease-in-out;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}
@keyframes photoBalanceOscillate {
from { transform: rotate(-24deg); }
to { transform: rotate(24deg); }
}
.balance-center-ruby {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #e60049;
box-shadow: 0 0 8px #e60049;
}
/* Photographic Swiss Hands System */
.photo-hands-container {
position: absolute;
top: 46.8%;
left: 50%;
width: 0;
height: 0;
z-index: 5;
pointer-events: none;
}
.photo-hand-wrapper {
position: absolute;
left: 50%;
bottom: 0;
transform-origin: bottom center;
pointer-events: none;
}
.photo-hand-img {
display: block;
pointer-events: none;
user-select: none;
}
.photo-hand-img.hour-img {
height: 56px;
transform: translateX(-50%) translateY(10px);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85));
}
.photo-hand-img.minute-img {
height: 84px;
transform: translateX(-50%) translateY(10px);
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
}
/* Sweep Seconds Hand */
.photo-sweep-seconds {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 2px;
height: 105px;
pointer-events: none;
}
.sweep-needle {
width: 1.5px;
height: 100%;
background: linear-gradient(180deg, #fff 0%, #e4cba4 50%, #ba9560 100%);
box-shadow: 0 0 8px rgba(228, 203, 164, 0.85);
}
.sweep-counterweight {
position: absolute;
bottom: -22px;
left: -2px;
width: 5.5px;
height: 22px;
background: #e4cba4;
border-radius: 0 0 3px 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.sweep-cap {
position: absolute;
top: -4px;
left: -4px;
width: 9.5px;
height: 9.5px;
border-radius: 50%;
background: #5d4326;
border: 1.5px solid #e4cba4;
box-shadow: 0 0 6px rgba(0,0,0,0.8);
}
/* Complication Hotspots */
.complication-hotspot {
position: absolute;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 6;
pointer-events: auto;
}
.hs-ping {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid #e4cba4;
animation: hsPulse 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
opacity: 0.75;
}
@keyframes hsPulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(1.6); opacity: 0; }
}
.hs-core {
position: absolute;
inset: 5px;
border-radius: 50%;
background: #e4cba4;
box-shadow: 0 0 10px #e4cba4;
}
/* Sapphire Reflection Glare */
.sapphire-glare {
position: absolute;
top: 15%;
left: 12%;
width: 76%;
height: 52%;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.04) 45%, transparent 70%);
mix-blend-mode: overlay;
}
/* Exhibition Caseback */
.watch-back-face {
transform: rotateY(180deg);
}
.caseback-housing {
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, #241b12 0%, #120c07 65%, #050302 100%);
border: 8px solid #ab7c4b;
box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.caseback-outer-bezel {
position: absolute;
inset: 4px;
border: 1px dashed rgba(226, 197, 152, 0.4);
border-radius: 50%;
}
.caseback-engraved-text {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
font-size: 6.5px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(226, 197, 152, 0.6);
white-space: nowrap;
}
.caseback-sapphire {
position: absolute;
inset: 18px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #201710 0%, #0a0705 100%);
box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
overflow: hidden;
}
.caseback-movement-base {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 10px 10px, rgba(255,255,255,0.2) 2px, transparent 3px);
background-size: 16px 16px;
opacity: 0.25;
}
.caseback-rotor-assembly {
position: absolute;
inset: 10px;
border-radius: 50%;
animation: rotorSpin 14s infinite linear;
}
.caseback-rotor-weight {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 52%;
background: conic-gradient(from 180deg, #6e4e2a, #d4a76a, #fae0ba, #6e4e2a);
border-radius: 0 0 120px 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-top: 2px solid #fae0ba;
box-shadow: 0 4px 15px rgba(0,0,0,0.8);
}
.rotor-hallmark {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.16em;
color: #2b1c0e;
}
.rotor-custom-engraving {
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.12em;
color: #120b05;
margin-top: 3px;
text-transform: uppercase;
}
/* Complication Hotspots */
.complication-hotspot {
position: absolute;
width: 22px;
height: 22px;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 6;
pointer-events: auto;
}
.hs-ping {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid #e4cba4;
animation: hsPulse 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
opacity: 0.75;
}
@keyframes hsPulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(1.6); opacity: 0; }
}
.hs-core {
position: absolute;
inset: 4px;
border-radius: 50%;
background: #e4cba4;
box-shadow: 0 0 10px #e4cba4;
}
/* Hotspot Hover Tooltip */
.complication-info-card {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: clamp(260px, 80%, 340px);
padding: 14px 18px;
background: rgba(14, 9, 6, 0.92);
border: 1px solid rgba(226, 197, 152, 0.4);
border-radius: 4px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 16px 40px rgba(0,0,0,0.8), 0 0 20px rgba(228,203,164,0.1);
opacity: 0;
pointer-events: none;
transition: all 0.28s ease;
z-index: 20;
}
.complication-info-card.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.c-info-badge {
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.2em;
color: #50e3c2;
margin-bottom: 4px;
}
.c-info-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: 0.04em;
}
.c-info-desc {
margin: 0;
font-size: 11.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.75);
}
/* Sapphire Glare */
.sapphire-glare {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.04) 45%, transparent 70%);
mix-blend-mode: overlay;
}
/* Exhibition Caseback & Rotor */
.caseback-rotor {
position: absolute;
inset: 12px;
border-radius: 50%;
animation: rotorSpin 12s infinite linear;
}
@keyframes rotorSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotor-weight {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: conic-gradient(from 180deg, #6e4e2a, #d4a76a, #fae0ba, #6e4e2a);
border-radius: 0 0 120px 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-top: 2px solid #fae0ba;
}
.rotor-hallmark {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.16em;
color: #2b1c0e;
}
.rotor-custom-engraving {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
color: #120b05;
margin-top: 3px;
text-transform: uppercase;
}
/* ── Customizer Configurator Panel ─────────────────────────────────────── */
.customizer-panel {
background: rgba(14, 9, 6, 0.75);
border: 1px solid rgba(226, 197, 152, 0.28);
border-radius: 4px;
padding: clamp(20px, 3vh, 32px) clamp(20px, 2.5vw, 32px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 640px;
}
.c-panel-header {
margin-bottom: 16px;
}
.c-panel-tag {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.22em;
color: #e4cba4;
text-transform: uppercase;
}
.c-panel-title {
margin: 4px 0 0;
font-size: clamp(20px, 2vw, 26px);
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
}
.c-step-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(226, 197, 152, 0.2);
padding-bottom: 12px;
}
.c-step-tab {
background: transparent;
border: 1px solid transparent;
padding: 8px 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.c-step-tab:hover, .c-step-tab.is-active {
color: #e4cba4;
background: rgba(226, 197, 152, 0.12);
border-color: rgba(226, 197, 152, 0.35);
}
.c-step-content {
display: none;
flex: 1;
}
.c-step-content.is-active {
display: block;
}
.c-option-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
margin-bottom: 12px;
}
.c-option-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.c-option-card {
padding: 12px 14px;
background: rgba(22, 15, 10, 0.6);
border: 1px solid rgba(226, 197, 152, 0.2);
border-radius: 3px;
cursor: pointer;
transition: all 0.22s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.c-option-card:hover {
border-color: rgba(226, 197, 152, 0.5);
background: rgba(226, 197, 152, 0.08);
}
.c-option-card.is-selected {
border-color: #e4cba4;
background: rgba(226, 197, 152, 0.16);
box-shadow: 0 0 16px rgba(228, 203, 164, 0.15);
}
.c-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.swatch-rosegold { background: radial-gradient(circle, #fde9cf 0%, #ab7c4b 100%); }
.swatch-platinum { background: radial-gradient(circle, #ffffff 0%, #636873 100%); }
.swatch-titanium { background: radial-gradient(circle, #818a96 0%, #3b4047 100%); }
.swatch-dlc { background: radial-gradient(circle, #383a40 0%, #09090b 100%); }
.swatch-dial-anthracite { background: radial-gradient(circle, #252220 0%, #0a0807 100%); }
.swatch-dial-midnight { background: radial-gradient(circle, #0f274a 0%, #040912 100%); }
.swatch-dial-meteorite { background: radial-gradient(circle, #444 0%, #111 100%); }
.swatch-dial-champagne { background: radial-gradient(circle, #d4a76a 0%, #4d381c 100%); }
.swatch-strap-cognac { background: #8a431c; }
.swatch-strap-obsidian { background: #222222; }
.swatch-strap-monaco { background: #102649; }
.swatch-strap-mesh { background: repeating-linear-gradient(45deg, #a37f48, #e4cba4 2px); }
.c-opt-title {
font-size: 12px;
font-weight: 600;
color: #fff;
}
.c-opt-sub {
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
}
.c-opt-status {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
color: #50e3c2;
text-transform: uppercase;
}
.c-opt-price {
font-size: 10px;
font-weight: 600;
color: #e4cba4;
}
/* Engraving Box */
.c-engraving-box {
padding: 16px;
background: rgba(22, 15, 10, 0.6);
border: 1px solid rgba(226, 197, 152, 0.2);
border-radius: 3px;
}
/* Allocation Summary Box */
.c-allocation-summary {
background: rgba(10, 6, 4, 0.85);
border: 1px solid rgba(226, 197, 152, 0.3);
border-radius: 3px;
padding: 16px 20px;
margin-top: 16px;
}
.c-alloc-top {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 10px;
}
.c-blueprint-code {
font-family: monospace;
font-size: 13px;
font-weight: 700;
color: #50e3c2;
letter-spacing: 0.08em;
}
.c-valuation-price {
font-size: 18px;
font-weight: 700;
color: #e4cba4;
letter-spacing: 0.04em;
}
.c-specs-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.c-spec-pill {
font-size: 9.5px;
padding: 3px 8px;
background: rgba(226, 197, 152, 0.12);
border: 1px solid rgba(226, 197, 152, 0.25);
border-radius: 2px;
color: rgba(255, 255, 255, 0.8);
}
.c-actions-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.c-btn-ar-inline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: rgba(80, 227, 194, 0.12);
border: 1px solid rgba(80, 227, 194, 0.4);
color: #50e3c2;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
transition: all 0.24s ease;
}
.c-btn-ar-inline:hover {
background: #50e3c2;
color: #0b0705;
}
/* ── AR Studio Modal ───────────────────────────────────────────────────── */
.ar-modal-dialog {
max-width: 880px;
background: #0d0805;
}
.ar-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.ar-status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: rgba(80, 227, 194, 0.12);
border: 1px solid rgba(80, 227, 194, 0.3);
border-radius: 12px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: #50e3c2;
text-transform: uppercase;
}
.ar-status-badge.is-simulated {
color: #e4cba4;
border-color: rgba(226, 197, 152, 0.3);
background: rgba(226, 197, 152, 0.1);
}
.ar-camera-viewport {
position: relative;
width: 100%;
height: 480px;
background: #000;
border: 1px solid rgba(226, 197, 152, 0.3);
border-radius: 4px;
overflow: hidden;
}
#ar-webcam-feed {
width: 100%;
height: 100%;
object-fit: cover;
}
.ar-wrist-backdrop {
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 60%, #473220 0%, #21160d 50%, #0c0704 100%);
position: relative;
}
.ar-wrist-backdrop::after {
content: 'WRIST SIMULATION BACKDROP';
position: absolute;
bottom: 20px;
left: 20px;
font-size: 10px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.3);
}
/* Alignment Guide */
.ar-alignment-guide {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.guide-wrist-contour {
width: 180px;
height: 320px;
border: 1px dashed rgba(228, 203, 164, 0.35);
border-radius: 90px;
}
.guide-text {
position: absolute;
bottom: 16px;
font-size: 10px;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
background: rgba(0, 0, 0, 0.6);
padding: 4px 10px;
border-radius: 12px;
}
/* Overlaid Watch in AR */
.ar-watch-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: grab;
user-select: none;
z-index: 10;
}
.ar-watch-scaler {
transform-origin: center center;
transition: transform 0.05s ease-out;
}
.ar-watch-render {
position: relative;
width: 180px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 15px 35px rgba(0,0,0,0.85));
}
.ar-watch-photo {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.ar-hands-pin {
position: absolute;
top: 46.8%;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
}
.ar-hand-wrapper {
position: absolute;
left: 50%;
bottom: 0;
transform-origin: bottom center;
}
.ar-hand-img.ar-hour-img {
height: 32px;
transform: translateX(-50%) translateY(6px);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.ar-hand-img.ar-minute-img {
height: 48px;
transform: translateX(-50%) translateY(6px);
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
}
.ar-sweep-needle {
width: 1px;
height: 56px;
margin-left: -0.5px;
background: #e4cba4;
box-shadow: 0 0 4px #e4cba4;
}
/* AR Lighting Modes */
.light-warm #ar-webcam-feed, .light-warm .ar-wrist-backdrop {
filter: sepia(0.25) saturate(1.2) contrast(1.05);
}
.light-daylight #ar-webcam-feed, .light-daylight .ar-wrist-backdrop {
filter: contrast(1.15) brightness(1.05);
}
/* Controls Toolbar */
.ar-controls-toolbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin: 16px 0;
padding: 12px 16px;
background: rgba(14, 9, 6, 0.7);
border: 1px solid rgba(226, 197, 152, 0.2);
border-radius: 3px;
}
.ar-lighting-btns {
display: flex;
gap: 6px;
margin-top: 6px;
}
.ar-light-btn {
background: transparent;
border: 1px solid rgba(226, 197, 152, 0.25);
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
font-weight: 600;
padding: 5px 8px;
border-radius: 2px;
cursor: pointer;
}
.ar-light-btn.is-active {
background: #e4cba4;
color: #0b0705;
border-color: #e4cba4;
}
.ar-footer-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
/* Flash effect */
.ar-flash {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease-out;
}
.ar-flash.is-flashing {
opacity: 0.9;
}
/* Customizer Responsiveness */
@media (max-width: 1024px) {
.customizer-workbench {
grid-template-columns: 1fr;
}
.customizer-viewport {
height: 520px;
}
.customizer-panel {
height: auto;
}
.ar-controls-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.customizer-header {
flex-direction: column;
align-items: flex-start;
}
.c-step-tabs {
grid-template-columns: repeat(2, 1fr);
}
.c-actions-row {
grid-template-columns: 1fr;
}
.ar-camera-viewport {
height: 360px;
}
}
/* ===========================================================================
9. VALOIR GRAND HAUTE HORLOGERIE FOOTER REDESIGN
=========================================================================== */
.valoir-grand-footer {
position: relative;
background: linear-gradient(180deg, #0d0805 0%, #080503 40%, #030201 100%);
border-top: 1px solid rgba(226, 197, 152, 0.28);
color: #fff;
overflow: hidden;
width: 100%;
}
.valoir-grand-footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 300px;
background: radial-gradient(ellipse at 50% 0%, rgba(226, 197, 152, 0.12) 0%, rgba(200, 150, 90, 0.03) 50%, transparent 75%);
pointer-events: none;
}
/* ── Hero Ribbon ──────────────────────────────────────────────────────────── */
.footer-hero-ribbon {
padding: 48px clamp(24px, 5vw, 64px) 36px;
border-bottom: 1px solid rgba(226, 197, 152, 0.12);
position: relative;
z-index: 2;
width: 100%;
}
.footer-hero-container {
max-width: 1320px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
width: 100%;
}
.footer-brand-lockup {
display: flex;
align-items: center;
gap: 16px;
}
.footer-crest-box {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(226, 197, 152, 0.4);
background: radial-gradient(circle, rgba(28, 18, 12, 0.9) 0%, rgba(12, 8, 5, 0.95) 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 25px rgba(226, 197, 152, 0.2);
flex-shrink: 0;
}
.footer-crest-svg {
width: 28px;
height: 28px;
}
.footer-brand-titles {
display: flex;
flex-direction: column;
}
.footer-brand-name {
font-family: var(--font-serif, "Cinzel", "Bodoni MT", serif);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.3em;
background: linear-gradient(135deg, #ffffff 0%, #e4cba4 50%, #c49a6c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
line-height: 1.1;
}
.footer-brand-sub {
font-size: 9.5px;
letter-spacing: 0.2em;
color: var(--gold-soft, #c9ad84);
text-transform: uppercase;
margin: 4px 0 0;
font-weight: 500;
}
.footer-seal-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(226, 197, 152, 0.06);
border: 1px solid rgba(226, 197, 152, 0.25);
border-radius: 30px;
padding: 8px 18px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.seal-icon {
color: #e4cba4;
font-size: 13px;
filter: drop-shadow(0 0 6px rgba(226, 197, 152, 0.6));
}
.seal-texts {
display: flex;
flex-direction: column;
}
.seal-title {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
color: #fff;
text-transform: uppercase;
}
.seal-sub {
font-size: 9px;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.6);
}
.btn-back-to-top {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 30px;
border: 1px solid rgba(226, 197, 152, 0.3);
background: transparent;
color: #e4cba4;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-back-to-top:hover {
background: #e4cba4;
color: #0c0704;
border-color: #e4cba4;
box-shadow: 0 0 20px rgba(226, 197, 152, 0.35);
transform: translateY(-2px);
}
/* ── VIP Collector Newsletter Suite ───────────────────────────────────────── */
.footer-collector-suite {
max-width: 1320px;
margin: 40px auto 0;
padding: 0 clamp(24px, 5vw, 64px);
position: relative;
z-index: 2;
width: 100%;
}
.footer-collector-card {
background: linear-gradient(135deg, rgba(28, 18, 12, 0.85) 0%, rgba(15, 9, 6, 0.95) 100%);
border: 1px solid rgba(226, 197, 152, 0.28);
border-radius: 4px;
padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px);
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.collector-text-col .prov-tag {
display: inline-block;
margin-bottom: 8px;
}
.collector-title {
font-family: var(--font-serif, "Cinzel", serif);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 400;
color: #fff;
letter-spacing: 0.1em;
margin: 0 0 10px;
}
.collector-desc {
font-size: 13px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.68);
margin: 0;
max-width: 480px;
}
.footer-newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-input-wrap {
display: flex;
align-items: center;
background: rgba(8, 5, 3, 0.85);
border: 1px solid rgba(226, 197, 152, 0.35);
border-radius: 3px;
padding: 4px 4px 4px 16px;
transition: all 0.3s ease;
}
.footer-input-wrap:focus-within {
border-color: #e4cba4;
box-shadow: 0 0 18px rgba(226, 197, 152, 0.25);
}
.footer-input-wrap input {
flex: 1;
background: transparent;
border: none;
color: #fff;
font-size: 13px;
font-family: inherit;
outline: none;
}
.footer-input-wrap input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.footer-submit-btn {
background: linear-gradient(135deg, #e4cba4 0%, #c49a6c 100%);
color: #0c0704;
border: none;
border-radius: 2px;
padding: 11px 22px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.footer-submit-btn:hover {
background: linear-gradient(135deg, #ffffff 0%, #e4cba4 100%);
box-shadow: 0 0 20px rgba(226, 197, 152, 0.5);
transform: translateX(2px);
}
.form-privacy-note {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.04em;
}
.form-privacy-note svg {
color: var(--gold-soft, #c9ad84);
flex-shrink: 0;
}
/* ── Haute Horlogerie 4-Column Directory ──────────────────────────────────── */
.footer-nav-directory {
max-width: 1320px;
margin: 50px auto 0;
padding: 0 clamp(24px, 5vw, 64px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3.5vw, 48px);
position: relative;
z-index: 2;
width: 100%;
}
.footer-dir-col {
display: flex;
flex-direction: column;
}
.footer-col-head {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #e4cba4;
margin: 0 0 18px;
position: relative;
padding-bottom: 10px;
}
.footer-col-head::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 1px;
background: var(--gold-soft, #c9ad84);
}
.footer-links-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links-list li a {
color: rgba(255, 255, 255, 0.65);
font-size: 12.5px;
text-decoration: none;
letter-spacing: 0.03em;
transition: all 0.25s ease;
display: inline-block;
line-height: 1.45;
}
.footer-links-list li a:hover {
color: #e4cba4;
transform: translateX(4px);
text-shadow: 0 0 10px rgba(226, 197, 152, 0.3);
}
/* ── World Clocks & Telemetry Bar ─────────────────────────────────────────── */
.footer-world-clocks-bar {
margin-top: 50px;
background: rgba(9, 5, 3, 0.9);
border-top: 1px solid rgba(226, 197, 152, 0.12);
border-bottom: 1px solid rgba(226, 197, 152, 0.12);
padding: 22px clamp(24px, 5vw, 64px);
position: relative;
z-index: 2;
width: 100%;
}
.world-clocks-container {
max-width: 1320px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.world-clock-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.clock-city {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--gold-soft, #c9ad84);
text-transform: uppercase;
}
.clock-time {
font-family: var(--font-mono, "SF Mono", monospace, sans-serif);
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: 0.08em;
}
.clock-sub {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.04em;
}
.world-clock-telemetry {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(226, 197, 152, 0.05);
border: 1px solid rgba(226, 197, 152, 0.2);
border-radius: 20px;
padding: 6px 16px;
}
.telemetry-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #39e58c;
box-shadow: 0 0 10px #39e58c;
animation: pulseEscapement 1.8s infinite ease-in-out;
}
@keyframes pulseEscapement {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.6; }
}
.telemetry-txt {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
color: #e4cba4;
text-transform: uppercase;
}
/* ── Bottom Legal Strip ───────────────────────────────────────────────────── */
.footer-legal-strip {
padding: 28px clamp(24px, 5vw, 64px) 36px;
position: relative;
z-index: 2;
width: 100%;
}
.legal-strip-container {
max-width: 1320px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.06em;
width: 100%;
}
.legal-left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.swiss-flag-emboss {
font-size: 14px;
}
.swiss-made-badge {
color: #fff;
font-weight: 600;
letter-spacing: 0.14em;
}
.legal-sep {
color: rgba(226, 197, 152, 0.35);
}
.copyright-txt {
font-size: 10.5px;
}
.legal-links {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.legal-links a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.legal-links a:hover {
color: #e4cba4;
}
/* ── Footer & Header Global Responsiveness ────────────────────────────────── */
@media (max-width: 1280px) {
.v-nav-link span {
display: none;
}
}
@media (max-width: 1100px) {
.valoir-nav-links {
gap: 2px;
}
.v-nav-link {
font-size: 9.5px;
padding: 5px 6px;
letter-spacing: 0.08em;
}
.valoir-sub {
display: none;
}
}
@media (max-width: 1024px) {
.footer-collector-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 32px 28px;
}
.footer-nav-directory {
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
.world-clocks-container {
justify-content: flex-start;
gap: 28px;
}
}
@media (max-width: 960px) {
.valoir-nav-links {
display: none;
}
.v-mobile-nav-toggle {
display: flex;
}
}
@media (max-width: 820px) {
.hero-wings-row {
flex-direction: column;
align-items: center;
gap: 12px;
}
.hero-wing-card {
width: 100%;
max-width: 320px;
margin-top: 4px;
padding: 14px 16px;
}
.hero-stage-overlay {
padding: 76px 16px 20px;
}
.hero-main-title {
font-size: 26px;
}
.valoir-name {
font-size: 13px;
letter-spacing: 0.22em;
}
.v-header-salon-btn span {
display: none;
}
.v-header-salon-btn {
padding: 7px 10px;
border-radius: 20px;
}
.v-header-salon-btn svg {
margin: 0;
}
}
@media (max-width: 680px) {
.footer-hero-container {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-nav-directory {
grid-template-columns: 1fr;
gap: 28px;
}
.world-clocks-container {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.legal-strip-container {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
}
/* ── Mobile Hamburger Button & Drawer Menu ──────────────────────────────── */
.v-mobile-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 38px;
height: 38px;
background: rgba(20, 14, 9, 0.7);
border: 1px solid rgba(226, 197, 152, 0.25);
border-radius: 4px;
cursor: pointer;
padding: 0;
transition: all 0.25s ease;
}
.v-mobile-nav-toggle span {
display: block;
width: 18px;
height: 1.5px;
background: #e4cba4;
border-radius: 1px;
transition: all 0.25s ease;
}
.v-mobile-nav-toggle.is-open span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.v-mobile-nav-toggle.is-open span:nth-child(2) {
opacity: 0;
}
.v-mobile-nav-toggle.is-open span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.v-mobile-nav-drawer {
position: fixed;
top: 68px;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 7, 5, 0.96);
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
z-index: 999;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
overflow-y: auto;
}
.v-mobile-nav-drawer.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.v-mobile-drawer-inner {
padding: 32px 24px 48px;
display: flex;
flex-direction: column;
gap: 28px;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
.v-mobile-drawer-links {
display: flex;
flex-direction: column;
gap: 14px;
}
.v-mobile-link {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
padding: 10px 14px;
border-radius: 4px;
background: rgba(226, 197, 152, 0.04);
border: 1px solid rgba(226, 197, 152, 0.12);
transition: all 0.2s ease;
}
.v-mobile-link span {
font-size: 10.5px;
color: #e4cba4;
font-weight: 700;
}
.v-mobile-link:hover, .v-mobile-link:active {
background: rgba(226, 197, 152, 0.15);
border-color: #e4cba4;
color: #fff;
transform: translateX(4px);
}
.v-mobile-drawer-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.v-mobile-drawer-footer {
text-align: center;
padding-top: 16px;
border-top: 1px solid rgba(226, 197, 152, 0.15);
}
.mobile-partner-link {
display: inline-block;
font-size: 12px;
color: #e4cba4;
text-decoration: none;
margin-top: 4px;
letter-spacing: 0.06em;
}
.mobile-partner-link:hover {
text-decoration: underline;
}
/* ── Partner Credit Styling ───────────────────────────────────────────────── */
.partner-credit-txt {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.55);
}
.partner-link {
color: #e4cba4;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.08em;
transition: all 0.2s ease;
}
.partner-link:hover {
color: #ffffff;
text-decoration: underline;
text-shadow: 0 0 10px rgba(226, 197, 152, 0.5);
}
.partner-email-link {
color: rgba(226, 197, 152, 0.85);
text-decoration: none;
}
.partner-email-link:hover {
color: #ffffff;
text-decoration: underline;
}