/* ===================================================================== ParkScope — shared web design system Derived from the iOS app: ocean-blue brand, sun-orange accent, cyan→blue→purple wordmark, rounded type, glassmorphic cards. Theming via [data-theme="light"|"dark"] on . ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap'); :root { /* Brand */ --brand-cyan: #14B6D6; --brand-blue: #2E6FE0; --brand-deep: #0C4FA8; --brand-purple: #8A5CF0; --sun: #FF9F1C; --sun-deep: #F58A00; /* Wordmark / hero gradient */ --grad-brand: linear-gradient(100deg, #14B6D6 0%, #2E6FE0 48%, #8A5CF0 100%); --grad-ocean: linear-gradient(160deg, #2E6FE0 0%, #0C4FA8 100%); --grad-sun: linear-gradient(150deg, #FFC24B 0%, #FF9F1C 55%, #F58A00 100%); /* Status (matches app semantics) */ --good: #1FB257; --good-2: #34C759; --amber: #EAB000; --busy: #FF7A1A; --closed: #FF3B30; --fav: #FF4D6D; /* Radii */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; /* Type */ --font: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --maxw: 1200px; } /* ---------- Light theme (default) ---------- */ :root, [data-theme="light"] { --bg-0: #EAF3F7; --bg-1: #DCEBF4; --bg-page: radial-gradient(120% 80% at 50% -10%, #F4FAFC 0%, #E5F0F6 45%, #DBEAF3 100%); --ink: #0E1A2B; --ink-2: #4D6072; --ink-3: #8497A8; --hairline: rgba(14,26,43,.10); --card: rgba(255,255,255,.72); --card-solid: #FFFFFF; --card-brd: rgba(255,255,255,.9); --card-shadow: 0 1px 2px rgba(13,40,80,.05), 0 18px 40px -22px rgba(13,40,80,.28); --chip: rgba(255,255,255,.7); --chip-ink: #33485C; --inset: rgba(13,40,80,.05); /* tinted glass card backings (per-section, like the app) */ --tint-cream: linear-gradient(155deg, rgba(255,247,224,.92), rgba(255,255,255,.6)); --tint-peach: linear-gradient(155deg, rgba(255,232,214,.92), rgba(255,255,255,.6)); --tint-mint: linear-gradient(155deg, rgba(218,245,228,.92), rgba(255,255,255,.6)); --tint-sky: linear-gradient(155deg, rgba(216,238,250,.92), rgba(255,255,255,.6)); --tint-lav: linear-gradient(155deg, rgba(231,228,251,.92), rgba(255,255,255,.6)); } /* ---------- Dark theme ---------- */ [data-theme="dark"] { --bg-0: #070B14; --bg-1: #0B1322; --bg-page: radial-gradient(120% 80% at 50% -10%, #11203A 0%, #0A1120 50%, #060A12 100%); --ink: #EAF2FB; --ink-2: #9DB0C6; --ink-3: #647A93; --hairline: rgba(255,255,255,.10); --card: rgba(22,33,52,.62); --card-solid: #131D30; --card-brd: rgba(255,255,255,.08); --card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 50px -26px rgba(0,0,0,.8); --chip: rgba(255,255,255,.08); --chip-ink: #C2D2E4; --inset: rgba(255,255,255,.05); --tint-cream: linear-gradient(155deg, rgba(60,52,28,.6), rgba(22,33,52,.4)); --tint-peach: linear-gradient(155deg, rgba(66,40,28,.6), rgba(22,33,52,.4)); --tint-mint: linear-gradient(155deg, rgba(26,56,40,.6), rgba(22,33,52,.4)); --tint-sky: linear-gradient(155deg, rgba(24,46,72,.6), rgba(22,33,52,.4)); --tint-lav: linear-gradient(155deg, rgba(44,38,72,.6), rgba(22,33,52,.4)); } /* ===================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg-page); background-attachment: fixed; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; transition: background .5s var(--ease), color .35s var(--ease); } h1,h2,h3,h4 { margin: 0; line-height: 1.05; letter-spacing: -.02em; font-weight: 800; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- Brand wordmark ---------- */ .wordmark { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.03em; } .wordmark .mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 4px 12px -3px rgba(12,79,168,.5); object-fit: cover; flex: none; } .wordmark .txt { font-size: 22px; } .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .pro-pill { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); background: var(--grad-brand); color: #fff; align-self: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; padding: 14px 24px; border-radius: var(--r-pill); transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--grad-ocean); color: #fff; box-shadow: 0 10px 26px -10px rgba(46,111,224,.85), inset 0 1px 0 rgba(255,255,255,.25); } .btn-primary:hover { box-shadow: 0 16px 34px -10px rgba(46,111,224,.95), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-2px); } .btn-cyan { background: linear-gradient(150deg, #1ECBE6, #14B6D6 60%, #1191C6); color: #fff; box-shadow: 0 10px 26px -10px rgba(20,182,214,.85), inset 0 1px 0 rgba(255,255,255,.3); } .btn-cyan:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(20,182,214,.95), inset 0 1px 0 rgba(255,255,255,.3); } .btn-ghost { background: var(--chip); color: var(--ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hairline); } .btn-ghost:hover { transform: translateY(-2px); background: var(--card); } /* App Store button */ .appstore { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 18px; border-radius: 16px; background: #0E1A2B; color: #fff; box-shadow: 0 12px 30px -12px rgba(14,26,43,.6); transition: transform .18s var(--ease), box-shadow .25s; } [data-theme="dark"] .appstore { background: #fff; color: #0E1A2B; } .appstore:hover { transform: translateY(-2px); } .appstore svg { width: 26px; height: 26px; flex: none; } .appstore .small { font-size: 11px; font-weight: 600; opacity: .8; letter-spacing: .02em; line-height: 1; white-space: nowrap; } .appstore .big { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; } /* ---------- Cards & glass ---------- */ .card { background: var(--card); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--card-brd); border-radius: var(--r-lg); box-shadow: var(--card-shadow); } .tint-cream { background: var(--tint-cream); } .tint-peach { background: var(--tint-peach); } .tint-mint { background: var(--tint-mint); } .tint-sky { background: var(--tint-sky); } .tint-lav { background: var(--tint-lav); } /* eyebrow / section label (uppercase tracked, like app section heads) */ .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-blue); } [data-theme="dark"] .eyebrow { color: var(--brand-cyan); } .chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 15px; border-radius: var(--r-pill); background: var(--chip); color: var(--chip-ink); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px var(--hairline); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* status text helpers */ .s-good { color: var(--good); } .s-amber { color: var(--amber); } .s-busy { color: var(--busy); } .s-closed { color: var(--closed); } /* ---------- iPhone frame ---------- */ .device { position: relative; width: var(--dev-w, 300px); aspect-ratio: 1320 / 2868; border-radius: calc(var(--dev-w, 300px) * .145); padding: calc(var(--dev-w, 300px) * .032); background: linear-gradient(155deg, #2b3442, #0d1117 55%, #20262f); box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 40px 80px -28px rgba(10,30,60,.55), inset 0 0 0 2px rgba(255,255,255,.06); } [data-theme="dark"] .device { box-shadow: 0 2px 4px rgba(0,0,0,.6), 0 40px 90px -28px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.06); } .device > .screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--dev-w, 300px) * .115); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); } .device > .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* floating glass stat used over hero */ .float-stat { position: absolute; background: var(--card); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--card-brd); border-radius: var(--r-md); box-shadow: var(--card-shadow); padding: 14px 16px; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; transition: background .3s var(--ease), box-shadow .3s; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav.scrolled { background: var(--card); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 1px 0 var(--hairline); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-weight: 700; font-size: 15px; color: var(--ink-2); transition: color .2s; } .nav-links a:hover { color: var(--ink); } /* theme toggle */ .theme-toggle { width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--chip); box-shadow: inset 0 0 0 1px var(--hairline); position: relative; flex: none; transition: background .3s; } .theme-toggle .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-sun); box-shadow: 0 2px 6px rgba(0,0,0,.25); display: grid; place-items: center; font-size: 13px; transition: transform .35s var(--ease), background .3s; } [data-theme="dark"] .theme-toggle .knob { transform: translateX(22px); background: linear-gradient(150deg,#44557a,#1d2740); } /* ---------- section rhythm ---------- */ section { position: relative; } .section-pad { padding: 96px 0; } .center { text-align: center; } .h-eyebrow { margin-bottom: 14px; } .section-title { font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; } .section-sub { margin-top: 16px; font-size: 18px; color: var(--ink-2); font-weight: 500; max-width: 620px; } .center .section-sub { margin-left: auto; margin-right: auto; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* footer */ .footer { padding: 64px 0 40px; border-top: 1px solid var(--hairline); } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; } .footer h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 16px; font-weight: 800; } .footer a { display: block; color: var(--ink-2); font-weight: 600; font-size: 15px; padding: 6px 0; transition: color .2s; } .footer a:hover { color: var(--ink); } /* ===== Shared sub-page helpers (status / support / privacy / thanks / help) ===== */ .kicker { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .seg { display: inline-flex; background: var(--chip); border-radius: var(--r-pill); padding: 4px; gap: 2px; box-shadow: inset 0 0 0 1px var(--hairline); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .seg a { padding: 9px 17px; border-radius: var(--r-pill); font-weight: 800; font-size: 14.5px; color: var(--ink-2); transition: color .2s, background .2s; white-space: nowrap; } .seg a:hover { color: var(--ink); } .seg a.active { background: var(--card-solid); color: var(--ink); box-shadow: 0 2px 8px rgba(13,40,80,.12); } .soft { background: var(--inset); border: 1px solid var(--hairline); border-radius: var(--r-md); } .glass { background: var(--card); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--card-brd); border-radius: var(--r-lg); box-shadow: var(--card-shadow); } .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); font-weight: 800; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--hairline); } .status-pill .d { width: 8px; height: 8px; border-radius: 50%; } .field { display: block; } .field label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 7px; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--hairline); background: var(--card-solid); color: var(--ink); border-radius: var(--r-sm); padding: 13px 15px; font-family: inherit; font-weight: 600; font-size: 15.5px; outline: none; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(46,111,224,.12); } .field textarea { resize: vertical; min-height: 130px; line-height: 1.5; } @media (max-width: 860px) { .nav-links { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .section-pad { padding: 68px 0; } .seg { flex-wrap: wrap; justify-content: center; } }