/* ============================================================ /humsafr — launch site Theme: "Humsafr Night" (deep aubergine + emerald) Font: Plus Jakarta Sans + Noto Nastaliq Urdu ============================================================ */ /* ---- Theme tokens (default: Humsafr Night) ---- */ :root { --bg: #1A1030; --bg2: #0E0820; --surface: #251A3A; --surface-muted: #2F2348; --surface-strong: #3B2C58; --border: #382850; --border-strong: #5C4480; --text: #F8F4FF; --text-sec: #C6BBDA; --text-ter: #8E80AA; --accent: #5BE49B; --accent-soft: rgba(91, 228, 155, 0.14); --accent-text: #B6F5D2; --accent-ink: #04261A; --danger: #FF6B9A; --danger-soft: rgba(255, 107, 154, 0.16); --women: #E59CFF; --women-soft: rgba(229, 156, 255, 0.16); --women-text: #F4D9FF; --marigold: #E89B2C; --hero-bg: linear-gradient(155deg, #2A1A55 0%, #1A1030 60%, #5BE49B 220%); --shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(91, 228, 155, 0.18); --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.35); --glass: rgba(37, 26, 58, 0.72); --maxw: 1200px; --nav-h: 72px; --font: 'Plus Jakarta Sans', system-ui, sans-serif; --font-ur: 'Noto Nastaliq Urdu', serif; } /* ---- Alternate theme directions (set on ) ---- */ html[data-theme="karachi"] { --bg: #06101C; --bg2: #03101C; --surface: #0C1A2A; --surface-muted: #0F1F32; --surface-strong: #142944; --border: #1D3552; --border-strong: #2B5476; --text: #F6FBFF; --text-sec: #B3CDE6; --text-ter: #6F8FB0; --accent: #63D7FF; --accent-soft: rgba(99, 215, 255, 0.16); --accent-text: #C9F0FF; --accent-ink: #021824; --danger: #FF6868; --women: #E59CFF; --women-soft: rgba(229,156,255,0.16); --women-text: #F4D9FF; --hero-bg: linear-gradient(160deg, #0C2848 0%, #143A6B 50%, #1F5DA0 130%); --glass: rgba(12, 26, 42, 0.7); --shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(99,215,255,0.18); } html[data-theme="minar"] { --bg: #F4F2EB; --bg2: #E8E5D8; --surface: #FFFFFF; --surface-muted: #F4F2EB; --surface-strong: #EAE6D6; --border: #E2DDCB; --border-strong: #BAB39C; --text: #0A1612; --text-sec: #3F4845; --text-ter: #7E847F; --accent: #0F8B4F; --accent-soft: #D8F0E1; --accent-text: #0A5A33; --accent-ink: #FFFFFF; --danger: #B91C1C; --women: #7C2BB0; --women-soft: #EFDCFB; --women-text: #4D1573; --marigold: #C9521C; --hero-bg: linear-gradient(155deg, #114E32 0%, #0F8B4F 100%); --glass: rgba(255, 255, 255, 0.82); --shadow: 0 18px 50px rgba(10,40,20,0.16), 0 0 0 0.5px rgba(0,0,0,0.05); --shadow-soft: 0 4px 18px rgba(10,40,20,0.08); } html[data-theme="phulkari"] { --bg: #F4E9D3; --bg2: #EAD49A; --surface: #FDF7E6; --surface-muted: #EFE0BD; --surface-strong: #E6CF94; --border: #D7BD8A; --border-strong: #A88752; --text: #2A1A3F; --text-sec: #5C3A52; --text-ter: #8C6D7D; --accent: #C2185B; --accent-soft: #FBDCE8; --accent-text: #7A0E36; --accent-ink: #FFF8E6; --danger: #C03B2A; --women: #7A2B8E; --women-soft: #F1DAEF; --women-text: #4D1656; --marigold: #E89B2C; --hero-bg: linear-gradient(155deg, #0E5B6B 0%, #1E8554 70%, #E89B2C 140%); --glass: rgba(253, 247, 230, 0.84); --shadow: 0 18px 50px rgba(58,20,40,0.16), 0 0 0 0.5px rgba(58,20,40,0.06); --shadow-soft: 0 4px 18px rgba(58,20,40,0.09); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg2); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---- Layout ---- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } section { position: relative; } .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); } .urdu { font-family: var(--font-ur); direction: rtl; line-height: 2; } /* ---- Brand wordmark ---- */ .logo { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 900; letter-spacing: -0.06em; color: var(--text); line-height: 0.9; white-space: nowrap; } .logo .slash { color: var(--accent); } .logo .caret { display: inline-block; width: 0.1em; height: 0.82em; background: var(--accent); margin-left: 0.06em; border-radius: 1px; transform: translateY(0.04em); animation: caretBlink 1s steps(2) infinite; } @keyframes caretBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.1px; transition: transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s, background 0.2s; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px -8px var(--accent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -8px var(--accent); } .btn-primary .pip { width: 34px; height: 34px; border-radius: 17px; background: var(--accent-ink); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-right: -8px; transition: transform 0.2s; } .btn-primary:hover .pip { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface); border-color: var(--accent); } /* ---- Pills / chips ---- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-sec); } .chip .ic { color: var(--accent); display: flex; } .chip.women { background: var(--women-soft); border-color: transparent; color: var(--women-text); } .chip.women .ic { color: var(--women); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--border); } .nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; } .nav .logo { font-size: 23px; } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-sec); transition: color 0.18s, background 0.18s; } .nav-links a:hover { color: var(--text); background: var(--surface); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-ter); } .nav-status .live { width: 7px; height: 7px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: livePulse 2s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(91,228,155,0.5); } 70% { box-shadow: 0 0 0 8px rgba(91,228,155,0); } 100% { box-shadow: 0 0 0 0 rgba(91,228,155,0); } } .nav-burger { display: none; background: none; border: 0; color: var(--text); width: 42px; height: 42px; } @media (max-width: 900px) { .nav-links, .nav-status { display: none; } .nav-burger { display: flex; align-items: center; justify-content: center; margin-left: auto; } } /* mobile menu */ .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; background: var(--bg2); display: none; flex-direction: column; padding: 24px 28px; gap: 4px; } .mobile-menu.open { display: flex; } .mobile-menu a { padding: 16px 0; font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--border); } .mobile-menu .btn { margin-top: 20px; } /* ============================================================ HERO ============================================================ */ .hero { padding: calc(var(--nav-h) + 70px) 0 90px; position: relative; overflow: hidden; } .hero-bg-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%); } .hero-glow { position: absolute; width: 760px; height: 760px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(91,228,155,0.18) 0%, transparent 65%); pointer-events: none; animation: floatGlow 8s ease-in-out infinite; } @keyframes floatGlow { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(20px); } } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } .hero-copy { position: relative; z-index: 2; } .hero h1 { font-size: clamp(40px, 5.6vw, 70px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; margin: 22px 0 0; text-wrap: balance; } .hero h1 .ac { color: var(--accent); } .hero h1 .pink { color: var(--danger); } .hero-sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-sec); font-weight: 500; margin-top: 22px; max-width: 540px; line-height: 1.55; text-wrap: pretty; } .hero-sub b { color: var(--text); font-weight: 700; } /* waitlist form */ .waitlist { margin-top: 30px; max-width: 480px; } .waitlist-form { display: flex; gap: 8px; padding: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); transition: border-color 0.2s, box-shadow 0.2s; } .waitlist-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .waitlist-form input { flex: 1; border: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; padding: 0 16px; outline: none; min-width: 0; } .waitlist-form input::placeholder { color: var(--text-ter); font-weight: 500; } .waitlist-form .btn { height: 46px; flex-shrink: 0; } .waitlist-meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13.5px; color: var(--text-ter); font-weight: 600; } .avatar-stack { display: flex; } .avatar-stack span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg2); margin-left: -9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; } .avatar-stack span:first-child { margin-left: 0; } .waitlist-meta b { color: var(--accent); } .waitlist-success { display: none; align-items: center; gap: 11px; padding: 8px 2px; color: var(--text-sec); font-size: 14.5px; font-weight: 600; } .waitlist-success.show { display: flex; animation: rise .4s cubic-bezier(.2,.7,.3,1) both; } .waitlist-success .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .waitlist-success .tick svg { width: 14px; height: 14px; } .waitlist-success .pos b { color: var(--text); font-weight: 800; } .waitlist-error { margin-top: 12px; color: var(--danger); font-size: 14px; font-weight: 600; } .waitlist-form .btn:disabled { opacity: 0.75; cursor: wait; transform: none; } .hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; } /* phone mockup */ .hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; } .phone { position: relative; width: 320px; aspect-ratio: 320 / 660; flex-shrink: 0; background: #05060c; border-radius: 46px; padding: 11px; box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(255,255,255,0.04); } .phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 116px; height: 28px; background: #05060c; border-radius: 16px; z-index: 5; } .phone-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; position: relative; background: var(--bg); } .phone-float { position: absolute; z-index: 6; padding: 12px 14px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: floatY 4s ease-in-out infinite; } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .phone-float .ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .phone-float .ttl { font-size: 13px; font-weight: 800; color: var(--text); } .phone-float .sub { font-size: 11px; font-weight: 600; color: var(--text-ter); } .phone-float.tl { top: 56px; left: -56px; animation-delay: 0s; } .phone-float.br { bottom: 80px; right: -54px; animation-delay: 1.5s; } /* ============================================================ APP SCREEN (CSS-built, reused in phone frames) ============================================================ */ .scr { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 13px; } .scr-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 6px; font-size: 12px; font-weight: 800; color: var(--text); } .scr-pad { padding: 8px 18px 18px; flex: 1; overflow: hidden; } .scr-greet { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--text-ter); text-transform: uppercase; } .scr-h { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; margin-top: 4px; } .scr-search { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 15px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-ter); font-weight: 600; font-size: 13px; } .scr-label { font-size: 11px; font-weight: 800; color: var(--text-ter); text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 10px; } .scr-card { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); padding: 14px; } .scr-route { display: flex; align-items: center; gap: 12px; } .scr-driver { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--marigold)); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--accent-ink); flex-shrink: 0; } .scr-line { display: flex; flex-direction: column; gap: 2px; } .scr-name { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 5px; } .scr-vbadge { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; } .scr-meta { font-size: 11px; color: var(--text-ter); font-weight: 600; } .scr-corridor { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 12px; font-weight: 700; } .scr-dotline { display: flex; flex-direction: column; align-items: center; gap: 3px; } .scr-dotline i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); } .scr-dotline i.fill { background: var(--accent); } .scr-dotline span { width: 2px; height: 14px; background: var(--border-strong); } .scr-fare { margin-left: auto; text-align: right; } .scr-fare b { font-size: 16px; font-weight: 900; } .scr-fare small { font-size: 10px; color: var(--text-ter); display: block; font-weight: 700; } .scr-toggle { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .scr-toggle .sw { width: 38px; height: 22px; border-radius: 11px; background: var(--women); position: relative; flex-shrink: 0; } .scr-toggle .sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; } .scr-toggle .t { font-size: 12.5px; font-weight: 800; color: var(--text); } .scr-toggle .s { font-size: 10.5px; font-weight: 600; color: var(--text-ter); } .scr-nav { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 0 16px; border-top: 1px solid var(--border); } .scr-nav i { width: 22px; height: 22px; border-radius: 7px; background: var(--surface-strong); } .scr-nav i.on { background: var(--accent); } /* ============================================================ SECTION HEADERS ============================================================ */ .sec { padding: 90px 0; } .sec-head { max-width: 720px; } .sec-head.center { margin: 0 auto; text-align: center; } .sec-head h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin-top: 16px; text-wrap: balance; } .sec-head h2 .ac { color: var(--accent); } .sec-head p { font-size: 17px; color: var(--text-sec); font-weight: 500; margin-top: 16px; line-height: 1.55; text-wrap: pretty; } /* divider grid bg helper */ .tint { background: var(--bg); } /* ---- Trust strip ---- */ .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); } .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .trust-item { padding: 36px 24px; text-align: center; border-right: 1px solid var(--border); } .trust-item:last-child { border-right: 0; } .trust-item .n { font-size: clamp(30px, 3.4vw, 42px); font-weight: 900; letter-spacing: -1px; color: var(--text); } .trust-item .n .ac { color: var(--accent); } .trust-item .l { font-size: 13px; font-weight: 700; color: var(--text-ter); margin-top: 4px; } @media (max-width: 720px) { .trust .wrap { grid-template-columns: repeat(2, 1fr); } .trust-item:nth-child(2) { border-right: 0; } .trust-item:nth-child(1), .trust-item:nth-child(2) { border-bottom: 1px solid var(--border); } } /* ---- How it works ---- */ .tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); margin-top: 28px; } .tabs button { height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-sec); font-weight: 800; font-size: 14px; transition: all 0.2s; } .tabs button.on { background: var(--accent); color: var(--accent-ink); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .step { position: relative; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); transition: transform 0.25s, border-color 0.25s; } .step:hover { transform: translateY(-4px); border-color: var(--border-strong); } .step .num { font-size: 13px; font-weight: 900; color: var(--accent-ink); background: var(--accent); width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .step .ico { color: var(--accent); margin: 18px 0 14px; } .step h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; } .step p { font-size: 14.5px; color: var(--text-sec); font-weight: 500; margin-top: 8px; line-height: 1.5; } .step .roman { font-size: 13px; color: var(--text-ter); font-weight: 600; margin-top: 10px; font-style: italic; } /* ---- Features bento ---- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 48px; } .feat { border-radius: 24px; padding: 28px; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; } .feat:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); } .feat.lg { grid-column: span 3; } .feat.md { grid-column: span 2; } .feat.sm { grid-column: span 2; } .feat.full { grid-column: span 6; flex-direction: row; align-items: center; gap: 28px; } .feat.full .ico { margin-bottom: 0; flex-shrink: 0; } .feat.full .full-body { flex: 1; } .feat.full .full-body h3 { font-size: 22px; } .feat.full .tags { margin-top: 0; padding-top: 0; flex-shrink: 0; max-width: 320px; justify-content: flex-end; } .feat .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .feat.women-feat .ico { background: var(--women-soft); color: var(--women); } .feat.women-feat { border-color: color-mix(in srgb, var(--women) 35%, var(--border)); } .feat h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; } .feat.women-feat h3 .ac { color: var(--women); } .feat p { font-size: 14.5px; color: var(--text-sec); font-weight: 500; margin-top: 10px; line-height: 1.55; } .feat .deco { position: absolute; right: -24px; bottom: -24px; opacity: 0.08; } .feat .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; } .feat .tags span { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--surface-strong); color: var(--text-sec); } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .feat.lg, .feat.md, .feat.sm, .feat.full { grid-column: span 1; } .feat.full { flex-direction: column; align-items: flex-start; gap: 0; } .feat.full .ico { margin-bottom: 18px; } .feat.full .tags { margin-top: 18px; padding-top: 18px; justify-content: flex-start; max-width: none; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } } /* ---- Safety section ---- */ .safety { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .safety .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; } .safety-list { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; } .safety-row { display: flex; gap: 16px; padding: 18px; border-radius: 18px; transition: background 0.2s; } .safety-row:hover { background: var(--surface); } .safety-row .ico { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .safety-row.danger .ico { background: var(--danger-soft); color: var(--danger); } .safety-row h4 { font-size: 17px; font-weight: 800; } .safety-row p { font-size: 14px; color: var(--text-sec); font-weight: 500; margin-top: 4px; line-height: 1.45; } .safety-visual { display: flex; justify-content: center; } /* ---- Screenshot gallery ---- */ .gallery { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 52px; perspective: 1600px; } .gallery .phone { width: 268px; } .gallery .phone.tilt-l { transform: rotateY(14deg) translateY(14px); } .gallery .phone.tilt-r { transform: rotateY(-14deg) translateY(14px); } .gallery .phone:hover { transform: none; transition: transform 0.4s; z-index: 3; } .gallery .phone { transition: transform 0.4s; } @media (max-width: 820px) { .gallery .phone.tilt-l, .gallery .phone.tilt-r { transform: none; } } /* ---- Pricing / fares ---- */ .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 20px; margin-top: 48px; align-items: stretch; } .price-card { border-radius: 24px; padding: 30px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; } .price-card.feature { background: var(--hero-bg); border-color: transparent; box-shadow: var(--shadow); } .price-card .tag { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .price-card.feature .tag { color: var(--accent-ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; align-self: flex-start; } .price-card h3 { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; margin-top: 14px; } .price-card .big { font-size: 46px; font-weight: 900; letter-spacing: -2px; margin-top: 10px; } .price-card .big .ac { color: var(--accent); } .price-card .big small { font-size: 15px; font-weight: 700; color: var(--text-ter); letter-spacing: 0; } .price-card p { font-size: 14px; color: var(--text-sec); font-weight: 500; margin-top: 10px; line-height: 1.5; } .price-card ul { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 11px; } .price-card li { display: flex; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-sec); align-items: flex-start; } .price-card li .ck { color: var(--accent); flex-shrink: 0; margin-top: 2px; } /* transparent fare breakdown */ .fare-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.06); border-radius: 16px; padding: 16px; } .fare-rows .fr { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding: 7px 0; color: rgba(255,255,255,0.85); } .fare-rows .fr.disc { color: #5BE49B; } .fare-rows .fr.total { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 6px; padding-top: 12px; font-size: 18px; font-weight: 900; color: #fff; } @media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } } /* ---- FAQ ---- */ .faq-list { max-width: 820px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; } .faq-item { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s; } .faq-item.open { border-color: var(--accent); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 22px 24px; display: flex; align-items: center; gap: 16px; color: var(--text); font-size: 17px; font-weight: 800; } .faq-q .pm { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-strong); display: flex; align-items: center; justify-content: center; transition: transform 0.25s, background 0.2s; color: var(--accent); } .faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-a-inner { padding: 0 24px 22px; font-size: 15px; color: var(--text-sec); font-weight: 500; line-height: 1.6; } /* ---- About / mission ---- */ .about { background: var(--bg); border-top: 1px solid var(--border); } .mission { max-width: 840px; } .mission .big-quote { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.18; text-wrap: balance; } .mission .big-quote .ac { color: var(--accent); } .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; } .phase { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .phase .st { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; } .phase .st.done { background: var(--accent-soft); color: var(--accent); } .phase .st.now { background: var(--marigold); color: #2a1500; } .phase .st.next { background: var(--surface-strong); color: var(--text-ter); } .phase h4 { font-size: 16px; font-weight: 800; margin-top: 14px; } .phase p { font-size: 13px; color: var(--text-ter); font-weight: 500; margin-top: 6px; line-height: 1.45; } @media (max-width: 820px) { .roadmap { grid-template-columns: repeat(2, 1fr); } } /* ---- Final CTA ---- */ .final { padding: 30px 0 100px; } .final-card { border-radius: 36px; padding: 64px 48px; text-align: center; position: relative; overflow: hidden; background: var(--hero-bg); box-shadow: var(--shadow); } .final-card .watermark { position: absolute; right: -40px; bottom: -120px; font-size: 360px; font-weight: 900; color: #fff; opacity: 0.05; line-height: 1; letter-spacing: -20px; pointer-events: none; } .final-card h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; position: relative; z-index: 1; color: #fff; } .final-card .urdu { font-size: 22px; color: rgba(255,255,255,0.85); margin-top: 18px; position: relative; z-index: 1; } .final .waitlist { margin: 28px auto 0; } .final-card .waitlist-form { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); backdrop-filter: blur(8px); } .final-card .waitlist-form input { color: #fff; } .final-card .waitlist-form input::placeholder { color: rgba(255,255,255,0.6); } .final-card .waitlist-meta { justify-content: center; color: rgba(255,255,255,0.75); } /* ---- Footer ---- */ .footer { padding: 70px 0 40px; border-top: 1px solid var(--border); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .footer .logo { font-size: 28px; } .footer-brand p { font-size: 14px; color: var(--text-ter); font-weight: 500; margin-top: 16px; max-width: 280px; line-height: 1.55; } .footer-brand .urdu { font-size: 17px; color: var(--text-sec); margin-top: 14px; } .footer-col h5 { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-ter); margin-bottom: 16px; } .footer-col a { display: block; font-size: 14.5px; color: var(--text-sec); font-weight: 600; padding: 7px 0; transition: color 0.18s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 16px; } .footer-bottom p { font-size: 13px; color: var(--text-ter); font-weight: 600; } .footer-socials { display: flex; gap: 10px; } .footer-socials a { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-sec); transition: all 0.2s; } .footer-socials a:hover { color: var(--accent); border-color: var(--accent); } @media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } } /* ---- Marquee ---- */ .marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); padding: 18px 0; } .city-rotator { display: inline-block; } .city-rotator.flip { animation: cityFlip .3s cubic-bezier(.2,.7,.3,1); } @keyframes cityFlip { 0% { opacity: 0; transform: translateY(0.4em) scale(0.96); } 100% { opacity: 1; transform: none; } } .marquee-track { display: flex; gap: 40px; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; } .marquee-track span { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--text-ter); display: inline-flex; align-items: center; gap: 40px; } .marquee-track .star { color: var(--accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- Hero layout responsive ---- */ @media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; gap: 30px; } .hero-visual { order: -1; } .phone { width: 280px; } .phone-float.tl { left: 0; } .phone-float.br { right: 0; } .safety .wrap { grid-template-columns: 1fr; gap: 30px; } } /* ---- reveal animation ---- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(.2,.7,.3,1), transform 0.6s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---- Tweaks panel (custom) ---- */ #tweaks { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: none; } #tweaks.show { display: block; } .tweaks-card { width: 280px; border-radius: 20px; background: var(--glass); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border-strong); box-shadow: var(--shadow); padding: 18px; color: var(--text); } .tweaks-card h6 { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-ter); } .tweaks-group { margin-top: 14px; } .tweaks-group label { font-size: 12px; font-weight: 700; color: var(--text-sec); display: block; margin-bottom: 8px; } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 38px; height: 38px; border-radius: 11px; border: 2px solid transparent; cursor: pointer; position: relative; transition: transform 0.15s; } .swatch:hover { transform: scale(1.08); } .swatch.on { border-color: var(--text); } .seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .seg button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--text-sec); font-weight: 700; font-size: 12px; } .seg button.on { background: var(--accent); color: var(--accent-ink); }