/* ============================================================ RAW LOCAL — marketing site v2 Brand: Real · Bold · Local. Grunge / street / high-contrast. ============================================================ */ @font-face { font-family:'Anton'; src:url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'Archivo'; src:url('/assets/fonts/Archivo-Variable.ttf') format('truetype'); font-weight:100 900; font-display:swap; } @font-face { font-family:'PermanentMarker'; src:url('/assets/fonts/PermanentMarker-Regular.ttf') format('truetype'); font-display:swap; } @font-face { font-family:'SpaceMono'; src:url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'SpaceMono'; src:url('/assets/fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } :root{ --ink:#0A0A0A; --ink-2:#0d0d0d; --asphalt:#161616; --asphalt-hi:#1f1f1f; --red:#E11B22; --deep-red:#C8141B; --bone:#F4EEE1; --chalk:#FFFFFF; --smoke:#9A9590; --hairline:#262626; --nav-bg:rgba(10,10,10,.85); --maxw:1200px; } /* ---- light theme (toggled via data-theme on ) ---- */ html[data-theme="light"]{ --ink:#F4EEE1; --ink-2:#EBE5D8; --asphalt:#FFFFFF; --asphalt-hi:#F2EDE2; --bone:#171717; --chalk:#0A0A0A; --smoke:#6E6962; --hairline:#DAD4C7; --nav-bg:rgba(244,238,225,.82); } html{ transition:background-color .4s ease; } body{ transition:background-color .4s ease, color .4s ease; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; } body{ background:var(--ink); color:var(--bone); font-family:'Archivo',system-ui,sans-serif; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--red); color:var(--chalk); } ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--ink); } ::-webkit-scrollbar-thumb{ background:#333; border:2px solid var(--ink); } ::-webkit-scrollbar-thumb:hover{ background:var(--red); } :focus-visible{ outline:2px solid var(--red); outline-offset:3px; } /* film grain */ body::after{ content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- type helpers ---- */ .display{ font-family:'Anton',sans-serif; text-transform:uppercase; color:var(--chalk); line-height:.98; letter-spacing:.5px; } .label{ font-family:'SpaceMono',monospace; text-transform:uppercase; letter-spacing:.32em; font-size:11px; color:var(--smoke); } .mono{ font-family:'SpaceMono',monospace; } .red{ color:var(--red); } .container{ width:min(var(--maxw),90vw); margin-inline:auto; } .section{ padding:clamp(72px,11vw,150px) 0; position:relative; } .divider{ border-top:1px solid var(--hairline); } .bg-2{ background:var(--ink-2); } /* full-bleed video background section */ .video-section{ position:relative; overflow:hidden; min-height:78vh; display:flex; align-items:center; border-block:1px solid var(--hairline); } .video-section .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(.12) contrast(1.05) brightness(.9); } .video-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 40%, rgba(10,10,10,.30) 72%, rgba(10,10,10,.55) 100%), linear-gradient(0deg, rgba(10,10,10,.75), transparent 45%); } .video-section .container{ position:relative; z-index:2; } @media (prefers-reduced-motion:reduce){ .video-section .bg-video{ display:none; } .video-section{ background:var(--ink-2); } } /* icons */ .icon{ width:1em; height:1em; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; } /* brush stroke behind a word (organic SVG) */ .brush{ position:relative; display:inline-block; color:#fff; padding:0 .12em; white-space:nowrap; z-index:0; } .brush::before{ content:''; position:absolute; z-index:-1; left:-.05em; right:-.05em; top:8%; bottom:6%; background:var(--red); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M4,30 C60,10 150,8 200,16 C260,24 350,6 396,20 C402,40 398,58 392,66 C330,52 230,70 170,58 C110,48 50,68 8,54 C2,46 0,38 4,30 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M4,30 C60,10 150,8 200,16 C260,24 350,6 396,20 C402,40 398,58 392,66 C330,52 230,70 170,58 C110,48 50,68 8,54 C2,46 0,38 4,30 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%; transform:rotate(-1.6deg); } /* ---- buttons ---- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:'SpaceMono',monospace; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding:16px 30px; cursor:pointer; border:1.6px solid transparent; transform:rotate(-1.4deg); transition:transform .18s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s,color .2s; } .btn .icon{ font-size:18px; } .btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 30px -8px rgba(225,27,34,.55); } .btn-primary:hover{ background:var(--deep-red); transform:rotate(-1.4deg) translateY(-2px) scale(1.02); box-shadow:0 16px 40px -10px rgba(225,27,34,.7); } .btn-ghost{ background:transparent; color:var(--bone); border-color:#3a3a3a; } .btn-ghost:hover{ border-color:var(--red); color:var(--chalk); transform:rotate(-1.4deg) translateY(-2px); } .btn-sm{ padding:11px 20px; font-size:11px; } /* ============================================================ NAV */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(18px,4vw,52px); border-bottom:1px solid transparent; transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s; } .nav.scrolled{ background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom-color:var(--hairline); padding-block:13px; } .brand{ display:inline-flex; align-items:center; } .brand-logo{ height:46px; width:auto; display:block; border-radius:4px; transition:height .35s; } .nav.scrolled .brand-logo{ height:40px; } .brand-logo-lg{ height:64px; } .wordmark{ display:flex; align-items:center; gap:7px; font-family:'Anton'; font-size:23px; text-transform:uppercase; letter-spacing:.5px; } .wordmark .raw{ background:var(--red); color:#fff; padding:2px 8px; transform:rotate(-2deg); } .wordmark .local{ color:var(--bone); } .nav-links{ display:flex; align-items:center; gap:34px; } .navlink{ font-family:'SpaceMono',monospace; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--smoke); position:relative; padding:4px 0; transition:color .2s; } .navlink::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red); transition:width .25s; } .navlink:hover{ color:var(--bone); } .navlink:hover::after{ width:100%; } .nav-toggle{ display:none; background:none; border:0; color:var(--bone); cursor:pointer; } .nav-toggle .icon{ font-size:28px; } /* lock background scroll while the app-download modal is open */ html.modal-open{ overflow:hidden; } /* keep the nav solid while the compact dropdown is open so it reads clearly */ html.menu-open .nav{ background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--hairline); } /* ============================================================ HERO */ .hero{ min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero-bg .glow{ position:absolute; will-change:transform; } .hero-bg .glow::before{ content:''; position:absolute; inset:0; border-radius:50%; filter:blur(26px); } .hero-bg .g1{ width:60vw; height:60vw; top:-15%; right:-10%; } .hero-bg .g1::before{ background:radial-gradient(circle,rgba(225,27,34,.32),transparent 62%); animation:drift1 16s ease-in-out infinite; } .hero-bg .g2{ width:48vw; height:48vw; bottom:-20%; left:-12%; } .hero-bg .g2::before{ background:radial-gradient(circle,rgba(225,27,34,.15),transparent 60%); animation:drift2 22s ease-in-out infinite; } @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-5%,4%) scale(1.1) } } @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(6%,-4%) scale(1.12) } } .hero-bg .grid-lines{ position:absolute; inset:-64px; opacity:.5; background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px); background-size:64px 64px; animation:gridpan 28s linear infinite; -webkit-mask:radial-gradient(circle at 70% 30%,#000,transparent 70%); mask:radial-gradient(circle at 70% 30%,#000,transparent 70%); } @keyframes gridpan{ to{ background-position:64px 64px } } .hero-bg .sweep{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 42%, rgba(244,238,225,.06) 50%, transparent 58%); transform:translateX(-120%); animation:sweep 9s ease-in-out 2s infinite; } @keyframes sweep{ 0%{ transform:translateX(-120%) } 45%,100%{ transform:translateX(130%) } } .hero-bg .spotlight{ position:absolute; top:0; left:0; width:680px; height:680px; margin:-340px 0 0 -340px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .4s; will-change:transform; background:radial-gradient(circle, rgba(225,27,34,.14), transparent 62%); mix-blend-mode:screen; } .hero-inner{ position:relative; z-index:2; padding-top:96px; display:grid; grid-template-columns:1.04fr .96fr; gap:54px; align-items:center; } .hero-copy{ min-width:0; } .hero .kicker{ margin-bottom:22px; } .hero h1{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:clamp(38px,5.4vw,84px); line-height:1.03; letter-spacing:-.5px; } .hero h1 .ln{ display:block; opacity:0; animation:stampin .7s cubic-bezier(.2,.8,.2,1) both; } .hero h1 .ln:nth-child(1){ animation-delay:.15s; } .hero h1 .ln:nth-child(2){ animation-delay:.32s; } @keyframes stampin{ 0%{ opacity:0; transform:translateY(24px) scale(1.06) } 60%{ opacity:1 } 100%{ opacity:1; transform:none } } /* brush draws in behind the word on load */ .hero .brush::before{ animation:brushwipe .7s .5s cubic-bezier(.2,.7,.2,1) both; } @keyframes brushwipe{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } } .hero p.sub{ max-width:440px; margin:24px 0 32px; color:#c9c4bb; font-size:clamp(15px,1.4vw,17px); line-height:1.7; } .hero-cta{ display:flex; gap:18px; flex-wrap:wrap; } .hero-meta{ display:flex; justify-content:space-between; gap:18px; margin-top:50px; max-width:470px; } .hero-meta .m{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px; } .hero-meta .m b{ font-family:'Anton'; color:var(--chalk); font-size:clamp(26px,3vw,32px); display:inline-block; line-height:1; will-change:transform,opacity; } .hero-meta .m span{ font-size:11px; letter-spacing:.2em; } .scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; } .scroll-hint .bar{ width:1px; height:34px; background:linear-gradient(var(--red),transparent); animation:scrolldot 1.8s infinite; } @keyframes scrolldot{ 0%{opacity:0;transform:scaleY(.3)} 50%{opacity:1} 100%{opacity:0;transform:scaleY(1) translateY(6px)} } /* ---- hero viewfinder photo stack ---- */ .hero-visual{ position:relative; width:100%; aspect-ratio:1/1; max-height:560px; } .photo-stack{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .25s cubic-bezier(.2,.7,.2,1); will-change:transform; } .ph{ position:absolute; margin:0; overflow:hidden; border:6px solid #0c0c0c; background:#000; aspect-ratio:3/4; box-shadow:0 30px 60px -22px rgba(0,0,0,.75), 0 0 0 1px var(--hairline); will-change:transform,top,left,width; transition:top 1.1s cubic-bezier(.55,0,.2,1), left 1.1s cubic-bezier(.55,0,.2,1), width 1.1s cubic-bezier(.55,0,.2,1), transform 1.1s cubic-bezier(.55,0,.2,1); } .ph img{ width:100%; height:100%; object-fit:cover; display:block; } .ph::after{ content:''; position:absolute; inset:0; background:var(--red); mix-blend-mode:color; opacity:var(--tint,0); } /* The image stays locked in its frame; the three frames orbit through these three fixed slots in a loop (front -> mid -> back -> front). Every slot uses top/left/width so each frame glides smoothly between positions. */ .ph.slot-back { top:1%; left:51%; width:46%; transform:rotate(7deg); z-index:1; } .ph.slot-mid { top:35%; left:0; width:48%; transform:rotate(-7deg); z-index:2; } .ph.slot-front{ top:18%; left:21%; width:58%; transform:rotate(2deg); z-index:3; } .vf-corner{ position:absolute; width:30px; height:30px; z-index:6; pointer-events:none; } .vf-corner.tl{ top:-8px; left:-8px; border-top:2px solid var(--red); border-left:2px solid var(--red); } .vf-corner.tr{ top:-8px; right:-8px; border-top:2px solid var(--red); border-right:2px solid var(--red); } .vf-corner.bl{ bottom:-8px; left:-8px; border-bottom:2px solid var(--red); border-left:2px solid var(--red); } .vf-corner.br{ bottom:-8px; right:-8px; border-bottom:2px solid var(--red); border-right:2px solid var(--red); } .vf-hud{ position:absolute; z-index:6; font-family:'SpaceMono',monospace; font-size:11px; letter-spacing:.18em; color:#F4EEE1; background:rgba(10,10,10,.55); padding:5px 9px; backdrop-filter:blur(4px); } .vf-rec{ top:-4px; left:-4px; display:flex; align-items:center; gap:7px; } .vf-tc{ top:-4px; right:-4px; color:rgba(244,238,225,.72); } .rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:.2 } } @media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; gap:36px; } .hero-visual{ width:100%; max-width:420px; margin-inline:auto; aspect-ratio:4/5; } .hero p.sub{ max-width:520px; } } @media (max-width:560px){ .hero-visual{ aspect-ratio:1/1; max-width:340px; } .vf-hud{ font-size:10px; } } /* marquee */ .marquee{ overflow:hidden; border-block:1px solid var(--hairline); background:var(--red); padding:14px 0; } .marquee-track{ display:inline-flex; gap:40px; white-space:nowrap; animation:scrollx 22s linear infinite; } .marquee span{ font-family:'Anton'; text-transform:uppercase; font-size:22px; letter-spacing:2px; color:#0A0A0A; display:inline-flex; align-items:center; gap:40px; } .marquee .dot{ width:8px; height:8px; background:#0A0A0A; border-radius:50%; display:inline-block; } @keyframes scrollx{ to{ transform:translateX(-50%); } } /* ============================================================ section head */ .sec-head{ max-width:760px; } .sec-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; } .sec-label .tick{ width:24px; height:2px; background:var(--red); } .sec-title{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:clamp(34px,5.5vw,68px); line-height:1.0; letter-spacing:0; } .sec-intro{ color:var(--smoke); max-width:580px; margin-top:20px; font-size:17px; } /* ============================================================ cards / services */ .grid{ display:grid; gap:22px; margin-top:54px; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .tilt{ transform-style:preserve-3d; transition:transform .15s ease; will-change:transform; } .card{ position:relative; background:linear-gradient(160deg,var(--asphalt),var(--ink-2)); border:1px solid var(--hairline); padding:34px 30px; overflow:hidden; transition:border-color .3s,transform .3s,box-shadow .3s; } .card::before{ content:''; position:absolute; top:0; left:0; width:42px; height:42px; border-top:2px solid var(--red); border-left:2px solid var(--red); opacity:0; transition:opacity .3s,transform .3s; transform:translate(-6px,-6px); } .card:hover{ border-color:#3a3a3a; box-shadow:0 30px 60px -30px #000; } .card:hover::before{ opacity:1; transform:none; } .card .ico-badge{ width:56px; height:56px; display:grid; place-items:center; background:var(--ink); border:1px solid var(--hairline); color:var(--red); margin-bottom:22px; transform:rotate(-3deg); } .card .ico-badge .icon{ font-size:26px; } .card .num{ font-family:'Anton'; font-size:50px; color:#2c2c2c; line-height:1; -webkit-text-stroke:1px #3a3a3a; } .card h3{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:25px; margin:16px 0 12px; letter-spacing:.5px; } .card p{ color:var(--smoke); font-size:15px; line-height:1.65; } /* ============================================================ gallery */ .gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; } .shot{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--hairline); background:#0d0d0d; transition:transform .4s, border-color .3s; } .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.82); transition:filter .55s ease, transform .7s ease; } .shot::after{ content:''; position:absolute; inset:0; background:var(--red); mix-blend-mode:color; opacity:.55; transition:opacity .55s ease; pointer-events:none; } .shot::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(8,8,8,.8), transparent 55%); } .shot:nth-child(even){ margin-top:26px; } .shot:hover{ transform:translateY(-8px); border-color:var(--red); } .shot:hover img{ filter:grayscale(0) contrast(1.04); transform:scale(1.06); } .shot:hover::after{ opacity:0; } .shot .label{ position:absolute; left:14px; bottom:14px; z-index:2; color:#F4EEE1; } .shot .frame{ position:absolute; inset:10px; z-index:2; border:1px solid rgba(244,238,225,.22); pointer-events:none; } /* ============================================================ how-it-works film strip */ .filmstrip{ position:relative; margin-top:50px; background:#080808; border:1px solid var(--hairline); padding:10px 0; box-shadow:0 40px 80px -50px #000; } .filmstrip .sprockets{ height:16px; margin:6px 14px; background-image:repeating-linear-gradient(90deg, rgba(244,238,225,.55) 0 14px, transparent 14px 34px); border-radius:2px; } .frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:12px 14px; } .scene{ position:relative; background:var(--ink); border:1px solid var(--hairline); overflow:hidden; transition:border-color .3s; } .scene:hover{ border-color:var(--red); } .scene-media{ position:relative; aspect-ratio:4/3; overflow:hidden; } .scene-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.82); transition:filter .55s ease, transform .7s ease; } .scene-media::after{ content:''; position:absolute; inset:0; background:var(--red); mix-blend-mode:color; opacity:.6; transition:opacity .55s ease; pointer-events:none; } .scene-media::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(8,8,8,.85), transparent 55%); } .scene:hover .scene-media img{ filter:grayscale(0) contrast(1.05); transform:scale(1.06); } .scene:hover .scene-media::after{ opacity:0; } /* Touch devices have no cursor: reveal each card's true colours as it scrolls through the centre of the screen (JS toggles .in-focus) and re-apply the red overlay once it leaves. Mirrors the desktop hover reveal. */ @media (hover: none){ .shot.in-focus{ border-color:var(--red); } .shot.in-focus img{ filter:grayscale(0) contrast(1.04); transform:scale(1.04); } .shot.in-focus::after{ opacity:0; } .scene.in-focus{ border-color:var(--red); } .scene.in-focus .scene-media img{ filter:grayscale(0) contrast(1.05); transform:scale(1.04); } .scene.in-focus .scene-media::after{ opacity:0; } } .scene-no{ position:absolute; left:12px; bottom:4px; z-index:2; font-family:'Anton'; font-size:66px; line-height:1; color:#fff; text-shadow:0 2px 20px #000; } .scene-body{ padding:20px 22px 24px; } .slate{ display:flex; justify-content:space-between; align-items:center; font-family:'SpaceMono',monospace; font-size:10px; letter-spacing:.22em; color:var(--smoke); border-bottom:1px solid var(--hairline); padding-bottom:9px; margin-bottom:13px; } .slate span:last-child{ color:var(--red); } .scene-body h3{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:24px; letter-spacing:.5px; margin-bottom:9px; } .scene-body p{ color:var(--smoke); font-size:14px; line-height:1.6; } @media (max-width:860px){ .frames{ grid-template-columns:1fr; } } /* ============================================================ promotions (reels) */ /* fixed mobile-size cards, side by side, centred — never stretch full width */ .promo-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:20px; margin-top:50px; } .promo{ width:340px; max-width:100%; background:var(--asphalt); border:1px solid var(--hairline); overflow:hidden; transition:border-color .25s, box-shadow .25s; } .promo:hover{ border-color:var(--red); box-shadow:0 26px 50px -30px #000; } /* Instagram renders its own (light) card — let it sit cleanly, sized to ours */ .promo-instagram{ background:transparent; border:0; overflow:visible; } .promo-instagram:hover{ box-shadow:none; } .promo-instagram .instagram-media{ min-width:0 !important; width:100% !important; margin:0 !important; } .promo-frame{ position:relative; aspect-ratio:9/16; background:#000; } .promo-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .promo-link{ position:absolute; inset:0; display:grid; place-items:center; color:var(--bone); font-family:'SpaceMono',monospace; letter-spacing:.2em; text-transform:uppercase; font-size:13px; background:repeating-linear-gradient(45deg,#141414 0 12px,#191919 12px 24px); } .promo-link:hover{ color:var(--red); } .promo-meta{ padding:16px 18px; } .promo-meta h4{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:18px; letter-spacing:.5px; } .promo-meta p{ color:var(--smoke); font-size:13.5px; margin-top:6px; line-height:1.55; } @media (max-width:380px){ .promo{ width:100%; } } /* ============================================================ packages */ .pkg{ margin-top:50px; } .pkg-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(160deg,var(--asphalt),var(--ink-2)); border:1px solid var(--hairline); padding:28px 30px; margin-bottom:16px; transition:border-color .25s,transform .25s; } .pkg-row:hover{ border-color:var(--red); transform:translateX(6px); } .pkg-row .pk-name{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:27px; letter-spacing:.5px; } .pkg-row .pk-type{ margin-top:6px; } .pkg-row .pk-desc{ color:var(--smoke); margin-top:10px; font-size:14.5px; } .pkg-row .price{ font-family:'Anton'; color:var(--red); font-size:clamp(30px,4vw,46px); white-space:nowrap; } .pkg-row .price small{ display:block; font-family:'SpaceMono',monospace; font-size:10px; letter-spacing:.2em; color:var(--smoke); text-align:right; } .pkg-row.feat{ border-color:#3a3a3a; } .pkg-row .badge{ position:absolute; top:-11px; right:24px; background:var(--red); color:var(--chalk); font-family:'SpaceMono',monospace; font-size:10px; letter-spacing:.18em; padding:3px 10px; transform:rotate(-2deg); } /* ============================================================ cities */ .cities{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; } .city-chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--hairline); padding:12px 20px; font-family:'SpaceMono',monospace; text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--bone); transition:border-color .2s,color .2s,background .2s; } .city-chip .icon{ font-size:15px; color:var(--red); } .city-chip:hover{ border-color:var(--red); background:rgba(225,27,34,.08); } /* ============================================================ CTA */ .cta-band{ text-align:center; } .cta-stamp{ display:inline-block; position:relative; padding:clamp(40px,6vw,72px) clamp(30px,7vw,90px); background:linear-gradient(160deg,var(--asphalt),var(--ink-2)); border:2px solid var(--red); transform:rotate(-1.6deg); } .cta-stamp h2{ font-family:'Anton'; text-transform:uppercase; color:var(--chalk); font-size:clamp(36px,7vw,90px); line-height:1.0; } .cta-stamp .label{ margin-bottom:18px; } .cta-stamp .btn{ margin-top:32px; } /* ============================================================ footer */ .footer{ border-top:1px solid var(--hairline); padding:64px 0 44px; } .footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; } .footer .tag{ color:var(--smoke); max-width:330px; margin-top:16px; font-size:14.5px; line-height:1.7; } .footer .col-title{ margin-bottom:16px; } .footer .col a{ display:block; color:var(--smoke); font-family:'SpaceMono',monospace; font-size:13px; padding:6px 0; transition:color .2s; } .footer .col a:hover{ color:var(--red); } .footer .copyright{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline); color:var(--smoke); font-size:12px; font-family:'SpaceMono',monospace; letter-spacing:.1em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } /* ============================================================ reveal anim (reversible, directional) */ .reveal{ opacity:0; transform:translateY(56px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay:var(--rd,0s); will-change:opacity, transform; } .reveal.from-left{ transform:translateX(-90px); } .reveal.from-right{ transform:translateX(90px); } .reveal.from-scale{ transform:scale(.8); } .reveal.from-zoom{ transform:scale(1.14); } .reveal.from-rot-l{ transform:translateY(46px) rotate(-5deg) scale(.94); transform-origin:bottom left; } .reveal.from-rot-r{ transform:translateY(46px) rotate(5deg) scale(.94); transform-origin:bottom right; } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ --rd:.12s } .reveal.d2{ --rd:.24s } .reveal.d3{ --rd:.36s } .reveal.d4{ --rd:.48s } .reveal.d5{ --rd:.6s } /* --- per-section directional choreography (set by position) --- */ /* headings sweep in from the left */ .sec-label.reveal{ transform:translateX(-70px); } .sec-title.reveal{ transform:translateX(-90px); } .sec-label.reveal.in, .sec-title.reveal.in{ transform:none; } /* film-strip scenes spread out from where they came in */ .frames .scene.reveal:nth-child(1){ transform:translateX(-110px) rotate(-2deg); } .frames .scene.reveal:nth-child(2){ transform:translateY(80px) scale(.84); } .frames .scene.reveal:nth-child(3){ transform:translateX(110px) rotate(2deg); } .frames .scene.reveal.in{ transform:none; } /* gallery shots fan outward */ .gallery .shot.reveal:nth-child(1){ transform:translateX(-90px); } .gallery .shot.reveal:nth-child(2){ transform:translateY(80px) scale(.86); } .gallery .shot.reveal:nth-child(3){ transform:translateY(80px) scale(.86); } .gallery .shot.reveal:nth-child(4){ transform:translateX(90px); } .gallery .shot.reveal.in{ transform:none; } /* packages slide in from alternating sides */ .pkg .pkg-row.reveal:nth-child(odd){ transform:translateX(-100px); } .pkg .pkg-row.reveal:nth-child(even){ transform:translateX(100px); } .pkg .pkg-row.reveal.in{ transform:none; } /* city chips pop in from the centre */ .cities .city-chip.reveal{ transform:scale(.5); } .cities .city-chip.reveal.in{ transform:none; } /* CTA stamp keeps its tilt while scaling in */ .cta-stamp.reveal{ transform:translateY(64px) rotate(-1.6deg) scale(.9); } .cta-stamp.reveal.in{ transform:rotate(-1.6deg); } @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } .hero h1 .ln{ opacity:1; } } /* ============================================================ responsive */ @media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr; } .gallery{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .grid-3,.grid-4,.gallery{ grid-template-columns:1fr; } .shot:nth-child(even){ margin-top:0; } .nav-toggle{ display:block; position:relative; z-index:210; } /* compact dropdown panel anchored under the toggle (top-right) */ .nav-links{ position:absolute; top:calc(100% + 10px); right:clamp(14px,4vw,28px); z-index:200; flex-direction:column; align-items:stretch; gap:6px; min-width:184px; background:var(--asphalt,#141414); border:1px solid var(--hairline); border-radius:12px; padding:10px; box-shadow:0 22px 48px -18px rgba(0,0,0,.8); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top right; transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s; } .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .nav-links .navlink{ font-size:13px; letter-spacing:.14em; padding:11px 12px; border-radius:8px; } .nav-links .navlink::after{ display:none; } .nav-links .navlink:hover,.nav-links .navlink:active{ background:rgba(255,255,255,.05); color:var(--bone); } .nav-links .btn{ margin-top:4px; justify-content:center; } .pkg-row{ flex-direction:column; align-items:flex-start; } .pkg-row .price{ text-align:left; } .pkg-row .price small{ text-align:left; } .hero-meta{ gap:24px; } } /* ============================================================ light-theme contrast fixes */ /* the video section stays cinematic (dark scrim) — keep its text light in both modes */ html[data-theme="light"] .video-section .sec-title{ color:#fff; } html[data-theme="light"] .video-section .sec-intro{ color:rgba(244,238,225,.85); } html[data-theme="light"] .video-section .sec-label .label{ color:rgba(244,238,225,.7); } /* ghost step numbers: faint on light cards */ html[data-theme="light"] .card .num{ color:#E2DCCE; -webkit-text-stroke-color:#D2CBBC; } /* soften the red hero glows on a light canvas */ html[data-theme="light"] .hero-bg .g1::before{ background:radial-gradient(circle,rgba(225,27,34,.16),transparent 62%); } html[data-theme="light"] .hero-bg .g2::before{ background:radial-gradient(circle,rgba(225,27,34,.08),transparent 60%); } /* theme toggle button */ .theme-toggle{ display:grid; place-items:center; width:40px; height:40px; background:transparent; border:1.4px solid var(--hairline); color:var(--bone); cursor:pointer; transition:border-color .2s, color .2s; } .theme-toggle:hover{ border-color:var(--red); color:var(--red); } .theme-toggle .icon{ font-size:18px; } .nav-actions{ display:flex; align-items:center; gap:14px; } /* download icon button (mirrors the theme toggle) */ .icon-btn{ display:grid; place-items:center; width:40px; height:40px; background:transparent; border:1.4px solid var(--hairline); color:var(--bone); cursor:pointer; transition:border-color .2s, color .2s; } .icon-btn:hover{ border-color:var(--red); color:var(--red); } .icon-btn .icon{ font-size:18px; } /* "Get the app" entry inside the dropdown */ .navlink-get{ display:inline-flex; align-items:center; gap:7px; color:var(--red) !important; } .navlink-get .icon{ font-size:15px; } /* ===== app download modal ===== */ .app-modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; } .app-modal[hidden]{ display:none; } .app-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .app-modal-card{ position:relative; z-index:1; width:min(420px,100%); text-align:center; background:var(--asphalt,#141414); border:1px solid var(--hairline); border-top:3px solid var(--red); border-radius:14px; padding:30px 26px 24px; box-shadow:0 40px 90px -30px #000; animation:appPop .25s cubic-bezier(.2,.7,.2,1) both; } @keyframes appPop{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } } .app-modal-x{ position:absolute; top:12px; right:12px; background:none; border:0; color:var(--smoke); cursor:pointer; } .app-modal-x .icon{ font-size:20px; } .app-modal-logo{ height:54px; width:auto; margin:0 auto 16px; display:block; border-radius:6px; } .app-modal-card h3{ font-family:'Anton'; font-size:24px; letter-spacing:.4px; color:var(--chalk); margin-bottom:10px; text-transform:uppercase; line-height:1.1; } .app-modal-card p{ font-size:14px; line-height:1.55; color:var(--smoke); margin-bottom:22px; } .app-modal-card p b{ color:var(--bone); } .app-modal-actions{ display:flex; gap:10px; justify-content:center; } .app-modal-actions .btn{ flex:1 1 0; justify-content:center; }