TMCandClaude Opus 5.5
0fbefd2ca6
Labels: each layer's pin now sits on its outer rounded corner, the layer's rightmost point, so a tag straight across from it is joined by a short line that crosses nothing; the stack moves left by just enough for the tags to fit, and the open stack is a little smaller so it keeps clear of the chapter's heading. While the stack is open, scrolling walks through the layers from the glass to the wallpaper: the one looked at stays bright and its tag lights up cyan, the others dim (where the tags are shown). Chapter 8 is three screens long for it. Centring: the labels' list sat in the stage's grid flow, so the grid split its height into two rows and the story phone was centred in the top one (about 100 px high on a 1146 px window). It is out of the flow now; measured equal gaps above and below at 2000 x 1146, 1440 x 900 and 1280 x 720. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
931 lines
55 KiB
CSS
931 lines
55 KiB
CSS
/* Flexera Launcher landing page.
|
|
Brutal layout (hard 2px lines, solid slabs, offset shadows) in the app icon's neon colours.
|
|
Fonts are served from this folder: nothing is loaded from anyone else. */
|
|
|
|
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
|
|
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
|
|
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
|
|
@font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
|
|
|
|
:root {
|
|
--bg: #07070d;
|
|
--bg-2: #0e0d1d;
|
|
--fg: #f5f4ff;
|
|
--dim: #b4b2d2;
|
|
--ink: #07070d;
|
|
|
|
/* From the icon: ice and cyan at the top of the F, electric blue, deep indigo, violet, hot pink. */
|
|
--ice: #76fafc;
|
|
--cyan: #1ddbfd;
|
|
--blue: #417df4;
|
|
--indigo: #0d0b72;
|
|
--violet: #653df0;
|
|
--purple: #9c0ff6;
|
|
--pink: #fc59fb;
|
|
--grad: linear-gradient(95deg, #76fafc 0%, #1ddbfd 16%, #417df4 40%, #653df0 64%, #c866fa 82%, #fc59fb 100%);
|
|
|
|
--display: "Unbounded", "Arial Black", system-ui, sans-serif;
|
|
--body: "Space Grotesk", system-ui, sans-serif;
|
|
--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
|
|
--ui: "Outfit", system-ui, sans-serif;
|
|
|
|
--pad: clamp(16px, 4vw, 56px);
|
|
--b: 2px;
|
|
--max: 1520px;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font: 400 17px/1.55 var(--body);
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: clip;
|
|
}
|
|
/* Film grain over everything, very faint. */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 90;
|
|
opacity: .055;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
img, svg { display: block; }
|
|
a { color: inherit; }
|
|
::selection { background: var(--pink); color: var(--ink); }
|
|
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
|
|
|
|
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
|
.gly { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
|
|
.gly .fill, .fill { fill: currentColor; stroke: none; }
|
|
|
|
.skip {
|
|
position: absolute; left: 12px; top: -60px; z-index: 200;
|
|
background: var(--cyan); color: var(--ink); padding: 10px 14px; font: 700 14px var(--mono);
|
|
border: var(--b) solid var(--ink); text-decoration: none;
|
|
}
|
|
.skip:focus { top: 12px; }
|
|
|
|
/* ---------- type helpers ---------- */
|
|
.grad {
|
|
background: var(--grad);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.tag {
|
|
margin: 0;
|
|
font: 700 13px/1 var(--mono);
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--cyan);
|
|
}
|
|
.tag--ink { color: var(--ink); }
|
|
.h2 {
|
|
margin: .35em 0 0;
|
|
font: 900 clamp(40px, 7.2vw, 118px)/.9 var(--display);
|
|
letter-spacing: -.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
/* Lines that slide up out of a mask when their heading scrolls into view. */
|
|
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
|
|
.line__in { display: block; transform: translateY(108%); transition: transform 1s cubic-bezier(.2, .8, .1, 1); }
|
|
.line + .line .line__in { transition-delay: .09s; }
|
|
.in .line__in { transform: none; }
|
|
|
|
.rv:not(.hero__title):not(.h2):not(.get__title) { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .1, 1); }
|
|
.rv.in:not(.hero__title):not(.h2):not(.get__title) { opacity: 1; transform: none; }
|
|
|
|
.meta { margin: 18px 0 0; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
|
|
.meta i { font-style: normal; color: var(--pink); margin: 0 .35em; }
|
|
.meta--ink { color: var(--ink); }
|
|
.meta--ink i { color: var(--ink); }
|
|
|
|
/* ---------- buttons ---------- */
|
|
.btn {
|
|
--c: var(--cyan);
|
|
--sh: var(--fg);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .7em;
|
|
padding: 1.05em 1.45em;
|
|
font: 800 15px/1 var(--display);
|
|
letter-spacing: .01em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: var(--ink);
|
|
background: var(--c);
|
|
border: var(--b) solid var(--fg);
|
|
box-shadow: 6px 6px 0 var(--sh);
|
|
transition: transform .14s ease, box-shadow .14s ease, background .2s;
|
|
cursor: pointer;
|
|
}
|
|
.btn .gly { width: 1.25em; height: 1.25em; stroke-width: 2.6; }
|
|
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--sh); }
|
|
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--sh); }
|
|
.btn--pink { --c: var(--pink); }
|
|
.btn--cyan { --c: var(--cyan); }
|
|
.btn--ghost { background: transparent; color: var(--fg); --sh: var(--violet); }
|
|
.btn--sm { padding: .8em 1.05em; font-size: 12px; box-shadow: 4px 4px 0 var(--sh); }
|
|
.btn--sm:hover { box-shadow: 6px 6px 0 var(--sh); }
|
|
.btn--big { font-size: clamp(14px, 1.1vw, 17px); }
|
|
.btn--huge { font-size: clamp(18px, 2.2vw, 30px); padding: 1em 1.3em; border-color: var(--ink); --sh: var(--ink); }
|
|
|
|
.textlink {
|
|
display: inline-flex; align-items: center; gap: .5em;
|
|
font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
|
text-decoration: none; border-bottom: var(--b) solid currentColor; padding-bottom: 4px;
|
|
}
|
|
.textlink:hover { color: var(--pink); }
|
|
|
|
/* ---------- nav ---------- */
|
|
.nav {
|
|
position: fixed; inset: 0 0 auto 0; z-index: 80;
|
|
display: flex; align-items: center; gap: 28px;
|
|
padding: 14px var(--pad);
|
|
transition: background .3s, border-color .3s;
|
|
border-bottom: var(--b) solid transparent;
|
|
}
|
|
.nav.is-scrolled { background: rgba(7, 7, 13, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
|
|
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 900 18px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
|
|
.nav__brand img { width: 40px; height: 40px; }
|
|
.nav__links { display: flex; gap: 26px; margin-left: auto; }
|
|
.nav__links a { font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 6px 0; border-bottom: var(--b) solid transparent; }
|
|
.nav__links a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }
|
|
.nav__progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; }
|
|
.nav__progress i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
|
|
|
|
/* ---------- hero ---------- */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
padding: 120px var(--pad) 70px;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(60% 50% at 85% 30%, rgba(101, 61, 240, .35), transparent 70%),
|
|
radial-gradient(40% 40% at 10% 90%, rgba(29, 219, 253, .14), transparent 70%),
|
|
var(--bg);
|
|
}
|
|
.hero::before { /* the layout grid, drawn */
|
|
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
|
|
background-image:
|
|
linear-gradient(to right, rgba(245, 244, 255, .06) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(245, 244, 255, .06) 1px, transparent 1px);
|
|
background-size: 96px 96px;
|
|
mask-image: linear-gradient(to bottom, #000 40%, transparent);
|
|
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
|
|
}
|
|
.hero__ghost {
|
|
position: absolute; left: -1vw; bottom: -5.5vw;
|
|
font: 900 26vw/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase;
|
|
/* A faint solid fill, never an outline: the variable font draws its letters from overlapping
|
|
shapes, and an outline would trace every overlap. */
|
|
background: linear-gradient(180deg, rgba(118, 250, 252, .11), rgba(101, 61, 240, .07) 60%, rgba(252, 89, 251, .05));
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
white-space: nowrap; pointer-events: none; user-select: none;
|
|
}
|
|
.hero__grid {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
|
|
gap: clamp(24px, 4vw, 80px);
|
|
align-items: center;
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
}
|
|
.kicker {
|
|
display: inline-flex; align-items: center; gap: 10px; margin: 0;
|
|
padding: 9px 14px; border: var(--b) solid var(--fg);
|
|
font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
|
|
}
|
|
.kicker i { font-style: normal; color: var(--pink); }
|
|
.kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(29, 219, 253, .2); animation: blink 1.6s steps(2) infinite; }
|
|
@keyframes blink { 50% { opacity: .2; } }
|
|
.hero__title {
|
|
margin: 26px 0 28px;
|
|
font: 900 clamp(50px, 8.4vw, 158px)/.86 var(--display);
|
|
letter-spacing: -.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.lead { margin: 0; max-width: 33em; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: #dddbf3; }
|
|
.cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; }
|
|
|
|
.hero__stage { position: relative; display: grid; place-items: center; perspective: 1600px; padding: 20px 0; }
|
|
.hero__slab {
|
|
position: absolute; inset: 9% 3% 12% 14%;
|
|
background: var(--violet);
|
|
border: var(--b) solid var(--fg);
|
|
box-shadow: 14px 14px 0 var(--pink);
|
|
transform: rotate(-5deg);
|
|
}
|
|
.hero__tilt {
|
|
position: relative;
|
|
transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 8deg)) rotateZ(var(--rz, 3deg));
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
}
|
|
.hero .phone-host { width: min(360px, 74vw); }
|
|
.sticker {
|
|
position: absolute; z-index: 3;
|
|
padding: 11px 14px;
|
|
font: 800 14px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em;
|
|
color: var(--ink); background: var(--cyan);
|
|
border: var(--b) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
|
|
animation: bob 4s ease-in-out infinite;
|
|
}
|
|
.sticker--a { top: 12%; left: -2%; transform: rotate(-9deg); }
|
|
.sticker--b { top: 54%; right: -3%; background: var(--pink); transform: rotate(7deg); animation-delay: -2s; }
|
|
@keyframes bob { 50% { translate: 0 -10px; } }
|
|
.spinner { position: absolute; left: 0; bottom: 4%; width: 128px; height: 128px; z-index: 3; display: grid; place-items: center; }
|
|
.spinner__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
|
|
.spinner__ring text { font: 700 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; fill: var(--fg); }
|
|
.spinner__arrow { width: 38px; height: 38px; color: var(--ink); background: var(--ice); border-radius: 50%; padding: 8px; stroke-width: 2.8; border: var(--b) solid var(--ink); }
|
|
@keyframes spin { to { rotate: 360deg; } }
|
|
|
|
/* ---------- marquees ---------- */
|
|
.bands { position: relative; overflow: hidden; padding-bottom: 30px; } /* the tilted band stays inside */
|
|
.marquee { position: relative; overflow: hidden; z-index: 2; }
|
|
.marquee--cyan { background: var(--cyan); color: var(--ink); }
|
|
.marquee--pink { background: var(--pink); color: var(--ink); transform: rotate(-1.6deg) scale(1.03); margin-top: -4px; border-top: var(--b) solid var(--ink); }
|
|
.marquee__track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
|
|
.marquee__track span {
|
|
display: inline-flex; align-items: center; gap: .55em; padding: .32em .55em .32em 0;
|
|
font: 900 clamp(26px, 3.8vw, 58px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em;
|
|
}
|
|
.marquee__track span::after {
|
|
content: ""; width: .62em; height: .62em; flex: none;
|
|
background: currentColor;
|
|
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
|
|
}
|
|
|
|
/* ---------- sections ---------- */
|
|
section { position: relative; }
|
|
.section-head { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--pad) clamp(30px, 4vw, 60px); }
|
|
|
|
/* ---------- story ---------- */
|
|
.story__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--pad);
|
|
}
|
|
.story__stage {
|
|
grid-column: 2; grid-row: 1;
|
|
position: sticky; top: 0;
|
|
height: 100vh; height: 100svh;
|
|
display: grid; place-items: center;
|
|
align-self: start;
|
|
}
|
|
.story__num {
|
|
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
|
|
font: 900 clamp(180px, 30vw, 480px)/1 var(--display); letter-spacing: -.07em;
|
|
color: rgba(245, 244, 255, .045); /* filled, not outlined, for the same reason as .hero__ghost */
|
|
pointer-events: none; user-select: none;
|
|
}
|
|
.story__phones { position: relative; z-index: 1; height: min(84vh, 880px); height: min(84svh, 880px); aspect-ratio: 414 / 868; }
|
|
.story__phones .phone-host, .story__phones .xhost { position: absolute; inset: 0; height: auto; }
|
|
.story__phones .xhost { visibility: hidden; }
|
|
/* Chapter 8 is two screens long; its text stays put while the phone comes apart. */
|
|
.step.step--long { min-height: 300vh; min-height: 300svh; align-items: flex-start; }
|
|
.step.step--long .step__card { position: sticky; top: max(96px, calc(50vh - 170px)); }
|
|
.story__rail { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
|
|
.story__rail li { width: 12px; height: 34px; border: var(--b) solid var(--fg); transition: background .3s, height .3s; }
|
|
.story__rail li.done { background: var(--fg); }
|
|
.story__rail li.on { background: var(--pink); height: 54px; }
|
|
.story__steps { grid-column: 1; grid-row: 1; padding-bottom: 50vh; padding-bottom: 50svh; }
|
|
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-right: 4vw; }
|
|
.step__card { opacity: .16; transition: opacity .5s ease; }
|
|
.step.is-active .step__card { opacity: 1; }
|
|
.step__no { margin: 0; font: 700 14px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
|
|
.step__title { margin: 18px 0 22px; font: 900 clamp(34px, 4.3vw, 74px)/.94 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
|
|
.step__text { margin: 0; max-width: 30em; font-size: clamp(18px, 1.35vw, 21px); color: #dcdaf3; }
|
|
.step__gesture { display: inline-flex; gap: 12px; margin: 30px 0 0; padding: 10px 14px; border: var(--b) solid var(--fg); font: 700 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
|
|
.step__gesture span { color: var(--cyan); }
|
|
|
|
/* ---------- details ---------- */
|
|
.cards {
|
|
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
|
|
gap: 0;
|
|
}
|
|
.card {
|
|
position: relative;
|
|
min-height: 380px;
|
|
padding: 28px 28px 32px;
|
|
border: var(--b) solid var(--fg);
|
|
margin: 0 -2px -2px 0; /* collapse the borders into a single grid */
|
|
display: flex; flex-direction: column;
|
|
transition: transform .2s ease, box-shadow .2s ease, z-index 0s .2s;
|
|
}
|
|
.card:hover { transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--fg); z-index: 2; transition: transform .2s ease, box-shadow .2s ease; }
|
|
.card h3 { margin: auto 0 12px; font: 900 clamp(24px, 2.2vw, 34px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
|
|
.card p { margin: 0; font-size: 17px; line-height: 1.5; }
|
|
.card__no { position: absolute; top: 22px; right: 24px; font: 800 14px var(--mono); }
|
|
.card--ink { background: var(--bg-2); }
|
|
.card--ink p { color: var(--dim); }
|
|
.card--cyan { background: var(--cyan); color: var(--ink); }
|
|
.card--violet { background: var(--violet); }
|
|
.card--pink { background: var(--pink); color: var(--ink); }
|
|
.card__art { height: 150px; margin-bottom: 28px; position: relative; }
|
|
|
|
/* card art: alphabet that hops from edge to edge */
|
|
.art-flip__phone { position: absolute; left: 0; top: 0; width: 120px; height: 150px; border: var(--b) solid currentColor; border-radius: 18px; }
|
|
.art-flip__phone b { position: absolute; top: 12px; right: 8px; width: 12px; font: 700 10px/1.25 var(--ui); text-align: center; word-break: break-all; color: var(--cyan); transition: right .55s cubic-bezier(.7, 0, .3, 1); }
|
|
.art-flip.is-left .art-flip__phone b { right: 96px; }
|
|
/* compact and comfy rows */
|
|
.art-rows { display: flex; gap: 22px; }
|
|
.art-rows__col { display: flex; flex-direction: column; gap: 9px; width: 120px; padding: 12px; border: var(--b) solid var(--ink); border-radius: 14px; }
|
|
.art-rows__col b { display: block; height: 12px; background: var(--ink); border-radius: 3px; }
|
|
.art-rows__col--comfy { gap: 16px; }
|
|
.art-rows__col--comfy b { height: 20px; }
|
|
/* update bar */
|
|
.art-update { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
|
|
.art-update__v { font: 900 46px/1 var(--display); letter-spacing: -.04em; }
|
|
.art-update__bar { display: block; height: 22px; border: var(--b) solid var(--fg); }
|
|
.art-update__bar b { display: block; height: 100%; background: var(--fg); animation: fillbar 3.2s cubic-bezier(.6, 0, .2, 1) infinite; }
|
|
@keyframes fillbar { 0% { width: 0; } 70%, 100% { width: 100%; } }
|
|
/* move in */
|
|
.art-move { display: flex; align-items: center; gap: 18px; }
|
|
.art-move__box { display: grid; place-items: center; width: 92px; height: 92px; border: var(--b) solid var(--ink); background: var(--fg); color: var(--ink); font: 900 26px var(--display); font-style: normal; box-shadow: 5px 5px 0 var(--ink); }
|
|
.art-move__box--f { background: var(--ink); }
|
|
.art-move__box--f img { width: 60px; height: 60px; }
|
|
.art-move__arrow { width: 44px; height: 44px; stroke-width: 3; animation: nudge 1.2s ease-in-out infinite; }
|
|
@keyframes nudge { 50% { translate: 8px 0; } }
|
|
/* icon shapes to pick from */
|
|
.art-shapes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.art-shapes button { all: unset; cursor: pointer; padding: 5px; border: var(--b) solid transparent; transition: border-color .2s, transform .15s; }
|
|
.art-shapes button:hover { transform: translateY(-3px); }
|
|
.art-shapes button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
|
|
.art-shapes button[aria-pressed="true"] { border-color: var(--cyan); }
|
|
.art-shapes i { display: block; width: 60px; height: 60px; background: var(--grad); border: var(--b) solid var(--fg); }
|
|
.art-shapes [data-shape="squircle"] i { border-radius: 30%; }
|
|
.art-shapes [data-shape="circle"] i { border-radius: 50%; }
|
|
.art-shapes [data-shape="square"] i { border-radius: 14%; }
|
|
.art-shapes [data-shape="teardrop"] i { border-radius: 50% 50% 50% 14%; }
|
|
|
|
/* switches on the cards */
|
|
.cards__note { max-width: var(--max); margin: 0 auto 22px; padding: 0 var(--pad); font: 700 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }
|
|
.card__try, .card__seg button {
|
|
font: 700 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
|
padding: 12px 15px; border: var(--b) solid currentColor; background: transparent; color: inherit; cursor: pointer;
|
|
transition: background .2s, color .2s, transform .14s, box-shadow .14s, translate .3s cubic-bezier(.2, .8, .2, 1);
|
|
}
|
|
.card__try { align-self: flex-start; margin-top: 24px; box-shadow: 4px 4px 0 var(--cyan); }
|
|
.card__try:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cyan); }
|
|
.card__try[aria-pressed="true"] { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
|
|
.card__seg { display: inline-flex; align-self: flex-start; margin-top: 24px; }
|
|
.card__seg button + button { border-left: 0; }
|
|
.card__seg button[aria-pressed="true"] { background: var(--ink); color: var(--cyan); border-color: var(--ink); }
|
|
/* double tap */
|
|
.art-tap { display: grid; place-items: center; }
|
|
.art-tap i { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); animation: tap 1.8s ease-out infinite; }
|
|
.art-tap i:nth-child(2) { animation-delay: .22s; }
|
|
@keyframes tap { 0% { scale: .3; opacity: 1; } 60%, 100% { scale: 2.3; opacity: 0; } }
|
|
|
|
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--pad); }
|
|
.stat { padding: 0 20px; border-left: var(--b) solid var(--fg); }
|
|
.stat b { display: block; font: 900 clamp(70px, 10vw, 170px)/.9 var(--display); letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
|
|
.stat span { display: block; margin-top: 14px; font: 700 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
|
|
|
|
/* ---------- privacy ---------- */
|
|
.privacy {
|
|
background: var(--cyan);
|
|
color: var(--ink);
|
|
padding: clamp(80px, 11vw, 150px) var(--pad);
|
|
}
|
|
.privacy > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
|
|
.privacy__title { margin-top: 22px; margin-bottom: clamp(40px, 6vw, 80px); font: 900 clamp(40px, 6.8vw, 112px)/.92 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
|
|
.privacy__hl { display: inline-block; padding: 0 .12em; background: var(--ink); color: var(--cyan); transform: rotate(-2deg); }
|
|
.privacy__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
|
.pitem { position: relative; padding: 34px 34px 40px 0; border-top: 3px solid var(--ink); }
|
|
.pitem + .pitem { padding-left: 34px; border-left: 3px solid var(--ink); }
|
|
.pitem__no { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--cyan); font: 900 24px var(--display); }
|
|
.pitem h3 { margin: 22px 0 10px; font: 900 clamp(24px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
|
|
.pitem p { margin: 0; max-width: 28em; font-size: clamp(17px, 1.35vw, 20px); }
|
|
.privacy__end { margin-top: clamp(40px, 6vw, 80px); padding-top: 34px; border-top: 3px solid var(--ink); font: 900 clamp(26px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
|
|
.privacy__note { margin-top: 26px; font: 600 14px/1.5 var(--mono); }
|
|
|
|
/* ---------- playground ---------- */
|
|
.play {
|
|
background:
|
|
linear-gradient(to right, rgba(245, 244, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
|
|
linear-gradient(to bottom, rgba(245, 244, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
|
|
var(--bg);
|
|
}
|
|
.play__grid {
|
|
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: clamp(30px, 5vw, 90px);
|
|
align-items: center;
|
|
max-width: var(--max); margin: 0 auto;
|
|
padding: 0 var(--pad) clamp(80px, 10vw, 140px);
|
|
}
|
|
.play__stage { display: grid; place-items: center; position: relative; }
|
|
.play__stage::before {
|
|
content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
|
|
background: radial-gradient(closest-side, rgba(101, 61, 240, .55), rgba(252, 89, 251, .18) 60%, transparent);
|
|
filter: blur(30px);
|
|
}
|
|
.play .phone-host { height: min(82vh, 860px); height: min(82svh, 860px); position: relative; touch-action: none; }
|
|
.play__caption {
|
|
margin: 0 0 28px; min-height: 3.2em;
|
|
font: 800 clamp(22px, 2.2vw, 34px)/1.15 var(--display); letter-spacing: -.03em; text-transform: uppercase;
|
|
}
|
|
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
|
|
.chip {
|
|
display: inline-flex; align-items: center; gap: 9px;
|
|
padding: 12px 16px;
|
|
font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
|
color: var(--fg); background: transparent;
|
|
border: var(--b) solid var(--fg); box-shadow: 4px 4px 0 var(--violet);
|
|
cursor: pointer; transition: transform .12s, box-shadow .12s, background .2s, color .2s;
|
|
}
|
|
.chip .gly { width: 18px; height: 18px; }
|
|
.chip:hover { background: var(--fg); color: var(--ink); }
|
|
.chip:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--violet); }
|
|
.chip.is-on { background: var(--cyan); color: var(--ink); }
|
|
.chip--ghost { box-shadow: none; border-style: dashed; }
|
|
.howto { margin: 36px 0 0; padding: 0; list-style: none; border-top: var(--b) solid var(--fg); }
|
|
.howto li { padding: 13px 0; border-bottom: 1px solid rgba(245, 244, 255, .2); font-size: 17px; color: var(--dim); }
|
|
.howto b { color: var(--fg); font-weight: 700; }
|
|
|
|
/* ---------- get it ---------- */
|
|
.get { background: var(--violet); padding: clamp(80px, 11vw, 150px) var(--pad); }
|
|
.get > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
|
|
.get .tag { color: var(--fg); }
|
|
.get__title { margin-top: 10px; margin-bottom: clamp(30px, 5vw, 70px); font: 900 clamp(44px, 14.6vw, 260px)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; color: var(--fg); text-shadow: .045em .045em 0 var(--ink); }
|
|
.get__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
|
|
.qr {
|
|
margin: 0; padding: 22px; width: clamp(220px, 22vw, 300px);
|
|
background: var(--fg); color: var(--ink);
|
|
border: var(--b) solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
|
|
transform: rotate(-3deg);
|
|
}
|
|
.qr__code { width: 100%; height: auto; }
|
|
.qr__code path { fill: none; stroke-width: 1; shape-rendering: crispEdges; }
|
|
.qr figcaption { margin-top: 14px; font: 700 12.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
|
|
.get__main { display: flex; flex-direction: column; align-items: flex-start; }
|
|
.get .btn--huge { --c: var(--pink); }
|
|
.steps { counter-reset: s; margin: 40px 0 34px; padding: 0; list-style: none; max-width: 40em; }
|
|
.steps li { counter-increment: s; position: relative; padding: 16px 0 16px 64px; border-top: var(--b) solid var(--ink); font-size: clamp(17px, 1.3vw, 20px); }
|
|
.steps li:last-child { border-bottom: var(--b) solid var(--ink); }
|
|
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 16px; font: 900 22px/1 var(--display); color: var(--ice); }
|
|
.get .textlink { color: var(--fg); }
|
|
.faq { margin-top: clamp(60px, 8vw, 110px); border-top: 3px solid var(--ink); }
|
|
.faq details { border-bottom: 3px solid var(--ink); }
|
|
.faq summary {
|
|
list-style: none; cursor: pointer; position: relative;
|
|
padding: 24px 60px 24px 0;
|
|
font: 800 clamp(18px, 1.8vw, 28px)/1.15 var(--display); letter-spacing: -.02em; text-transform: uppercase;
|
|
}
|
|
.faq summary::-webkit-details-marker { display: none; }
|
|
.faq summary::after {
|
|
content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
|
|
background: linear-gradient(var(--fg), var(--fg)) center / 100% 4px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 4px 100% no-repeat;
|
|
transition: rotate .25s;
|
|
}
|
|
.faq details[open] summary::after { rotate: 45deg; }
|
|
.faq details p { margin: 0 0 26px; max-width: 46em; font-size: clamp(17px, 1.3vw, 19px); }
|
|
|
|
/* ---------- footer ---------- */
|
|
.foot { padding: 40px var(--pad) 34px; overflow: hidden; }
|
|
.foot__word {
|
|
font: 900 16.6vw/.8 var(--display); letter-spacing: -.07em; text-transform: uppercase;
|
|
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
|
|
margin: 0 0 30px -.03em; white-space: nowrap;
|
|
}
|
|
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding-top: 22px; border-top: var(--b) solid var(--fg); font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
|
|
.foot__row p { margin: 0; }
|
|
.foot__row .textlink { margin-left: auto; color: var(--fg); }
|
|
|
|
/* =====================================================================
|
|
The phone. Drawn at 390 x 844 (a phone's CSS pixels) and scaled to fit
|
|
its host, so every measurement inside stays the same at any size.
|
|
===================================================================== */
|
|
.phone-host { position: relative; aspect-ratio: 414 / 868; }
|
|
.phone {
|
|
position: absolute; left: 0; top: 0;
|
|
width: 414px; height: 868px;
|
|
padding: 12px;
|
|
border-radius: 60px;
|
|
background: linear-gradient(150deg, #34324d, #121122 45%, #08070f);
|
|
box-shadow:
|
|
inset 0 0 0 2px #4a4767,
|
|
inset 0 0 0 5px #0a0914,
|
|
0 50px 90px -30px rgba(101, 61, 240, .7),
|
|
0 0 0 2px #000;
|
|
transform-origin: 0 0;
|
|
transform: scale(var(--s, .5));
|
|
user-select: none; -webkit-user-select: none;
|
|
}
|
|
.phone::before, .phone::after { /* side buttons */
|
|
content: ""; position: absolute; right: -4px; width: 4px; border-radius: 0 3px 3px 0; background: #2b2940;
|
|
}
|
|
.phone::before { top: 190px; height: 70px; }
|
|
.phone::after { top: 290px; height: 110px; }
|
|
.screen {
|
|
position: relative;
|
|
width: 390px; height: 844px;
|
|
border-radius: 48px;
|
|
overflow: hidden;
|
|
background: #05061a;
|
|
font-family: var(--ui);
|
|
color: #fff;
|
|
isolation: isolate;
|
|
contain: strict;
|
|
}
|
|
.screen * { box-sizing: border-box; }
|
|
.screen .ic svg, .screen .gl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
/* wallpaper and home screen sit in one layer, so the folder blur takes both */
|
|
.world { position: absolute; inset: 0; transform-origin: 50% 50%; }
|
|
.wall {
|
|
position: absolute; inset: -30px;
|
|
background:
|
|
radial-gradient(70% 38% at 8% 12%, rgba(29, 219, 253, .62), transparent 70%),
|
|
radial-gradient(60% 34% at 95% 92%, rgba(252, 89, 251, .55), transparent 70%),
|
|
radial-gradient(55% 30% at 78% 40%, rgba(101, 61, 240, .7), transparent 72%),
|
|
linear-gradient(168deg, #2a1fb8 0%, #120d82 30%, #0a0954 58%, #050525 100%);
|
|
}
|
|
.wall::before, .wall::after { /* the icon's sweeping light lines */
|
|
content: ""; position: absolute; border-radius: 50%;
|
|
border-top: 3px solid rgba(118, 250, 252, .55);
|
|
filter: blur(1.5px);
|
|
}
|
|
.wall::before { left: -40%; top: 18%; width: 150%; height: 70%; transform: rotate(-22deg); }
|
|
.wall::after { left: -10%; top: 52%; width: 150%; height: 60%; transform: rotate(-24deg); border-top-color: rgba(252, 89, 251, .5); }
|
|
|
|
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 40px; padding: 14px 28px 0; display: flex; justify-content: space-between; font: 600 14px/1 var(--ui); z-index: 30; pointer-events: none; }
|
|
.sbar__icons { display: flex; align-items: center; gap: 6px; }
|
|
.sbar__sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
|
|
.sbar__sig i { width: 3px; background: #fff; border-radius: 1px; }
|
|
.sbar__sig i:nth-child(1) { height: 4px; } .sbar__sig i:nth-child(2) { height: 6px; } .sbar__sig i:nth-child(3) { height: 8px; } .sbar__sig i:nth-child(4) { height: 11px; }
|
|
.sbar__bat { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid #fff; padding: 1.5px; }
|
|
.sbar__bat::before { content: ""; display: block; width: 72%; height: 100%; background: #fff; border-radius: 1px; }
|
|
.notch { position: absolute; left: 50%; top: 12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #000; z-index: 31; box-shadow: inset 0 0 0 4px #111; }
|
|
|
|
.home { position: absolute; inset: 0; transform-origin: 50% 60%; }
|
|
.pages { position: absolute; inset: 0; }
|
|
.page { position: absolute; top: 0; width: 390px; height: 844px; }
|
|
.cell { position: absolute; display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
|
|
.cell .lbl { margin-top: 7px; font: 500 12.5px/1.2 var(--ui); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); white-space: nowrap; }
|
|
.cell.tap .ic, .cell.tap .fic { animation: tapb .3s ease; }
|
|
@keyframes tapb { 40% { transform: scale(.86); } }
|
|
.ic {
|
|
position: relative; display: grid; place-items: center;
|
|
width: 58px; height: 58px; border-radius: var(--shape, 30%);
|
|
transition: border-radius .35s ease;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, var(--a), var(--b));
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(0, 0, 0, .55);
|
|
flex: none;
|
|
}
|
|
.ic svg { width: 46%; height: 46%; }
|
|
.ndot { position: absolute; top: 4px; left: calc(50% + 20px); width: 13px; height: 13px; border-radius: 50%; background: var(--pink); border: 2px solid #0d0b40; }
|
|
.fic { width: 58px; height: 58px; padding: 7px; border-radius: var(--shape, 30%); transition: border-radius .35s ease; background: rgba(236, 233, 249, .94); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
|
.ic--mini { width: 100%; height: auto; aspect-ratio: 1; box-shadow: none; }
|
|
.ic--mini svg { stroke-width: 2.6; }
|
|
|
|
.w-clock { position: absolute; padding: 26px 18px 0; }
|
|
.clk__line { white-space: nowrap; }
|
|
.clk__line > span { display: inline-block; will-change: transform; }
|
|
.clk__time { font: 300 88px/1 var(--ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
|
|
.clk__date { margin-top: 8px; font: 500 18px/1.2 var(--ui); }
|
|
.clk__wx { margin-top: 4px; font: 400 16px/1.2 var(--ui); opacity: .92; }
|
|
|
|
.w-pics { position: absolute; padding: 8px 12px 18px; }
|
|
.pics { position: relative; width: 100%; height: 100%; border-radius: var(--shape-w, 30px); transition: border-radius .35s ease; overflow: hidden; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
|
|
.pic { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
|
|
.pic.on { opacity: 1; }
|
|
.pic--a { /* sunset over water */
|
|
background:
|
|
radial-gradient(circle at 50% 58%, #fff1b8 0 9%, #ffc56b 10%, transparent 30%),
|
|
linear-gradient(to bottom, transparent 62%, rgba(10, 6, 60, .9) 62%),
|
|
repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255, 190, 120, .28) 7px 9px) 0 62% / 100% 38% no-repeat,
|
|
linear-gradient(to bottom, #3b1c8f, #c2399b 40%, #ff7a59 62%);
|
|
}
|
|
.pic--b { /* mountains */
|
|
background:
|
|
linear-gradient(150deg, transparent 52%, #1a1660 52.4%) 0 100% / 60% 62% no-repeat,
|
|
linear-gradient(-140deg, transparent 50%, #2a2390 50.4%) 100% 100% / 75% 75% no-repeat,
|
|
linear-gradient(140deg, transparent 50%, #3c32b8 50.4%) 0 100% / 75% 55% no-repeat,
|
|
radial-gradient(circle at 72% 28%, #fff 0 6%, transparent 7%),
|
|
linear-gradient(to bottom, #1ddbfd, #417df4 55%, #9a7dff);
|
|
}
|
|
.pic--c { /* neon city */
|
|
background:
|
|
linear-gradient(to top, #fc59fb 0 2px, transparent 2px) 0 100% / 100% 100% no-repeat,
|
|
linear-gradient(#0a0920, #0a0920) 8% 100% / 16% 58% no-repeat,
|
|
linear-gradient(#120f33, #120f33) 28% 100% / 18% 76% no-repeat,
|
|
linear-gradient(#0a0920, #0a0920) 52% 100% / 14% 48% no-repeat,
|
|
linear-gradient(#17134a, #17134a) 74% 100% / 20% 68% no-repeat,
|
|
linear-gradient(#0a0920, #0a0920) 98% 100% / 12% 40% no-repeat,
|
|
radial-gradient(circle at 70% 22%, #fdf6ff 0 7%, transparent 8%),
|
|
linear-gradient(to bottom, #3a0d6e, #b8279b 70%, #fc59fb);
|
|
}
|
|
.pagedots { position: absolute; left: 0; right: 0; top: 748px; display: flex; justify-content: center; gap: 8px; }
|
|
.pagedots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .2s, width .2s; }
|
|
.pagedots i.on { background: #fff; width: 18px; border-radius: 4px; }
|
|
|
|
.fscrim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 10; }
|
|
.fcard {
|
|
position: absolute; left: 45px; top: 282px; width: 300px;
|
|
padding: 22px 12px 14px;
|
|
border-radius: 32px;
|
|
background: #eeebf8; color: #1c1a2d;
|
|
z-index: 11; visibility: hidden; opacity: 0;
|
|
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
|
|
}
|
|
.fcard__grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
|
|
.fcard__app { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--ui); }
|
|
.fcard__title { margin-top: 16px; text-align: center; font: 600 17px/1 var(--ui); }
|
|
|
|
.drawer { position: absolute; inset: 0; background: rgba(5, 4, 20, .8); z-index: 12; opacity: 0; visibility: hidden; }
|
|
.drawer__in { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 30px, #000 52px); mask-image: linear-gradient(to bottom, transparent 30px, #000 52px); } /* the list fades out under the status bar */
|
|
.list { position: absolute; left: 0; right: 0; top: 46px; padding: 0 58px 0 20px; will-change: transform; }
|
|
.search { display: flex; align-items: center; gap: 12px; height: 50px; margin: 6px 0 12px; padding: 0 18px; border-radius: 25px; background: #f2f0fb; color: #4b4867; font: 500 16px/1 var(--ui); }
|
|
.search .gl { width: 22px; height: 22px; color: #4b4867; stroke-width: 2.4; }
|
|
.hdr { height: 34px; padding: 12px 0 0 2px; font: 500 13px/1 var(--ui); color: #b9b6dc; }
|
|
.row { display: flex; align-items: center; gap: 15px; height: 54px; overflow: hidden; transition: background .2s; border-radius: 14px; }
|
|
.row--note { height: 64px; }
|
|
.row .ic { width: 40px; height: 40px; }
|
|
.row__t { display: flex; flex-direction: column; min-width: 0; }
|
|
.row__n { font: 500 17.5px/1.15 var(--ui); }
|
|
.row__p { margin-top: 3px; font: 400 13px/1.2 var(--ui); color: #cfcbef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.row.flash { background: rgba(255, 255, 255, .12); }
|
|
/* Settings from the detail cards. */
|
|
.is-comfy .row { height: 66px; }
|
|
.is-comfy .row--note { height: 78px; }
|
|
.is-comfy .row .ic { width: 48px; height: 48px; }
|
|
.is-comfy .row__n { font-size: 19.5px; }
|
|
.is-lefty .list { padding: 0 20px 0 58px; }
|
|
.is-lefty .alpha { right: auto; left: 8px; }
|
|
.row.held { background: rgba(255, 255, 255, .1); }
|
|
|
|
.alpha { position: absolute; right: 8px; bottom: 112px; width: 30px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
|
|
.alpha__s { width: 15px; height: 15px; margin-bottom: 8px; color: #fff; opacity: .9; }
|
|
.alpha__s svg { display: block; width: 15px; height: 15px; pointer-events: none; } /* unsized, an svg is 300 px wide and would cover the list */
|
|
.alpha__l { display: block; width: 30px; height: 21px; font: 600 12.5px/21px var(--ui); text-align: center; color: rgba(255, 255, 255, .86); transform-origin: 50% 50%; }
|
|
.alpha__l.on { color: var(--pink); font-weight: 800; }
|
|
.bubble { position: absolute; left: 0; top: 0; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font: 700 32px/1 var(--ui); box-shadow: 0 10px 30px -6px rgba(252, 89, 251, .6); opacity: 0; z-index: 3; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
|
|
|
|
.menu { position: absolute; left: 0; top: 0; width: 236px; padding: 6px 0; border-radius: 24px; background: #f6f4fd; color: #1e1c2c; z-index: 20; opacity: 0; visibility: hidden; transform-origin: 30% 0; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .65); }
|
|
.mi { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 20px; font: 500 16px/1 var(--ui); }
|
|
.mi .gl { width: 22px; height: 22px; stroke-width: 1.9; color: #3a3752; }
|
|
.mi--hide.pick { background: #e2dcff; }
|
|
|
|
.snack { position: absolute; left: 24px; right: 24px; bottom: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-radius: 18px; background: #f1eefb; color: #1b1a29; font: 500 15px/1.2 var(--ui); z-index: 21; opacity: 0; visibility: hidden; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); }
|
|
.snack__undo { all: unset; font: 700 15px/1 var(--ui); color: #5a33e6; cursor: pointer; padding: 4px; }
|
|
|
|
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 22px 36px; border-radius: 30px 30px 0 0; background: #f4f2fb; color: #1c1a2d; z-index: 22; transform: translateY(105%); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5); }
|
|
.sheet__grab { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #a9a5c2; }
|
|
.sheet h4 { margin: 0 0 10px; font: 600 22px/1.2 var(--ui); }
|
|
.sheet__h { margin: 14px 0 8px; font: 600 13.5px/1 var(--ui); color: #5d5a78; }
|
|
.seg { display: flex; border: 1.5px solid #8a86a6; border-radius: 22px; overflow: hidden; }
|
|
.seg span { flex: 1; display: grid; place-items: center; height: 40px; font: 500 14px/1 var(--ui); border-left: 1.5px solid #8a86a6; transition: background .2s; }
|
|
.seg span:first-child { border-left: 0; }
|
|
.seg span.on { background: #ddd5ff; font-weight: 700; }
|
|
|
|
.cam { position: absolute; inset: 0; background: #000; z-index: 25; visibility: hidden; transform: translateX(-100%); }
|
|
.cam__view {
|
|
position: absolute; left: 0; right: 0; top: 52px; height: 560px; overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 66% 34%, #fff6d8 0 5%, #ffd48a 6%, transparent 22%),
|
|
linear-gradient(to bottom, #4b2ac9, #c2399b 45%, #ff9b6a 70%, #ffd48a);
|
|
}
|
|
.cam__hill { position: absolute; left: -10%; right: -10%; bottom: 0; }
|
|
.cam__hill--1 { height: 46%; background: #2a1563; clip-path: polygon(0 40%, 18% 22%, 36% 46%, 55% 18%, 74% 40%, 90% 28%, 100% 36%, 100% 100%, 0 100%); }
|
|
.cam__hill--2 { height: 30%; background: #120a36; clip-path: polygon(0 30%, 25% 12%, 48% 40%, 70% 20%, 100% 44%, 100% 100%, 0 100%); }
|
|
.cam__grid { position: absolute; inset: 0; background: linear-gradient(to right, transparent 33%, rgba(255, 255, 255, .35) 33%, rgba(255, 255, 255, .35) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .35) 66%, rgba(255, 255, 255, .35) calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(to bottom, transparent 33%, rgba(255, 255, 255, .35) 33%, rgba(255, 255, 255, .35) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .35) 66%, rgba(255, 255, 255, .35) calc(66% + 1px), transparent calc(66% + 1px)); }
|
|
.cam__focus { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border: 2px solid #ffe066; border-radius: 6px; }
|
|
.cam__modes { position: absolute; left: 0; right: 0; top: 632px; display: flex; justify-content: center; gap: 26px; font: 600 13px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #9d9ab8; }
|
|
.cam__modes .on { color: var(--ice); }
|
|
.cam__bar { position: absolute; left: 0; right: 0; top: 684px; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; }
|
|
.cam__thumb { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(145deg, #ff9b6a, #4b2ac9); border: 2px solid #fff; }
|
|
.cam__shutter { width: 78px; height: 78px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #000, 0 0 0 9px #fff; transition: transform .12s ease; }
|
|
.cam__flip { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #26243a; }
|
|
.cam__flip .gl { width: 24px; height: 24px; color: #fff; }
|
|
.cam__close { position: absolute; top: 58px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font: 400 26px/1 var(--ui); cursor: pointer; }
|
|
|
|
.gbar { position: absolute; left: 50%; bottom: 9px; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: rgba(255, 255, 255, .88); z-index: 40; pointer-events: none; }
|
|
|
|
.finger {
|
|
position: absolute; left: 0; top: 0; width: 50px; height: 50px; margin: -25px 0 0 -25px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, .26);
|
|
border: 2px solid rgba(255, 255, 255, .85);
|
|
box-shadow: 0 0 0 7px rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .35);
|
|
z-index: 50; opacity: 0; pointer-events: none;
|
|
}
|
|
.finger__ring { position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--ring, 0) * 1turn), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%); mask: radial-gradient(closest-side, transparent 78%, #000 80%); }
|
|
|
|
/* ---------- the page's wave alphabet ---------- */
|
|
.pagewave {
|
|
position: fixed; right: 8px; top: 50%; translate: 0 -50%; z-index: 85;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 10px 6px; touch-action: none; user-select: none; -webkit-user-select: none;
|
|
}
|
|
.pagewave a {
|
|
display: grid; place-items: center; width: 26px; height: 27px;
|
|
font: 800 12px/1 var(--display); color: rgba(255, 255, 255, .62); text-decoration: none;
|
|
transform-origin: 100% 50%; transition: color .2s;
|
|
mix-blend-mode: difference; /* readable on the dark, cyan and violet sections alike */
|
|
}
|
|
.pagewave a:hover, .pagewave a:focus-visible { color: #fff; }
|
|
.pagewave a.on { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
|
|
.pagewave__bubble {
|
|
position: absolute; right: 66px; top: 0;
|
|
display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
|
|
background: var(--fg); color: var(--ink); border: var(--b) solid var(--ink); box-shadow: 4px 4px 0 var(--pink);
|
|
opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .2s;
|
|
}
|
|
.pagewave__bubble b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; font: 900 20px/1 var(--display); }
|
|
.pagewave__bubble i { font: 800 12.5px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
|
|
.pagewave.is-active .pagewave__bubble { opacity: 1; }
|
|
|
|
/* ---------- toast, confetti, finger cursor ---------- */
|
|
.toast {
|
|
position: fixed; left: 50%; bottom: 22px; z-index: 120; max-width: calc(100vw - 32px);
|
|
transform: translate(-50%, 160%);
|
|
padding: 13px 16px; background: var(--cyan); color: var(--ink);
|
|
border: var(--b) solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
|
|
font: 700 13px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .05em;
|
|
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
|
|
}
|
|
.toast.is-on { transform: translate(-50%, 0); }
|
|
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 150; }
|
|
.tcursor {
|
|
position: fixed; left: 0; top: 0; z-index: 140; width: 46px; height: 46px; margin: -23px 0 0 -23px;
|
|
border-radius: 50%; background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .9);
|
|
box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .35);
|
|
pointer-events: none; opacity: 0; transition: opacity .2s, scale .15s;
|
|
}
|
|
.over-phone .tcursor { opacity: 1; }
|
|
.tcursor.is-down { scale: .82; }
|
|
.over-phone .tcursor.is-down { opacity: 0; } /* the phone draws its own finger while pressed */
|
|
.over-phone .phone-host, .over-phone .phone-host * { cursor: none !important; }
|
|
.btn, .chip { transition: transform .14s ease, box-shadow .14s ease, background .2s, color .2s, translate .35s cubic-bezier(.2, .8, .2, 1); }
|
|
|
|
/* ---------- chapter 8: the phone pulled apart ---------- */
|
|
.xhost { perspective: 2600px; }
|
|
.xphone { position: absolute; left: 0; top: 0; width: 414px; height: 868px; transform-origin: 0 0; transform-style: preserve-3d; --e: 0; }
|
|
.xl { position: absolute; left: 12px; top: 12px; width: 390px; height: 844px; border-radius: 48px; overflow: hidden; font-family: var(--ui); color: #fff; box-shadow: 0 0 0 2px rgba(118, 250, 252, calc(var(--e) * .55)); }
|
|
.xl * { box-sizing: border-box; }
|
|
.xl .ic svg, .xl .gl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
.xl--body::before, .xl--body::after { content: ""; position: absolute; right: -4px; width: 4px; border-radius: 0 3px 3px 0; background: #2b2940; }
|
|
.xl--body::before { top: 190px; height: 70px; }
|
|
.xl--body::after { top: 290px; height: 110px; }
|
|
.xl--body { overflow: visible; left: 0; top: 0; width: 414px; height: 868px; border-radius: 60px; background: linear-gradient(150deg, #34324d, #121122 45%, #08070f); box-shadow: inset 0 0 0 2px #4a4767, inset 0 0 0 5px #0a0914, 0 50px 90px -30px rgba(101, 61, 240, .7), 0 0 0 2px #000; }
|
|
.xl--list { background: rgba(5, 4, 20, calc(.35 + var(--e) * .3)); }
|
|
.xl--list .list { top: 46px; }
|
|
.xl--list .alpha { bottom: 112px; }
|
|
.xl--glass::before { content: ""; position: absolute; inset: 0; opacity: var(--e); background: linear-gradient(125deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .07) 68%, rgba(255, 255, 255, 0)); }
|
|
.xl__pin { position: absolute; right: 14px; bottom: 14px; width: 1px; height: 1px; }
|
|
.anatomy__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; opacity: 0; }
|
|
.anatomy__lines path { fill: none; stroke: var(--cyan); stroke-width: 2; }
|
|
.anatomy__lines circle { fill: var(--bg); stroke: var(--cyan); stroke-width: 2.5; }
|
|
.anatomy__labels { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; } /* out of the flow, or the stage's grid would split its height and the phone sit high */
|
|
.anatomy__labels li {
|
|
position: absolute; left: 0; top: 0; z-index: 3; width: 214px; translate: 0 -50%;
|
|
padding: 9px 12px 10px; background: rgba(7, 7, 13, .94);
|
|
border: var(--b) solid var(--fg); box-shadow: 4px 4px 0 var(--violet);
|
|
opacity: 0; pointer-events: none; will-change: transform;
|
|
}
|
|
.anatomy__labels li { transition: border-color .25s, box-shadow .25s; }
|
|
.anatomy__labels li.is-on { border-color: var(--cyan); box-shadow: 4px 4px 0 var(--cyan); }
|
|
.anatomy__labels li.is-on b { color: var(--cyan); }
|
|
.anatomy__labels i { margin-right: 8px; font: 700 11px/1 var(--mono); font-style: normal; color: var(--cyan); }
|
|
.anatomy__labels b { font: 900 13px/1.15 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
|
|
.anatomy__labels span { display: block; margin-top: 6px; font: 500 12px/1.3 var(--mono); color: var(--dim); white-space: nowrap; }
|
|
|
|
/* ---------- race ---------- */
|
|
.race__grid {
|
|
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center;
|
|
max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(80px, 10vw, 140px);
|
|
}
|
|
.race__stage { position: relative; height: min(80vh, 840px); height: min(80svh, 840px); aspect-ratio: 414 / 868; margin: 0 auto; }
|
|
.race__host { position: absolute; inset: 0; transition: opacity .35s ease; touch-action: none; }
|
|
.race__stage[data-phase="between"] .race__host--grid,
|
|
.race__stage[data-phase="r2"] .race__host--grid,
|
|
.race__stage[data-phase="done"] .race__host--grid,
|
|
.race__stage[data-phase="idle"] .race__host--list,
|
|
.race__stage[data-phase="r1"] .race__host--list { opacity: 0; pointer-events: none; }
|
|
.race__overlay {
|
|
position: absolute; left: 8%; right: 8%; top: 50%; translate: 0 -50%; z-index: 3;
|
|
padding: 22px; background: var(--fg); color: var(--ink);
|
|
border: var(--b) solid var(--ink); box-shadow: 8px 8px 0 var(--pink);
|
|
transition: opacity .25s, scale .25s;
|
|
}
|
|
.race__stage[data-phase="r1"] .race__overlay, .race__stage[data-phase="r2"] .race__overlay, .race__stage[data-phase="done"] .race__overlay { opacity: 0; scale: .9; pointer-events: none; }
|
|
.race__pill {
|
|
position: absolute; left: 50%; top: -18px; translate: -50% 0; z-index: 4; margin: 0; white-space: nowrap;
|
|
padding: 9px 14px; background: var(--cyan); color: var(--ink); border: var(--b) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
|
|
font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
|
opacity: 0; transition: opacity .25s;
|
|
}
|
|
.race__pill b { font-family: var(--display); font-weight: 900; }
|
|
.race__stage[data-phase="r1"] .race__pill, .race__stage[data-phase="r2"] .race__pill, .race__stage[data-phase="between"] .race__pill { opacity: 1; }
|
|
.race__round { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
|
|
.race__msg { margin: 10px 0 0; font-size: 16px; line-height: 1.4; }
|
|
.race__find { margin: 0 0 24px; font: 800 clamp(26px, 2.6vw, 40px)/1.1 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
|
|
.race__find b { display: inline-block; padding: 0 .2em; background: var(--cyan); color: var(--ink); transform: rotate(-2deg); }
|
|
.race__times { border-top: var(--b) solid var(--fg); margin-bottom: 24px; }
|
|
.race__time { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(245, 244, 255, .25); }
|
|
.race__time span { font: 700 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
|
|
.race__time i { display: block; margin-top: 4px; font-style: normal; font-weight: 500; color: var(--dim); }
|
|
.race__time b { font: 900 clamp(34px, 4vw, 60px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
|
|
.race__verdict { min-height: 3em; margin: 0 0 26px; font: 800 clamp(18px, 1.7vw, 24px)/1.25 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
|
|
.rgrid { position: absolute; left: 8px; right: 8px; top: 52px; display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 12px; }
|
|
.rcell { all: unset; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
.rcell .ic { width: 50px; height: 50px; }
|
|
.rcell span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.15 var(--ui); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
|
|
.rcell.miss .ic, .row.miss { animation: miss .32s ease; }
|
|
.rcell.hit .ic { box-shadow: 0 0 0 4px #fff, 0 0 26px 6px rgba(118, 250, 252, .8); }
|
|
@keyframes miss { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
|
|
|
|
/* ---------- responsive ---------- */
|
|
@media (max-width: 1100px) {
|
|
.nav__links { display: none; }
|
|
.nav .btn--sm { margin-left: auto; }
|
|
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
body { font-size: 16px; }
|
|
.hero { padding-top: 104px; }
|
|
.hero__grid { grid-template-columns: minmax(0, 1fr); }
|
|
.hero__stage { margin-top: 30px; }
|
|
.hero .phone-host { width: min(300px, 70vw); }
|
|
.sticker { font-size: 12px; }
|
|
.sticker--a { left: 0; }
|
|
.sticker--b { right: 0; }
|
|
.spinner { width: 100px; height: 100px; left: 2%; }
|
|
|
|
.story__body { display: block; padding: 0; }
|
|
.story__stage { position: sticky; top: 0; place-items: start center; padding-top: 70px; overflow: hidden; } /* nothing the phones do may widen the page */
|
|
.story__phones { height: 52vh; height: 52svh; }
|
|
.step.step--long { align-items: flex-end; }
|
|
.step.step--long .step__card { position: sticky; top: auto; bottom: 4svh; }
|
|
.story__num { top: 32%; font-size: 58vw; }
|
|
.story__rail { right: 14px; top: 32%; gap: 6px; }
|
|
.story__rail li { width: 8px; height: 20px; }
|
|
.story__rail li.on { height: 32px; }
|
|
.story__steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; padding: 0 var(--pad) 50svh; }
|
|
.step { align-items: flex-end; padding: 0 0 4svh; }
|
|
.step__card { opacity: 0; background: rgba(7, 7, 13, .94); border: var(--b) solid var(--fg); box-shadow: 6px 6px 0 var(--violet); padding: 18px 18px 20px; width: 100%; }
|
|
.step__title { margin: 10px 0 10px; font-size: clamp(24px, 7vw, 34px); }
|
|
.step__text { font-size: 15.5px; line-height: 1.45; }
|
|
.step__gesture { display: none; }
|
|
|
|
.cards { grid-template-columns: minmax(0, 1fr); }
|
|
.card { min-height: 0; }
|
|
.stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
|
|
.privacy__list { grid-template-columns: 1fr; }
|
|
.pitem + .pitem { padding-left: 0; border-left: 0; }
|
|
|
|
.play__grid { grid-template-columns: minmax(0, 1fr); }
|
|
.play .phone-host { height: 72svh; }
|
|
.play__side { order: -1; }
|
|
.play__caption { min-height: 2.4em; margin-bottom: 18px; }
|
|
.howto { display: none; }
|
|
|
|
.get__grid { grid-template-columns: minmax(0, 1fr); }
|
|
.qr { justify-self: start; }
|
|
.foot__row .textlink { margin-left: 0; }
|
|
|
|
.story__rail { display: none; }
|
|
/* On phones the page alphabet shows up while scrolling, low on the edge like the launcher's. */
|
|
.pagewave { top: auto; bottom: 14svh; translate: none; right: 2px; opacity: 0; pointer-events: none; transition: opacity .3s; }
|
|
.pagewave.is-awake, .pagewave.is-active { opacity: 1; pointer-events: auto; }
|
|
.pagewave a { height: 25px; }
|
|
.pagewave__bubble { right: 58px; }
|
|
|
|
.anatomy__labels, .anatomy__lines { display: none; } /* the chapter's text names the layers */
|
|
|
|
.race__grid { grid-template-columns: minmax(0, 1fr); }
|
|
.race__side { order: -1; }
|
|
.race__stage { height: 70svh; }
|
|
.race__find { margin-bottom: 14px; }
|
|
.race__times { margin-bottom: 14px; }
|
|
.race__time { padding: 10px 0; }
|
|
.race__verdict { min-height: 0; margin-bottom: 18px; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.cta .btn { width: 100%; justify-content: space-between; }
|
|
.btn--huge { width: 100%; justify-content: space-between; font-size: 18px; }
|
|
.marquee--pink { transform: rotate(-2.5deg) scale(1.06); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
|
|
.line__in, .rv { transform: none !important; opacity: 1 !important; }
|
|
}
|