/* ═══════════════════════════════════════════════════════════════ ALPINE LIMOUSINE SERVICE — Design System & Styles Extracted for reuse across pages ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════ 1. RESET & BASE ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } /* ═══════════════════════════════════════════ 2. DESIGN TOKENS (CSS Custom Properties) ═══════════════════════════════════════════ */ :root { /* Light palette */ --ivory: #FDFAF6; --linen: #F2EBE0; --parch: #E8E0D4; --warm: #D8CFC3; /* Dark palette */ --deep: #111110; --char: #1C1C1A; --smoke: #2E2E2B; /* Gold — borders/lines/decorative only, NOT fonts */ --gold: #A08030; --gold-lt: #C8A24A; --gold-dk: #7A6020; --gold-dim: rgba(160,128,48,0.16); --gold-line: rgba(160,128,48,0.28); /* Cream — accent text on dark sections */ --crem: #EDE6D8; --crem-lt: #F5F0E8; --crem-dim: rgba(237,230,216,0.55); /* Text */ --ink: #1A1A18; --ink-2: #4A4840; --ink-3: #3D3A34; /* Typography */ --serif: 'Instrument Serif', Georgia, serif; --sans: 'Montserrat', sans-serif; /* Easing */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ═══════════════════════════════════════════ 3. TYPOGRAPHY & BODY ═══════════════════════════════════════════ */ body { font-family: var(--sans); background: var(--ivory); color: var(--ink); font-size: 14px; line-height: 1.7; /* clip, not hidden — hidden creates a scroll container that breaks position:sticky on Safari. clip prevents overflow without that side effect. Safari 16+ / Chrome 90+ / Firefox 81+ */ overflow-x: clip; } /* Required Google Fonts (add to ): */ /* ═══════════════════════════════════════════ 4. CUSTOM CURSOR ═══════════════════════════════════════════ */ * { cursor: none !important; } #c-dot, #c-ring { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%,-50%); } #c-dot { width:6px; height:6px; background:var(--crem); transition:background .3s; } #c-ring { width:34px; height:34px; border:1px solid rgba(237,230,216,0.45); transition:width .22s var(--ease), height .22s var(--ease), border-color .3s; } body.ch #c-ring { width:52px; height:52px; border-color:var(--crem); } /* Cursor on light backgrounds */ body.cur-light #c-dot { background:var(--ink); } body.cur-light #c-ring { border-color:rgba(26,26,24,0.35); } body.cur-light.ch #c-ring { border-color:rgba(26,26,24,0.65); } /* ═══════════════════════════════════════════ 5. LOADER ═══════════════════════════════════════════ */ #loader { position:fixed; inset:0; z-index:9000; background:var(--deep); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .9s var(--ease), visibility .9s; } #loader.out { opacity:0; visibility:hidden; pointer-events:none; } .ld-logo { font-family:var(--serif); font-size:28px; letter-spacing:.1em; color:#F2EBE0; } .ld-logo em { font-style:italic; color:var(--crem-lt); } .ld-track { width:220px; height:2px; background:rgba(242,235,224,0.1); overflow:hidden; border-radius:100px; } .ld-bar { height:100%; background:var(--crem); width:0%; border-radius:100px; } .ld-msg { font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:rgba(242,235,224,0.38); } /* ═══════════════════════════════════════════ 6. NAVIGATION ═══════════════════════════════════════════ */ nav { position:fixed; top:0; left:0; right:0; z-index:500; height:74px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; transition:background .5s, border-color .5s, backdrop-filter .5s; border-bottom:1px solid transparent; } nav.on-hero { /* transparent over dark hero */ } nav.on-light { background:rgba(253,250,246,0.92); backdrop-filter:blur(16px); border-color:rgba(160,128,48,0.18); } a.logo { text-decoration:none; color:inherit; display:flex; align-items:center; gap:10px; } .logo { font-family:var(--serif); font-size:20px; letter-spacing:.08em; color:var(--deep); transition:color .3s; display:flex; align-items:center; gap:10px; white-space:nowrap; } .logo-img, .nav-logo-img { height:28px; width:auto; display:block; } .logo em { font-style:italic; color:var(--ink); } nav .logo em { margin-right:-3px; } nav.on-hero .logo { color:#F2EBE0; } nav.on-hero .logo em { color:var(--crem-lt); } .nav-links { display:flex; gap:24px; list-style:none; } .nav-links a { font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; transition:color .22s; white-space:nowrap; } nav.on-hero .nav-links a { color:rgba(242,235,224,0.65); } .nav-links a:hover { color:var(--ink); } nav.on-hero .nav-links a:hover { color:#FDFAF6; } .nav-btn { font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory); background:var(--deep); padding:12px 26px; text-decoration:none; border-radius:100px; transition:background .22s; } nav.on-hero .nav-btn { background:rgba(28,28,26,0.7); backdrop-filter:blur(8px); border:1px solid rgba(242,235,224,0.18); } .nav-btn:hover { background:var(--char); } /* ═══════════════════════════════════════════ 7. BUTTONS (shared) ═══════════════════════════════════════════ */ .btn-d, .btn-o { font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; padding:16px 40px; text-decoration:none; border-radius:100px; backdrop-filter:blur(28px) saturate(1.8); -webkit-backdrop-filter:blur(28px) saturate(1.8); transition:background .3s, color .3s, border-color .3s, transform .2s, box-shadow .3s; position:relative; overflow:hidden; } /* Shimmer layer */ .btn-d::before, .btn-o::before { content:''; position:absolute; inset:0; border-radius:100px; background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%); pointer-events:none; } /* Primary (filled) */ .btn-d { color:var(--deep); background:rgba(242,235,224,0.75); border:1px solid rgba(255,255,255,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 28px rgba(0,0,0,0.22); } .btn-d:hover { background:#F2EBE0; color:var(--deep); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 36px rgba(0,0,0,0.28); } /* Secondary (outline) */ .btn-o { color:#FDFAF6; background:rgba(253,250,246,0.08); border:1px solid rgba(253,250,246,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 20px rgba(0,0,0,0.15); } .btn-o:hover { background:rgba(240,234,218,0.82); color:var(--deep); border-color:rgba(240,234,218,0.6); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 36px rgba(0,0,0,0.22); } /* ═══════════════════════════════════════════ 8. SECTION SHARED (labels, headings, body) ═══════════════════════════════════════════ */ .s-label { font-family:var(--serif); font-size:10px; font-weight:400; font-style:italic; letter-spacing:.12em; color:var(--ink-2); margin-bottom:20px; display:flex; align-items:center; gap:14px; } .s-label::after { content:''; flex-shrink:0; width:40px; height:1px; background:var(--parch); } .s-h2 { font-family:var(--serif); font-size:clamp(38px,5vw,70px); font-weight:400; line-height:1.05; color:var(--ink); } .s-h2 em { font-style:italic; color:var(--ink); } .s-h2.inv { color:var(--linen); } .s-h2.inv em { color:var(--crem-lt); } .s-body { font-size:13px; font-weight:300; line-height:2; color:var(--ink-3); max-width:500px; } .s-body.inv { color:rgba(232,224,212,0.58); } /* ═══════════════════════════════════════════ 9. HERO — Frame-scrubbed Video ═══════════════════════════════════════════ */ #hero-zone { position:relative; height:550vh; } #hero-pin { position:sticky; top:0; width:100%; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; } #hero-canvas { position:absolute; inset:0; width:100%; height:100%; } .hero-vignette { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,17,16,.45) 0%, transparent 32%), linear-gradient(to top, rgba(17,17,16,.60) 0%, transparent 42%); pointer-events:none; } .hero-copy { position:relative; z-index:2; text-align:center; padding:0 24px; } /* Text hidden until scroll sequence finishes — JS adds .revealed */ .hero-eyebrow, .hero-h1, .hero-sub, .hero-btns { opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .hero-copy.revealed .hero-eyebrow { opacity:1; transform:translateY(0); transition-delay:0s; } .hero-copy.revealed .hero-h1 { opacity:1; transform:translateY(0); transition-delay:0.2s; } .hero-copy.revealed .hero-sub { opacity:1; transform:translateY(0); transition-delay:0.4s; } .hero-copy.revealed .hero-btns { opacity:1; transform:translateY(0); transition-delay:0.58s; } .hero-eyebrow { font-size:9px; font-weight:600; letter-spacing:.44em; text-transform:uppercase; color:rgba(253,250,246,0.68); margin-bottom:26px; } .hero-h1 { font-family:var(--serif); font-size:clamp(60px,10vw,136px); font-weight:400; line-height:.93; color:#FDFAF6; margin-bottom:32px; } .hero-h1 em { font-style:italic; color:#FDFAF6; display:block; } .hero-sub { font-size:11px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:rgba(253,250,246,0.55); margin-bottom:52px; } .hero-btns { display:flex; gap:16px; justify-content:center; } /* Scroll cue */ .scroll-cue { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; transition:opacity 0.6s; } .scroll-cue span { font-size:8px; letter-spacing:.36em; text-transform:uppercase; color:rgba(253,250,246,.44); } .scroll-cue-line { width:1px; height:44px; background:linear-gradient(to bottom,rgba(253,250,246,0.5),transparent); animation:pulse 2.2s 2s infinite; } /* Progress pill */ #vp { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); height:3px; width:0%; max-width:200px; background:rgba(253,250,246,0.45); border-radius:100px; z-index:4; transition:width .04s linear, opacity .6s; } /* ═══════════════════════════════════════════ 10. MARQUEE TICKER ═══════════════════════════════════════════ */ .marquee-wrap { overflow:hidden; background:var(--deep); padding:16px 0; border-top:1px solid rgba(200,162,74,0.2); border-bottom:1px solid rgba(200,162,74,0.2); } .marquee-inner { display:flex; width:max-content; animation:mq 30s linear infinite; } .marquee-inner:hover { animation-play-state:paused; } .mq-item { font-size:9px; font-weight:700; letter-spacing:.38em; text-transform:uppercase; color:rgba(242,235,224,0.55); padding:0 32px; white-space:nowrap; flex-shrink:0; } .mq-dot { color:rgba(242,235,224,0.3); padding-right:32px; flex-shrink:0; } /* ═══════════════════════════════════════════ 11. INTRO — Heritage / Stats Section (light) ═══════════════════════════════════════════ */ #intro { background:var(--ivory); padding:130px 80px; } .intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .intro-img-wrap { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:20px; } .intro-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 7s var(--ease); } .intro-img-wrap:hover img { transform:scale(1.04); } .intro-img-frame { position:absolute; inset:12px; border:1px solid var(--gold-line); pointer-events:none; border-radius:12px; } .intro-badge { position:absolute; bottom:24px; left:24px; background:rgba(17,17,16,0.78); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); padding:16px 22px; border-radius:14px; border:1px solid rgba(237,230,216,0.12); } .intro-badge p { font-family:var(--serif); font-size:14px; font-style:italic; color:var(--crem-lt); } .intro-badge span { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,235,224,0.4); } .intro-right { padding-right:20px; } .intro-right .s-h2 { margin-bottom:28px; } .intro-right .s-body { margin-bottom:44px; } /* Stats grid */ .intro-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:48px; } .istat { padding:24px 28px; border:1px solid var(--parch); border-radius:16px; transition:background .3s; } .istat:hover { background:var(--linen); } .istat-n { font-family:var(--serif); font-size:46px; font-weight:400; color:var(--ink); line-height:1; } .istat-l { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; } /* ═══════════════════════════════════════════ 12. GALLERY — Fleet Showcase (light) ═══════════════════════════════════════════ */ #gallery { background:var(--linen); padding:130px 0; overflow:hidden; } .gallery-head { padding:0 80px 72px; display:flex; justify-content:space-between; align-items:flex-end; } .gallery-head .s-h2 { max-width:480px; } .gallery-note { max-width:300px; font-size:13px; font-weight:300; line-height:1.9; color:var(--ink-3); text-align:right; } /* Draggable track */ .g-track-outer { overflow:visible; } .g-track { display:flex; gap:20px; padding:0 80px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; user-select:none; } .g-track::-webkit-scrollbar { display:none; } .g-track.dragging { cursor:grabbing; scroll-behavior:auto; } .g-card { position:relative; flex-shrink:0; overflow:hidden; border-radius:18px; -webkit-mask-image:-webkit-radial-gradient(white,black); } .g-card:nth-child(1) { width:460px; height:600px; } .g-card:nth-child(2) { width:340px; height:600px; margin-top:70px; } .g-card:nth-child(3) { width:400px; height:600px; margin-top:-50px; } .g-card:nth-child(4) { width:480px; height:600px; margin-top:40px; } .g-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); transform:scale(1.04); border-radius:inherit; } .g-card:hover img { transform:scale(1.0); } .g-card-over { position:absolute; inset:0; background:linear-gradient(to top, rgba(17,17,16,.84) 0%, transparent 55%); opacity:0; transition:opacity .45s; } .g-card:hover .g-card-over { opacity:1; } .g-card-info { position:absolute; bottom:0; left:0; right:0; padding:28px 26px; transform:translateY(10px); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); } .g-card:hover .g-card-info { opacity:1; transform:translateY(0); } .g-card-info h3 { font-family:var(--serif); font-size:24px; color:#FDFAF6; margin-bottom:6px; } .g-card-info p { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(237,230,216,0.65); } .g-card::after { content:''; position:absolute; inset:0; border:1px solid transparent; border-radius:inherit; transition:border-color .4s; pointer-events:none; z-index:2; } .g-card:hover::after { border-color:rgba(200,162,74,0.4); } .g-hint { text-align:center; margin-top:40px; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); } .g-hint span { color:var(--ink-3); } /* Auto-scrolling thumbnail strip */ .g-strip { margin-top:56px; overflow:hidden; } .g-strip-inner { display:flex; gap:18px; animation:mq2 38s linear infinite; width:max-content; } .g-strip-inner:hover { animation-play-state:paused; } .g-thumb { width:268px; height:170px; overflow:hidden; flex-shrink:0; border-radius:14px; } .g-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); display:block; } .g-thumb:hover img { transform:scale(1.08); } /* ═══════════════════════════════════════════ 13. SERVICES — What We Offer (dark) ═══════════════════════════════════════════ */ #services { background:var(--deep); padding:130px 80px; } #services .s-label { color:var(--crem-dim); } #services .s-label::after { background:rgba(237,230,216,0.18); } .sv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:80px; } .sv-card { background:rgba(255,255,255,0.03); border:1px solid rgba(237,230,216,0.08); padding:48px 40px; position:relative; overflow:hidden; border-radius:20px; transition:background .32s; } .sv-card:hover { background:rgba(255,255,255,0.11); border-color:rgba(237,230,216,0.18); } .sv-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:rgba(237,230,216,0.25); transform:scaleX(0); transform-origin:left; transition:transform .42s var(--ease); } .sv-card:hover::after { transform:scaleX(1); } .sv-num { font-family:var(--serif); font-style:italic; font-size:12px; color:rgba(237,230,216,0.28); letter-spacing:.1em; display:block; margin-bottom:36px; } .sv-line { width:36px; height:1px; background:rgba(237,230,216,0.1); margin-bottom:36px; } .sv-card h3 { font-family:var(--serif); font-size:24px; font-weight:400; color:var(--linen); line-height:1.25; margin-bottom:16px; } .sv-card h3 em { font-style:italic; color:var(--crem-lt); } .sv-card p { font-size:12px; line-height:1.9; color:rgba(232,224,212,0.48); } /* ═══════════════════════════════════════════ 14. PRICING — Account Tiers (dark, warm cards) ═══════════════════════════════════════════ */ #pricing { background:var(--char); padding:130px 80px; overflow:visible; } .pricing-intro { text-align:center; max-width:660px; margin:0 auto 80px; } .pricing-intro .s-label { justify-content:center; margin-bottom:22px; color:var(--crem-dim); } .pricing-intro .s-label::after { display:none; } .pricing-intro .s-h2 { margin-bottom:28px; } .pricing-intro-body { font-size:13px; font-weight:300; line-height:2; color:rgba(232,224,212,0.52); } .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; overflow:visible; padding-top:20px; } .pr-card { border-radius:28px; padding:56px 44px 48px; display:flex; flex-direction:column; align-items:center; text-align:center; background:linear-gradient(to bottom, var(--linen) 0%, var(--ivory) 100%); min-height:500px; position:relative; overflow:visible; box-shadow:0 12px 56px rgba(0,0,0,0.36); transition:transform .42s var(--ease), box-shadow .42s var(--ease); transform-origin:center bottom; will-change:transform; } /* ID-scoped to beat .rv.in specificity */ #pricing .pr-card { transition:transform .42s var(--ease), box-shadow .42s var(--ease); } #pricing .pr-card:hover { transform:rotate(-2deg) scale(1.03); box-shadow:0 32px 80px rgba(0,0,0,0.44); } #pricing .pr-card.tapped { transform:rotate(-2deg) scale(1.03); box-shadow:0 32px 80px rgba(0,0,0,0.44); } @media (hover:none),(max-width:480px){ #pricing .pr-card:hover:not(.tapped) { transform:none !important; box-shadow:0 12px 56px rgba(0,0,0,0.36) !important; } } /* Faint top shimmer line */ .pr-card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); } .pr-type { font-size:9px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dk); padding-bottom:14px; border-bottom:1px solid var(--parch); width:100%; margin-bottom:36px; } .pr-desc { font-family:var(--serif); font-size:clamp(22px,2vw,28px); line-height:1.5; color:var(--ink-2); flex:1; margin-bottom:44px; text-wrap:balance; } .pr-desc em { font-style:italic; color:var(--ink-2); } .pr-btn { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory); background:var(--deep); padding:16px 38px; border-radius:100px; text-decoration:none; transition:background .25s, transform .2s, box-shadow .25s; margin-bottom:44px; box-shadow:0 6px 22px rgba(17,17,16,0.22); } .pr-btn:hover { background:var(--smoke); transform:translateY(-2px); box-shadow:0 10px 30px rgba(17,17,16,0.3); } .pr-divider { height:1px; background:var(--parch); width:100%; margin-bottom:22px; } .pr-best-label { font-size:9px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; width:100%; text-align:left; } .pr-best-text { font-size:12px; font-weight:300; line-height:1.9; color:var(--ink-3); text-align:left; width:100%; } /* ═══════════════════════════════════════════ 15. PROCESS — How It Works (light) ═══════════════════════════════════════════ */ #process { background:var(--ivory); padding:130px 80px; } .process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:80px; position:relative; } .process-grid::before { content:''; position:absolute; top:28px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,transparent,rgba(160,128,48,0.42),transparent); } .p-step { padding:0 28px 0; text-align:center; } .p-dot { width:10px; height:10px; border-radius:50%; background:var(--ink-2); margin:22px auto 36px; box-shadow:0 0 0 5px rgba(26,26,24,.08), 0 0 0 10px rgba(26,26,24,.04); } .p-num { font-family:var(--serif); font-size:54px; font-style:italic; color:rgba(26,26,24,.15); display:block; line-height:1; } .p-step h4 { font-family:var(--serif); font-size:21px; font-weight:400; color:var(--ink); margin-bottom:12px; } .p-step p { font-size:12px; line-height:1.9; color:var(--ink-3); } /* ═══════════════════════════════════════════ 16. TESTIMONIALS (dark) ═══════════════════════════════════════════ */ #testimonials { background:var(--char); padding:130px 80px; overflow:hidden; } #testimonials .s-label { color:var(--crem-dim); } #testimonials .s-label::after { background:rgba(237,230,216,0.18); } .t-outer { margin-top:72px; } .t-slides { display:flex; gap:40px; transition:transform .7s var(--ease); } .t-slide { flex-shrink:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .t-quote { font-family:var(--serif); font-size:clamp(20px,2.8vw,34px); font-style:italic; line-height:1.6; color:var(--linen); } .t-quote::before { content:'\201C'; display:block; font-size:100px; line-height:0; color:rgba(237,230,216,.1); vertical-align:-.5em; margin-bottom:20px; font-style:normal; } .t-meta { border-left:1px solid rgba(237,230,216,.15); padding-left:40px; background:rgba(255,255,255,0.03); border-radius:16px; padding:28px 28px 28px 40px; border:1px solid rgba(237,230,216,.1); border-left:3px solid rgba(237,230,216,.18); } .t-stars { display:flex; gap:4px; margin-bottom:20px; } .star { width:11px; height:11px; background:rgba(237,230,216,0.5); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } .t-meta strong { display:block; font-family:var(--serif); font-size:18px; color:var(--crem-lt); margin-bottom:6px; } .t-meta span { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(232,224,212,.4); } .t-nav { display:flex; gap:10px; margin-top:52px; justify-content:center; } .t-dot { width:28px; height:3px; background:var(--smoke); border-radius:100px; transition:background .25s, width .25s; } .t-dot.on { background:var(--crem); width:50px; } /* ═══════════════════════════════════════════ 17. FAQ — Accordion (light) ═══════════════════════════════════════════ */ #faq { background:var(--linen); padding:130px 80px; } .faq-head { display:flex; justify-content:space-between; align-items:flex-end; max-width:900px; margin:0 auto 72px; } .faq-head .s-label { margin-bottom:18px; } .faq-head .s-h2 { max-width:420px; } .faq-note { font-size:13px; font-weight:300; line-height:1.9; color:var(--ink-3); max-width:320px; text-align:right; } .faq-list { max-width:900px; margin:0 auto; } .faq-item { border-bottom:1px solid var(--parch); overflow:hidden; } .faq-item:first-child { border-top:1px solid var(--parch); } .faq-q { display:flex; justify-content:space-between; align-items:center; padding:28px 0; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:var(--serif); font-size:clamp(18px,2vw,22px); font-weight:400; color:var(--ink); transition:color .3s; } .faq-q:hover { color:var(--ink-2); } .faq-q-icon { width:28px; height:28px; flex-shrink:0; position:relative; margin-left:20px; } .faq-q-icon::before, .faq-q-icon::after { content:''; position:absolute; background:var(--ink-3); border-radius:2px; transition:transform .38s var(--ease), opacity .38s; } .faq-q-icon::before { width:16px; height:1.5px; top:50%; left:50%; transform:translate(-50%,-50%); } .faq-q-icon::after { width:1.5px; height:16px; top:50%; left:50%; transform:translate(-50%,-50%); } .faq-item.open .faq-q-icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq-a { max-height:0; overflow:hidden; transition:max-height .5s var(--ease), padding .5s var(--ease); padding:0 0; } .faq-item.open .faq-a { max-height:200px; padding:0 0 28px; } .faq-a p { font-size:13px; font-weight:300; line-height:2; color:var(--ink-3); max-width:680px; } /* ═══════════════════════════════════════════ 18. FLEET TICKER (warm strip) ═══════════════════════════════════════════ */ .fleet-strip { background:var(--linen); border-top:1px solid var(--parch); border-bottom:1px solid var(--parch); padding:18px 0; overflow:hidden; } .fleet-inner { display:flex; width:max-content; animation:mq 24s linear infinite; } .fleet-item { font-family:var(--serif); font-size:15px; font-style:italic; color:var(--ink-3); padding:0 36px; flex-shrink:0; } .fleet-item span { color:var(--ink-2); font-style:normal; font-family:var(--sans); font-size:9px; letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:2px; } .fleet-sep { color:var(--warm); padding-right:36px; flex-shrink:0; font-style:italic; font-family:var(--serif); } /* ═══════════════════════════════════════════ 19. CTA BANNER (dark + image) ═══════════════════════════════════════════ */ #cta { position:relative; height:580px; overflow:hidden; display:flex; align-items:center; justify-content:center; } .cta-bg { position:absolute; inset:0; background:url('assets/images/hero/luxury_airport_scene_v2.png') center/cover no-repeat; filter:brightness(.18) saturate(.6); transform:scale(1.04); } .cta-over { position:absolute; inset:0; background:linear-gradient(135deg, rgba(17,17,16,.75) 0%, rgba(160,128,48,.06) 100%); } .cta-body { position:relative; z-index:2; text-align:center; padding:0 24px; } .cta-body .s-label { justify-content:center; } .cta-body .s-label::after { display:none; } .cta-body .s-h2 { margin:20px auto 40px; } /* ═══════════════════════════════════════════ 20. FOOTER (dark) ═══════════════════════════════════════════ */ footer { background:var(--deep); padding:80px; border-top:1px solid rgba(200,162,74,.15); } .ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px; } .ft-brand a.logo { text-decoration:none; } .ft-brand .logo { font-size:24px; display:block; margin-bottom:18px; color:#F2EBE0; } .ft-brand .logo em { color:var(--crem-lt); } .ft-brand p { font-size:12px; line-height:1.9; color:rgba(242,235,224,.38); max-width:280px; } .ft-col h5 { font-family:var(--serif); font-style:italic; font-size:12px; font-weight:400; letter-spacing:.04em; color:rgba(237,230,216,0.5); margin-bottom:22px; } .ft-col ul { list-style:none; } .ft-col li { margin-bottom:11px; } .ft-col a { font-size:12px; color:rgba(242,235,224,.42); text-decoration:none; transition:color .2s; } .ft-col a:hover { color:var(--crem-lt); } .ft-bottom { border-top:1px solid rgba(200,162,74,.12); padding-top:30px; display:flex; justify-content:space-between; } .ft-bottom p { font-size:10px; letter-spacing:.12em; color:rgba(242,235,224,.22); } /* ═══════════════════════════════════════════ 21. ANIMATIONS ═══════════════════════════════════════════ */ @keyframes fu { to { opacity:1; transform:translateY(0); } } @keyframes fi { to { opacity:1; } } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.18} } @keyframes mq { to { transform:translateX(-50%); } } @keyframes mq2 { to { transform:translateX(-50%); } } /* ═══════════════════════════════════════════ 22. SCROLL REVEAL ═══════════════════════════════════════════ */ .rv { opacity:1 !important; transform:none !important; } .rv.in { opacity:1; transform:none; } .rv.d1 { transition-delay:.12s; } .rv.d2 { transition-delay:.26s; } .rv.d3 { transition-delay:.40s; } .rv.d4 { transition-delay:.54s; } /* ═══════════════════════════════════════════ 23. MOBILE HAMBURGER ═══════════════════════════════════════════ */ #nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; outline:none; padding:8px; z-index:600; width:40px; height:40px; -webkit-tap-highlight-color:transparent; cursor:pointer; } #nav-toggle:focus { outline:none; } #nav-toggle span { display:block; width:22px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .32s var(--ease), opacity .25s, background .3s; transform-origin:center; } nav.on-hero #nav-toggle span { background:#F2EBE0; } #nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } #nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); } #nav-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } #mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:#FDFAF6; z-index:498; padding:20px 24px 28px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .4s var(--ease), opacity .35s; overflow-y:auto; } #mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:all; } #mobile-menu .m-links { list-style:none; margin-bottom:18px; text-align:center; } #mobile-menu .m-links li { border-bottom:1px solid var(--parch); } #mobile-menu .m-links li:last-child { border-bottom:none; } #mobile-menu .m-links a { display:block; padding:10px 0; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink); text-decoration:none; transition:color .2s; } #mobile-menu .m-links a:hover { color:var(--ink-2); } nav.menu-open { background:#FDFAF6 !important; backdrop-filter:none !important; border-color:rgba(160,128,48,0.18) !important; } nav.menu-open .logo, nav.menu-open .logo em { color:var(--ink) !important; } nav.menu-open #nav-toggle span { background:var(--ink) !important; } .m-reserve { display:block; text-align:center; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory); background:var(--deep); padding:14px 28px; border-radius:100px; text-decoration:none; transition:background .22s; } .m-reserve:hover { background:var(--char); } .m-contact-info { margin-top:20px; text-align:center; } .m-contact-info p { font-size:10px; letter-spacing:.1em; color:var(--ink-3); margin-bottom:4px; } .m-contact-info a { color:var(--ink-2); text-decoration:none; font-size:12px; } /* ═══════════════════════════════════════════ 24. RESPONSIVE — Tablet ≤ 900px ═══════════════════════════════════════════ */ @media (max-width: 900px) { #intro { padding:100px 48px; } .intro-grid { gap:60px; } #services { padding:100px 48px; } .sv-grid { grid-template-columns:1fr 1fr; } #pricing { padding:100px 48px; } #process { padding:100px 48px; } #testimonials { padding:100px 48px; } #faq { padding:100px 48px; } .faq-head { flex-direction:column; align-items:flex-start; gap:16px; } .faq-note { text-align:left; max-width:100%; } footer { padding:72px 48px; } .ft-grid { grid-template-columns:1fr 1fr; gap:40px; } .ft-brand { grid-column:1/-1; } .gallery-head { padding:0 48px 60px; } .g-track { padding:0 48px; } } /* ═══════════════════════════════════════════ 25. RESPONSIVE — Mobile ≤ 768px ═══════════════════════════════════════════ */ @media (max-width: 768px) { /* Cursor off on touch */ #c-dot, #c-ring { display:none !important; } * { cursor:auto !important; } /* Reduce section padding on mobile */ section { padding-left:20px !important; padding-right:20px !important; padding-top:80px !important; padding-bottom:80px !important; } /* Nav */ nav { padding:0 20px; height:64px; } .nav-links, .nav-btn, .nav-call-btn, .nav-btns { display:none !important; } #nav-toggle { display:flex; } #mobile-menu { display:block; } a.logo { text-decoration:none; } .logo { font-size:16px; } /* Hero */ #hero-zone { height:300vh; } .hero-copy { padding:0 20px; } .hero-eyebrow { font-size:8px; letter-spacing:.28em; margin-bottom:16px; } .hero-h1 { font-size:clamp(40px,13vw,68px); margin-bottom:20px; } .hero-sub { font-size:9px; letter-spacing:.18em; margin-bottom:32px; } .hero-btns { flex-direction:column; align-items:center; gap:12px; } .btn-d, .btn-o { width:min(280px,80vw); text-align:center; font-size:9px; padding:15px 28px; } #vp { max-width:120px; } .scroll-cue { bottom:24px; } /* Marquee */ .mq-item { padding:0 20px; } /* Section headings & text */ .s-label { font-size:11px; margin-bottom:16px; } .s-h2 { font-size:clamp(30px,9vw,50px); margin-bottom:24px; } .s-body { max-width:100%; font-size:15px; line-height:1.85; font-weight:400; } .s-body.inv { color:rgba(232,224,212,0.72); } /* Intro */ #intro { padding:72px 20px; } .intro-grid { grid-template-columns:1fr; gap:40px; } .intro-img-wrap { aspect-ratio:16/10; max-height:none; } .intro-right { padding-right:0; } .intro-stats { grid-template-columns:1fr 1fr; gap:8px; margin-top:32px; } .istat { padding:18px 20px; } .istat-n { font-size:34px; } .istat-l { font-size:8px; } /* Gallery */ #gallery { padding:72px 0; } .gallery-head { padding:0 20px 40px; flex-direction:column; align-items:flex-start; gap:16px; } .gallery-note { text-align:left; max-width:100%; } .g-track { padding:0 20px; gap:14px; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; align-items:flex-start; overflow-y:hidden; touch-action:pan-x pan-y; } .g-card { scroll-snap-align:center; } .g-card:nth-child(1), .g-card:nth-child(2), .g-card:nth-child(3), .g-card:nth-child(4) { width:72vw; max-width:290px; height:380px; margin-top:0; } .g-card-over { opacity:1; } .g-card-info { opacity:1; transform:translateY(0); } .g-hint { display:none; } /* Services */ #services { padding:72px 20px; } .sv-grid { grid-template-columns:1fr; gap:10px; margin-top:40px; } .sv-card { padding:32px 24px; } .sv-card h3 { font-size:20px; } .sv-num { margin-bottom:24px; } .sv-line { margin-bottom:24px; } /* Fleet ticker */ .fleet-item { font-size:13px; padding:0 20px; } /* Process */ #process { padding:72px 20px; } .process-grid { grid-template-columns:1fr 1fr; margin-top:48px; } .process-grid::before { display:none; } .p-step { padding:0 12px 40px; } .p-num { font-size:38px; } .p-step h4 { font-size:17px; } .p-step p { font-size:11px; } /* Testimonials */ #testimonials { padding:72px 20px; } .t-slide { grid-template-columns:1fr; gap:28px; } .t-quote { font-size:clamp(17px,5.5vw,24px); } .t-quote::before { font-size:64px; margin-bottom:12px; } .t-meta { padding:24px; border-left-width:2px; } /* CTA */ #cta { height:auto; min-height:500px; padding:90px 20px; } .cta-body .s-h2 { font-size:clamp(34px,10vw,56px); } .cta-body .hero-btns { flex-direction:column; align-items:center; } .cta-btns { flex-direction:column; align-items:center; } /* Footer */ footer { padding:56px 20px; } .ft-grid { grid-template-columns:1fr 1fr; gap:32px; margin-bottom:36px; } .ft-brand { grid-column:1/-1; } .ft-brand a.logo { text-decoration:none; } .logo { font-size:20px; } .ft-bottom { flex-direction:column; gap:10px; text-align:center; } .ft-bottom p { font-size:9px; } } /* ═══════════════════════════════════════════ 26. RESPONSIVE — Small Mobile ≤ 480px ═══════════════════════════════════════════ */ @media (max-width: 480px) { nav { padding:0 16px; } #intro, #services, #process, #testimonials, #faq { padding:60px 16px; } #pricing { padding:48px 0 8px; } .pricing-intro { padding:0 24px; margin-bottom:48px; } .pricing-grid { display:flex; flex-direction:row; overflow-x:auto; overflow-y:visible; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; scroll-snap-type:x mandatory; scroll-behavior:smooth; gap:14px; padding:20px 10vw 24px; grid-template-columns:unset; } .pricing-grid::-webkit-scrollbar { display:none; } .pr-card { flex-shrink:0; width:80vw; min-height:440px; padding:44px 32px 40px; scroll-snap-align:center; } .pr-desc { font-size:clamp(19px,5vw,24px); } footer { padding:48px 16px; } .intro-grid { gap:32px; } .intro-img-wrap { aspect-ratio:4/3; max-height:none; } .intro-stats { grid-template-columns:1fr 1fr; } .istat-n { font-size:30px; } .ft-grid { grid-template-columns:1fr; gap:28px; } .ft-brand { grid-column:auto; } .process-grid { grid-template-columns:1fr; } .p-step { padding:0 0 32px; text-align:left; } .p-dot { margin:20px 0 28px; } .g-card:nth-child(1), .g-card:nth-child(2), .g-card:nth-child(3), .g-card:nth-child(4) { width:78vw; max-width:260px; height:320px; margin-top:0; } .hero-h1 { font-size:clamp(36px,14vw,56px); } .btn-d, .btn-o { width:100%; } .hero-btns { width:100%; padding:0 4px; } } /* App promo (CTA) */ .app-promo { margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:16px; } .app-promo-label { font-size:9px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:rgba(237,230,216,0.6); } .app-badges { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; padding-left:40px; } .app-badges a { display:inline-flex; align-items:center; justify-content:center; height:48px; transition:transform .25s, opacity .25s; opacity:.9; filter:grayscale(100%) sepia(70%) hue-rotate(-12deg) saturate(1.3) brightness(0.95); } .app-badges a:hover { transform:translateY(-2px); opacity:1; } .app-badges img { height:48px; width:auto; display:block; } .app-badges a:last-child img { height:72px; } @media (max-width:768px) { .app-badges { padding-left:0; flex-direction:column; gap:8px; } }