/* ============================================================ SPARK STAGE COLLECTION — shared yacht-grade design system Used by: frankfurt-horizon-stage / -liberty-stage / -skyline-stage Themes via ============================================================ */ /* SPARK design-system faces */ @font-face { font-family: 'GT Super Display'; src: url('fonts/GT-Super-Display-Bold.woff2') format('woff2'), url('fonts/GT-Super-Display-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Söhne'; src: url('fonts/S_hne-Buch.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Söhne'; src: url('fonts/S_hne-Kr_ftig.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } :root { --stg-sans: 'Söhne', system-ui, -apple-system, sans-serif; --stg-serif: 'GT Super Display', Georgia, serif; --stg-mono: 'JetBrains Mono', ui-monospace, monospace; --stg-maxw: 1480px; --stg-pad: clamp(20px, 5vw, 88px); --stg-nav-h: 64px; --stg-subnav-h: 44px; --stg-hdr-h: 64px; /* measured at runtime from the SPARK header */ } /* GT Super has no italic cut — render display accents upright in accent colour */ .stg em, .stg-serif { font-style: normal; } /* ── Theme tokens ──────────────────────────────────────── */ .stg--dark { --bg: #0b0b0c; --bg2: #141416; --surface: #17171a; --ink: #f4f1ea; --muted: rgba(244,241,234,.62); --faint: rgba(244,241,234,.42); --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.08); --accent: #c8a878; --accent-2: #d8bd90; --hero-scrim: linear-gradient(180deg, rgba(8,8,9,.40) 0%, rgba(8,8,9,.05) 32%, rgba(8,8,9,.55) 72%, rgba(8,8,9,.92) 100%); } .stg--light { --bg: #f3efe7; --bg2: #ece6da; --surface: #fffdf8; --ink: #1a1a1c; --muted: rgba(26,26,28,.64); --faint: rgba(26,26,28,.45); --line: rgba(0,0,0,.12); --line-soft: rgba(0,0,0,.07); --accent: #9c7d4c; --accent-2: #b08a4f; --hero-scrim: linear-gradient(180deg, rgba(20,18,15,.34) 0%, rgba(20,18,15,.04) 34%, rgba(20,18,15,.40) 74%, rgba(20,18,15,.82) 100%); } .stg--dusk { --bg: #141210; --bg2: #1d1a15; --surface: #231f19; --ink: #f5efe9; --muted: rgba(245,239,233,.64); --faint: rgba(245,239,233,.44); --line: rgba(255,255,255,.13); --line-soft: rgba(255,255,255,.07); --accent: #dca06a; --accent-2: #e7b785; --hero-scrim: linear-gradient(180deg, rgba(16,13,10,.40) 0%, rgba(16,13,10,.05) 32%, rgba(16,13,10,.55) 70%, rgba(12,10,8,.92) 100%); } * { box-sizing: border-box; } .stg { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--stg-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; overscroll-behavior-x: none; } .stg img { display: block; max-width: 100%; } .stg a { color: inherit; text-decoration: none; } .stg button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .stg__shell { max-width: var(--stg-maxw); margin: 0 auto; padding-left: var(--stg-pad); padding-right: var(--stg-pad); } /* ── Type ──────────────────────────────────────────────── */ .stg-eyebrow { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 14px; } .stg-eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .8; } .stg-eyebrow--center { justify-content: center; } .stg-h1 { font-family: var(--stg-sans); font-weight: 600; font-size: clamp(44px, 7vw, 116px); line-height: .96; letter-spacing: -0.03em; margin: 0; } .stg-h2 { font-family: var(--stg-sans); font-weight: 600; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.0; letter-spacing: -0.025em; margin: 0; } .stg-h3 { font-family: var(--stg-sans); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .stg em, .stg-serif { font-family: var(--stg-serif); font-style: italic; font-weight: 400; color: var(--accent); } .stg-lede { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; } .stg-body { font-size: 16px; line-height: 1.7; color: var(--muted); } /* ── Buttons ───────────────────────────────────────────── */ .stg-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--stg-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 15px 26px; border-radius: 2px; transition: background .25s, color .25s, border-color .25s, transform .25s; } .stg-btn--primary { background: var(--accent); color: #14110b; } .stg-btn--primary:hover { background: var(--accent-2); transform: translateY(-1px); } .stg-btn--ghost { border: 1px solid var(--line); color: var(--ink); } .stg-btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ── Top nav (slim, bespoke) ───────────────────────────── */ .stg-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--stg-nav-h); display: flex; align-items: center; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; } .stg-nav__in { width: 100%; max-width: var(--stg-maxw); margin: 0 auto; padding: 0 var(--stg-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .stg-nav.is-stuck { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line-soft); } .stg-nav__brand { display: flex; align-items: baseline; gap: 12px; font-family: var(--stg-sans); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: 15px; } .stg-nav__brand b { letter-spacing: .26em; } .stg-nav__brand span { font-family: var(--stg-serif); font-style: italic; font-weight: 400; letter-spacing: .01em; font-size: 16px; color: var(--accent); text-transform: none; } .stg-nav__right { display: flex; align-items: center; gap: 22px; } .stg-nav__collection { font-family: var(--stg-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } .stg-nav__collection a { color: var(--muted); transition: color .2s; } .stg-nav__collection a:hover { color: var(--ink); } .stg-nav__collection a.is-current { color: var(--accent); } @media (max-width: 860px){ .stg-nav__collection { display: none; } } /* ── Sub navigation (under the main nav) ───────────────── */ .stg-subnav { position: fixed; top: 0; left: 0; right: 0; z-index: 89; height: var(--stg-subnav-h); background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line-soft); transform: translateY(-100%); opacity: 0; pointer-events: none; } .stg-subnav__in { max-width: var(--stg-maxw); margin: 0 auto; padding: 0 var(--stg-pad); height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; scrollbar-width: none; } .stg-subnav__in::-webkit-scrollbar { display: none; } .stg-subnav__here { flex: 0 0 auto; display: inline-flex; align-items: center; font-family: var(--stg-serif); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); padding-right: clamp(16px, 2vw, 28px); margin-right: clamp(4px, 1vw, 12px); border-right: 1px solid var(--line); white-space: nowrap; } .stg-subnav a { flex: 0 0 auto; font-family: var(--font-body, 'Söhne', system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--faint); padding: 6px 0; position: relative; transition: color .2s; white-space: nowrap; } .stg-subnav a:hover { color: var(--ink); } .stg-subnav a.is-active { color: var(--ink); } .stg-subnav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); } .stg-subnav__cta { margin-left: clamp(6px, 0.8vw, 14px); } .stg-subnav__cta a { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #14110b; padding: 9px 20px; border-radius: 999px; font-family: var(--stg-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, transform .2s; } .stg-subnav__cta a:hover { background: var(--accent-2); transform: translateY(-1px); color: #14110b; } @media (max-width: 680px){ .stg-subnav__cta { display: none; } } /* offset anchor scrolling for the fixed nav + subnav */ .stg-section { scroll-margin-top: calc(var(--stg-subnav-h) + 16px); } /* ── SPARK header ⇄ stage subnav scroll choreography ───── */ /* At the top only the global header (nav 1) shows. On scroll-down the header lifts away and the stage subnav (nav 2) slides in pinned to top. */ spark-header-v2 { transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; } .stg-subnav { transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .3s ease; } body.stg-hdr-hidden spark-header-v2 { transform: translateY(-101%); } body.stg-hdr-hidden .stg-subnav { transform: translateY(0); opacity: 1; pointer-events: auto; } /* The SPARK header + its detached drawer/mega are designed for dark-ink-on- paper. The stage themes redefine --ink/--text to light, which made the burger drawer + mega-menu text vanish. Reset the brand tokens on the header subtree (and the body-appended drawer) back to the site's light-surface values. Transparent-over-hero links use explicit #fff, so they're unaffected. */ spark-header-v2, #hv2-drawer { --ink: #0B0B0C; --text: #0A0A0A; --paper: #F6F3EE; --ink-900: #0A0A0A; --ink-800:#171717; --ink-700: #2A2926; --ink-600:#44423D; --ink-500: #6E6B63; --ink-400:#9A968B; --ink-300: #C3BFB3; --ink-200: #DFDCD1; --ink-100: #EFEDE4; --ink-050: #F7F5EE; --rule: #DFDCD1; --rule-soft: rgba(0,0,0,0.08); } /* The stage header only ever overlays the hero (it hides on scroll). Suppress the site's opaque "stuck" paper state — on the dark/dusk stage themes it painted a beige bar whose nav links inherited the stage's light --ink and vanished. Keep the header transparent with white links throughout. */ spark-header-v2.hv2--transparent.is-stuck { background: transparent !important; border-bottom-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } spark-header-v2.hv2--transparent.is-stuck .hv2__nav-link, spark-header-v2.hv2--transparent.is-stuck .hv2__city, spark-header-v2.hv2--transparent.is-stuck .hv2__lang, spark-header-v2.hv2--transparent.is-stuck .hv2__enquire { color: #fff !important; } spark-header-v2.hv2--transparent.is-stuck .hv2__brand-img { filter: brightness(0) invert(1) !important; } spark-header-v2.hv2--transparent.is-stuck .hv2__nav-item[data-nav="offers"] > .hv2__nav-link { color: var(--accent) !important; } /* ── Fixed request bar (bottom of viewport) ────────────── */ .stg-cta-bar { position: fixed; left: 0; right: 0; bottom: clamp(10px, 1.4vw, 18px); z-index: 88; display: flex; justify-content: center; padding: 0 var(--stg-pad); transform: translateY(180%); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease; } body.stg-hdr-hidden .stg-cta-bar { transform: translateY(0); opacity: 1; pointer-events: auto; } body.stg-enquire-vis .stg-cta-bar { transform: translateY(180%); opacity: 0; pointer-events: none; } .stg-cta-bar__in { width: min(100%, 1040px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(11,11,12,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 5px 6px 5px 20px; box-shadow: 0 12px 34px -24px rgba(0,0,0,.5); } .stg-cta-bar__id { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .stg-cta-bar__name { font-family: var(--stg-serif); font-weight: 700; font-size: clamp(14px, 1vw, 16px); color: #fff; letter-spacing: -0.01em; line-height: 1; } .stg-cta-bar__sub { font-family: var(--font-body, 'Söhne', system-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgba(255,255,255,.55); margin-top: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); white-space: nowrap; } .stg-cta-bar__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .stg-cta-bar__ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.32); color: #fff; padding: 7px 15px; border-radius: 999px; font-family: var(--font-body, 'Söhne', system-ui, sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; transition: border-color .2s, color .2s; } .stg-cta-bar__ghost:hover { border-color: var(--accent); color: var(--accent); } .stg-cta-bar__ghost svg { width: 14px; height: 14px; } .stg-cta-bar__primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #14110b; padding: 7px 16px; border-radius: 999px; font-family: var(--font-body, 'Söhne', system-ui, sans-serif); font-size: 11.5px; font-weight: 600; font-weight: 600; letter-spacing: .01em; text-transform: none; transition: background .2s, transform .2s; } .stg-cta-bar__primary:hover { background: var(--accent-2); transform: translateY(-1px); } @media (max-width: 720px){ .stg-cta-bar__sub, .stg-cta-bar__ghost { display: none; } .stg-cta-bar__in { padding: 8px 10px 8px 20px; } .stg-cta-bar__name { font-size: 15px; } .stg-cta-bar__primary { padding: 10px 18px; } } /* ── Hero ──────────────────────────────────────────────── */ .stg-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .stg-hero__media { position: absolute; inset: 0; z-index: -2; } .stg-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: stgHeroZoom 18s ease-out forwards; } @keyframes stgHeroZoom { from { transform: scale(1.08); } to { transform: scale(1); } } /* Hero entrance — staggered rise, matched to each stage's tempo */ .stg-hero__in > * { opacity: 0; transform: translateY(26px); animation: stgHeroRise .9s cubic-bezier(.22,1,.36,1) forwards; } .stg-hero .stg-eyebrow { animation-delay: .15s; } .stg-hero__name { animation-delay: .28s; } .stg-hero__tag { animation-delay: .44s; } .stg-hero__meta { animation-delay: .58s; } @keyframes stgHeroRise { to { opacity: 1; transform: none; } } .stg--light .stg-hero__in > * { animation-duration: 1.05s; } .stg--dusk .stg-hero__in > * { animation-duration: 1.25s; } @media (prefers-reduced-motion: reduce){ .stg-hero__media img, .stg-hero__in > * { animation: none !important; opacity: 1; transform: none; } } .stg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-scrim); } .stg-hero__in { width: 100%; max-width: var(--stg-maxw); margin: 0 auto; padding: 0 var(--stg-pad) clamp(48px, 6vw, 96px); color: #fff; } .stg-hero__name { font-family: var(--stg-serif); font-weight: 700; font-size: clamp(52px, 9vw, 168px); line-height: .9; letter-spacing: -0.04em; margin: 18px 0 0; } .stg-hero__name em { font-family: var(--stg-serif); font-style: italic; font-weight: 400; color: var(--accent-2); } .stg-hero__tag { font-family: var(--stg-serif); font-style: normal; font-size: clamp(20px, 2.4vw, 34px); color: rgba(255,255,255,.9); margin: 18px 0 0; max-width: 24ch; } .stg-hero__meta { display: flex; flex-wrap: wrap; gap: 0; margin: clamp(28px, 3.5vw, 48px) 0 0; border-top: 1px solid rgba(255,255,255,.22); } .stg-hero__meta-cell { padding: 18px clamp(20px, 2.4vw, 40px) 0 0; margin-right: clamp(20px, 2.4vw, 40px); } .stg-hero__meta-k { font-family: var(--stg-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); } .stg-hero__meta-v { font-family: var(--stg-sans); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); margin-top: 7px; color: #fff; } .stg-hero__scroll { position: absolute; right: var(--stg-pad); bottom: clamp(48px, 6vw, 96px); font-family: var(--stg-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.7); writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; } .stg-hero__scroll::after { content: ""; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.7), transparent); } @media (max-width: 680px){ .stg-hero__scroll { display: none; } } /* ── Generic section rhythm ────────────────────────────── */ .stg-section { padding: clamp(64px, 8vw, 140px) 0; } .stg-section--bg2 { background: var(--bg2); } .stg-section--ink { background: #0b0b0c; color: #f4f1ea; } .stg-sec-head { max-width: 920px; margin: 0 0 clamp(36px, 4.5vw, 64px); } .stg-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; } .stg-sec-head .stg-h2 { margin-top: 18px; } .stg-sec-head .stg-lede { margin-top: 22px; } /* ── Concept ───────────────────────────────────────────── */ .stg-concept { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; } .stg-concept__media { position: relative; aspect-ratio: 4/5; overflow: hidden; } .stg-concept__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); } .stg-concept__media:hover img { transform: scale(1.04); } .stg-concept__body .stg-lede { margin-bottom: 26px; } .stg-concept__points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; } .stg-concept__points li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); } .stg-concept__points li:last-child { border-bottom: 1px solid var(--line); } .stg-concept__pn { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .2em; color: var(--accent); padding-top: 4px; } .stg-concept__pt { font-family: var(--stg-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .stg-concept__pd { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; } @media (max-width: 900px){ .stg-concept { grid-template-columns: 1fr; gap: 36px; } } /* ── Design storytelling (full-bleed editorial) ───────── */ .stg-design__full { position: relative; height: clamp(420px, 80vh, 880px); overflow: hidden; isolation: isolate; } .stg-design__full img { width: 100%; height: 100%; object-fit: cover; } .stg-design__full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)); } .stg-design__cap { position: absolute; left: var(--stg-pad); bottom: clamp(32px, 4vw, 64px); z-index: 2; color: #fff; max-width: 620px; } .stg-design__cap .stg-h3 { margin-top: 14px; } .stg-design__cap p { color: rgba(255,255,255,.82); margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; } .stg-design__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.8vw, 14px); } .stg-design__duo figure { position: relative; margin: 0; aspect-ratio: 3/4; overflow: hidden; } .stg-design__duo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); } .stg-design__duo figure:hover img { transform: scale(1.04); } .stg-design__duo figcaption { position: absolute; left: 22px; bottom: 20px; color: #fff; font-family: var(--stg-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6); } @media (max-width: 760px){ .stg-design__duo { grid-template-columns: 1fr; } } /* ── Virtual tour ──────────────────────────────────────── */ .stg-tour { position: relative; aspect-ratio: 21/9; min-height: 420px; max-width: 100%; overflow: hidden; background: #000; isolation: isolate; } @media (max-width: 1000px){ .stg-tour { min-height: 0; aspect-ratio: 16/10; } } .stg-tour__poster { position: absolute; inset: 0; z-index: -1; } .stg-tour__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .72; } .stg-tour::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: -1; } .stg-tour__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; color: #fff; padding: 24px; } .stg-tour__play { width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s, border-color .25s; } .stg-tour__play:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); } .stg-tour__play svg { width: 26px; height: 26px; margin-left: 4px; } .stg-tour__label { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; } .stg-tour__hot { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.3); } .stg-tour__hot::before, .stg-tour__hot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } .stg-tour__hot::after { border: 1px solid rgba(255,255,255,.5); animation: stgPing 2.6s ease-out infinite; } @keyframes stgPing { 0%{ transform: scale(1); opacity: .8; } 100%{ transform: scale(2.4); opacity: 0; } } .stg-tour__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; display: none; } .stg-tour.is-live .stg-tour__frame { display: block; } .stg-tour.is-live .stg-tour__inner, .stg-tour.is-live .stg-tour__hot { display: none; } /* ── General arrangements (deck plans) ─────────────────── */ .stg-ga { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .stg-ga__plan { background: var(--surface); border: 1px solid var(--line); padding: clamp(18px, 2.2vw, 34px); } .stg-ga__plan-head { display: flex; justify-content: space-between; font-family: var(--stg-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; } .stg-ga__plan img { width: 100%; height: auto; } .stg-ga__legend { display: grid; gap: 0; } .stg-ga__legend li { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); } .stg-ga__legend li:last-child { border-bottom: 1px solid var(--line); } .stg-ga__lk { font-family: var(--stg-mono); font-size: 11px; color: var(--accent); } .stg-ga__lt { font-weight: 600; font-size: 16px; } .stg-ga__ld { font-size: 13px; color: var(--muted); grid-column: 2; } .stg-ga__lv { font-family: var(--stg-mono); font-size: 12px; color: var(--muted); } @media (max-width: 900px){ .stg-ga { grid-template-columns: 1fr; } } /* ── Technical specifications ──────────────────────────── */ .stg-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: clamp(40px, 5vw, 64px); } .stg-layout { background: var(--bg); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; } .stg-layout__icon { height: 46px; display: flex; align-items: flex-end; } .stg-layout__icon svg { width: auto; height: 100%; color: var(--accent); } .stg-layout__name { font-weight: 600; font-size: 15px; } .stg-layout__cap { font-family: var(--stg-mono); font-size: 12px; color: var(--muted); margin-top: auto; } .stg-layout__cap b { font-family: var(--stg-sans); font-size: 22px; font-weight: 600; color: var(--ink); display: block; letter-spacing: -0.02em; } .stg-spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); } @media (max-width: 820px){ .stg-spec-cols { grid-template-columns: 1fr; } } .stg-spec h4 { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; } .stg-spec__row { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; } .stg-spec__row:last-child { border-bottom: 1px solid var(--line); } .stg-spec__k { color: var(--muted); font-size: 15px; } .stg-spec__v { font-weight: 600; font-size: 15.5px; text-align: right; } /* At-a-glance KPI strip */ .stg-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: clamp(40px, 5vw, 72px); } .stg-glance__cell { background: var(--bg); padding: clamp(18px,2vw,26px) clamp(18px,2vw,26px); display: flex; flex-direction: column; gap: 9px; } .stg-glance__k { font-family: var(--stg-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); } .stg-glance__v { font-family: var(--stg-serif); font-weight: 700; font-size: clamp(20px, 1.8vw, 27px); color: var(--ink); letter-spacing: -0.01em; line-height: 1; } @media (max-width: 900px){ .stg-glance { grid-template-columns: repeat(2, 1fr); } } /* Multi-column technical spec grid (3+ groups) */ .stg-specgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } @media (max-width: 900px){ .stg-specgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px){ .stg-specgrid { grid-template-columns: 1fr; } } /* Adjacent spaces cards */ .stg-subhead { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: clamp(44px,5vw,72px) 0 22px; padding-top: clamp(28px,3.5vw,44px); border-top: 1px solid var(--line); } .stg-adj { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); } .stg-adj__card { background: var(--bg); border: 1px solid var(--line-soft); padding: clamp(20px,2.2vw,28px); display: flex; flex-direction: column; } .stg-adj__name { font-family: var(--stg-serif); font-weight: 700; font-size: clamp(19px,1.6vw,23px); letter-spacing: -0.01em; } .stg-adj__area { font-family: var(--stg-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: 8px; } .stg-adj__cap { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; } @media (max-width: 900px){ .stg-adj { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px){ .stg-adj { grid-template-columns: 1fr; } } /* ── Gallery (masonry) ─────────────────────────────────── */ .stg-gallery { columns: 3; column-gap: clamp(8px, 1vw, 16px); } @media (max-width: 1000px){ .stg-gallery { columns: 2; } } @media (max-width: 600px){ .stg-gallery { columns: 1; } } .stg-gallery__item { break-inside: avoid; margin-bottom: clamp(8px, 1vw, 16px); position: relative; overflow: hidden; display: block; } .stg-gallery__item img { width: 100%; transition: transform 1s cubic-bezier(.22,1,.36,1); } .stg-gallery__item:hover img { transform: scale(1.05); } .stg-gallery__cap { position: absolute; left: 18px; bottom: 16px; color: #fff; font-family: var(--stg-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; text-shadow: 0 1px 10px rgba(0,0,0,.6); } .stg-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .3s; } .stg-gallery__item:hover .stg-gallery__cap { opacity: 1; transform: none; } .stg-gallery__item:hover::after { opacity: 1; } /* ── Enquire ───────────────────────────────────────────── */ .stg-enquire { position: relative; overflow: hidden; isolation: isolate; } .stg-enquire__media { position: absolute; inset: 0; z-index: -2; } .stg-enquire__media img { width: 100%; height: 100%; object-fit: cover; } .stg-enquire::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,9,.78), rgba(8,8,9,.9)); } .stg-enquire__in { color: #fff; text-align: center; max-width: 760px; margin: 0 auto; } .stg-enquire .stg-h2 { margin: 18px 0 0; } .stg-enquire__lede { color: rgba(255,255,255,.78); margin: 22px auto 0; max-width: 52ch; } .stg-enquire__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; } /* ── Footer ────────────────────────────────────────────── */ .stg-foot { background: #0b0b0c; color: rgba(244,241,234,.6); padding: clamp(48px, 6vw, 80px) 0 40px; border-top: 1px solid rgba(255,255,255,.08); } .stg-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: baseline; } .stg-foot__brand { font-family: var(--stg-sans); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #f4f1ea; font-size: 18px; } .stg-foot__links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--stg-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .stg-foot__links a:hover { color: var(--accent); } .stg-foot__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--stg-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ── Reveal-on-scroll ──────────────────────────────────── */ .stg-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); } .stg-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .stg-reveal { opacity: 1; transform: none; transition: none; } .stg-hero__media img { animation: none; } } /* ── Mobile menu ───────────────────────────────────────── */ .stg-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .stg-burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; } @media (max-width: 860px){ .stg-burger { display: flex; } } .stg-mobile { position: fixed; inset: 0; z-index: 95; background: var(--bg); display: none; flex-direction: column; padding: calc(var(--stg-nav-h) + 24px) var(--stg-pad) 40px; gap: 4px; } .stg-mobile.is-open { display: flex; } .stg-mobile a { font-family: var(--stg-sans); font-weight: 500; font-size: 26px; letter-spacing: -0.01em; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .stg-mobile__close { position: absolute; top: 18px; right: var(--stg-pad); font-family: var(--stg-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } /* ── Stage collection cross-nav ───────────────────────── */ .stg-collection__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); } .stg-collection__card { position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; text-decoration: none; color: #fff; isolation: isolate; } .stg-collection__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.22,1,.36,1); } .stg-collection__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,12,.08) 30%, rgba(11,11,12,.86) 100%); } .stg-collection__card:hover img { transform: scale(1.05); } .stg-collection__card.is-current { outline: 1px solid var(--accent); outline-offset: -1px; } .stg-collection__body { position: absolute; inset: auto 0 0 0; padding: clamp(20px,2.4vw,30px); } .stg-collection__tag { font-family: var(--stg-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.72); } .stg-collection__card.is-current .stg-collection__tag { color: var(--accent-2); } .stg-collection__name { font-family: var(--stg-serif); font-weight: 700; font-size: clamp(22px,2.4vw,32px); margin: 9px 0 4px; letter-spacing: -0.01em; } .stg-collection__sub { font-size: 13px; color: rgba(255,255,255,.82); } @media (max-width: 760px){ .stg-collection__grid { grid-template-columns: 1fr; } .stg-collection__card { aspect-ratio: 16/9; } } /* Subnav stage switcher (dropdown on the stage pages) */ .stg-subnav__here--menu { position: relative; padding-right: 0; border-right: 1px solid var(--line); margin-right: clamp(4px,1vw,12px); } .stg-subnav__here-btn { font-family: var(--stg-serif); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; padding: 0 clamp(16px,2vw,28px) 0 0; cursor: pointer; background: none; border: 0; white-space: nowrap; } .stg-subnav__caret { font-size: 10px; color: var(--accent); transition: transform .2s; } .stg-subnav__here--menu.is-open .stg-subnav__caret { transform: rotate(180deg); } .stg-subnav__menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px; background: color-mix(in srgb, var(--bg2) 96%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 4px; padding: 6px; display: flex; flex-direction: column; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 95; box-shadow: 0 22px 54px -22px rgba(0,0,0,.6); } .stg-subnav__here--menu.is-open .stg-subnav__menu { opacity: 1; transform: none; pointer-events: auto; } .stg-subnav__menu a { font-family: var(--stg-serif); font-weight: 700; font-size: 15px; color: var(--muted); padding: 9px 12px; border-radius: 3px; white-space: nowrap; } .stg-subnav__menu a:hover { color: var(--ink); background: rgba(255,255,255,.05); } .stg-subnav__menu a[aria-current="page"] { color: var(--accent); } /* ── Light/dark rhythm — alternate panels flip to the opposite tone ── */ /* On dark & dusk stages, the --bg2 sections become warm paper panels with dark ink; on the light stage they invert to a warm-charcoal panel. Child tokens (--bg, --ink, --line, --accent) are re-scoped so everything inside adapts automatically. Creates a strong hell/dunkel rhythm down the page. */ .stg--dark .stg-section--bg2, .stg--dusk .stg-section--bg2 { --bg: #ffffff; --bg2: #f3efe7; --surface: #ffffff; --ink: #1a1a1c; --muted: rgba(26,26,28,.66); --faint: rgba(26,26,28,.46); --line: rgba(0,0,0,.12); --line-soft: rgba(0,0,0,.07); --accent: #9c7d4c; --accent-2: #b08a4f; background: #f3efe7; color: var(--ink); } .stg--light .stg-section--bg2 { --bg: #1d1a15; --bg2: #14110f; --surface: #231f19; --ink: #f4f1ea; --muted: rgba(244,241,234,.64); --faint: rgba(244,241,234,.44); --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.08); --accent: #c8a878; --accent-2: #d8bd90; background: #14110f; color: var(--ink); }