/* Static build: fonts served from Google Fonts (linked in ) */ :root { --font-display: 'Marcellus'; --font-body: 'Newsreader'; --font-mono: 'IBM Plex Mono'; } /* ———————————————————————————————————————— LUX LIFE ESTATES — design tokens Warm ink, bone, champagne. Cinema metadata layer. ———————————————————————————————————————— */ :root { --ink: #0d0c0a; --ink-2: #121109; --char: #17140f; --panel: #1c1913; --panel-2: #211d16; --line: rgba(220, 202, 168, 0.14); --line-strong: rgba(220, 202, 168, 0.28); --bone: #f2ebdc; --bone-dim: #e0d7c4; --smoke: #b3a893; --champagne: #d2ac68; --champagne-bright: #eccb87; --champagne-dim: rgba(210, 172, 104, 0.6); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-wipe: cubic-bezier(0.65, 0, 0.15, 1); --nav-h: 82px; /* lift for any text sitting directly on photography */ --on-image-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 22px rgba(0, 0, 0, 0.7); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--bone); font-family: var(--font-body), Georgia, serif; font-size: 19px; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* film grain — quiet, ambient */ body::after { content: ''; position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 99; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 9s steps(6) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2%, 2%); } 40% { transform: translate(2%, -1%); } 60% { transform: translate(-1%, -2%); } 80% { transform: translate(1%, 2%); } } ::selection { background: rgba(200, 162, 94, 0.35); color: #fff; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ————— type ————— */ .display { font-family: var(--font-display), 'Times New Roman', serif; font-weight: 400; line-height: 1.06; letter-spacing: 0.01em; } .display-xl { font-size: clamp(3rem, 7.2vw, 5.6rem); } .display-lg { font-size: clamp(2.3rem, 4.6vw, 3.7rem); } .display-md { font-size: clamp(1.7rem, 3vw, 2.4rem); } .display-sm { font-size: clamp(1.3rem, 2vw, 1.6rem); } .mono { font-family: var(--font-mono), 'Courier New', monospace; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; } .eyebrow { font-family: var(--font-mono), monospace; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne-bright); display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--champagne-dim); flex: none; } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ''; width: 34px; height: 1px; background: var(--champagne-dim); flex: none; } .lede { font-size: clamp(1.14rem, 1.7vw, 1.34rem); line-height: 1.72; color: var(--bone-dim); max-width: 58ch; } .muted { color: var(--smoke); } .gold { color: var(--champagne-bright); } em.accent { font-style: italic; color: var(--champagne-bright); } /* ————— layout ————— */ .container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; } .container.narrow { width: min(860px, calc(100% - 48px)); } .section { padding: clamp(84px, 11vw, 148px) 0; position: relative; } .section.tight { padding: clamp(56px, 7vw, 96px) 0; } .section.flush-top { padding-top: 0; } .hairline { border-top: 1px solid var(--line); } .two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .two-col.reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } /* ————— buttons ————— */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono), monospace; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; /* letter-spacing adds a trailing space after the last glyph — the extra left padding puts the label back on the optical centre */ padding: 18px 30px 18px 34px; border: 1px solid var(--line-strong); color: var(--bone); background: transparent; transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out); position: relative; cursor: pointer; } .btn:hover { border-color: var(--champagne); color: var(--champagne-bright); transform: translateY(-1px); } .btn .arrow { transition: transform 0.35s var(--ease-out); font-family: var(--font-body), serif; letter-spacing: 0; } .btn:hover .arrow { transform: translateX(5px); } .btn.solid { background: var(--champagne); border-color: var(--champagne); color: #14110a; } .btn.solid:hover { background: var(--champagne-bright); border-color: var(--champagne-bright); color: #14110a; } .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--champagne-bright); outline-offset: 3px; } /* ————— slate metadata strip ————— */ .slate { display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; font-family: var(--font-mono), monospace; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); } .slate span { padding: 0 18px; border-left: 1px solid var(--line-strong); } .slate span:first-child { padding-left: 0; border-left: 0; } .slate .rec { color: var(--champagne); display: inline-flex; align-items: center; gap: 8px; } .slate .rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); display: inline-block; animation: blink 2.2s infinite; } @keyframes blink { 0%, 55% { opacity: 1; } 70%, 85% { opacity: 0.15; } 100% { opacity: 1; } } /* ————— viewfinder frame (signature) ————— */ .vf { position: relative; overflow: hidden; background: var(--char); aspect-ratio: 4 / 3; } .vf.wide { aspect-ratio: 21 / 10; } .vf.tall { aspect-ratio: 4 / 5; } .vf img { width: 100%; height: 100%; object-fit: cover; } /* images fade in once loaded; frames keep their aspect ratio so nothing jumps */ .js .vf img:not(.is-loaded), .js .hero-media img:not(.is-loaded), .js .qb-media img:not(.is-loaded) { opacity: 0; } .vf img, .hero-media img, .qb-media img { transition: opacity 0.9s var(--ease-out); } .vf .vf-corners { position: absolute; inset: 14px; pointer-events: none; z-index: 3; } .vf .vf-corners i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(237, 229, 211, 0.85); transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out); } .vf .vf-corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; } .vf .vf-corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; } .vf .vf-corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; } .vf .vf-corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; } .vf:hover .vf-corners i { width: 34px; height: 34px; } .vf .vf-meta { position: absolute; left: 26px; right: 26px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #f4eee2; text-shadow: var(--on-image-shadow); z-index: 3; pointer-events: none; } .vf .vf-meta.top { top: 24px; } .vf .vf-meta.bottom { bottom: 24px; } /* ————— reveal system ————— */ .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: opacity, transform; } .rv.in { opacity: 1; transform: none; } .rv-fade { transform: none; } /* initial clip leaves a 0.1% sliver: a fully clipped element reports zero intersection in Chrome, which would keep the reveal from ever firing */ .rv-wipe { opacity: 1; transform: none; clip-path: inset(0 99.9% 0 0); transition: clip-path 1.1s var(--ease-wipe); } .rv-wipe.in { clip-path: inset(0 0 0 0); } .rv-wipe img { transform: scale(1.08); transition: transform 1.5s var(--ease-out), opacity 0.9s var(--ease-out); } .rv-wipe.in img { transform: scale(1); } .rv-rise-img { opacity: 1; transform: none; clip-path: inset(99.9% 0 0 0); transition: clip-path 1.1s var(--ease-wipe); } .rv-rise-img.in { clip-path: inset(0 0 0 0); } .rv-rise-img img { transform: scale(1.1); transition: transform 1.5s var(--ease-out), opacity 0.9s var(--ease-out); } .rv-rise-img.in img { transform: scale(1); } /* ————— nav ————— */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), backdrop-filter 0.5s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(13, 12, 10, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; flex-direction: column; line-height: 1; gap: 6px; } .brand .brand-name { font-family: var(--font-display), serif; font-size: 1.3rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bone); white-space: nowrap; } .brand .brand-sub { font-family: var(--font-mono), monospace; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--champagne); } .nav-links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); } /* :not(.nav-cta) matters — this rule outranks .nav-cta on specificity and would otherwise strip the Inquire button's padding */ .nav-links > a:not(.nav-cta), .nav-trigger { font-family: var(--font-mono), monospace; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); position: relative; padding: 6px 0; transition: color 0.3s; white-space: nowrap; } .nav-links > a:not(.nav-cta)::after, .nav-trigger::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); } .nav-links > a:not(.nav-cta):hover, .nav-links > a:not(.nav-cta).active, .nav-trigger:hover, .nav-trigger.active { color: var(--bone); } .nav-links > a:not(.nav-cta):hover::after, .nav-links > a:not(.nav-cta).active::after, .nav-trigger:hover::after, .nav-trigger.active::after { transform: scaleX(1); transform-origin: left; } /* ————— services dropdown ————— */ .nav-item { position: relative; display: flex; align-items: center; } .nav-trigger { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--champagne); transition: transform 0.35s var(--ease-out); } .nav-trigger[aria-expanded='true'] .nav-caret { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 20px); left: -22px; min-width: 296px; padding: 12px 0; background: rgba(15, 13, 10, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-strong); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s; z-index: 60; } .nav-dropdown.open { opacity: 1; visibility: visible; transform: none; } /* keeps the pointer from falling through the gap between trigger and panel */ .nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } .nav-drop-item { display: flex; align-items: baseline; gap: 14px; padding: 13px 24px; color: var(--bone-dim); transition: color 0.25s, background 0.25s; } .nav-drop-item:hover, .nav-drop-item:focus-visible { color: var(--bone); background: rgba(210, 172, 104, 0.09); } .nav-drop-num { font-family: var(--font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--champagne); flex: none; } .nav-drop-label { font-family: var(--font-display), serif; font-size: 1.06rem; letter-spacing: 0.03em; white-space: nowrap; } .nav-drop-all { display: flex; align-items: center; gap: 10px; margin: 10px 24px 4px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-bright); transition: color 0.25s; } .nav-drop-all:hover { color: var(--bone); } .nav-cta { font-family: var(--font-mono), monospace; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--champagne-dim); color: var(--champagne-bright); /* letter-spacing leaves a gap after the final glyph; the extra left padding puts "Inquire" back on the optical centre of the button */ padding: 13px 22px 13px 26px; margin-left: clamp(6px, 1vw, 16px); line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.35s, color 0.35s, border-color 0.35s; } .nav-cta:hover { background: var(--champagne); color: #14110a; border-color: var(--champagne); } .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 10px 4px; } .nav-burger span { width: 24px; height: 1px; background: var(--bone); transition: transform 0.35s var(--ease-out), opacity 0.3s; } .nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: rgba(13, 12, 10, 0.97); backdrop-filter: blur(18px); display: none; flex-direction: column; padding: 40px 32px 64px; gap: 4px; overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-display), serif; font-size: 1.9rem; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--bone); display: flex; justify-content: space-between; align-items: baseline; gap: 18px; } .mobile-menu a .mono { color: var(--champagne); font-size: 0.68rem; flex: none; } /* nested services list inside the mobile menu */ .mobile-sub { display: flex; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--champagne-dim); margin: 4px 0 10px; } .mobile-sub a { font-size: 1.16rem; padding: 11px 0; color: var(--bone-dim); border-bottom: 1px solid var(--line); } .mobile-sub a:last-child { border-bottom: 0; } .mobile-sub a .mono { font-size: 0.62rem; } /* ————— hero ————— */ .hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 112%; object-fit: cover; } /* Two scrims: one down the frame, one in from the left, so the copy block always sits on dark ground no matter what the photograph is doing. */ .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 12, 10, 0.62) 0%, rgba(13, 12, 10, 0.2) 30%, rgba(13, 12, 10, 0.5) 58%, rgba(13, 12, 10, 0.97) 100%), linear-gradient(90deg, rgba(13, 12, 10, 0.78) 0%, rgba(13, 12, 10, 0.42) 38%, rgba(13, 12, 10, 0) 74%); } .hero-kicker, .hero-title, .hero-sub, .hero-slate { text-shadow: var(--on-image-shadow); } .hero-bar { position: absolute; left: 0; right: 0; z-index: 5; background: var(--ink); transition: height 1.4s var(--ease-wipe) 0.25s; } .hero-bar.top { top: 0; height: 14vh; } .hero-bar.bottom { bottom: 0; height: 14vh; } .hero.loaded .hero-bar { height: 0; } .hero-frame { position: absolute; inset: 26px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1.2s ease 1.1s; } .hero.loaded .hero-frame { opacity: 1; } .hero-frame i { position: absolute; width: 30px; height: 30px; border: 1px solid rgba(237, 229, 211, 0.55); } .hero-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; } .hero-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; } .hero-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; } .hero-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; } .hero-content { position: relative; z-index: 6; width: 100%; padding-bottom: clamp(48px, 7vh, 84px); } .hero-title-wrap { overflow: hidden; } .hero-kicker, .hero-title, .hero-sub, .hero-actions, .hero-slate { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); } .hero.loaded .hero-kicker { opacity: 1; transform: none; transition-delay: 0.9s; } .hero.loaded .hero-title { opacity: 1; transform: none; transition-delay: 1.05s; } .hero.loaded .hero-sub { opacity: 1; transform: none; transition-delay: 1.25s; } .hero.loaded .hero-actions { opacity: 1; transform: none; transition-delay: 1.4s; } .hero.loaded .hero-slate { opacity: 1; transform: none; transition-delay: 1.6s; } .hero-title { max-width: 15ch; text-wrap: balance; } .hero-kicker { font-size: 0.86rem; letter-spacing: 0.26em; color: var(--champagne-bright); } .hero-sub { margin-top: 28px; font-size: clamp(1.24rem, 1.9vw, 1.55rem); line-height: 1.62; color: var(--bone); max-width: 46ch; } .hero-actions { display: flex; gap: 18px; margin-top: 42px; flex-wrap: wrap; } .hero-slate { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-strong); color: #ece4d4; } /* ————— marquee ————— */ .marquee { overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); } .marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 36s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-mono), monospace; font-size: 0.76rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--smoke); padding: 0 34px; display: flex; align-items: center; gap: 34px; white-space: nowrap; } .marquee-track span::after { content: '◆'; font-size: 0.55rem; color: var(--champagne-dim); } @keyframes marquee { to { transform: translateX(-50%); } } /* ————— stats ————— */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .stat { background: var(--ink); padding: 38px 30px; } .stat b { font-family: var(--font-display), serif; font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--bone); display: block; line-height: 1; } .stat b sup { font-size: 0.45em; color: var(--champagne); margin-left: 2px; } .stat small { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); display: block; margin-top: 14px; } /* ————— property cards ————— */ .prop-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.6vw, 34px); } .prop-card { position: relative; display: block; } .prop-card .vf { aspect-ratio: 4 / 3; } .prop-card.wide .vf { aspect-ratio: 16 / 9.5; } .prop-card .vf img { transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out), opacity 0.9s var(--ease-out); } .prop-card:hover .vf img { transform: scale(1.05); } .prop-card .vf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,10,0.12) 0%, rgba(13,12,10,0) 40%, rgba(13,12,10,0.55) 100%); z-index: 1; } .prop-card-body { padding: 22px 4px 0; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; } .prop-card-body h3 { font-family: var(--font-display), serif; font-weight: 400; font-size: 1.62rem; letter-spacing: 0.02em; transition: color 0.3s; } .prop-card:hover .prop-card-body h3 { color: var(--champagne-bright); } .prop-card-body .style { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); display: block; margin-top: 8px; } .prop-card-body .rate { font-family: var(--font-mono), monospace; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--champagne); white-space: nowrap; } .prop-card-body .rate small { display: block; color: var(--smoke); letter-spacing: 0.14em; font-size: 0.64rem; margin-top: 5px; text-transform: uppercase; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; } /* ————— filters ————— */ .filters { display: flex; gap: 10px; flex-wrap: wrap; } .filter-pill { font-family: var(--font-mono), monospace; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 20px 12px 23px; border: 1px solid var(--line); color: var(--bone-dim); transition: color 0.3s, border-color 0.3s, background 0.3s; } .filter-pill:hover { color: var(--bone); border-color: var(--line-strong); } .filter-pill.active { color: #14110a; background: var(--champagne); border-color: var(--champagne); } /* ————— services ————— */ .svc-row { display: grid; grid-template-columns: 88px minmax(0, 4fr) minmax(0, 5fr) auto; gap: clamp(20px, 3vw, 48px); padding: 44px 0; border-top: 1px solid var(--line); align-items: start; transition: background 0.4s; } .svc-row:last-child { border-bottom: 1px solid var(--line); } .svc-num { font-family: var(--font-mono), monospace; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--champagne); padding-top: 8px; } .svc-row h3 { font-family: var(--font-display), serif; font-weight: 400; font-size: clamp(1.55rem, 2.3vw, 2.05rem); line-height: 1.2; } .svc-row p { color: var(--bone-dim); font-size: 1.06rem; line-height: 1.65; max-width: 52ch; } .svc-row .svc-go { font-family: var(--font-display), serif; font-size: 1.5rem; color: var(--champagne-dim); transition: color 0.3s, transform 0.4s var(--ease-out); padding-top: 4px; } .svc-row:hover .svc-go { color: var(--champagne-bright); transform: translateX(6px); } .svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .svc-tags span { font-family: var(--font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--line); padding: 6px 12px; } /* ————— process ————— */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: step; } .process-step { background: var(--ink); padding: 40px 30px 46px; position: relative; } .process-step::before { counter-increment: step; content: '0' counter(step); font-family: var(--font-mono), monospace; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--champagne); } .process-step h3 { font-family: var(--font-display), serif; font-weight: 400; font-size: 1.5rem; margin: 20px 0 14px; } .process-step p { color: var(--bone-dim); font-size: 1.04rem; line-height: 1.68; } /* ————— quote band ————— */ .quote-band { position: relative; overflow: hidden; } .quote-band .qb-media { position: absolute; inset: 0; } .quote-band .qb-media img { width: 100%; height: 100%; object-fit: cover; } .quote-band .qb-media::after { content: ''; position: absolute; inset: 0; background: rgba(13, 12, 10, 0.8); } .quote-band blockquote { position: relative; z-index: 2; text-shadow: var(--on-image-shadow); font-family: var(--font-display), serif; font-size: clamp(1.65rem, 3.3vw, 2.65rem); line-height: 1.35; max-width: 26ch; margin-inline: auto; text-align: center; } .quote-band cite { display: block; margin-top: 30px; font-style: normal; } /* ————— journal ————— */ .post-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.5vw, 56px); padding: 48px 0; border-top: 1px solid var(--line); align-items: center; } .post-card:last-of-type { border-bottom: 1px solid var(--line); } .post-card .vf { aspect-ratio: 16 / 10; } .post-card .vf img { transition: transform 1.2s var(--ease-out), opacity 0.9s var(--ease-out); } .post-card:hover .vf img { transform: scale(1.05); } .post-card h3 { font-family: var(--font-display), serif; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 16px 0; transition: color 0.3s; } .post-card:hover h3 { color: var(--champagne-bright); } .post-card .deck { color: var(--bone-dim); font-size: 1.06rem; max-width: 56ch; } .post-meta { font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); display: flex; gap: 20px; flex-wrap: wrap; } .post-meta .cat { color: var(--champagne); } /* article */ .article-body { max-width: 68ch; margin-inline: auto; } .article-body p { margin: 26px 0; color: var(--bone-dim); font-size: 1.16rem; line-height: 1.82; } .article-body h2 { font-family: var(--font-display), serif; font-weight: 400; font-size: 1.9rem; margin: 54px 0 6px; color: var(--bone); } .article-body .pull { font-family: var(--font-display), serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4; color: var(--champagne-bright); border-left: 1px solid var(--champagne-dim); padding: 10px 0 10px 34px; margin: 48px 0; } /* ————— detail page ————— */ .detail-hero { position: relative; height: 78svh; min-height: 540px; overflow: hidden; display: flex; align-items: flex-end; } .detail-hero .hero-media img { height: 100%; } .detail-hero .hero-content { padding-bottom: 52px; } .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .spec { background: var(--ink); padding: 26px 24px; } .spec small { font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); display: block; margin-bottom: 10px; } .spec b { font-family: var(--font-display), serif; font-weight: 400; font-size: 1.26rem; color: var(--bone); } .feature-list { list-style: none; columns: 2; gap: 48px; } .feature-list li { break-inside: avoid; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line); color: var(--bone-dim); font-size: 1.06rem; position: relative; } .feature-list li::before { content: '◆'; position: absolute; left: 2px; top: 19px; font-size: 0.55rem; color: var(--champagne); } .gallery { display: grid; gap: clamp(20px, 2.6vw, 34px); } .gallery .vf.wide { aspect-ratio: 21 / 10; } .gallery .vf.tall { aspect-ratio: 4 / 5; } .rate-panel { background: var(--panel); border: 1px solid var(--line); padding: 40px; position: sticky; top: calc(var(--nav-h) + 24px); } .rate-panel .rate-num { font-family: var(--font-display), serif; font-size: 2.6rem; line-height: 1; } .rate-panel .rate-num small { font-size: 0.98rem; color: var(--smoke); font-family: var(--font-body), serif; } .detail-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 72px); align-items: start; } /* ————— FAQ ————— */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 4px; font-family: var(--font-display), serif; font-size: clamp(1.22rem, 1.9vw, 1.52rem); transition: color 0.3s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--champagne-bright); } .faq summary .faq-x { font-family: var(--font-mono), monospace; color: var(--champagne); font-size: 1.12rem; transition: transform 0.4s var(--ease-out); flex: none; } .faq details[open] summary .faq-x { transform: rotate(45deg); } .faq .faq-a { padding: 0 4px 30px; color: var(--bone-dim); font-size: 1.06rem; max-width: 70ch; } /* ————— forms ————— */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; } .field { display: flex; flex-direction: column; gap: 10px; } .field.full { grid-column: 1 / -1; } .field label { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); } .field input, .field select, .field textarea { background: var(--char); border: 1px solid var(--line); color: var(--bone); font-family: var(--font-body), serif; font-size: 1.06rem; padding: 16px 16px; transition: border-color 0.3s, background 0.3s; border-radius: 0; width: 100%; appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23998f7e' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--champagne-dim); background: var(--panel); outline: none; } .field textarea { min-height: 140px; resize: vertical; } .form-success { border: 1px solid var(--champagne-dim); background: var(--panel); padding: 56px 44px; text-align: center; } /* ————— CTA band ————— */ .cta-band { position: relative; overflow: hidden; text-align: center; } .cta-band .qb-media { position: absolute; inset: 0; } .cta-band .qb-media img { width: 100%; height: 100%; object-fit: cover; } .cta-band .qb-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(13,12,10,0.55) 30%, rgba(13,12,10,0.55) 70%, var(--ink) 100%); } .cta-band .cta-inner { position: relative; z-index: 2; } /* ————— footer ————— */ .footer { border-top: 1px solid var(--line); background: var(--ink-2); } .footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(4, minmax(0, 2.4fr)); gap: clamp(28px, 3vw, 52px); padding: clamp(56px, 7vw, 88px) 0 56px; } .footer h4 { font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 22px; font-weight: 400; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 13px; } .footer ul a { color: var(--bone-dim); font-size: 1.02rem; transition: color 0.3s; } .footer ul a:hover { color: var(--bone); } .footer .brand-name { font-size: 1.45rem; } .footer-tagline { color: var(--bone-dim); font-style: italic; font-size: 1.06rem; margin-top: 18px; max-width: 34ch; } .footer-bottom { border-top: 1px solid var(--line); padding: 26px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono), monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); } /* ————— page hero (interior pages) ————— */ .page-hero { padding: calc(var(--nav-h) + clamp(64px, 10vh, 120px)) 0 clamp(48px, 6vh, 80px); position: relative; } .page-hero .display-xl { max-width: 18ch; text-wrap: balance; } /* ————— responsive ————— */ /* the header carries Home + a Services dropdown now, so it folds into the burger earlier than the rest of the layout does */ @media (max-width: 1080px) { .nav-links { display: none; } .nav-burger { display: flex; } } @media (max-width: 1020px) { .stats, .process { grid-template-columns: repeat(2, 1fr); } .svc-row { grid-template-columns: 48px 1fr; } .svc-row .svc-desc { grid-column: 2; } .svc-row .svc-go { display: none; } .detail-layout { grid-template-columns: 1fr; } .rate-panel { position: static; } .span-7, .span-5, .span-6, .span-4, .span-8 { grid-column: span 12; } .two-col, .two-col.reverse { grid-template-columns: 1fr; } .post-card { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { font-size: 17.5px; } .brand .brand-name { font-size: 0.94rem; letter-spacing: 0.26em; } .brand .brand-sub { font-size: 0.48rem; letter-spacing: 0.36em; } .nav-links { display: none; } .nav-burger { display: flex; } .container { width: calc(100% - 40px); } .stats { grid-template-columns: 1fr 1fr; } .process { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .feature-list { columns: 1; } .spec-grid { grid-template-columns: 1fr 1fr; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-media::after { background: linear-gradient(180deg, rgba(13, 12, 10, 0.6) 0%, rgba(13, 12, 10, 0.32) 30%, rgba(13, 12, 10, 0.55) 58%, rgba(13, 12, 10, 0.96) 100%); } .slate span { padding: 0 10px; } /* the hero slate wraps to one item per line on phones — the divider rules read as stray marks once they are stacked, so stack it deliberately */ .hero-slate.slate { flex-direction: column; align-items: flex-start; gap: 9px; } .hero-slate.slate span { border-left: 0; padding: 0; } .hero-kicker { font-size: 0.74rem; letter-spacing: 0.18em; } .mobile-menu a { font-size: 1.7rem; } .footer-grid { grid-template-columns: 1fr; } .vf .vf-meta { left: 18px; right: 18px; } } /* ————— reduced motion ————— */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body::after { animation: none; } .rv, .rv-wipe, .rv-rise-img, .hero-bar, .hero-kicker, .hero-title, .hero-sub, .hero-actions, .hero-slate, .hero-frame { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } .hero-bar { height: 0 !important; } .marquee-track { animation: none; } .slate .rec i { animation: none; } .rv-wipe img, .rv-rise-img img { transform: none !important; } .vf img, .hero-media img, .qb-media img { opacity: 1 !important; transition: none !important; } }