/* ============================================================ 007 STAYCATION — Design tokens ============================================================ */ :root{ /* Color — black / white / red, 007 mission-dossier palette */ --bg: #000000; --bg-elevated: #161616; --bg-elevated-2: #202020; --line: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.20); --fg: #f5f5f5; --fg-muted: #adadad; --fg-dim: #6e6e6e; --accent: #e01b2e; --accent-strong: #ff2d3f; --accent-ink: #ffffff; /* Type */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --fs-hero: clamp(2.6rem, 3vw + 2rem, 5.6rem); --fs-h2: clamp(2rem, 1.4vw + 1.6rem, 3.1rem); --fs-h3: clamp(1.3rem, 0.6vw + 1.1rem, 1.7rem); --fs-body: 1rem; --fs-small: 0.85rem; /* Spacing */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 140px; --radius: 4px; --ease: cubic-bezier(.19,1,.22,1); } *,*::before,*::after{ box-sizing:border-box; } /* overflow-x:hidden must live on , not — Safari/iOS disables position:sticky on any descendant when the horizontal-scroll clip sits on body instead, which silently broke the pinned hero video on iPhone while working fine on desktop Chrome. */ html{ scroll-behavior:smooth; overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0 0 var(--space-3); letter-spacing:-0.01em; } p{ margin:0 0 var(--space-3); color:var(--fg-muted); max-width:60ch; } .mono{ font-family:var(--font-mono); letter-spacing:0.04em; } .section-inner{ max-width:1240px; margin:0 auto; padding:var(--space-7) var(--space-4); } .tag{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; color:var(--accent); text-transform:uppercase; margin-bottom:var(--space-2); } /* Faint film-grain overlay for texture, matches moody photo tone */ .grain{ position:fixed; inset:0; z-index:999; pointer-events:none; opacity:0.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ Buttons ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform 0.25s var(--ease), background 0.25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn--primary{ background:var(--accent); color:var(--accent-ink); } .btn--primary:hover{ background:var(--accent-strong); transform:translateY(-2px); } .btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ============================================================ Nav ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:200; background:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent); transition:background .3s var(--ease); } .nav.is-scrolled{ background:rgba(0,0,0,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav__inner{ max-width:1240px; margin:0 auto; padding:22px var(--space-4) 14px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } .nav__brand{ grid-column:2; justify-self:center; } .nav__logo{ height:108px; width:auto; } .nav__links{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--space-4); } .nav__links a{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-muted); transition:color .2s; } .nav__links a:hover{ color:var(--accent); } .nav__toggle{ grid-column:3; justify-self:end; display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .nav__toggle span{ width:22px; height:2px; background:var(--fg); display:block; } .nav__links-close{ display:none; } /* ============================================================ HUD corner brackets — signature motif ============================================================ */ .hud-corners{ position:absolute; inset:var(--space-4); pointer-events:none; z-index:5; } .hud-corner{ position:absolute; width:28px; height:28px; border-color:var(--accent); opacity:0.65; } .hud-corner--tl{ top:0; left:0; border-top:1.5px solid; border-left:1.5px solid; } .hud-corner--tr{ top:0; right:0; border-top:1.5px solid; border-right:1.5px solid; } .hud-corner--bl{ bottom:0; left:0; border-bottom:1.5px solid; border-left:1.5px solid; } .hud-corner--br{ bottom:0; right:0; border-bottom:1.5px solid; border-right:1.5px solid; } /* ============================================================ Hero + branch-select — share one pinned video background. The bg layer sticks for the combined natural height of both stages (hero overlaps it via negative margin, branch-select follows normally); JS maps scroll progress across that whole range to the video's currentTime, so it only releases back to normal scroll once branch-select has fully passed. ============================================================ */ .hero-pin{ position:relative; } .hero-pin__bg{ position:sticky; top:0; height:100vh; z-index:0; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; } .hero{ position:relative; z-index:1; margin-top:-100vh; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:var(--space-4); } /* aspect-ratio (not height:auto) so the box has real size immediately — iOS Safari loads video metadata far more conservatively than desktop Chrome, and a height:auto video sits at 0 height (poster included) until that metadata arrives, which read as "video missing" on real iPhones. */ .hero__video{ position:relative; width:66%; max-width:420px; aspect-ratio:1/1; object-fit:contain; } .hero__content{ position:relative; z-index:2; max-width:900px; } .hero__title{ font-size:var(--fs-hero); line-height:1.22; } .hero__title span span{ display:inline-block; } .hero__actions{ display:flex; justify-content:center; margin-top:220px; } .hero__actions > span{ display:flex; gap:var(--space-2); flex-wrap:wrap; justify-content:center; } /* reveal-line: text mask reveal used for hero */ .reveal-line{ overflow:hidden; display:block; } .reveal-line > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); } .reveal-line.is-visible > span{ transform:translateY(0); } /* Once revealed, drop the clipping mask — some Vietnamese combining marks (e.g. "Ề") render taller than the font's own line-height box and were getting cut off at the top by the overflow:hidden used for the slide-in. */ .reveal-line.is-visible{ overflow:visible; } .hero__scroll{ position:absolute; bottom:var(--space-4); left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; } .hero__scroll-label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em; color:var(--fg-muted); } .hero__scroll-line{ width:1px; height:36px; background:var(--line-strong); position:relative; overflow:hidden; } .hero__scroll-line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent); animation:scrollLine 1.8s ease-in-out infinite; } @keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } } /* ============================================================ Scroll reveal (generic) ============================================================ */ .reveal-up{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal-up.is-visible{ opacity:1; transform:translateY(0); } /* ============================================================ Missions / Rooms ============================================================ */ .missions{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; justify-content:center; background:transparent; border-bottom:1px solid var(--line); } /* ---------- Rooms page — full-screen view shown after picking a branch, replacing the homepage (hero/about/etc.) entirely, per the booking-site reference: nav stays, everything else is swapped for just this branch's rooms. */ .rooms-page{ background:var(--bg); min-height:100vh; } .rooms-page .section-inner{ padding-top:calc(var(--space-7) + var(--space-3)); } .rooms-page h2{ margin-bottom:var(--space-2); color:var(--accent-strong); } /* ---------- Step 1 — branch cards ---------- */ .branch-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--space-3); margin-top:var(--space-4); } .branch-card{ background:var(--bg-elevated-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-align:left; cursor:pointer; padding:0; display:flex; flex-direction:row; align-items:stretch; transition:border-color .3s, transform .3s var(--ease); } .branch-card:hover{ border-color:var(--accent); transform:translateY(-4px); } .branch-card__media{ position:relative; display:block; flex:0 0 42%; overflow:hidden; } .branch-card__slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease, transform .6s var(--ease); } .branch-card__slide.is-active{ opacity:1; } .branch-card:hover .branch-card__slide.is-active{ transform:scale(1.06); } .branch-card__badge{ position:absolute; top:12px; left:12px; background:rgba(0,0,0,0.8); border:1px solid var(--line-strong); padding:6px 12px; font-size:0.7rem; letter-spacing:0.08em; color:var(--accent-strong); } .branch-card__body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--space-3); min-width:0; } .branch-card__name{ font-family:var(--font-display); font-size:1.4rem; color:var(--accent-strong); font-weight:700; } .branch-card__addr{ color:var(--fg); font-size:0.78rem; } .branch-card__cta{ margin-top:8px; font-family:var(--font-mono); font-size:0.78rem; color:var(--accent); } /* ---------- Step 2 — room grid ---------- */ .back-link{ background:none; border:none; color:var(--fg-muted); cursor:pointer; font-size:0.78rem; letter-spacing:0.06em; padding:0; margin-bottom:var(--space-3); transition:color .2s; } .back-link:hover{ color:var(--accent); } .branch-address{ color:var(--fg); font-size:0.8rem; margin-bottom:var(--space-4); } /* ---------- Availability search — "which Missions are free right now" ---------- */ .availability{ background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:var(--radius); padding:18px; margin-bottom:var(--space-4); } .availability__tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; } .availability__tab{ background:var(--bg-elevated-2); border:1px solid var(--line-strong); color:var(--fg-muted); padding:8px 6px; border-radius:999px; cursor:pointer; font-size:0.78rem; text-align:center; transition:border-color .2s, color .2s, background .2s; } .availability__tab.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; } .availability__tab:not(.is-active):hover{ border-color:var(--accent); color:var(--accent); } .availability__form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; } .availability__field{ display:flex; flex-direction:column; gap:5px; flex:1 1 100px; min-width:0; } .availability__field--wide{ flex-basis:100%; } .availability__field[hidden]{ display:none; } .availability__field label{ font-size:0.7rem; color:var(--fg-dim); letter-spacing:0.04em; } .availability__field input, .availability__field select{ background:var(--bg); border:1px solid var(--line-strong); color:var(--fg); padding:8px 10px; border-radius:var(--radius); font-family:var(--font-body); font-size:0.86rem; min-height:38px; color-scheme:dark; } .availability__field input:focus, .availability__field select:focus{ outline:2px solid var(--accent); outline-offset:1px; } .availability__submit{ min-height:38px; margin:2px auto 0; } /* color-scheme alone doesn't reliably darken the native