/* Angered Carwash – website styles Tokens: primitives name a value, semantic tokens name a role. Components use only semantic tokens. Dark mode follows the system, and a saved choice on overrides it. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/plus-jakarta-sans-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; } :root { /* Neutral primitives. The only colour on the page is the hero, which uses the app's own intro colours (see .hero), plus the app's colours inside the phone. */ --ink: #1D1D1F; --gray-700: #3A3A3C; --gray-500: #6E6E73; --gray-200: #E8E8ED; --gray-100: #F5F5F7; --night-950: #0A0A0B; --night-900: #1C1C1E; --night-800: #2C2C2E; /* Semantic roles – light */ --color-bg: #FFFFFF; --color-surface: var(--gray-100); --color-surface-muted: var(--gray-200); --color-card: #FFFFFF; --color-text: var(--ink); --color-text-secondary: var(--gray-500); --color-border: rgb(0 0 0 / 0.1); --color-accent: var(--ink); --color-accent-hover: var(--gray-700); --color-on-accent: #FFFFFF; --color-accent-text: var(--ink); --color-focus: var(--ink); --color-image-outline: rgb(0 0 0 / 0.1); --ring-1: #D2D2D7; --ring-2: #DCDCE1; --ring-3: #E6E6EB; --ring-4: #EEEEF2; --ring-5: #FFFFFF; --shadow-float: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px -8px rgb(0 0 0 / 0.14), 0 32px 64px -24px rgb(0 0 0 / 0.16); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 28px -18px rgb(0 0 0 / 0.22); /* Type scale */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --text-display: clamp(2.875rem, 1.6rem + 5.4vw, 6.25rem); --text-title: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem); --text-heading: 1.25rem; --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); --text-body: 1.0625rem; --text-small: 0.9375rem; --text-caption: 0.8125rem; /* Space and shape */ --gutter: clamp(16px, 4vw, 40px); --section-space: clamp(80px, 11vw, 152px); --radius-xl: 40px; --radius-lg: 28px; --radius-md: 16px; --radius-sm: 10px; --radius-pill: 999px; --ease-out: cubic-bezier(0.2, 0, 0, 1); --header-height: 68px; color-scheme: light; } /* Semantic roles – dark. The same list twice: once for the system setting, once for an explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--night-950); --color-surface: var(--night-900); --color-surface-muted: var(--night-800); --color-card: var(--night-800); --color-text: #F5F5F7; --color-text-secondary: #A1A1A6; --color-border: rgb(255 255 255 / 0.12); --color-accent: #F5F5F7; --color-accent-hover: #FFFFFF; --color-on-accent: var(--ink); --color-accent-text: #F5F5F7; --color-focus: #F5F5F7; --color-image-outline: rgb(255 255 255 / 0.1); --ring-1: #48484A; --ring-2: #3F3F42; --ring-3: #353538; --ring-4: #2C2C2E; --ring-5: #242426; --shadow-float: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -12px rgb(0 0 0 / 0.55); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 28px -18px rgb(0 0 0 / 0.6); color-scheme: dark; } } :root[data-theme="dark"] { --color-bg: var(--night-950); --color-surface: var(--night-900); --color-surface-muted: var(--night-800); --color-card: var(--night-800); --color-text: #F5F5F7; --color-text-secondary: #A1A1A6; --color-border: rgb(255 255 255 / 0.12); --color-accent: #F5F5F7; --color-accent-hover: #FFFFFF; --color-on-accent: var(--ink); --color-accent-text: #F5F5F7; --color-focus: #F5F5F7; --color-image-outline: rgb(255 255 255 / 0.1); --ring-1: #48484A; --ring-2: #3F3F42; --ring-3: #353538; --ring-4: #2C2C2E; --ring-5: #242426; --shadow-float: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -12px rgb(0 0 0 / 0.55); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 28px -18px rgb(0 0 0 / 0.6); color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } h1, h2, h3, p, dl, dd, figure { margin: 0; } :where(ul[role="list"], ol) { list-style: none; margin: 0; padding: 0; } a { color: var(--color-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: from-font; } a:hover { text-decoration-thickness: 2px; } button { font: inherit; color: inherit; } main:focus { outline: none; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgb(127 127 127 / 0.28); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; } .skip-link:focus { top: 12px; } .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); } .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- Type helpers ---------- */ .eyebrow { font-size: var(--text-small); font-weight: 700; letter-spacing: 0.01em; color: var(--color-text-secondary); margin-block-end: 16px; } .eyebrow--accent { color: var(--color-text-secondary); } .section-title { font-size: var(--text-title); font-style: italic; font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } .section-lead { margin-block-start: 20px; max-width: 34em; font-size: var(--text-lead); line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; } .section { padding-block: var(--section-space); } .section-head { max-width: 760px; margin-block-end: clamp(40px, 6vw, 64px); } /* ---------- Buttons ---------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition-property: background-color, border-color, color, scale; transition-duration: 160ms; transition-timing-function: var(--ease-out); } .button:hover { text-decoration: none; } .button:active, .app-store-badge:active, .icon-button:active { scale: 0.96; } .button--small { min-height: 40px; padding: 8px 18px; font-size: var(--text-small); } .button--primary { background: var(--color-accent); color: var(--color-on-accent); } .button--primary:hover { background: var(--color-accent-hover); } .button--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .button--secondary:hover { background: var(--color-surface-muted); } .button--on-dark { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .button--on-dark:hover { background: var(--color-surface-muted); } .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; } .icon-button { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); cursor: pointer; transition-property: background-color, scale; transition-duration: 160ms; transition-timing-function: var(--ease-out); } @media (hover: hover) { .icon-button:hover { background: var(--color-surface-muted); } } /* App Store badge – black in both themes, as Apple's badge is. */ .store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-block-start: 36px; } .app-store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 22px 8px 18px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); transition-property: scale, background-color; transition-duration: 160ms; transition-timing-function: var(--ease-out); } .app-store-badge:hover { background: #1c1c1e; } .app-store-badge__logo { width: 26px; height: 26px; fill: currentColor; } .app-store-badge__text { display: flex; flex-direction: column; line-height: 1.1; } .app-store-badge__small { font-size: 0.75rem; font-weight: 500; } .app-store-badge__large { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; } .soon-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px; border-radius: 14px; border: 1px dashed color-mix(in oklab, var(--color-text) 30%, transparent); color: var(--color-text-secondary); font-weight: 600; white-space: nowrap; } .soon-badge__tag { margin-inline-start: 6px; padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-text) 9%, transparent); color: var(--color-text); font-size: var(--text-caption); font-weight: 700; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--color-bg) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-block-end: 1px solid transparent; transition: border-color 200ms var(--ease-out); } .site-header.is-scrolled { border-block-end-color: var(--color-border); } .site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--color-text); text-decoration: none; font-weight: 800; font-style: italic; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__icon { width: 36px; height: 36px; border-radius: 9px; outline: 1px solid var(--color-image-outline); outline-offset: -1px; } .site-nav { margin-inline-start: auto; } .site-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--text-small); font-weight: 600; text-decoration: none; transition: background-color 150ms var(--ease-out); } @media (hover: hover) { .site-nav a:hover { background: var(--color-surface-muted); } } .site-header__actions { display: flex; align-items: center; gap: 8px; } .nav-toggle { display: none; } .icon--sun, .icon--close { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon--moon { display: none; } :root:not([data-theme="light"]) .icon--sun { display: block; } } :root[data-theme="dark"] .icon--moon { display: none; } :root[data-theme="dark"] .icon--sun { display: block; } @media (max-width: 1020px) { .nav-toggle { display: inline-grid; } .site-header__cta { display: none; } .site-header__actions { margin-inline-start: auto; } .site-nav { position: absolute; inset-inline: 0; top: 100%; display: none; padding: 8px max(var(--gutter), env(safe-area-inset-left)) 24px; background: var(--color-bg); border-block-end: 1px solid var(--color-border); box-shadow: 0 24px 32px -24px rgb(0 0 0 / 0.2); } .site-nav.is-open { display: block; } .site-nav__list { flex-direction: column; gap: 0; } .site-nav a { display: flex; min-height: 52px; font-size: 1.125rem; border-radius: var(--radius-md); padding-inline: 12px; } .nav-toggle[aria-expanded="true"] .icon--menu { display: none; } .nav-toggle[aria-expanded="true"] .icon--close { display: block; } } /* ---------- Hero ---------- Three slides that mirror the app's introduction. The section colour, headline, lead and illustration change together; --slide-bg / --slide-ink are the app's own colours. */ .hero { --slide-bg: #48D7DA; --slide-ink: #00367F; --slide-ms: 5000ms; position: relative; margin-block-start: calc(-1 * var(--header-height)); padding-block: calc(var(--header-height) + clamp(40px, 7vw, 96px)) clamp(56px, 8vw, 112px); background-color: var(--slide-bg); background-image: radial-gradient(55% 60% at 82% 18%, rgb(255 255 255 / 0.42), transparent 70%), linear-gradient(180deg, transparent 35%, rgb(255 255 255 / 0.32)); border-end-start-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); overflow: hidden; transition: background-color 900ms var(--ease-out); } .hero[data-slide="2"] { --slide-bg: #4AB8F5; --slide-ink: #002E78; } .hero[data-slide="3"] { --slide-bg: #7973F0; --slide-ink: #081D70; } /* Dark: the same hue, deepened, so the page keeps its night look. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background-color: color-mix(in oklab, var(--slide-bg) 30%, var(--night-950)); background-image: radial-gradient(55% 60% at 82% 22%, color-mix(in oklab, var(--slide-bg) 35%, transparent), transparent 70%); --slide-ink: color-mix(in oklab, var(--slide-bg) 45%, #FFFFFF); } } :root[data-theme="dark"] .hero { background-color: color-mix(in oklab, var(--slide-bg) 30%, var(--night-950)); background-image: radial-gradient(55% 60% at 82% 22%, color-mix(in oklab, var(--slide-bg) 35%, transparent), transparent 70%); --slide-ink: color-mix(in oklab, var(--slide-bg) 45%, #FFFFFF); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .hero .eyebrow { color: var(--color-text); opacity: 0.8; } .hero__title { font-size: var(--text-display); font-style: italic; font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; color: var(--slide-ink); transition: color 900ms var(--ease-out); } .hero__title em { font-style: italic; } .hero__lead { margin-block-start: 28px; max-width: 30em; font-size: var(--text-lead); line-height: 1.5; color: var(--color-text); text-wrap: pretty; } .hero .soon-badge { border-color: color-mix(in oklab, var(--color-text) 35%, transparent); color: var(--color-text); } /* Slides share one grid cell, so the block keeps the height of the tallest and nothing below jumps. */ .hero-slides { display: grid; } .hero-slide { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 420ms; } .hero-slide.is-active { visibility: visible; transition-delay: 0s; } .hero-slide > * { opacity: 0; translate: 0 14px; transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out); } .hero-slide.is-active > * { opacity: 1; translate: 0 0; } .hero-slide.is-active > .hero__lead { transition-delay: 90ms; } .hero-slide.is-leaving > * { translate: 0 -10px; transition-duration: 280ms; } /* One progress bar: fills over a slide's time, then starts again for the next slide. */ .hero-progress { width: 72px; height: 6px; margin-block-start: 28px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-text) 18%, transparent); overflow: hidden; } .hero-progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-text); transform-origin: left center; scale: 0 1; } .hero.is-playing .hero-progress span { animation: hero-progress var(--slide-ms) linear both; } .hero.is-playing.is-held .hero-progress span { animation-play-state: paused; } .hero:not(.is-playing) .hero-progress { display: none; } @keyframes hero-progress { from { scale: 0 1; } to { scale: 1 1; } } .hero .store-row { margin-block-start: 28px; } .hero__visual { display: grid; justify-items: end; } .hero-art { display: grid; width: min(100%, 580px); margin-inline-end: -4%; } .hero-art__image { grid-area: 1 / 1; width: 100%; opacity: 0; scale: 0.97; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.12)); transition: opacity 700ms var(--ease-out), scale 900ms var(--ease-out); } .hero-art__image.is-active { opacity: 1; scale: 1; } @media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__visual { justify-items: center; } .hero-art { width: min(86%, 440px); margin-inline-end: 0; } } /* ---------- How it works ---------- */ .how__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(48px, 9vw, 136px); align-items: center; } .how__content .eyebrow { margin-block-end: 0; } .how__lead { margin-block: 12px 28px; } .video-frame { position: relative; width: min(100%, 340px); border-radius: var(--radius-lg); overflow: hidden; background: #EDEDEF; outline: 1px solid var(--color-image-outline); outline-offset: -1px; } .video-frame__video { width: 100%; aspect-ratio: 480 / 706; object-fit: cover; } .video-frame__caption { padding: 14px 16px; background: var(--color-surface); color: var(--color-text); font-size: var(--text-small); font-weight: 700; text-align: center; } .steps { counter-reset: none; } .step { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding-block: 28px; border-block-start: 1px solid var(--color-border); } .step:last-child { border-block-end: 1px solid var(--color-border); } .step__number { font-size: 3rem; font-weight: 800; font-style: italic; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-accent-text); font-variant-numeric: tabular-nums; } .step__title { font-size: 1.5rem; font-weight: 800; font-style: italic; letter-spacing: -0.015em; line-height: 1.2; } .step p { margin-block-start: 8px; color: var(--color-text-secondary); max-width: 34em; text-wrap: pretty; } @media (max-width: 860px) { .how__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .how__content { order: -1; } .video-frame { width: min(100%, 300px); } .step { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } .step__number { font-size: 2.25rem; } } /* ---------- Prices ---------- */ /* Its own surface, like the app section, so arriving at the prices reads as a new place. */ .prices { background: var(--color-surface); border-radius: var(--radius-xl); margin-inline: clamp(0px, 2vw, 24px); } @media (max-width: 900px) { .prices { margin-inline: 0; border-radius: 0; } } .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .price-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: var(--radius-lg); background: var(--color-card); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-card); } .price-card__name { font-size: 1.375rem; font-weight: 800; font-style: italic; letter-spacing: -0.01em; } .price-card__price { display: flex; align-items: flex-start; gap: 6px; margin-block: 28px 8px; font-variant-numeric: tabular-nums; } .price-card__amount { font-size: clamp(4rem, 3rem + 3vw, 5.75rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; } .price-card__unit { margin-block-start: 0.35em; font-size: 1.5rem; font-weight: 700; } .price-card__per { padding-block-end: 24px; margin-block-end: 24px; border-block-end: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--text-small); font-variant-numeric: tabular-nums; } .price-card .button { margin-block-start: auto; } .price-card--featured { box-shadow: inset 0 0 0 2px var(--color-text), var(--shadow-card); } .price-card--featured .button--on-dark { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; } .price-card--featured .button--on-dark:hover { background: var(--color-accent-hover); } .price-card__flag { position: absolute; top: 28px; inset-inline-end: 24px; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-bg); font-size: var(--text-caption); font-weight: 800; } .token-panel { position: relative; margin-block-start: 16px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); outline: 1px solid var(--color-border); outline-offset: -1px; } .token-panel__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; /* The render is tinted blue; take most of it out so it sits in the neutral panel. The coin keeps a hint of gold. */ filter: saturate(0.3); } .token-facts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; width: min(100%, 700px); padding: clamp(28px, 4vw, 48px); } .token-fact dt { font-weight: 800; font-style: italic; font-size: 1.125rem; } .token-fact dd { margin-block-start: 4px; color: var(--color-text-secondary); text-wrap: pretty; } @media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); } .price-card__price { margin-block-start: 20px; } .token-panel__image { position: relative; height: 200px; object-position: 88% 50%; } .token-facts { grid-template-columns: minmax(0, 1fr); } } /* ---------- 24/7 – the one playful section (retro arcs, now in soft greys) ---------- */ .allday { position: relative; isolation: isolate; overflow: hidden; margin-inline: clamp(0px, 2vw, 24px); border-radius: var(--radius-xl); --allday-bg: var(--color-surface); background: var(--allday-bg); color: var(--color-text); } .allday__arcs { position: absolute; z-index: -1; inset-inline-end: -16%; bottom: -70%; width: min(940px, 90vw); aspect-ratio: 1; display: grid; place-items: center; } /* Six stacked discs, outer to inner; each smaller disc covers the middle of the one behind it, so what shows is five rings around a hole in the panel colour. Each disc swells and settles a little after the one inside it, so a slow ripple travels outward, like water. */ .allday__arcs span { grid-area: 1 / 1; width: var(--size); aspect-ratio: 1; border-radius: 50%; background: var(--ring); animation: arc-ripple 7s ease-in-out infinite; animation-delay: var(--delay); will-change: transform; } .allday__arcs span:nth-child(1) { --size: 100%; --ring: var(--ring-1); --delay: 0s; } .allday__arcs span:nth-child(2) { --size: 82%; --ring: var(--ring-2); --delay: -0.5s; } .allday__arcs span:nth-child(3) { --size: 70%; --ring: var(--ring-3); --delay: -1s; } .allday__arcs span:nth-child(4) { --size: 58%; --ring: var(--ring-4); --delay: -1.5s; } .allday__arcs span:nth-child(5) { --size: 46%; --ring: var(--ring-5); --delay: -2s; } .allday__arcs span:nth-child(6) { --size: 38%; --ring: var(--allday-bg); --delay: -2.5s; } @keyframes arc-ripple { 0%, 100% { scale: 1; } 50% { scale: 1.06; } } /* Only moves while the panel is on screen (js/main.js), and never with reduced motion. */ .allday__arcs:not(.is-visible) span { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .allday__arcs span { animation: none; } } .allday__inner { padding-block: clamp(72px, 10vw, 136px); } .allday__big { font-size: clamp(5.5rem, 3rem + 13vw, 13rem); font-weight: 800; font-style: italic; line-height: 0.85; letter-spacing: -0.04em; color: var(--color-text); } /* The font's "/" is shorter than its digits and drops below the baseline, so the slash is drawn: exactly the digits' height (0.745em, measured), standing on the baseline, in the same colour. It leans 22°; skewing about its centre pushes each end out by 0.15em, which the margins absorb. */ .allday__slash { display: inline-block; width: 0.13em; height: 0.745em; margin-inline: 0.21em 0.22em; background: currentColor; transform: skewX(-22deg); } .allday__title { margin-block-start: 24px; max-width: 11em; font-size: var(--text-title); font-weight: 800; font-style: italic; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } .allday__text { margin-block-start: 20px; max-width: 24em; font-size: var(--text-lead); color: var(--color-text-secondary); text-wrap: pretty; } @media (max-width: 760px) { .allday { margin-inline: 0; border-radius: 0; } .allday__arcs { inset-inline-end: -50%; bottom: -74vw; width: 150vw; } .allday__inner { padding-block-end: 80vw; } } /* ---------- Place ---------- */ .place__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: start; } .facts { margin-block-start: 36px; border-block-start: 1px solid var(--color-border); } .fact { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding-block: 16px; border-block-end: 1px solid var(--color-border); } .fact dt { font-weight: 700; } .fact dd { color: var(--color-text-secondary); } .place__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .facility-photo { grid-column: 1 / -1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-muted); } .facility-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; outline: 1px solid var(--color-image-outline); outline-offset: -1px; border-radius: inherit; } .map-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #7CB342; } .map-figure img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .map-embed { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); outline: 1px solid var(--color-border); outline-offset: -1px; min-height: 100%; } /* The iframe is 72px taller than the box, so OSM's multi-line attribution bar falls outside it. */ .map-embed iframe { position: absolute; inset: 0 0 auto 0; display: block; width: 100%; height: calc(100% + 72px); border: 0; } .map-embed { min-height: 320px; } /* OpenStreetMap's licence needs a visible credit; it sits under the photos instead of on the map. */ .place__credit { grid-column: 1 / -1; justify-self: end; margin-top: -4px; color: var(--color-text-secondary); font-size: var(--text-caption); } .place__credit a { color: inherit; } @media (max-width: 900px) { .place__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .place__media { grid-template-columns: minmax(0, 1fr); } .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ---------- App ---------- */ .app { background: var(--color-surface); border-radius: var(--radius-xl); margin-inline: clamp(0px, 2vw, 24px); } .app__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 8vw, 112px); align-items: center; } .app__media { display: grid; place-items: center; } .phone { --phone-button: #2C3138; position: relative; width: min(100%, 272px); padding: 10px; border-radius: 46px; background: #0B0D10; box-shadow: var(--shadow-float), inset 0 0 0 1.5px #2A2F36; } /* Left edge: Action button, volume up, volume down. Right edge: side (power) button. Positions follow a current iPhone Pro, as fractions of the body height. */ .phone::before, .phone::after { content: ""; position: absolute; width: 4px; } .phone::before { inset-inline-start: -3px; top: 17%; height: 29%; border-radius: 3px 0 0 3px; background: linear-gradient(to bottom, var(--phone-button) 0 11%, transparent 11% 25%, var(--phone-button) 25% 58%, transparent 58% 67%, var(--phone-button) 67% 100%); } .phone::after { inset-inline-end: -3px; top: 26%; height: 13%; border-radius: 0 3px 3px 0; background: var(--phone-button); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { --phone-button: #4A515B; } } :root[data-theme="dark"] .phone { --phone-button: #4A515B; } .phone__screen { container-type: inline-size; border-radius: 36px; overflow: hidden; } .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-block-start: 40px; } .feature { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: start; } /* A plain brand dot, centred on the first line of the title (1.0625rem × 1.3 line-height). */ .feature__dot { width: 10px; height: 10px; margin-block-start: calc((1.0625rem * 1.3 - 10px) / 2 + 2px); border-radius: 50%; background: var(--color-accent-text); } .feature h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; padding-block-start: 2px; } .feature p { margin-block-start: 4px; color: var(--color-text-secondary); font-size: var(--text-small); text-wrap: pretty; } .languages { margin-block-start: 40px; padding-block-start: 28px; border-block-start: 1px solid var(--color-border); } .languages__title { font-size: var(--text-small); font-weight: 700; color: var(--color-text-secondary); } .languages__list { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; } .languages__list li { padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-surface-muted); font-weight: 700; font-size: 1rem; } .languages__list li[lang="ar"] { font-family: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif; } .app .store-row { margin-block-start: 32px; } @media (max-width: 900px) { .app { margin-inline: 0; border-radius: 0; } .app__grid { grid-template-columns: minmax(0, 1fr); } .app__media { order: 2; } .phone { width: min(72%, 260px); } } @media (max-width: 600px) { .features { grid-template-columns: minmax(0, 1fr); gap: 24px; } } /* ---------- FAQ ---------- */ .faq__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(40px, 7vw, 104px); align-items: start; } .faq__intro { position: sticky; top: calc(var(--header-height) + 32px); } .faq__list { border-block-start: 1px solid var(--color-border); } .faq-item { border-block-end: 1px solid var(--color-border); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 18px; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 700; line-height: 1.35; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-inline-end: 6px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; opacity: 0.6; transition: rotate 200ms var(--ease-out), translate 200ms var(--ease-out); } .faq-item[open] summary::after { rotate: -135deg; translate: 0 3px; } .faq-item summary:hover { color: var(--color-accent-text); } .faq-item__answer { padding-block-end: 24px; max-width: 40em; color: var(--color-text-secondary); } @media (max-width: 860px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__intro { position: static; } } /* ---------- Contact ---------- */ .contact { padding-block-start: 0; } .contact__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: clamp(32px, 6vw, 72px); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); } .contact__list { display: grid; align-content: center; gap: 4px; } .contact__list li { display: grid; gap: 2px; padding-block: 16px; border-block-end: 1px solid var(--color-border); } .contact__list li:last-child { border-block-end: 0; } .contact__label { font-size: var(--text-small); font-weight: 600; color: var(--color-text-secondary); } .contact__value { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 800; font-style: italic; letter-spacing: -0.015em; color: var(--color-text); overflow-wrap: anywhere; } a.contact__value { text-decoration: none; } a.contact__value:hover { text-decoration: underline; text-decoration-thickness: 2px; } @media (max-width: 860px) { .contact__panel { grid-template-columns: minmax(0, 1fr); } } /* ---------- Footer ---------- */ .site-footer { padding-block: 48px calc(48px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--color-border); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; } .site-footer__brand p { margin-block-start: 12px; color: var(--color-text-secondary); font-size: var(--text-small); } .site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 8px; } .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--color-text); font-weight: 600; font-size: var(--text-small); } .site-footer__copy { grid-column: 1 / -1; color: var(--color-text-secondary); font-size: var(--text-caption); } @media (max-width: 700px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } .site-footer__links { margin-inline-start: -8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media (forced-colors: active) { .price-card, .soon-badge, .hero-progress { border: 1px solid CanvasText; } } /* ---------- Ratings (hero) ---------- */ .ratings { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; } .rating { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; border-radius: 20px; background: rgb(255 255 255 / 0.72); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.25); transition: scale 160ms var(--ease-out), background-color 160ms var(--ease-out); } .rating:hover { text-decoration: none; background: rgb(255 255 255 / 0.88); } .rating:active { scale: 0.96; } .rating__logo { width: 44px; height: 44px; flex: none; } .rating__body { display: grid; gap: 1px; } .rating__source { font-size: var(--text-small); font-weight: 700; color: #515154; } .rating__line { display: flex; align-items: center; gap: 10px; } .rating__value { font-size: 1.625rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .rating__note { font-size: var(--text-caption); color: #515154; } .stars svg { width: 110px; height: 22px; fill: #F29D38; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rating { background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); } :root:not([data-theme="light"]) .rating__source, :root:not([data-theme="light"]) .rating__note { color: #C7C7CC; } } :root[data-theme="dark"] .rating { background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); } :root[data-theme="dark"] .rating__source, :root[data-theme="dark"] .rating__note { color: #C7C7CC; } /* ---------- Payment methods (prices) ---------- */ .pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; } .pay-methods li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: var(--radius-sm); background: #fff; color: #1C1C1E; font-size: var(--text-small); font-weight: 700; box-shadow: inset 0 0 0 1px rgb(10 31 58 / 0.12); } .pay-methods img { height: 24px; width: auto; } /* ---------- Footer Facebook link ---------- */ .footer-facebook { gap: 8px; } .footer-facebook__logo { width: 20px; height: 20px; } /* ---------- Live app screen inside the phone ---------- A copy of the app's Status tab. 1em = 10 iPhone points (the screen is 39.3em wide), so every size below is the app's own point value ÷ 10. Colours are the app's (theme/bay_colors.dart, theme/app_colors.dart). */ .app-ui { --app-bg: #F4F7FB; --app-surface: #FFFFFF; --app-text: #101828; --app-muted: rgb(16 24 40 / 0.5); --app-tabbar: rgb(255 255 255 / 0.86); --free-surface: #E7F8F0; --free-on: #05603A; --free-accent: #12B76A; --busy-surface: #FDECEC; --busy-on: #912018; --busy-accent: #E5484D; --warn-surface: #FEF3E2; --warn-on: #93370D; --warn-accent: #F79009; --blue-surface: #E8F1FB; --blue-on: #1B4B91; --blue-accent: #0066CC; position: relative; aspect-ratio: 393 / 852; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: calc(100cqw / 39.3); line-height: 1.2; background: var(--app-bg); color: var(--app-text); font-variant-numeric: tabular-nums; user-select: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-ui { --app-bg: #0C1116; --app-surface: #161C24; --app-text: #E6EDF3; --app-muted: rgb(230 237 243 / 0.5); --app-tabbar: rgb(22 28 36 / 0.88); --free-surface: #10251C; --free-on: #6CE9A6; --free-accent: #32D583; --busy-surface: #2A1416; --busy-on: #FDA29B; --busy-accent: #F97066; --warn-surface: #2A1D0E; --warn-on: #FEC84B; --warn-accent: #FDB022; --blue-surface: #14243A; --blue-on: #A8CBF2; --blue-accent: #4DA3FF; } } :root[data-theme="dark"] .app-ui { --app-bg: #0C1116; --app-surface: #161C24; --app-text: #E6EDF3; --app-muted: rgb(230 237 243 / 0.5); --app-tabbar: rgb(22 28 36 / 0.88); --free-surface: #10251C; --free-on: #6CE9A6; --free-accent: #32D583; --busy-surface: #2A1416; --busy-on: #FDA29B; --busy-accent: #F97066; --warn-surface: #2A1D0E; --warn-on: #FEC84B; --warn-accent: #FDB022; --blue-surface: #14243A; --blue-on: #A8CBF2; --blue-accent: #4DA3FF; } .app-ui svg { display: block; fill: currentColor; } .app__statusbar { position: relative; height: 5.4em; } /* The clock's own em is 17 pt, so its box sizes are divided by 1.7. */ .app__clock { position: absolute; top: calc(1.75em / 1.7); left: 0; width: calc(13.5em / 1.7); text-align: center; font-size: 1.7em; font-weight: 600; letter-spacing: -0.01em; } .app__island { position: absolute; top: 1.1em; left: 50%; width: 12.4em; height: 3.6em; margin-left: -6.2em; border-radius: 2em; background: #000; } .app__indicators { position: absolute; top: 2.05em; right: 2.6em; display: flex; align-items: center; gap: 0.6em; } .app__indicators svg:nth-child(1) { width: 1.7em; height: 1.1em; opacity: 0.35; } .app__indicators svg:nth-child(2) { width: 1.6em; height: 1.2em; } .app__indicators svg:nth-child(3) { width: 2.7em; height: 1.3em; } .app__title { margin: 0.35em 0 0.8em; text-align: center; font-size: 2.1em; font-weight: 700; letter-spacing: 0.02em; } .app-card { margin-inline: 1.45em; } .app-overview { padding: 2em 2em 1.8em; border-radius: 2.4em; background: var(--app-surface); box-shadow: 0 0.4em 1.4em rgb(0 0 0 / 0.05); } .app-overview__title { font-size: 2em; font-weight: 700; letter-spacing: -0.01em; } .app-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; margin-top: 1.6em; } .app-stat { display: grid; justify-items: center; gap: 0.4em; padding: 1.3em 0.3em 1.2em; border-radius: 1.6em; background: var(--tile-surface); color: var(--tile-on); } .app-stat svg { width: 1.9em; height: 1.9em; color: var(--tile-accent); } .app-stat b { font-size: 2.3em; font-weight: 800; line-height: 1; } .app-stat span { font-size: 1em; font-weight: 500; letter-spacing: 0.03em; opacity: 0.75; white-space: nowrap; } .app-stat--total { --tile-surface: var(--blue-surface); --tile-on: var(--blue-on); --tile-accent: var(--blue-accent); } .app-stat--busy { --tile-surface: var(--busy-surface); --tile-on: var(--busy-on); --tile-accent: var(--busy-accent); } .app-stat--free { --tile-surface: var(--free-surface); --tile-on: var(--free-on); --tile-accent: var(--free-accent); } .app-stat--rate { --tile-surface: var(--warn-surface); --tile-on: var(--warn-on); --tile-accent: var(--warn-accent); } .app-stat b.is-changing { animation: app-value 320ms var(--ease-out); } @keyframes app-value { from { opacity: 0; translate: 0 0.3em; } } .app-overview__foot { display: flex; align-items: center; gap: 0.6em; margin-top: 1.8em; color: var(--app-muted); } .app-overview__foot > svg { width: 1.5em; height: 1.5em; } .app-overview__foot > span:first-of-type { font-size: 1.2em; letter-spacing: 0.02em; } .app-chip[hidden] { display: none; } .app-chip { display: inline-flex; align-items: center; gap: 0.45em; margin-left: auto; padding: 0.35em 0.95em; border-radius: 99em; font-size: 1.15em; font-weight: 600; color: var(--app-text); border: 1px solid var(--app-muted); white-space: nowrap; } .app-chip--live { border-color: color-mix(in oklab, var(--free-accent) 60%, transparent); background: color-mix(in oklab, var(--free-accent) 8%, transparent); } .app-chip--live::after { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--free-accent); } .app-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1em; margin: 2.2em 1.45em 0; } .app-bay { --s-surface: var(--free-surface); --s-on: var(--free-on); --s-accent: var(--free-accent); display: flex; flex-direction: column; justify-content: space-between; height: 13.6em; padding: 1.4em; border-radius: 1.6em; background: var(--s-surface); color: var(--s-on); border: 1px solid color-mix(in oklab, var(--s-accent) 25%, transparent); box-shadow: 0 0.4em 1em rgb(0 0 0 / 0.05); transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), border-color 400ms var(--ease-out); } .app-bay--busy { --s-surface: var(--busy-surface); --s-on: var(--busy-on); --s-accent: var(--busy-accent); } .app-bay--broken { --s-surface: var(--blue-surface); --s-on: var(--blue-on); --s-accent: var(--blue-accent); } .app-bay--warn { --s-surface: var(--warn-surface); --s-on: var(--warn-on); --s-accent: var(--warn-accent); border: 2px solid color-mix(in oklab, var(--s-accent) 90%, transparent); animation: app-warn-glow 1100ms ease-in-out infinite alternate; } @keyframes app-warn-glow { from { box-shadow: 0 0 1.8em 0.1em color-mix(in oklab, var(--warn-accent) 25%, transparent); } to { box-shadow: 0 0 1.8em 0.1em color-mix(in oklab, var(--warn-accent) 60%, transparent); } } .app-bay__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; } .app-bay__name { font-size: 2.2em; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } /* Status badge with the app's gently breathing halo (2.2 s, every state). */ .app-bay__badge { position: relative; display: grid; place-items: center; width: 3em; height: 3em; flex: none; color: var(--s-accent); } .app-bay__badge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--s-accent); opacity: 0.18; transition: background-color 400ms var(--ease-out); animation: app-breathe 2200ms ease-in-out infinite alternate; } @keyframes app-breathe { to { opacity: 0.34; } } .app-bay__badge svg { grid-area: 1 / 1; position: relative; width: 1.8em; height: 1.8em; opacity: 0; scale: 0.25; filter: blur(4px); transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), scale 300ms cubic-bezier(0.2, 0, 0, 1), filter 300ms cubic-bezier(0.2, 0, 0, 1); } .app-bay--free [data-icon="free"], .app-bay--busy [data-icon="busy"], .app-bay--warn [data-icon="warn"], .app-bay--broken [data-icon="broken"] { opacity: 1; scale: 1; filter: blur(0); } .app-bay__bottom { display: flex; align-items: center; gap: 0.6em; } .app-bay__dot { width: 0.8em; height: 0.8em; flex: none; border-radius: 50%; background: var(--s-accent); transition: background-color 400ms var(--ease-out); } .app-bay__label { flex: 1; min-width: 0; font-size: 1.5em; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; } .app-bay--warn .app-bay__label { font-size: 1.4em; text-align: center; } .app-bay__label.is-changing { animation: app-label 280ms var(--ease-out); } @keyframes app-label { from { opacity: 0; } } .app-bay__timer { flex: none; font-size: 1.5em; font-weight: 700; } .app-tabs { position: absolute; left: 1.2em; right: 1.2em; bottom: 1.9em; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.5em; border-radius: 3.4em; background: var(--app-tabbar); box-shadow: 0 0.2em 1.2em rgb(0 0 0 / 0.08), inset 0 0 0 1px rgb(127 127 127 / 0.15); -webkit-backdrop-filter: blur(1.6em); backdrop-filter: blur(1.6em); } .app-tab { display: grid; justify-items: center; gap: 0.25em; padding: 0.8em 0 0.7em; border-radius: 3em; font-size: 1.05em; font-weight: 500; } .app-tab svg { width: calc(2.5em / 1.05); height: calc(2.5em / 1.05); } .app-tab.is-active { color: #0066CC; background: rgb(127 127 127 / 0.14); font-weight: 600; } .app-bays__empty { grid-column: 1 / -1; padding: 3em 1em; text-align: center; font-size: 1.4em; color: var(--app-muted); }