/* ============================================================ STARGAZE — Yucca Valley / Joshua Tree Cinematic retro-future desert. No italics. Full-bleed. ============================================================ */ :root{ /* palette — Mojave night + retro neon */ --night: #0b0e22; --night-2: #12163a; --night-3: #191d47; --ink: #070812; --bone: #f5efe4; --bone-dim: #cdc6ba; --sand: #d9c9ad; --neon: #ff3d8b; /* magenta sign glow — accents, dots, shadows */ --neon-btn: #de0068; /* same magenta, dark enough for WHITE text at AA (4.88:1; the bright #ff3d8b only reaches 3.34) */ --neon-2: #ff6fae; --teal: #3ad0c6; /* turquoise car / pool */ --teal-2: #79e6dd; --amber: #ff8a3d; /* sunset */ --sage: #8ea07a; /* cactus */ /* LAYOUT LAW: full-width, essentially no margins (ogroup format). No centred content frame — the gutter is ~16-44px, never a percentage. */ --gutter: clamp(1rem, 2.2vw, 2.75rem); --readw: 46rem; --railw: 22rem; --serif: "Fraunces", "Times New Roman", serif; --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ease: cubic-bezier(.16,.84,.44,1); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* No global scroll-behavior:smooth — it double-animates JS scroll writes and fights GSAP ScrollTrigger; native wheel/anchor scrolling stays crisp. */ html{ -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ font-family:var(--sans); background:var(--night); color:var(--bone); line-height:1.65; font-size:clamp(1rem,.55rem + .55vw,1.1rem); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--neon); color:#fff; } /* WCAG 2.4.7 — every interactive element needs a visible keyboard focus state */ :focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:3px; } .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline-offset:1px; } /* ---------- type ---------- */ h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.01em; font-style:normal; } .display{ font-weight:900; } p{ font-style:normal; } .eyebrow{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--teal-2); } .eyebrow.neon{ color:var(--neon-2); } .lede{ font-size:clamp(1.1rem,.85rem + .8vw,1.5rem); color:var(--bone-dim); line-height:1.5; } /* ---------- layout ---------- */ .wrap{ width:100%; margin-inline:0; padding-inline:var(--gutter); } .bleed{ width:100vw; margin-inline:calc(50% - 50vw); } .section{ padding-block:clamp(4.5rem,9vw,9rem); position:relative; } /* two text sections in a row stack their padding into a ~350px void at 1920 — one section's worth of breathing room is enough */ .section + .section{ padding-top:0; } .reading{ max-width:var(--readw); } .center{ text-align:center; margin-inline:auto; } /* Reading measure lives INSIDE a full-width section, flanked by a FILLED rail — never as a lone narrow column stranded in side margins. Shipping .rail empty is the banned pattern; if there is nothing for it, use .editorial.solo. */ .editorial{ /* Content column FILLS (1fr) so the rail sits flush to the right gutter — a capped px track here left the rail floating with dead space beyond it. */ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,20vw,340px)); /* rail = at most 1/5 of the viewport */ gap:clamp(2rem,4.5vw,5.5rem); align-items:start; } .editorial.solo{ grid-template-columns:1fr; } /* Reading measure for the two-column layout: wide enough to fill the content column at common desktop widths (no center void) while staying readable. */ .editorial:not(.solo) .prose{ max-width:52rem; } .rail{ position:sticky; top:6.5rem; display:grid; gap:1.6rem; } .rail-card{ background:var(--night-2); border:1px solid rgba(245,239,228,.1); border-radius:12px; overflow:hidden; } .rail-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; } /* fill-dead-space Law 3: a summary card is read at a glance, so its text sits AT or ABOVE body size — never the sub-body "Excel side note" it used to be. */ .rail-card .rc{ padding:1.7rem 1.8rem 1.9rem; } .rail-card h3{ font-size:1.55rem; margin:.55rem 0 .9rem; } .rail-card p{ font-size:1.1rem; color:var(--bone-dim); line-height:1.5; } .rail-card .btn{ margin-top:1.5rem; width:100%; font-size:1.02rem; } .rail-toc{ border-top:1px solid rgba(245,239,228,.14); padding-top:1.4rem; } .rail-toc ol{ list-style:none; counter-reset:t; display:grid; gap:.7rem; margin-top:.9rem; } .rail-toc li{ counter-increment:t; } .rail-toc a{ display:flex; gap:.85rem; font-size:1.02rem; color:var(--bone-dim); line-height:1.4; transition:color .3s; } .rail-toc a::before{ content:counter(t,decimal-leading-zero); font-size:.8rem; font-weight:700; letter-spacing:.16em; color:var(--neon-2); padding-top:.2rem; } .rail-toc a:hover{ color:var(--teal-2); } .rail-facts{ display:grid; gap:.75rem; font-size:1.1rem; color:var(--bone-dim); line-height:1.45; } .rail-facts b{ color:var(--bone); font-weight:600; } /* Section heads run as a band so a two-line headline never leaves half the screen empty beside it. */ .band{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,5rem); align-items:end; } .band-h{ font-size:clamp(2rem,2.6vw + 1rem,4.4rem); font-weight:700; margin-top:1rem; } .band-aside{ color:var(--bone-dim); font-size:1.02rem; line-height:1.6; padding-bottom:.4rem; } .band-aside .btn{ margin-top:1.4rem; } @media (max-width:1023px){ .editorial{ grid-template-columns:1fr; gap:3rem; } .rail{ position:static; } .rail-toc{ display:none; } /* no "in this guide" director on mobile */ .band{ grid-template-columns:1fr; align-items:start; gap:1.4rem; } } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:1.05em 1.9em; border-radius:100px; border:1px solid transparent; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); will-change:transform; } .btn-neon{ background:var(--neon-btn); color:#fff; box-shadow:0 0 0 rgba(255,61,139,0); } .btn-neon:hover{ transform:translateY(-3px); box-shadow:0 12px 40px -8px rgba(255,61,139,.6); } .btn-ghost{ background:transparent; border-color:rgba(245,239,228,.35); color:var(--bone); } .btn-ghost:hover{ border-color:var(--teal); color:var(--teal-2); transform:translateY(-3px); } .btn-teal{ background:var(--teal); color:var(--ink); } .btn-teal:hover{ transform:translateY(-3px); box-shadow:0 12px 40px -8px rgba(58,208,198,.55); } /* ---------- nav ---------- z-order contract (do not reshuffle without re-checking all four): .skip 300 > .preload 200 > .nav 140 > .menu 130 > .cookie 90 > page The header sits ABOVE the overlay so the wordmark and the close button stay readable on the open sheet. The overlay is a sibling of
, never a child — .nav.solid carries a backdrop-filter, and a filtered ancestor becomes the containing block for position:fixed children. */ .nav{ position:fixed; inset:0 0 auto 0; z-index:140; display:flex; align-items:center; justify-content:space-between; gap:clamp(.85rem,1.8vw,2.4rem); padding:1.05rem var(--gutter); transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; } /* scrim — the bar is transparent over the hero, so the menu needs its own darkness to sit on. Deepens on scroll, replaced by the solid bar only once the hero has fully cleared the header. */ .nav::before{ content:""; position:absolute; inset:0 0 auto 0; height:220%; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(4,5,14,.78) 0%, rgba(4,5,14,.45) 46%, rgba(4,5,14,0) 100%); transition:opacity .4s var(--ease); } .nav.scrolled::before{ opacity:1; } /* no backdrop-filter on the fixed bar: a blur over a scrolling page is re-sampled every frame (measured: 5 of the 16 >50ms frames on a desktop wheel scroll) and at ~96% opacity it was invisible anyway. */ .nav.solid{ background:rgba(9,11,28,.96); border-bottom-color:rgba(245,239,228,.1); padding-block:.8rem; } .nav.solid::before{ opacity:0; } /* menu open: the sheet behind supplies the background, so drop both */ .nav.menu-open{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; } .nav.menu-open::before{ opacity:0; } .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:900; font-size:clamp(1.5rem,1.05rem + .95vw,2.15rem); letter-spacing:.01em; color:var(--bone); white-space:nowrap; flex-shrink:0; line-height:1; text-shadow:0 0 22px rgba(255,61,139,.35); transition:font-size .4s var(--ease); } .brand .brand-t{ background:linear-gradient(90deg,var(--bone) 0%,#fff 60%,var(--neon-2) 140%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .brand .dot{ width:.62rem; height:.62rem; border-radius:50%; background:var(--neon); flex-shrink:0; box-shadow:0 0 14px var(--neon),0 0 30px var(--neon); } .nav.solid .brand{ font-size:clamp(1.4rem,1rem + .8vw,1.9rem); } .nav-links{ display:flex; align-items:center; gap:clamp(1.2rem,2vw,2.2rem); margin-left:auto; } .nav-links a{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--bone-dim); white-space:nowrap; transition:color .3s; } .nav-links a:hover, .nav-links a.active{ color:var(--bone); } .nav-links a.active{ text-shadow:0 0 14px rgba(255,61,139,.5); } .nav-cta{ padding:.72em 1.35em; font-size:.76rem; white-space:nowrap; flex-shrink:0; } /* hamburger -> close, 48x48 tap target */ .nav-toggle{ display:none; width:48px; height:48px; margin-right:-6px; flex-shrink:0; align-items:center; justify-content:center; background:none; border:0; color:var(--bone); cursor:pointer; padding:0; } .nav-toggle .ico{ position:relative; display:block; width:26px; height:14px; } .nav-toggle .ico i{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .35s var(--ease), top .3s var(--ease), width .3s var(--ease); } .nav-toggle .ico i:nth-child(1){ top:0; } .nav-toggle .ico i:nth-child(2){ top:12px; } .nav-toggle[aria-expanded="true"] .ico i:nth-child(1){ top:6px; transform:rotate(45deg); } .nav-toggle[aria-expanded="true"] .ico i:nth-child(2){ top:6px; transform:rotate(-45deg); } /* Handover to the overlay. The mega-menu needs room for a bigger logo + five dropdown triggers + the Book button, so it hands over to the grouped overlay below 1180px (audit the 1300-1920 band per audit-nav-across-width-band). */ @media (max-width:1319px){ /* 7 tabs since 2026-10-06: handover raised from 1179 (header overflowed at 1200-1240) */ .mega, .nav-cta{ display:none; } .nav-toggle{ display:flex; } } /* ---------- fullscreen overlay menu ---------- */ .menu{ position:fixed; inset:0; z-index:130; background:var(--ink); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* [hidden] does the hiding, NOT visibility: a visibility transition is still reporting `hidden` on the frame the sheet opens, so focus() silently fails and the keyboard is left behind on the page underneath. */ .menu[hidden]{ display:none; } /* attribute must win over the layout */ .menu.open{ opacity:1; pointer-events:auto; } .menu:focus, .menu:focus-visible{ outline:none; } /* it's the dialog, not a control */ .menu-bg{ position:absolute; inset:0; z-index:0; } .menu-bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; } .menu-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(7,8,18,.94) 0%, rgba(7,8,18,.8) 45%, rgba(11,14,34,.96) 100%); } .menu-inner{ position:relative; z-index:1; min-height:100%; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(6rem,12vh,9rem) var(--gutter) clamp(2.5rem,6vh,4rem); } .menu-list{ display:flex; flex-direction:column; } .menu-list a{ display:flex; align-items:baseline; gap:clamp(.9rem,2vw,1.6rem); padding:clamp(.55rem,1.1vh,.95rem) 0; min-height:56px; border-bottom:1px solid rgba(245,239,228,.09); color:var(--bone-dim); transition:color .3s var(--ease), padding-left .35s var(--ease); } .menu-list a:first-child{ border-top:1px solid rgba(245,239,228,.09); } .menu-list a:hover, .menu-list a:focus-visible{ color:var(--bone); padding-left:.6rem; } .menu-list a.active{ color:var(--bone); } .menu-list .n{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.22em; color:var(--neon-2); flex-shrink:0; } .menu-list .t{ font-family:var(--serif); font-weight:700; line-height:1.05; font-size:clamp(2rem,4.5vw,3.6rem); letter-spacing:-.015em; } .menu-list a.active .t{ text-shadow:0 0 22px rgba(255,61,139,.45); } .menu-side{ align-self:center; } .menu-cta{ display:flex; width:100%; max-width:22rem; margin-top:1rem; } .menu-meta{ list-style:none; margin-top:2rem; display:grid; gap:.55rem; font-size:.85rem; color:var(--bone-dim); } .menu-meta a{ color:var(--bone-dim); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(245,239,228,.3); } .menu-meta a:hover{ color:var(--teal-2); } @media (max-width:820px){ .menu-inner{ grid-template-columns:1fr; align-items:start; gap:2.2rem; padding-top:clamp(5.5rem,11vh,7rem); } .menu-list .t{ font-size:clamp(1.75rem,7.5vw,2.5rem); } .menu-side{ align-self:start; } .menu-cta{ max-width:none; } } @media (max-height:640px){ .menu-list a{ min-height:48px; padding-block:.35rem; } .menu-list .t{ font-size:clamp(1.5rem,6vw,2rem); } } /* scroll lock while the sheet is open */ html.menu-open, html.menu-open body{ overflow:hidden; } html.menu-open body{ position:fixed; inset:0; width:100%; } html.menu-open .cookie{ display:none; } @media (prefers-reduced-motion: reduce){ .menu{ transition:none; } .menu-list a, .nav-toggle .ico i{ transition:none; } } /* ---------- hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; } /* Parallax images are CENTRED with overflow on both sides (inset:0 + a taller height + auto block margins), so a translate in either direction still covers the frame. Anchoring them at top:0 left a bare strip under the header. */ .hero-bg img{ position:absolute; inset:0; margin-block:auto; width:100%; height:126%; object-fit:cover; will-change:transform; } .hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,8,18,.55) 0%, rgba(7,8,18,.15) 32%, rgba(7,8,18,.72) 82%, rgba(11,14,34,.96) 100%); } .hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3rem,7vw,7rem); } .hero h1{ font-size:clamp(3rem,5vw + 1rem,8.5rem); font-weight:900; max-width:16ch; text-shadow:0 2px 40px rgba(0,0,0,.5); } .hero .glow{ color:#fff; text-shadow:0 0 18px rgba(255,61,139,.65),0 0 45px rgba(255,61,139,.4); } .hero-sub{ margin-top:1.4rem; max-width:40ch; } .hero-actions{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; } .hero-meta{ margin-top:2.6rem; display:flex; gap:2.2rem; flex-wrap:wrap; align-items:center; padding-top:1.6rem; border-top:1px solid rgba(245,239,228,.16); max-width:640px; } .hero-meta .m{ display:flex; flex-direction:column; gap:.15rem; } .hero-meta .m b{ font-family:var(--serif); font-size:1.5rem; font-weight:700; } .hero-meta .m span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); } .stars{ color:var(--amber); letter-spacing:.1em; } .scroll-cue{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:3; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-dim); display:flex; flex-direction:column; align-items:center; gap:.5rem; } .scroll-cue .line{ width:1px; height:42px; background:linear-gradient(var(--teal),transparent); animation:cue 2.4s var(--ease) infinite; } @keyframes cue{ 0%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1)} 100%{transform:scaleY(.3);transform-origin:bottom} } /* ---------- chapters (full-bleed image bands) ---------- */ .chapter{ position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden; } .chapter-bg{ position:absolute; inset:0; z-index:0; } .chapter-bg img{ position:absolute; inset:0; margin-block:auto; width:100%; height:124%; object-fit:cover; will-change:transform; } .chapter::after{ content:""; position:absolute; inset:0; z-index:1; } .chapter.left::after{ background:linear-gradient(90deg, rgba(7,8,18,.9) 0%, rgba(7,8,18,.55) 45%, rgba(7,8,18,.1) 100%); } .chapter.right{ justify-content:flex-end; text-align:right; } .chapter.right::after{ background:linear-gradient(270deg, rgba(7,8,18,.9) 0%, rgba(7,8,18,.55) 45%, rgba(7,8,18,.1) 100%); } .chapter.bottom{ align-items:flex-end; } .chapter.bottom::after{ background:linear-gradient(0deg, rgba(7,8,18,.92) 0%, rgba(7,8,18,.35) 55%, rgba(7,8,18,.55) 100%); } .chapter-inner{ position:relative; z-index:2; max-width:38rem; } .chapter.right .chapter-inner{ margin-left:auto; } .chapter h2{ font-size:clamp(2.2rem,2.3vw + 1.3rem,4.4rem); margin-top:1rem; } .chapter p{ margin-top:1.2rem; color:var(--bone-dim); } .chapter.right .eyebrow{ display:block; } /* ---------- feature grid ---------- */ .feature-head{ max-width:52rem; } /* flex + grow, NOT auto-fit: auto-fit only collapses tracks that are empty for the whole grid — 6 items across 5 tracks still leaves 4 dead cells on the last row, and the 1px gap shows the container background through them. */ .features{ margin-top:3.2rem; display:flex; flex-wrap:wrap; gap:1px; background:rgba(245,239,228,.1); border:1px solid rgba(245,239,228,.1); border-radius:6px; overflow:hidden; } .feature{ flex:1 1 clamp(230px,30%,460px); min-width:0; background:var(--night); padding:2rem 1.7rem; transition:background .4s var(--ease); } .feature:hover{ background:var(--night-2); } .feature .ic{ font-size:1.6rem; } .feature h3{ font-size:1.15rem; margin:.85rem 0 .4rem; font-family:var(--sans); font-weight:700; letter-spacing:0; } .feature p{ font-size:.9rem; color:var(--bone-dim); line-height:1.5; } /* ---------- amenities list ---------- */ .amen{ margin-top:2.5rem; columns:3; column-gap:2.5rem; } .amen li{ list-style:none; padding:.55rem 0 .55rem 1.6rem; position:relative; border-bottom:1px solid rgba(245,239,228,.08); break-inside:avoid; font-size:.94rem; color:var(--bone-dim); } .amen li::before{ content:""; position:absolute; left:0; top:1.05rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); } @media (max-width:820px){ .amen{ columns:2; } } @media (max-width:520px){ .amen{ columns:1; } } /* ---------- full-bleed photo strip ---------- flex + grow, never a fixed track count: an odd item count in a fixed grid leaves an empty cell showing the page background through the gap. */ .strip{ display:flex; flex-wrap:wrap; gap:2px; } .strip > *{ flex:1 1 clamp(220px,24%,520px); min-width:0; overflow:hidden; } .strip img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); } .strip a:hover img{ transform:scale(1.05); } /* ---------- gallery mosaic ---------- */ .mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:22vw; gap:.75rem; grid-auto-flow:dense; } .mosaic a{ overflow:hidden; border-radius:4px; position:relative; } .mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .mosaic a:hover img{ transform:scale(1.06); } .mosaic .tall{ grid-row:span 2; } .mosaic .wide{ grid-column:span 2; } @media (max-width:820px){ .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw; } .mosaic .wide{ grid-column:span 2; } .mosaic .tall{ grid-row:span 1; } } /* ---------- reviews ---------- */ .reviews{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:3rem; } .reviews > *{ flex:1 1 clamp(280px,23%,560px); min-width:0; } .review{ background:linear-gradient(180deg,var(--night-2),var(--night)); border:1px solid rgba(245,239,228,.1); border-radius:10px; padding:2rem 1.9rem; } .review .stars{ font-size:.9rem; } .review p{ margin:1rem 0 1.3rem; font-family:var(--serif); font-size:1.14rem; line-height:1.45; color:var(--bone); } .review .who{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); display:flex; align-items:center; gap:.75rem; } .review .who b{ color:var(--teal-2); font-weight:600; } .rv-face{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid rgba(245,239,228,.18); background:var(--night-2); } .rv-mono{ display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--teal-2); text-transform:none; } .rv-who{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .rv-who span{ text-transform:none; letter-spacing:.02em; color:var(--bone-dim); font-size:.9em; } /* ---------- the film embed ---------- */ .film-frame{ border-radius:12px; overflow:hidden; border:1px solid rgba(245,239,228,.12); background:#000; box-shadow:0 24px 60px rgba(0,0,0,.42); } .film-vid{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; } /* ---------- location ---------- */ .dist{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1px; background:rgba(245,239,228,.1); border:1px solid rgba(245,239,228,.1); border-radius:6px; overflow:hidden; } .dist .d{ flex:1 1 clamp(210px,30%,430px); min-width:0; background:var(--night); padding:1.4rem 1.5rem; display:flex; align-items:baseline; gap:.9rem; } .dist .d b{ font-family:var(--serif); font-size:1.7rem; color:var(--teal-2); font-weight:700; white-space:nowrap; } .dist .d span{ font-size:.9rem; color:var(--bone-dim); } /* ---------- split band ---------- */ .split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .split.rev .split-media{ order:2; } .split-media img{ width:100%; border-radius:8px; aspect-ratio:4/3; object-fit:cover; } @media (max-width:820px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } } /* ---------- CTA band ---------- */ .cta-band{ position:relative; overflow:hidden; text-align:center; } .cta-band .chapter-bg img{ height:132%; } .cta-band::after{ content:""; position:absolute; inset:0; background:rgba(7,8,18,.7); z-index:1; } .cta-inner{ position:relative; z-index:2; max-width:44rem; margin-inline:auto; } .cta-inner h2{ font-size:clamp(2.4rem,2.5vw + 1.4rem,5rem); } /* ---------- journal ---------- */ /* flex + grow, not a fixed track count: 10 posts into a 4-track grid leaves two empty cells on the last row. Growing the last row keeps it solid. */ .post-grid{ display:flex; flex-wrap:wrap; gap:1.8rem; margin-top:3rem; } .post-grid > *{ flex:1 1 clamp(300px,23%,420px); min-width:0; } .card{ background:var(--night-2); border:1px solid rgba(245,239,228,.08); border-radius:10px; overflow:hidden; transition:transform .45s var(--ease), border-color .45s; } .card:hover{ transform:translateY(-6px); border-color:rgba(58,208,198,.4); } .card .thumb{ aspect-ratio:16/10; overflow:hidden; } .card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .card:hover .thumb img{ transform:scale(1.06); } .card .body{ padding:1.5rem 1.6rem 1.9rem; } .card .cat{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--neon-2); } .card h3{ font-size:1.35rem; margin:.7rem 0 .6rem; line-height:1.12; } .card p{ font-size:.92rem; color:var(--bone-dim); } .card .more{ margin-top:1rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-2); } /* ---------- article ---------- */ .article-hero{ min-height:66svh; display:flex; align-items:flex-end; position:relative; overflow:hidden; } .article-hero .chapter-bg img{ height:124%; } .article-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,18,.96),rgba(7,8,18,.25) 60%,rgba(7,8,18,.5)); z-index:1; } .article-hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(2.5rem,5vw,5rem); } .article-hero h1{ font-size:clamp(2.3rem,2.6vw + 1.4rem,4.6rem); max-width:20ch; margin-top:1rem; } .prose{ max-width:var(--readw); } .prose p{ margin-bottom:1.5rem; color:var(--bone-dim); } .prose h2{ font-size:1.9rem; margin:2.8rem 0 1rem; color:var(--bone); } .prose h3{ font-size:1.3rem; margin:2rem 0 .7rem; font-family:var(--sans); font-weight:700; } .prose a{ color:var(--teal-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(58,208,198,.4); } .prose a:hover{ text-decoration-color:var(--teal); } .prose ul{ margin:0 0 1.5rem 1.2rem; color:var(--bone-dim); } .prose li{ margin-bottom:.5rem; } .prose blockquote{ border-left:2px solid var(--neon); padding-left:1.3rem; margin:2rem 0; font-family:var(--serif); font-size:1.3rem; color:var(--bone); } .byline{ display:flex; gap:1rem; align-items:center; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); } .byline b{ color:var(--teal-2); font-weight:600; } /* ---------- forms ---------- */ /* the form fills its column — a 40rem cap left ~300px of slack beside it at 1920 */ .form{ display:grid; gap:1.2rem; max-width:52rem; margin-top:2.5rem; } .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } @media(max-width:560px){ .form .row{ grid-template-columns:1fr; } } .field label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.5rem; } .field input,.field textarea,.field select{ width:100%; background:rgba(245,239,228,.05); border:1px solid rgba(245,239,228,.18); border-radius:8px; padding:.9rem 1rem; color:var(--bone); font-family:var(--sans); font-size:1rem; transition:border-color .3s; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--teal); } .consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--bone-dim); } .consent a{ color:var(--teal-2); text-decoration:underline; } .hp{ position:absolute; left:-9999px; opacity:0; } .form-note{ font-size:.85rem; color:var(--bone-dim); margin-top:.6rem; } .form-ok{ background:rgba(58,208,198,.12); border:1px solid var(--teal); border-radius:8px; padding:1rem 1.2rem; color:var(--teal-2); } /* ---------- footer ---------- */ .footer{ background:var(--ink); padding-block:clamp(3.5rem,6vw,5.5rem); border-top:1px solid rgba(245,239,228,.08); } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; } @media(max-width:820px){ .footer-top{ grid-template-columns:1fr; gap:2rem; } } .footer h4{ font-family:var(--sans); font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:1.1rem; } .footer .brand{ font-size:1.5rem; margin-bottom:1rem; } .footer p{ font-size:.9rem; color:var(--bone-dim); max-width:34ch; } .footer ul{ list-style:none; display:grid; gap:.7rem; } .footer ul a{ font-size:.9rem; color:var(--bone-dim); transition:color .3s; } .footer ul a:hover{ color:var(--teal-2); } .footer-bar{ margin-top:3rem; padding-top:1.7rem; border-top:1px solid rgba(245,239,228,.08); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--bone-dim); } .footer-bar a{ color:var(--bone-dim); } .footer-bar a:hover{ color:var(--teal-2); } .permit{ font-size:.72rem; letter-spacing:.08em; color:#8b90b8; } /* ---------- reveal animation ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- preloader ---------- */ /* 2026-10-10 (Dan: "flashing like lightning... looks cheap"): no flicker. A deep-night curtain, the wordmark breathes in out of a soft blur, then the curtain dissolves slowly into the hero. Nothing blinks. */ html.sg-seen .preload{ display:none; } .preload{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 40%, #141a3d 0%, #0a0c20 55%, var(--ink) 100%); transition:opacity 1.2s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.2s; } .preload.done{ opacity:0; visibility:hidden; } .preload .mark{ font-family:var(--serif); font-weight:900; font-size:clamp(2.4rem,8vw,5rem); letter-spacing:.04em; color:#fff; line-height:.98; text-align:center; text-shadow:0 0 26px rgba(255,61,139,.45),0 0 60px rgba(255,61,139,.22); animation:sgIntro 1.1s cubic-bezier(.22,.61,.36,1) both; transition:opacity 1s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1); } .preload.done .mark{ opacity:0; transform:translateY(-10px) scale(1.02); } @keyframes sgIntro{ from{ opacity:0; filter:blur(10px); transform:translateY(8px) scale(.985); letter-spacing:.12em; } to{ opacity:1; filter:blur(0); transform:none; letter-spacing:.04em; } } @media (prefers-reduced-motion: reduce){ .preload .mark{ animation:sgFade .6s ease both; } } @keyframes sgFade{ from{ opacity:0; } to{ opacity:1; } } /* ---------- misc ---------- */ .divider-neon{ height:1px; background:linear-gradient(90deg,transparent,var(--neon),transparent); opacity:.5; } .tag-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; } .tag{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.4em .9em; border-radius:100px; border:1px solid rgba(245,239,228,.2); color:var(--bone-dim); } .skip{ position:absolute; left:-9999px; top:0; background:var(--bone); color:var(--ink); font-weight:700; padding:.7rem 1rem; z-index:300; } .skip:focus{ left:1rem; top:1rem; } /* ---------- cookie consent bar ---------- */ /* no backdrop-filter: the bar is ~97% opaque so the blur was invisible but a fixed blurred layer repaints every scroll frame while the bar is up. */ .cookie{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:rgb(7,8,18); border-top:1px solid rgba(245,239,228,.14); padding:.85rem var(--gutter); display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; } .cookie[hidden]{ display:none; } /* attribute must win over display:flex */ .cookie-text{ font-size:.82rem; line-height:1.4; color:var(--bone-dim); max-width:64ch; margin:0; } .cookie-text a{ color:var(--teal-2); text-decoration:underline; } .cookie-actions{ display:flex; gap:.6rem; flex-shrink:0; } .cookie .btn{ padding:.6em 1.15em; } @media (max-width:600px){ .cookie{ padding:.7rem .9rem; gap:.5rem; } .cookie-text{ font-size:.72rem; line-height:1.32; } .cookie-actions{ width:100%; } .cookie-actions .btn{ flex:1; padding:.7em .4em; font-size:.66rem; letter-spacing:.08em; } } /* ---------- mobile refinements ---------- */ @media (max-width:600px){ .eyebrow{ letter-spacing:.2em; font-size:.66rem; } .hero{ min-height:100svh; align-items:flex-start; } /* top-anchor so content clears the fixed nav */ .hero-inner{ padding-top:5.75rem; padding-bottom:3.5rem; } .hero h1{ font-size:2.55rem; max-width:100%; } .hero .lede{ font-size:1.02rem; } .hero-sub{ margin-top:.9rem; max-width:100%; } .hero-actions{ margin-top:1.3rem; gap:.7rem; } .hero-actions .btn{ flex:1 1 auto; justify-content:center; } .hero-meta{ margin-top:1.3rem; gap:.8rem 1.6rem; padding-top:1rem; } .hero-meta .m b{ font-size:1.25rem; } .hero-meta .m span{ font-size:.62rem; } .scroll-cue{ display:none; } /* avoid clashing with the cookie bar */ .chapter{ min-height:80svh; } .chapter h2{ font-size:2rem; } .chapter.right{ text-align:left; } /* right-aligned reads awkward on a phone */ .chapter.right .chapter-inner{ margin-left:0; } .section{ padding-block:clamp(3.2rem,12vw,5rem); } } /* ================================================================ MOTION KIT (2026-08) — depth hero, MOJAVE word band, pinned strip, counters, marquee, starfield, tile reveals, Motion Full/Calm. Modes: boot.js sets html.m-full / html.m-calm before first paint. ================================================================ */ /* ---------- motion modes ---------- Full must override the OS reduce-motion kill-switches above — a machine with OS animations off (see the footer toggle) still gets the show when the visitor explicitly picks Full. Calm keeps soft fades, never dead. */ html.m-full .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); } html.m-full .reveal.in{ opacity:1; transform:none; } html.m-calm .reveal{ transform:none; transition:opacity .7s var(--ease); } html.m-calm .reveal.in{ opacity:1; } html.m-full .scroll-cue .line{ animation:cue 2.4s var(--ease) infinite; } html.m-full .preload .mark{ animation:sgIntro 1.1s cubic-bezier(.22,.61,.36,1) both; } html.m-full .menu{ transition:opacity .45s var(--ease); } /* ---------- cross-page fades (Chrome; progressive) ---------- */ @media not all and (prefers-reduced-motion: reduce){ @view-transition{ navigation:auto; } ::view-transition-old(root){ animation-duration:.28s; } ::view-transition-new(root){ animation-duration:.28s; } } /* ---------- depth hero (text-behind-image) ---------- z contract: photo 1 < title 2 < cutouts 3/4 < gradient 5 < content 6. The bottom gradient sits ABOVE the cutouts so their lower edges dim exactly with the base photo — no visible seam. The sky stays undimmed, which is why the title is INK (see .ink-over nav below). */ .hero--depth .hero-bg{ z-index:1; } .hero--depth .dh-title{ position:absolute; left:0; right:0; top:15%; z-index:2; margin:0; padding-inline:var(--gutter); text-align:center; font-size:clamp(3rem, 8.6vw, 10rem); font-weight:900; line-height:.98; letter-spacing:-.015em; color:var(--ink); text-shadow:none; max-width:none; will-change:transform; } .hero--depth .dh-title .glow{ color:var(--neon-btn); text-shadow:0 0 26px rgba(255,61,139,.35); } .dh-cut{ position:absolute; inset:0; pointer-events:none; } .dh-cut--joshua{ z-index:3; } .dh-cut--branch{ z-index:4; } .dh-cut img{ position:absolute; inset:0; margin-block:auto; width:100%; height:126%; object-fit:cover; } .hero--depth .hero-bg img{ will-change:transform; } .hero--depth::after{ z-index:5; background:linear-gradient(180deg, rgba(7,8,18,0) 0%, rgba(7,8,18,0) 40%, rgba(7,8,18,.62) 72%, rgba(11,14,34,.97) 100%); } .hero--depth .hero-inner{ z-index:6; } .hero--depth .hero-inner .eyebrow{ text-shadow:0 1px 10px rgba(7,8,18,.85), 0 0 26px rgba(7,8,18,.6); } .hero--depth .scroll-cue{ z-index:6; } /* ink header while the pale dusk sky is behind it (home only). The dark scrim would look dirty on the light sky, so it goes; colors flip back the moment the bar goes solid or the overlay menu opens. */ .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open)::before{ opacity:0; } .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open) .brand, .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open) .nav-toggle{ color:var(--ink); } .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open) .nav-links a{ color:rgba(7,8,18,.66); } .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open) .nav-links a:hover, .nav.ink-over:not(.solid):not(.scrolled):not(.menu-open) .nav-links a.active{ color:var(--ink); text-shadow:none; } /* ---------- marquee ---------- */ .marquee{ overflow:hidden; background:var(--ink); padding-block:1.05rem; border-block:1px solid rgba(245,239,228,.08); } .marquee__track{ display:inline-flex; white-space:nowrap; will-change:transform; } .marquee__track span{ font-family:var(--serif); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.45rem); color:var(--bone-dim); padding-right:.35em; } .marquee__track .sep{ color:var(--neon-2); } /* ---------- MOJAVE word band ---------- */ .vid-depth{ position:relative; min-height:104svh; overflow:hidden; background:var(--night); } .vd-layer{ position:absolute; inset:-6% 0; will-change:transform; } .vd-layer img{ width:100%; height:100%; object-fit:cover; } .vd-base{ z-index:1; } .vd-word{ position:absolute; left:0; right:0; top:34%; z-index:2; font-family:var(--serif); font-weight:900; text-align:center; line-height:.82; font-size:clamp(5.2rem, 21vw, 24rem); letter-spacing:.01em; color:var(--bone); text-shadow:0 6px 70px rgba(7,8,18,.35); will-change:transform; pointer-events:none; } .vd-cut{ z-index:3; pointer-events:none; } .vd-copy{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding-top:7rem; padding-bottom:clamp(2.6rem,5vw,4.5rem); background:linear-gradient(0deg, rgba(7,8,18,.92) 0%, rgba(7,8,18,.55) 55%, rgba(7,8,18,0) 100%); } .vd-copy h2{ font-size:clamp(2rem,2.2vw + 1.2rem,4rem); margin-top:1rem; max-width:24ch; } .vd-copy p{ margin-top:1.1rem; color:var(--bone-dim); max-width:52ch; } /* ---------- pinned horizontal feature strip ---------- */ .h-strip{ position:relative; background:var(--night); overflow:hidden; } .h-strip__head{ padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:2.2rem; } .h-strip__scroller{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(245,239,228,.25) transparent; } html.fx-pin .h-strip__scroller{ overflow:visible; } /* GSAP drives it instead */ .h-strip__inner{ display:flex; gap:clamp(1rem,1.8vw,1.6rem); width:max-content; padding:0 var(--gutter) clamp(3rem,6vw,4.5rem); will-change:transform; } .h-card{ flex:0 0 clamp(260px,32vw,470px); scroll-snap-align:start; background:var(--night-2); border:1px solid rgba(245,239,228,.1); border-radius:10px; overflow:hidden; } .h-card .im{ aspect-ratio:4/3; overflow:hidden; } .h-card .im img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .h-card:hover .im img{ transform:scale(1.05); } .h-card .bd{ padding:1.3rem 1.4rem 1.6rem; } .h-card .n{ font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.24em; color:var(--neon-2); } .h-card h3{ font-size:1.12rem; margin:.6rem 0 .4rem; font-family:var(--sans); font-weight:700; letter-spacing:0; } .h-card p{ font-size:.88rem; color:var(--bone-dim); line-height:1.5; } /* ---------- stat counters ---------- */ .stat-row{ display:flex; flex-wrap:wrap; gap:clamp(1.8rem,5vw,4.5rem); margin-top:3rem; align-items:end; } .stat b{ display:block; font-family:var(--serif); font-weight:900; line-height:.95; font-size:clamp(3.2rem,6.5vw,6.5rem); color:var(--bone); font-variant-numeric:tabular-nums; } .stat.amber b{ color:var(--amber); text-shadow:0 0 30px rgba(255,138,61,.35); } .stat .stat-l{ display:block; margin-top:.5rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim); } /* ---------- starfield (CTA band) ---------- */ .cta-band .starfield{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; } /* above the ::after veil (z1), below content */ .cta-band .cta-inner{ z-index:3; } /* ---------- tile reveals (mosaic + journal cards) ---------- */ html.fx-tiles .mosaic > *{ opacity:0; clip-path:inset(9% 9% 9% 9% round 8px); transition:opacity .8s var(--ease), clip-path .95s var(--ease), transform .8s var(--ease); } html.fx-tiles .mosaic > *.tile-in{ opacity:1; clip-path:inset(0 0 0 0 round 4px); } html.fx-tiles .post-grid .card{ opacity:0; clip-path:inset(9% 9% 9% 9% round 10px); transition:opacity .8s var(--ease), clip-path .95s var(--ease), transform .45s var(--ease), border-color .45s; } html.fx-tiles .post-grid .card.tile-in{ opacity:1; clip-path:inset(0 0 0 0 round 10px); } /* ---------- Motion Full / Calm toggle ---------- */ .motion-toggle{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; letter-spacing:.06em; color:var(--bone-dim); } .motion-toggle button{ background:none; border:1px solid rgba(245,239,228,.25); color:var(--bone-dim); border-radius:100px; padding:.3em .95em; cursor:pointer; font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:color .3s, border-color .3s; } .motion-toggle button:hover{ color:var(--bone); border-color:rgba(245,239,228,.5); } .motion-toggle button.is-on{ border-color:var(--teal); color:var(--teal-2); box-shadow:0 0 10px rgba(58,208,198,.22); } /* ---------- mobile refinements ---------- */ @media (max-width:600px){ /* the base mobile block top-anchors .hero content — the depth hero puts the TITLE up top, so its content must go back to the bottom dark band */ .hero--depth{ align-items:flex-end; } .hero--depth .hero-inner{ padding-top:0; padding-bottom:3rem; } .hero--depth .dh-title{ top:12%; font-size:clamp(2.3rem,10.5vw,3rem); } .vid-depth{ min-height:88svh; } .vd-word{ top:30%; } .vd-copy h2{ font-size:1.7rem; } .h-card{ flex-basis:min(78vw,340px); } .stat b{ font-size:2.9rem; } .marquee__track span{ font-size:.98rem; } } /* headline entrance layer — block so yPercent transforms apply */ .dh-rise{ display:block; will-change:transform; } /* ---- Cinematic video hero (home) ---- */ .hero-video{ background:#0b0e22; } /* the