/* ==========================================================================
Dor Dor · dordorapp.com
Hand-written, no build step. Colours are the tokens from docs/BRAND-PALETTE.md,
which the app shares in app/src/ui/tokens.ts.
The landing page is a night drive. دور دور is the evening ritual of cruising
the same streets with friends and flashing your headlights at someone; the
mark is a road running through a heart. So the hero is a lapis night, a road
receding in perspective with lane lights flowing towards you, anar and
firouzeh blooms where headlights and taillights would be, and the app itself
hovering over the street as a stack of phones that lean with the cursor.
Two rules the palette encodes and this file must never break:
1. Red text never sits on the night ground. `anar` is 2.95:1 there.
Use --anar-on-night (#FF6377, 6.04:1).
2. Saffron never carries white text (2.68:1). It carries --night ink (6.48:1).
`--ink4` is a glyph and divider colour, never text.
Everything is written with logical properties (inline-start / inline-end,
margin-inline, padding-block) so the Persian pages need nothing but dir="rtl".
There are no inline styles anywhere on this site: the Content-Security-Policy
in _headers has no 'unsafe-inline' for styles or scripts. The 3D tilt and the
coverflow are driven from /assets/site.js through CSS custom properties set
with element.style.setProperty(), which the CSP permits (CSSOM writes are
not inline styles). Keep it that way.
========================================================================== */
:root {
/* Anar · pomegranate. The logo red. */
--anar: #c8102e;
--anar-bright: #e22a46;
--anar-deep: #8e0e1e;
--anar-soft: #fbe8ec;
--anar-on-light: #b00c28;
--anar-on-night: #ff6377;
/* Lajvard · lapis lazuli. The night ground. */
--night: #0a1a33;
--night2: #16294a;
--night3: #22385e;
--line-night: #2b4067;
--lajvard: #1c3560;
--lajvard-bright: #2c5aa0;
--on-night: #faf7f2;
--on-night2: #afbbd1;
/* Kaghaz · warm paper and ink. */
--bone: #faf7f2;
--bone2: #f2ede4;
--card: #ffffff;
--line: #e6dfd3;
--ink: #0e1b33;
--ink2: #3a4a68;
--ink3: #5c6880;
--ink4: #8d97ac;
/* Firouzeh · turquoise. Trust, verification, safety. */
--firouzeh: #2aa9b7;
--firouzeh-deep: #0d7480;
--firouzeh-on-night: #5fcbd6;
--firouzeh-soft: #e2f2f4;
/* Zaferan · saffron. Premium only. Never white text on it. */
--saffron: #d98e1b;
--saffron-on-night: #efa93a;
--saffron-deep: #8a5606;
--saffron-soft: #fbefd9;
/* Gol · the Damask rose. Flashes and likes. */
--gol: #b34a6e;
--gol-deep: #8e2a4e;
--gol-soft: #fbe9ef;
--ok: #0e7c63;
--ok-soft: #e0f0ea;
--warn: #9a5a0b;
--r: 16px;
--r-lg: 26px;
--r-xl: 34px;
--r-pill: 999px;
--max: 1180px;
--gap: clamp(1rem, 3vw, 2rem);
--display: "Syne", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--shadow-sm: 0 1px 2px rgba(14, 27, 51, 0.06), 0 2px 8px rgba(14, 27, 51, 0.05);
--shadow-md: 0 6px 18px rgba(14, 27, 51, 0.08), 0 2px 6px rgba(14, 27, 51, 0.05);
--shadow-lg: 0 24px 60px rgba(10, 26, 51, 0.18), 0 8px 20px rgba(10, 26, 51, 0.1);
--shadow-phone: 0 60px 120px -30px rgba(3, 9, 24, 0.85), 0 20px 40px -20px rgba(3, 9, 24, 0.6);
/* The girih. An eight-point star made of two squares, the khatam motif that
tiles every Persian door and ceiling. Drawn as strokes only, faint, so it
reads as texture on the paper rather than as decoration. Pure CSS: a data
URI is covered by img-src, nothing else for the CSP to allow. */
--girih-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%230e1b33' stroke-width='1'%3E%3Cpath d='M60 12 108 60 60 108 12 60Z' stroke-opacity='.10'/%3E%3Cpath d='M26 26h68v68H26Z' stroke-opacity='.10'/%3E%3Ccircle cx='60' cy='60' r='14' stroke-opacity='.08'/%3E%3Cpath d='M0 60h12M108 60h12M60 0v12M60 108v12' stroke-opacity='.10'/%3E%3C/svg%3E");
--girih-bone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23faf7f2' stroke-width='1'%3E%3Cpath d='M60 12 108 60 60 108 12 60Z' stroke-opacity='.09'/%3E%3Cpath d='M26 26h68v68H26Z' stroke-opacity='.09'/%3E%3Ccircle cx='60' cy='60' r='14' stroke-opacity='.07'/%3E%3Cpath d='M0 60h12M108 60h12M60 0v12M60 108v12' stroke-opacity='.09'/%3E%3C/svg%3E");
}
html[lang="fa"] {
--display: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
body {
margin: 0;
background: var(--bone);
color: var(--ink);
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
html[lang="fa"] body {
line-height: 1.9;
}
::selection {
background: var(--anar);
color: var(--on-night);
}
img,
svg {
max-width: 100%;
height: auto;
}
a {
color: var(--anar-on-light);
text-underline-offset: 0.18em;
}
a:hover {
color: var(--anar-deep);
}
h1,
h2,
h3 {
font-family: var(--display);
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3 {
letter-spacing: 0;
line-height: 1.45;
}
p {
margin: 0 0 1rem;
text-wrap: pretty;
}
em {
font-style: normal;
}
:focus-visible {
outline: 3px solid var(--lajvard-bright);
outline-offset: 3px;
border-radius: 6px;
}
[tabindex="-1"]:focus {
outline: none;
}
.night :focus-visible,
.hero :focus-visible,
.nav :focus-visible,
.join :focus-visible,
.cf :focus-visible,
.cta :focus-visible,
footer.site :focus-visible {
outline-color: var(--firouzeh-on-night);
}
.wrap {
max-width: var(--max);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.skip {
position: absolute;
inset-inline-start: -9999px;
top: 0;
z-index: 60;
background: var(--card);
color: var(--ink);
padding: 0.75rem 1rem;
border-radius: 0 0 var(--r) var(--r);
font-weight: 600;
}
.skip:focus {
inset-inline-start: 1rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------------------------------------------------------------- buttons -- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3.25rem;
padding: 0.85rem 1.6rem;
border: 0;
border-radius: var(--r-pill);
background: linear-gradient(135deg, var(--anar-bright), var(--anar) 55%, var(--anar-deep));
background-size: 160% 160%;
background-position: 0% 50%;
color: var(--on-night);
font: inherit;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
overflow: hidden;
isolation: isolate;
box-shadow:
0 12px 32px -10px rgba(200, 16, 46, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition:
transform 0.25s var(--ease),
box-shadow 0.25s var(--ease),
background-position 0.5s var(--ease);
}
.btn:hover {
color: var(--on-night);
transform: translateY(-2px);
background-position: 100% 50%;
box-shadow:
0 18px 40px -10px rgba(200, 16, 46, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn:active {
transform: translateY(0) scale(0.99);
}
.btn:disabled {
opacity: 0.7;
cursor: progress;
transform: none;
}
.btn svg {
width: 1.15em;
height: 1.15em;
flex: none;
}
/* The headlight. A sweep of light crosses the primary action on hover, the
flash that the whole product is named after. */
.btn-flash::after {
content: "";
position: absolute;
inset: -40% -60%;
z-index: -1;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
transform: translateX(-70%) skewX(-12deg);
opacity: 0;
pointer-events: none;
}
.btn-flash:hover::after,
.btn-flash:focus-visible::after {
animation: headlight 0.9s var(--ease) 1;
}
@keyframes headlight {
0% {
transform: translateX(-70%) skewX(-12deg);
opacity: 0;
}
15% {
opacity: 1;
}
100% {
transform: translateX(70%) skewX(-12deg);
opacity: 0;
}
}
.btn-ghost {
background: rgba(250, 247, 242, 0.06);
color: var(--on-night);
border: 1px solid rgba(250, 247, 242, 0.18);
box-shadow: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover {
background: rgba(250, 247, 242, 0.12);
border-color: rgba(250, 247, 242, 0.32);
box-shadow: none;
}
.btn-inline {
width: auto;
}
.btn-small {
min-height: 2.5rem;
padding: 0.5rem 1.1rem;
font-size: 0.92rem;
}
/* ------------------------------------------------------------------- nav -- */
.nav {
position: sticky;
top: 0;
z-index: 40;
color: var(--on-night);
isolation: isolate;
}
.nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(10, 26, 51, 0.62);
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.nav-in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.25rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: inherit;
font-family: var(--display);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -0.02em;
}
.brand img {
width: 34px;
height: 34px;
filter: drop-shadow(0 4px 12px rgba(200, 16, 46, 0.45));
}
.nav nav {
display: flex;
align-items: center;
gap: 0.25rem 1.6rem;
}
.nav nav a:not(.lang):not(.btn) {
position: relative;
color: var(--on-night2);
text-decoration: none;
font-weight: 500;
font-size: 0.98rem;
padding-block: 0.35rem;
}
.nav nav a:not(.lang):not(.btn)::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--anar-on-night);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s var(--ease);
}
.nav nav a:not(.lang):not(.btn):hover {
color: var(--on-night);
}
.nav nav a:not(.lang):not(.btn):hover::after {
transform: scaleX(1);
}
.lang {
display: inline-block;
border-radius: var(--r-pill);
padding: 0.42rem 0.95rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid rgba(250, 247, 242, 0.18);
background: rgba(250, 247, 242, 0.06);
color: var(--on-night);
}
.lang:hover {
color: var(--on-night);
background: rgba(250, 247, 242, 0.14);
border-color: rgba(250, 247, 242, 0.32);
}
.brand,
.nav .btn {
white-space: nowrap;
}
@media (max-width: 52rem) {
.nav nav a:not(.lang):not(.btn) {
display: none;
}
}
/* On a phone the bar holds the brand and the language switch. The waitlist
button is one screen down in the hero and would otherwise fold the brand. */
@media (max-width: 40rem) {
.nav .btn {
display: none;
}
.bokeh span {
opacity: 0.32;
}
}
/* ------------------------------------------------------------------- hero -- */
.hero {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--night);
color: var(--on-night);
padding-block: clamp(2.5rem, 6vw, 5rem) clamp(9rem, 16vw, 13rem);
}
/* The sky: a lapis gradient with an anar bloom and a firouzeh one, exactly the
app's Backdrop, plus a faint girih so the night is not a flat fill. */
.sky {
position: absolute;
inset: 0;
z-index: -4;
background:
var(--girih-bone),
radial-gradient(62rem 40rem at 80% -6%, rgba(200, 16, 46, 0.42), transparent 62%),
radial-gradient(50rem 34rem at -4% 100%, rgba(42, 169, 183, 0.24), transparent 64%),
linear-gradient(175deg, #1a3260 0%, var(--night) 55%, #050d1d 100%);
background-size: 120px 120px, auto, auto, auto;
pointer-events: none;
}
.sky::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(90rem 40rem at 50% 115%, rgba(10, 26, 51, 0) 40%, rgba(10, 26, 51, 0.92) 100%);
}
/* City lights. Eight blurred discs drifting slowly in the middle distance. */
.bokeh {
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
overflow: hidden;
}
.bokeh span {
position: absolute;
border-radius: 50%;
filter: blur(16px);
opacity: 0.55;
animation: drift 18s ease-in-out infinite alternate;
will-change: transform;
}
.bokeh span:nth-child(1) { left: 6%; top: 18%; width: 140px; height: 140px; background: var(--anar); animation-delay: -2s; }
.bokeh span:nth-child(2) { left: 22%; top: 62%; width: 90px; height: 90px; background: var(--firouzeh); animation-delay: -6s; }
.bokeh span:nth-child(3) { left: 44%; top: 8%; width: 70px; height: 70px; background: var(--saffron-on-night); animation-delay: -9s; opacity: 0.35; }
.bokeh span:nth-child(4) { left: 66%; top: 70%; width: 120px; height: 120px; background: var(--gol); animation-delay: -4s; }
.bokeh span:nth-child(5) { left: 86%; top: 34%; width: 100px; height: 100px; background: var(--firouzeh-on-night); animation-delay: -12s; opacity: 0.4; }
.bokeh span:nth-child(6) { left: 92%; top: 78%; width: 60px; height: 60px; background: var(--anar-bright); animation-delay: -1s; }
.bokeh span:nth-child(7) { left: 34%; top: 84%; width: 80px; height: 80px; background: var(--lajvard-bright); animation-delay: -15s; opacity: 0.45; }
.bokeh span:nth-child(8) { left: 58%; top: 40%; width: 50px; height: 50px; background: var(--saffron-on-night); animation-delay: -7s; opacity: 0.3; }
@keyframes drift {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(40px, -30px, 0) scale(1.15);
}
}
/* The road. A plane laid flat in perspective and viewed from the driver's
seat; the lane markings are a repeating gradient whose position animates, so
the dashes stream towards the viewer. A mask fades it into the sky at the
horizon, and the horizon itself carries the anar of a line of taillights. */
.road-wrap {
position: absolute;
inset: auto 0 0 0;
height: 68%;
z-index: -2;
perspective: 520px;
perspective-origin: 50% 0%;
overflow: hidden;
pointer-events: none;
mask-image: linear-gradient(to top, #000 55%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}
/* Layers, nearest the viewer first: the centre dashes, two solid lane edges,
then the tail-light and head-light trails just outside them, then the
tarmac. The trails stay inside the middle third of the plane on purpose:
any further out and perspective throws them to the viewport's edge, where
they read as scratches across the page instead of lights beside a road. */
.road {
position: absolute;
left: 50%;
bottom: -20%;
width: 180%;
height: 320%;
transform: translateX(-50%) rotateX(74deg);
transform-origin: 50% 100%;
background:
repeating-linear-gradient(to top, rgba(250, 247, 242, 0.62) 0 70px, transparent 70px 190px) 50% 0 / 16px 100% no-repeat,
linear-gradient(rgba(250, 247, 242, 0.22), rgba(250, 247, 242, 0.22)) 38% 0 / 4px 100% no-repeat,
linear-gradient(rgba(250, 247, 242, 0.22), rgba(250, 247, 242, 0.22)) 62% 0 / 4px 100% no-repeat,
repeating-linear-gradient(to top, rgba(255, 99, 119, 0.55) 0 40px, transparent 40px 260px) 34% 0 / 7px 100% no-repeat,
repeating-linear-gradient(to top, rgba(95, 203, 214, 0.55) 0 40px, transparent 40px 260px) 66% 0 / 7px 100% no-repeat,
linear-gradient(to top, #0e1e3b 0%, #132546 45%, #1b3054 100%);
animation: lanes 1.6s linear infinite;
will-change: background-position;
}
@keyframes lanes {
from {
background-position: 50% 0, 38% 0, 62% 0, 34% 0, 66% 0, 0 0;
}
to {
background-position: 50% 190px, 38% 0, 62% 0, 34% 260px, 66% 260px, 0 0;
}
}
/* Where the road meets the sky: not a line, which read as a rule drawn behind
the headline, but the glow of a queue of taillights in the far distance. */
.horizon {
position: absolute;
inset-inline: 0;
bottom: 44%;
z-index: -2;
height: 0;
pointer-events: none;
}
.horizon::after {
content: "";
position: absolute;
inset-inline: 15%;
top: -60px;
height: 120px;
background: radial-gradient(55% 100% at 50% 100%, rgba(255, 99, 119, 0.32), rgba(255, 99, 119, 0.08) 50%, transparent 75%);
filter: blur(18px);
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
gap: clamp(2.5rem, 6vw, 4rem);
align-items: center;
}
@media (min-width: 62rem) {
.hero-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1.4rem;
padding: 0.45rem 0.95rem 0.45rem 0.55rem;
border-radius: var(--r-pill);
background: rgba(250, 247, 242, 0.07);
border: 1px solid rgba(250, 247, 242, 0.14);
color: var(--on-night2);
font-size: 0.92rem;
font-weight: 500;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
[dir="rtl"] .eyebrow {
padding: 0.45rem 0.55rem 0.45rem 0.95rem;
}
.eyebrow img {
width: 24px;
height: 24px;
}
.eyebrow b {
color: var(--on-night);
font-weight: 700;
}
.display {
font-size: clamp(2.4rem, 4vw, 3.5rem);
line-height: 1;
letter-spacing: -0.035em;
font-weight: 800;
margin-bottom: 1.4rem;
}
html[lang="fa"] .display {
font-size: clamp(2.1rem, 5vw, 3.9rem);
line-height: 1.32;
letter-spacing: 0;
}
.display em {
background: linear-gradient(92deg, #ff6377 0%, #ffb0bb 55%, #ffd7dd 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lede {
color: var(--on-night2);
font-size: clamp(1.1rem, 1.4vw, 1.3rem);
line-height: 1.55;
max-width: 34em;
margin-bottom: 2rem;
}
html[lang="fa"] .lede {
line-height: 1.9;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
.proof {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.proof li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
border-radius: var(--r-pill);
background: rgba(250, 247, 242, 0.05);
border: 1px solid rgba(250, 247, 242, 0.1);
color: var(--on-night2);
font-size: 0.9rem;
font-weight: 500;
}
.proof svg {
width: 1rem;
height: 1rem;
color: var(--firouzeh-on-night);
flex: none;
}
/* ------------------------------------------------------------ the stage -- */
/* A 3D scene. `.hero-stage` sets the camera; `.stage` receives the tilt from
the cursor (site.js writes --rx/--ry on it); `.stage-idle` inside it sways
on its own so the scene is never quite still; the phones and chips are
arranged in depth with translateZ. */
.hero-stage {
perspective: 1500px;
perspective-origin: 50% 40%;
display: grid;
place-items: center;
min-height: clamp(420px, 60vw, 640px);
}
.stage {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1 / 1.15;
transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 0.18s ease-out;
}
.stage-idle {
position: absolute;
inset: 0;
transform-style: preserve-3d;
animation: idle 10s ease-in-out infinite;
}
.stage.is-live .stage-idle {
animation-play-state: paused;
}
@keyframes idle {
0%,
100% {
transform: rotateY(-5deg) rotateX(2deg);
}
50% {
transform: rotateY(5deg) rotateX(-1deg);
}
}
.phone {
position: relative;
/* A modern iPhone's proportions, not the screenshot's: the captures have no status bar, and the
island needs a band of screen to sit in. */
aspect-ratio: 9 / 19.4;
--screen: var(--bone);
border-radius: clamp(28px, 12%, 46px);
padding: 10px;
background: linear-gradient(160deg, #202c48, #0a1020 40%, #141d33);
box-shadow:
var(--shadow-phone),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
overflow: hidden;
}
/* The status-bar band. The captures are of the app's content area only, so the top of the screen is
painted in that screen's own ground (paper by default, night for the sign-up screens) and the
image starts underneath, exactly where iOS would draw it. Padding on the ![]()
is inside its box,
so the band is the image's background colour rather than a second element. */
.phone > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
padding-top: 11%;
border-radius: clamp(20px, 9%, 38px);
background: var(--screen);
}
.phone.night {
--screen: var(--night);
}
/* The dynamic island, and a glass glare across the screen. */
.phone::before {
content: "";
position: absolute;
top: 5.2%;
left: 50%;
width: 30%;
height: 4.6%;
border-radius: var(--r-pill);
background: #070d1a;
transform: translateX(-50%);
z-index: 2;
}
.phone::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
pointer-events: none;
}
.stage .phone {
position: absolute;
top: 0;
left: 50%;
width: 52%;
}
.phone-front {
z-index: 3;
transform: translateX(-50%) translateZ(90px);
}
.phone-back {
z-index: 2;
opacity: 0.92;
transform: translateX(-50%) translate3d(-58%, 9%, -170px) rotateY(24deg) rotateZ(-7deg);
}
.phone-back2 {
z-index: 1;
opacity: 0.86;
transform: translateX(-50%) translate3d(58%, 13%, -240px) rotateY(-26deg) rotateZ(7deg);
}
[dir="rtl"] .phone-back {
transform: translateX(-50%) translate3d(58%, 9%, -170px) rotateY(-24deg) rotateZ(7deg);
}
[dir="rtl"] .phone-back2 {
transform: translateX(-50%) translate3d(-58%, 13%, -240px) rotateY(26deg) rotateZ(-7deg);
}
/* The light the phones throw on the road under them. */
.stage-glow {
position: absolute;
left: 50%;
bottom: -6%;
width: 70%;
height: 20%;
transform: translateX(-50%) translateZ(-60px);
background: radial-gradient(50% 60% at 50% 50%, rgba(200, 16, 46, 0.55), rgba(42, 169, 183, 0.18) 60%, transparent 80%);
filter: blur(22px);
pointer-events: none;
}
/* Notifications floating in front of the screen: the three moments the
product is about. Real strings from the app. */
.float {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.95rem;
border-radius: 18px;
background: rgba(250, 247, 242, 0.96);
color: var(--ink);
box-shadow:
0 30px 60px -20px rgba(3, 9, 24, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
font-size: 0.9rem;
line-height: 1.25;
white-space: nowrap;
animation: bob 7s ease-in-out infinite;
will-change: transform;
}
.float b {
display: block;
font-weight: 700;
}
.float small {
display: block;
color: var(--ink3);
font-size: 0.78rem;
}
.float .ico {
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 12px;
flex: none;
}
.float .ico svg {
width: 1.15rem;
height: 1.15rem;
}
.float-flash {
top: 6%;
inset-inline-end: -4%;
transform: translateZ(180px);
animation-delay: -1s;
}
.float-flash .ico {
background: var(--saffron-soft);
color: var(--saffron-deep);
}
.float-match {
top: 46%;
inset-inline-start: -6%;
transform: translateZ(200px);
animation-delay: -3.5s;
}
.float-match .ico {
background: var(--anar-soft);
color: var(--anar);
}
.float-verified {
bottom: 4%;
inset-inline-end: 2%;
transform: translateZ(160px);
animation-delay: -5.5s;
}
.float-verified .ico {
background: var(--firouzeh-soft);
color: var(--firouzeh-deep);
}
@keyframes bob {
0%,
100% {
margin-top: 0;
}
50% {
margin-top: -14px;
}
}
@media (max-width: 40rem) {
.stage {
width: min(100%, 360px);
}
.float {
font-size: 0.82rem;
padding: 0.55rem 0.75rem;
}
.float-flash {
inset-inline-end: -2%;
}
.float-match {
inset-inline-start: -2%;
}
}
/* ---------------------------------------------------------------- marquee -- */
.marquee {
position: relative;
z-index: 2;
margin-top: clamp(2rem, 5vw, 4rem);
padding-block: 1rem;
color: var(--on-night2);
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
display: flex;
gap: 3rem;
width: max-content;
animation: marquee 48s linear infinite;
will-change: transform;
}
.marquee-track ul {
display: flex;
gap: 3rem;
list-style: none;
margin: 0;
padding: 0;
}
.marquee li {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--display);
font-weight: 700;
font-size: clamp(1rem, 1.6vw, 1.25rem);
letter-spacing: -0.01em;
white-space: nowrap;
}
.marquee li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--anar-on-night);
box-shadow: 0 0 12px var(--anar-on-night);
}
.marquee li.first {
color: var(--on-night);
}
.marquee li.first::before {
background: var(--firouzeh-on-night);
box-shadow: 0 0 12px var(--firouzeh-on-night);
}
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
[dir="rtl"] .marquee-track {
animation-direction: reverse;
}
.marquee:hover .marquee-track {
animation-play-state: paused;
}
/* --------------------------------------------------------------- the form -- */
/* The waitlist card straddles the edge of the night and the paper below it,
so the fold shows the promise and the form at once. */
.joinband {
position: relative;
background: var(--bone);
}
.joinband .wrap {
position: relative;
z-index: 5;
}
.join {
position: relative;
margin-top: clamp(-7rem, -11vw, -5rem);
border-radius: var(--r-xl);
padding: clamp(1.5rem, 4vw, 2.75rem);
color: var(--on-night);
background:
var(--girih-bone),
radial-gradient(40rem 20rem at 100% 0%, rgba(200, 16, 46, 0.35), transparent 60%),
radial-gradient(30rem 20rem at 0% 100%, rgba(42, 169, 183, 0.22), transparent 60%),
linear-gradient(160deg, #1a3260, #0b1b36 60%, #0a1a33);
background-size: 120px 120px, auto, auto, auto;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(250, 247, 242, 0.08);
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
overflow: hidden;
}
/* A hairline of light along the top edge, like the reflection on a car roof. */
.join::before {
content: "";
position: absolute;
inset-inline: 8%;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(250, 247, 242, 0.6), transparent);
}
@media (min-width: 56rem) {
.join {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: start;
}
}
.join h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin-bottom: 0.6rem;
}
.join .sub {
color: var(--on-night2);
margin-bottom: 1.5rem;
}
.join a {
color: var(--anar-on-night);
}
.join a:hover {
color: var(--on-night);
}
.join-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.8rem;
}
.join-steps li {
display: flex;
gap: 0.9rem;
align-items: flex-start;
color: var(--on-night2);
font-size: 0.98rem;
}
.join-steps li b {
color: var(--on-night);
font-weight: 600;
}
.join-steps .n {
flex: none;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid rgba(250, 247, 242, 0.2);
background: rgba(250, 247, 242, 0.06);
font-family: var(--display);
font-weight: 800;
font-size: 0.85rem;
color: var(--on-night);
}
form#waitlist {
display: grid;
gap: 0.9rem;
}
@media (min-width: 40rem) {
form#waitlist {
grid-template-columns: 1fr 1fr;
}
form#waitlist .btn,
form#waitlist .form-msg,
form#waitlist .fineprint,
form#waitlist noscript {
grid-column: 1 / -1;
}
}
.field {
display: grid;
gap: 0.4rem;
}
.field > span {
font-size: 0.85rem;
font-weight: 600;
color: var(--on-night2);
letter-spacing: 0.01em;
}
.field input,
.field select {
font: inherit;
font-size: 1rem;
min-height: 3.25rem;
padding: 0.8rem 1rem;
border-radius: 16px;
border: 1px solid rgba(250, 247, 242, 0.16);
background: rgba(250, 247, 242, 0.06);
color: var(--on-night);
width: 100%;
transition:
border-color 0.2s,
background 0.2s,
box-shadow 0.2s;
}
.field input::placeholder {
color: rgba(175, 187, 209, 0.7);
}
.field select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: 2.6rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23afbbd1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}
[dir="rtl"] .field select {
background-position: left 1rem center;
}
.field select option {
color: var(--ink);
background: var(--card);
}
.field input:hover,
.field select:hover {
border-color: rgba(250, 247, 242, 0.3);
}
.field input:focus,
.field select:focus {
outline: none;
border-color: var(--firouzeh-on-night);
background: rgba(250, 247, 242, 0.09);
box-shadow: 0 0 0 4px rgba(95, 203, 214, 0.22);
}
form#waitlist .btn {
width: 100%;
margin-top: 0.25rem;
}
.fineprint {
font-size: 0.86rem;
line-height: 1.55;
color: var(--on-night2);
margin: 0;
}
html[lang="fa"] .fineprint {
line-height: 1.9;
}
.form-msg {
margin: 0;
min-height: 1.4em;
font-size: 0.95rem;
color: var(--on-night2);
}
.form-msg:empty {
display: none;
}
.form-msg.is-ok {
color: var(--on-night);
padding: 0.75rem 1rem;
border-radius: 14px;
background: rgba(63, 191, 155, 0.16);
border: 1px solid rgba(63, 191, 155, 0.4);
}
.form-msg.is-err {
color: var(--on-night);
padding: 0.75rem 1rem;
border-radius: 14px;
background: rgba(255, 99, 119, 0.14);
border: 1px solid rgba(255, 99, 119, 0.45);
}
.stores {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(250, 247, 242, 0.1);
}
.stores > span {
color: var(--on-night2);
font-size: 0.86rem;
margin-inline-end: 0.25rem;
}
.store {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 0.95rem;
border-radius: 12px;
border: 1px solid rgba(250, 247, 242, 0.18);
background: rgba(250, 247, 242, 0.06);
color: var(--on-night);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition:
background 0.2s,
border-color 0.2s,
transform 0.2s;
}
.store:hover {
color: var(--on-night);
background: rgba(250, 247, 242, 0.12);
border-color: rgba(250, 247, 242, 0.32);
transform: translateY(-1px);
}
.store svg {
width: 1.15rem;
height: 1.15rem;
flex: none;
}
/* Until the stores list the app the badges are statements, not links: nothing to tap, no placeholder
id to forget, and a saffron "coming soon" so nobody reads them as broken. */
.store.is-soon {
cursor: default;
flex-wrap: wrap;
row-gap: 0;
padding-block: 0.45rem;
color: var(--on-night2);
}
.store.is-soon:hover {
background: rgba(250, 247, 242, 0.06);
border-color: rgba(250, 247, 242, 0.18);
transform: none;
}
.store.is-soon em {
flex-basis: 100%;
padding-inline-start: 1.7rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-style: normal;
color: var(--saffron-on-night);
}
html[lang="fa"] .store.is-soon em {
letter-spacing: 0;
font-size: 0.8rem;
}
/* On a phone the form is a screen and a half down and the thumb should not have to travel. Hidden
while the form itself is in view (site.js toggles .is-hidden), never shown on a desktop. */
.mobile-cta {
display: none;
position: fixed;
inset-inline: 1rem;
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 45;
box-shadow: 0 18px 40px -8px rgba(200, 16, 46, 0.7);
transition:
transform 0.35s var(--ease),
opacity 0.35s var(--ease);
}
@media (max-width: 40rem) {
.mobile-cta {
display: inline-flex;
}
.mobile-cta.is-hidden {
transform: translateY(140%);
opacity: 0;
pointer-events: none;
}
/* Room for it, so the footer's last line is never under the button. */
footer.site {
padding-bottom: 6rem;
}
}
/* ----------------------------------------------------------------- bands -- */
.band {
position: relative;
isolation: isolate;
padding-block: clamp(4rem, 9vw, 7.5rem);
}
.paper {
background: var(--bone);
color: var(--ink);
}
.paper::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--girih-ink);
background-size: 120px 120px;
opacity: 0.55;
mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
-webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
pointer-events: none;
}
.sunken {
background: var(--bone2);
}
.night {
position: relative;
isolation: isolate;
background: linear-gradient(170deg, #1b3560 0%, var(--night) 62%);
color: var(--on-night);
}
.night::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
var(--girih-bone),
radial-gradient(58rem 34rem at 82% 8%, rgba(200, 16, 46, 0.34), transparent 62%),
radial-gradient(46rem 30rem at 6% 92%, rgba(42, 169, 183, 0.22), transparent 66%);
background-size: 120px 120px, auto, auto;
pointer-events: none;
}
.night a {
color: var(--anar-on-night);
}
.night a:hover {
color: var(--on-night);
}
.section-head {
max-width: 44rem;
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head h2,
.split h2 {
font-size: clamp(1.9rem, 3.8vw, 3rem);
margin-bottom: 0.9rem;
}
.section-head p {
color: var(--ink2);
font-size: 1.08rem;
}
.night .section-head p,
.night-deep .section-head p {
color: var(--on-night2);
}
.section-head.center {
margin-inline: auto;
text-align: center;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.9rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--anar-on-light);
}
html[lang="fa"] .kicker {
letter-spacing: 0;
font-size: 0.95rem;
}
.kicker::before {
content: "";
width: 1.6rem;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.night .kicker,
.night-deep .kicker {
color: var(--anar-on-night);
}
/* ------------------------------------------------------ the four decisions -- */
.grid4 {
display: grid;
gap: 1.1rem;
}
@media (min-width: 44rem) {
.grid4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 70rem) {
.grid4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Glass that tilts. site.js writes --rx/--ry for the lean and --mx/--my for the
specular highlight that follows the cursor across the surface. */
.glass {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-lg);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(14, 27, 51, 0.08);
box-shadow: var(--shadow-md);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition:
transform 0.2s ease-out,
box-shadow 0.3s var(--ease);
}
.glass::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.9), transparent 45%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.glass.is-live::before {
opacity: 1;
}
.glass:hover {
box-shadow: var(--shadow-lg);
}
.decision {
padding: 1.6rem 1.5rem 1.7rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
min-height: 100%;
}
.decision .num {
position: absolute;
top: -0.35rem;
inset-inline-end: 0.7rem;
font-family: var(--display);
font-weight: 800;
font-size: 5.5rem;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(14, 27, 51, 0.12);
pointer-events: none;
user-select: none;
}
.badge {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 16px;
background: var(--anar-soft);
color: var(--anar);
box-shadow: inset 0 0 0 1px rgba(200, 16, 46, 0.12);
}
.badge svg {
width: 1.4rem;
height: 1.4rem;
}
.badge.turquoise {
background: var(--firouzeh-soft);
color: var(--firouzeh-deep);
box-shadow: inset 0 0 0 1px rgba(13, 116, 128, 0.15);
}
.badge.rose {
background: var(--gol-soft);
color: var(--gol-deep);
box-shadow: inset 0 0 0 1px rgba(142, 42, 78, 0.15);
}
.decision h3 {
font-size: 1.3rem;
}
.decision p {
color: var(--ink2);
font-size: 0.98rem;
margin: 0;
}
/* ------------------------------------------------------------- coverflow -- */
.night-deep {
background:
radial-gradient(70rem 40rem at 50% 0%, rgba(44, 90, 160, 0.35), transparent 60%),
linear-gradient(180deg, #0b1c39, #060f22);
color: var(--on-night);
}
.night-deep::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--girih-bone);
background-size: 120px 120px;
opacity: 0.5;
mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
pointer-events: none;
}
.cf {
position: relative;
}
.cf-stage {
position: relative;
height: clamp(520px, 62vw, 720px);
perspective: 1700px;
perspective-origin: 50% 35%;
}
.cf-track {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
.cf-item {
position: absolute;
top: 0;
left: 50%;
width: clamp(220px, 22vw, 290px);
margin: 0;
transform: translateX(-50%) translate3d(var(--x, 0%), 0, var(--z, 0px)) rotateY(var(--r, 0deg));
opacity: var(--o, 1);
transition:
transform 0.7s var(--ease),
opacity 0.7s var(--ease);
cursor: pointer;
will-change: transform;
}
.cf-item .phone {
transition: box-shadow 0.5s;
}
.cf-item:not(.is-active) .phone::after {
background: linear-gradient(180deg, rgba(6, 15, 34, 0.15), rgba(6, 15, 34, 0.55));
}
.cf-item figcaption {
position: absolute;
inset-inline: -20%;
top: calc(100% + 1.4rem);
text-align: center;
color: var(--on-night2);
font-size: 0.98rem;
line-height: 1.5;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s var(--ease) 0.15s,
transform 0.5s var(--ease) 0.15s;
pointer-events: none;
}
.cf-item.is-active figcaption {
opacity: 1;
transform: none;
}
.cf-item figcaption b {
display: block;
color: var(--on-night);
font-family: var(--display);
font-size: 1.15rem;
margin-bottom: 0.3rem;
}
.cf-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-top: clamp(4.5rem, 7vw, 6rem);
}
.cf-btn {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid rgba(250, 247, 242, 0.2);
background: rgba(250, 247, 242, 0.06);
color: var(--on-night);
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
transform 0.2s;
}
.cf-btn:hover {
background: rgba(250, 247, 242, 0.14);
border-color: rgba(250, 247, 242, 0.4);
transform: translateY(-1px);
}
.cf-btn svg {
width: 1.2rem;
height: 1.2rem;
}
[dir="rtl"] .cf-btn svg {
transform: scaleX(-1);
}
.cf-dots {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.cf-dots button {
width: 0.6rem;
height: 0.6rem;
padding: 0;
border-radius: 50%;
border: 0;
background: rgba(250, 247, 242, 0.28);
cursor: pointer;
transition:
background 0.3s,
width 0.3s var(--ease);
}
.cf-dots button.is-active {
width: 1.8rem;
border-radius: var(--r-pill);
background: var(--anar-on-night);
}
/* Narrow screens: the coverflow becomes a horizontal strip with every
caption visible. site.js watches the same breakpoint and stops laying out. */
@media (max-width: 47.99rem) {
.cf-stage {
height: auto;
perspective: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block: 0.5rem 1rem;
scrollbar-width: none;
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cf-stage::-webkit-scrollbar {
display: none;
}
.cf-track {
position: static;
display: flex;
gap: 1.25rem;
padding-inline: 1.25rem;
width: max-content;
}
.cf-item {
position: static;
width: 68vw;
max-width: 280px;
transform: none !important;
opacity: 1 !important;
scroll-snap-align: center;
cursor: default;
}
.cf-item .phone::after {
background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%) !important;
}
.cf-item figcaption {
position: static;
opacity: 1;
transform: none;
margin-top: 1rem;
text-align: start;
inset: auto;
}
.cf-controls {
display: none;
}
}
/* --------------------------------------------------------------- splits -- */
.split {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 54rem) {
.split {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.split.flip > :first-child {
order: 2;
}
}
.split p {
color: var(--ink2);
font-size: 1.05rem;
}
.split .btn {
margin-top: 0.5rem;
}
/* A phone on the paper, leaning in perspective and straightening as it
scrolls into view. */
.lean {
perspective: 1200px;
display: grid;
place-items: center;
}
.lean .phone {
width: min(100%, 300px);
transform: rotateY(-14deg) rotateX(4deg);
transition: transform 0.9s var(--ease);
}
.split.flip .lean .phone {
transform: rotateY(14deg) rotateX(4deg);
}
.lean:hover .phone {
transform: rotateY(0) rotateX(0);
}
.lean-chip {
position: relative;
z-index: 2;
margin-top: -1.6rem;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 1rem;
border-radius: var(--r-pill);
background: var(--card);
color: var(--ink);
font-weight: 600;
font-size: 0.9rem;
box-shadow: var(--shadow-md);
}
.lean-chip svg {
width: 1rem;
height: 1rem;
color: var(--firouzeh-deep);
}
.ticks {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: grid;
gap: 0.9rem;
}
.ticks li {
display: flex;
gap: 0.85rem;
align-items: flex-start;
color: var(--ink2);
}
.ticks li b {
color: var(--ink);
}
.ticks svg {
flex: none;
width: 1.6rem;
height: 1.6rem;
padding: 0.3rem;
border-radius: 50%;
background: var(--firouzeh-soft);
color: var(--firouzeh-deep);
margin-top: 0.1rem;
}
/* --------------------------------------------------------------- premium -- */
.premium {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
padding: clamp(1.75rem, 4vw, 3rem);
background:
radial-gradient(40rem 20rem at 100% 0%, rgba(217, 142, 27, 0.22), transparent 60%),
linear-gradient(160deg, #fff8ec, var(--card) 60%);
border: 1px solid rgba(217, 142, 27, 0.25);
box-shadow: var(--shadow-md);
display: grid;
gap: 1.5rem;
}
@media (min-width: 56rem) {
.premium {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
}
}
.premium .crown {
display: inline-grid;
place-items: center;
width: 3.2rem;
height: 3.2rem;
border-radius: 18px;
background: linear-gradient(140deg, #f2b34a, var(--saffron));
color: var(--night);
margin-bottom: 1rem;
box-shadow: 0 10px 24px -8px rgba(217, 142, 27, 0.6);
}
.premium .crown svg {
width: 1.5rem;
height: 1.5rem;
}
.premium h2 {
font-size: clamp(1.6rem, 3vw, 2.3rem);
margin-bottom: 0.9rem;
}
.premium p {
color: var(--ink2);
}
.premium p.small {
font-size: 0.9rem;
color: var(--ink3);
margin: 0;
}
.perks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.perks li {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.9rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(217, 142, 27, 0.2);
color: var(--ink);
font-weight: 600;
font-size: 0.92rem;
}
.perks svg {
width: 1.1rem;
height: 1.1rem;
color: var(--saffron-deep);
flex: none;
}
/* ------------------------------------------------------------------- faq -- */
.faq {
max-width: 50rem;
display: grid;
gap: 0.6rem;
}
.faq details {
border-radius: var(--r);
background: var(--card);
border: 1px solid var(--line);
padding: 0 1.25rem;
transition: box-shadow 0.3s;
}
.faq details[open] {
box-shadow: var(--shadow-md);
}
.faq summary {
cursor: pointer;
list-style: none;
padding: 1.05rem 0;
font-weight: 600;
font-size: 1.05rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "";
flex: none;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--anar-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b00c28' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after {
transform: rotate(45deg);
}
.faq details p {
color: var(--ink2);
margin: 0 0 1.1rem;
}
/* ------------------------------------------------------------------- cta -- */
.cta {
text-align: center;
padding-block: clamp(5rem, 10vw, 8rem);
overflow: clip;
}
.cta .road-wrap {
height: 100%;
mask-image: linear-gradient(to top, #000 20%, transparent 85%);
-webkit-mask-image: linear-gradient(to top, #000 20%, transparent 85%);
opacity: 0.7;
}
.cta .wrap {
position: relative;
z-index: 1;
}
.cta h2 {
font-size: clamp(2.2rem, 5.5vw, 4.2rem);
margin-bottom: 0.9rem;
}
.cta p {
color: var(--on-night2);
font-size: 1.15rem;
max-width: 34rem;
margin-inline: auto;
}
.cta .logo-big {
width: clamp(120px, 16vw, 180px);
margin-bottom: 1rem;
filter: drop-shadow(0 20px 40px rgba(200, 16, 46, 0.45));
}
/* ---------------------------------------------------------------- footer -- */
footer.site {
position: relative;
isolation: isolate;
background: #050d1d;
color: var(--on-night2);
padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
font-size: 0.95rem;
}
footer.site::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--girih-bone);
background-size: 120px 120px;
opacity: 0.35;
pointer-events: none;
}
footer.site a {
color: var(--on-night2);
text-decoration: none;
}
footer.site a:hover {
color: var(--on-night);
}
footer.site .brand {
color: var(--on-night);
margin-bottom: 0.75rem;
}
footer.site h2 {
font-family: var(--body);
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-night);
margin-bottom: 0.9rem;
}
html[lang="fa"] footer.site h2 {
letter-spacing: 0;
font-size: 0.95rem;
}
footer.site ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.foot-grid {
display: grid;
gap: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(250, 247, 242, 0.1);
}
@media (min-width: 44rem) {
.foot-grid {
grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
}
.foot-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.muted {
color: var(--ink3);
font-size: 0.9em;
}
.foot-note {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1.5rem;
padding-top: 1.25rem;
font-size: 0.88rem;
}
.foot-note p {
margin: 0;
}
/* ----------------------------------------------------- language suggestion -- */
.langbar {
position: relative;
z-index: 41;
background: var(--lajvard);
color: var(--on-night);
font-size: 0.95rem;
}
.langbar .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem 1rem;
padding-block: 0.6rem;
}
.langbar a {
color: var(--firouzeh-on-night);
font-weight: 600;
}
.langbar button {
background: transparent;
border: 1px solid var(--line-night);
color: var(--on-night2);
border-radius: var(--r-pill);
font: inherit;
font-size: 0.85rem;
padding: 0.15rem 0.7rem;
cursor: pointer;
}
/* ================================================================ documents =
privacy / terms / guidelines / safety / support / account-delete / 404.
The substance of those pages is unchanged; this is presentation only. They
keep the older `header.top` structure.
========================================================================== */
.top {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding-block: 1.1rem;
}
.top nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 1.25rem;
}
.top nav a {
text-decoration: none;
font-weight: 500;
font-size: 0.98rem;
}
.night .top nav a {
color: var(--on-night2);
}
.night .top nav a:hover {
color: var(--on-night);
}
.night .brand {
color: var(--on-night);
}
body.doc {
background: var(--bone);
}
/* The document pages wear the landing page's glass bar, so leaving the home
page for the privacy policy does not feel like leaving the site. */
.doc-head {
position: sticky;
top: 0;
z-index: 40;
color: var(--on-night);
isolation: isolate;
}
.doc-head::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(10, 26, 51, 0.92);
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.doc-head .top {
padding-block: 0.6rem;
min-height: 4.25rem;
}
.doc-head .brand {
color: var(--on-night);
}
.doc-head nav a {
color: var(--on-night2);
}
.doc-head nav a:hover {
color: var(--on-night);
}
.doc main {
position: relative;
isolation: isolate;
max-width: 52rem;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}
.doc main::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: var(--girih-ink);
background-size: 120px 120px;
opacity: 0.45;
pointer-events: none;
}
.doc h1 {
font-size: clamp(2.2rem, 5vw, 3.4rem);
margin-bottom: 1.25rem;
}
.doc h1::before {
content: "";
display: block;
width: 3rem;
height: 4px;
border-radius: 4px;
margin-bottom: 1.1rem;
background: linear-gradient(90deg, var(--anar), var(--anar-bright));
}
.doc h2 {
margin-top: 2.75rem;
margin-bottom: 0.7rem;
font-size: 1.4rem;
}
.doc p,
.doc li {
color: var(--ink2);
}
.doc li {
margin-bottom: 0.4rem;
}
.doc .updated {
color: var(--ink3);
font-size: 0.95rem;
}
.doc .table-scroll {
overflow-x: auto;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--card);
box-shadow: var(--shadow-sm);
}
.doc table {
border-collapse: collapse;
width: 100%;
min-width: 34rem;
font-size: 0.97rem;
}
.doc td,
.doc th {
border-bottom: 1px solid var(--line);
padding: 0.8rem 0.95rem;
text-align: start;
vertical-align: top;
}
.doc tr:last-child td {
border-bottom: 0;
}
.doc th {
color: var(--ink);
font-family: var(--body);
background: var(--bone2);
}
.card {
position: relative;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(14, 27, 51, 0.08);
border-radius: var(--r-lg);
padding: 1.4rem 1.6rem;
margin: 1rem 0;
box-shadow: var(--shadow-sm);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
box-shadow 0.3s var(--ease),
transform 0.3s var(--ease);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card h2 {
margin-top: 0;
font-size: 1.2rem;
}
.card > p:last-child {
margin-bottom: 0;
}
/* The web account-deletion flow. */
.steps label {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink2);
margin-bottom: 0.35rem;
}
.steps input {
font: inherit;
font-size: 1rem;
padding: 0.8rem 0.9rem;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
width: 100%;
min-height: 3rem;
}
.steps .btn {
width: auto;
margin-top: 0.9rem;
}
.steps .btn.danger {
background: var(--anar-deep);
box-shadow: none;
}
.steps .btn.danger:hover {
background: #6f0a17;
}
.steps .hint {
font-size: 0.95rem;
color: var(--ink2);
margin-top: 0.9rem;
}
.doc .form-msg {
color: var(--ink2);
}
.doc .form-msg.is-ok {
color: var(--ok);
background: var(--ok-soft);
border-color: transparent;
}
.doc .form-msg.is-err {
color: var(--anar-on-light);
background: var(--anar-soft);
border-color: transparent;
}
.hidden {
display: none;
}
/* ------------------------------------------------------------------- 404 -- */
.notfound {
min-height: 60vh;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
gap: 1rem;
padding-block: clamp(3rem, 10vw, 6rem);
}
.notfound h1 {
font-size: clamp(2rem, 6vw, 3rem);
}
.notfound p {
color: var(--on-night2);
max-width: 32rem;
}
/* ---------------------------------------------------------------- motion -- */
/* Content is visible by default and only ever hidden by script that is also
able to show it again. A `.reveal { opacity: 0 }` default would blank half
the page for anyone whose site.js failed to load. */
.js-reveal .reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease);
}
.js-reveal .reveal.is-in {
opacity: 1;
transform: none;
}
/* Siblings arrive one after another. */
.js-reveal .grid4 > .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .grid4 > .reveal:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .grid4 > .reveal:nth-child(4) { transition-delay: 0.24s; }
/* The tilting glass composes its own transform, so the reveal for it moves a
wrapper instead. */
.js-reveal .reveal.glass {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(22px);
}
.js-reveal .reveal.glass.is-in {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js-reveal .reveal {
opacity: 1;
transform: none;
transition: none;
}
.road,
.bokeh span,
.stage-idle,
.float,
.marquee-track {
animation: none !important;
}
.stage,
.glass,
.lean .phone,
.cf-item {
transition: none !important;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: more) {
.glass,
.faq details,
.card {
border-color: var(--ink3);
background: var(--card);
}
.lede,
.proof li,
.fineprint {
color: var(--on-night);
}
}
@media print {
.nav,
.langbar,
.btn,
.stores,
.bokeh,
.road-wrap,
.horizon,
.marquee,
.cf-controls,
.float {
display: none !important;
}
body,
.hero,
.night,
.night-deep,
.join,
footer.site {
background: #fff !important;
color: #000 !important;
}
.stage .phone {
position: static;
transform: none !important;
width: 40%;
}
}
/* The city box: free text with a datalist of suggestions. Chrome draws its own
picker arrow inside a list-backed input; the box should read as text, not a
dropdown, because typing a city we do not know is the intended path. */
.field input[list]::-webkit-calendar-picker-indicator {
display: none !important;
}
/* ── The waitlist sheet ─────────────────────────────────────────────────────
A native