/* =========================================================================
SELF-HOSTED INSTRUMENT SANS - added during the WordPress integration.
The standalone site loaded this family from Google Fonts. The enstacked
theme already self-hosts the identical variable file at
assets/fonts/instrument-sans/, and header.php preloads it on every page
(hello_child_preload_fonts, wp_head priority 1). Declaring the face here
reuses that already-preloaded file, so the page costs zero third-party
requests and zero extra bytes, exactly as the README's "bringing the font
back in-house" section describes.
ROMAN ONLY, on purpose. The italic file exists in the theme and is
deliberately not declared: this page has no italics by design, and the
font-style guard in @layer reset below blocks the browser's synthetic
oblique so it can never be faked either.
========================================================================= */
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../../fonts/instrument-sans/instrument-sans-variable.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================================
Varn - Variants & Swatches AI | Marketing site stylesheet
Built by Enstacked Technologies
Architecture
------------
@layer reset normalise + box model
@layer base tokens, typography, page furniture
@layer layout shell, section rhythm, grid primitives
@layer components purpose-named BEM blocks
@layer utilities single-purpose helpers (always last, always wins)
Conventions
-----------
- Mobile-first. Breakpoints: 576 / 768 / 992 / 1200 / 1440.
- Every repeated value is a token in :root. No magic numbers in rules.
- Only transform / opacity / filter are animated.
- prefers-reduced-motion disables every non-essential animation.
========================================================================= */
@layer reset, base, layout, components, utilities;
/* =========================================================================
FONTS - Instrument Sans, variable weight 400-700, roman only.
The @font-face rules are served by the Google Fonts stylesheet linked in
the of index.html, with display=swap so text paints immediately in
the fallback and never blocks the largest contentful paint.
The ROMAN axis is the only one requested. The italic axis is deliberately
never downloaded and never used anywhere on this page - see the font-style
guard in @layer reset, which also blocks the browser's synthetic oblique.
========================================================================= */
/* =========================================================================
RESET
========================================================================= */
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-block-size: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg,
video,
canvas {
display: block;
max-inline-size: 100%;
}
img,
video {
block-size: auto;
}
input,
button,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
ul,
ol {
padding-inline-start: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4 {
font-weight: 500;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
/* No italics anywhere on this page, by request. These are the elements a
browser slants by default. Emphasis is carried by weight instead, which
keeps the single roman family and still reads as emphasis. */
i,
em,
cite,
var,
dfn,
address,
blockquote,
figcaption {
font-style: normal;
}
i,
em {
font-weight: 600;
}
:target {
scroll-margin-block-start: var(--space-4xl);
}
}
/* =========================================================================
BASE - design tokens
========================================================================= */
@layer base {
:root {
/* ---- Brand palette ------------------------------------------------ */
--color-violet: #7f77dd;
--color-violet-deep: #453aa3; /* AA text on cream */
--color-violet-soft: #efeefb;
--color-blush: #ed93b1;
--color-blush-deep: #a8375c; /* AA text on cream */
--color-blush-soft: #fdeef3;
--color-clay: #d85a30;
--color-clay-deep: #9c3d1a; /* AA text on cream */
--color-clay-soft: #fbeee7;
--color-page: #ffffff;
--color-enstacked: #ef6224;
--grad-accent: linear-gradient(
94deg,
#6c5fd3 4%,
#c13d6e 52%,
#c2491f 96%
);
/* ---- Warm neutrals ------------------------------------------------ */
--color-ink: #26242e;
--color-ink-muted: #55525e;
--color-ink-subtle: #6a6875;
--color-surface: #ffffff;
--color-surface-sunk: #f2f2f5;
--color-well: #f6f6f8; /* recessed visual wells inside white cards */
--color-line: rgb(38 36 46 / 10%);
--color-line-soft: rgb(38 36 46 / 6%);
--color-line-strong: rgb(38 36 46 / 20%);
/* ---- Semantic ----------------------------------------------------- */
--color-success: #2f6b41;
--color-success-soft: #e7f4ea;
--color-warn: #8a5a00;
--color-warn-soft: #fbf0d8;
/* ---- Typography --------------------------------------------------- */
--font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", roboto, helvetica, arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", menlo, consolas,
monospace;
--text-display: clamp(2.7rem, 1.35rem + 5.4vw, 5.5rem);
--text-h2: clamp(2rem, 1.15rem + 3.6vw, 4rem);
--text-h3: clamp(1.3rem, 1.1rem + 0.85vw, 1.8rem);
--text-h4: clamp(1.08rem, 1rem + 0.36vw, 1.28rem);
--text-lead: clamp(1.06rem, 0.98rem + 0.46vw, 1.32rem);
--text-body: clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
--text-sm: 0.875rem;
--text-xs: 0.78rem;
--text-eyebrow: 0.72rem;
--leading-tight: 0.94;
--leading-snug: 1.14;
--leading-normal: 1.62;
--tracking-tight: -0.035em;
--tracking-wide: 0.14em;
/* ---- Spacing scale ------------------------------------------------ */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 5.5rem;
--space-4xl: clamp(4.5rem, 2.5rem + 8vw, 9rem);
/* ---- Shape -------------------------------------------------------- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 34px;
--radius-pill: 999px;
--shadow-xs: 0 1px 2px rgb(38 36 46 / 5%);
--shadow-sm: 0 1px 2px rgb(38 36 46 / 5%), 0 4px 12px rgb(38 36 46 / 6%);
--shadow-md: 0 2px 4px rgb(38 36 46 / 4%),
0 14px 32px -10px rgb(38 36 46 / 14%);
--shadow-lg: 0 2px 6px rgb(38 36 46 / 5%),
0 28px 64px -24px rgb(38 36 46 / 20%);
--shadow-focus: 0 0 0 3px var(--color-page), 0 0 0 6px var(--color-violet);
/* ---- Layout ------------------------------------------------------- */
--shell-max: 1280px;
--shell-narrow: 780px;
/* The pricing block reads as a compact 2x2 card, matching the in-app
Plan and billing screen, so it is narrower than the page shell. */
--shell-mid: 980px;
--shell-pad: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
--header-h: 68px;
/* One gap between every floating panel (sunk / ink), so consecutive
panels never almost-touch while other seams run wide. Sibling margins
collapse, so adjacent panels share exactly one of these.
This seam is also where the journey route crosses from one side of
the page to the other, so it is sized to give the paper dart room to
be SEEN between two panels rather than squeezed against an edge. */
--section-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
/* ---- Motion ------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--dur-fast: 140ms;
--dur-base: 260ms;
--dur-slow: 520ms;
/* ---- Swatch demo defaults (overwritten live by the style studio) --- */
--swatch-size: 40px;
--swatch-radius: 999px;
--swatch-gap: 12px;
--swatch-border: 1px;
--swatch-ring: var(--color-ink);
}
html {
scroll-behavior: smooth;
scroll-padding-block-start: calc(var(--header-h) + var(--space-sm));
}
body {
position: relative;
background-color: var(--color-page);
/* clean SaaS surface - no texture overlay */
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 400;
font-style: normal;
line-height: var(--leading-normal);
overflow-x: clip;
/* Instrument Sans is a variable font: keep the width axis at its default
and let the optical size axis follow the rendered size. */
font-optical-sizing: auto;
font-variation-settings: "wdth" 100;
/* Inherited by every element. Permits synthetic BOLD (never needed - the
400-700 range is real) but forbids synthetic OBLIQUE, so nothing on the
page can slant the roman to fake an italic we never load. */
font-synthesis: weight;
}
::selection {
background: var(--color-violet);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--color-violet-deep);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
strong,
b {
font-weight: 600;
}
}
/* =========================================================================
LAYOUT
========================================================================= */
@layer layout {
/* Anchors the absolutely-positioned journey overlay to the full page. */
main {
position: relative;
}
.shell {
inline-size: 100%;
max-inline-size: var(--shell-max);
margin-inline: auto;
padding-inline: var(--shell-pad);
}
.shell--narrow {
max-inline-size: var(--shell-narrow);
}
.shell--mid {
max-inline-size: var(--shell-mid);
}
.section {
position: relative;
z-index: 2;
padding-block: var(--space-4xl);
}
.section--tight {
padding-block: var(--space-3xl);
}
/* This section sits directly under the hero, whose own bottom padding
already creates separation, so its top is trimmed further to avoid
stacking two paddings into one oversized gap. */
.hero + .section--tight {
padding-block-start: var(--space-lg);
}
/* Tinted sections are inset, rounded panels floating on the white page
(the smile.io pattern), not full-bleed bands. */
.section--sunk {
background: var(--color-well);
border-radius: clamp(24px, 3.5vw, 40px);
inline-size: min(100% - 16px, 1408px);
margin-inline: auto;
margin-block: var(--section-gap);
}
.section--ink {
background: var(--color-ink);
color: var(--color-page);
border-radius: clamp(24px, 3.5vw, 40px);
inline-size: min(100% - 16px, 1408px);
margin-inline: auto;
margin-block: var(--section-gap);
overflow: clip;
}
/* Headings run the full measure and wrap naturally - no forced breaks,
no cramped single column. Leads keep a readable measure of their own. */
.section__head {
max-inline-size: none;
margin-block-end: var(--space-2xl);
}
.section__head--center {
margin-inline: auto;
text-align: center;
}
.section__head--center .section__lead {
margin-inline: auto;
}
.section__title {
font-size: var(--text-h2);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
font-weight: 600;
margin-block-start: var(--space-sm);
}
.section__lead {
max-inline-size: 58ch;
font-size: var(--text-lead);
color: var(--color-ink-muted);
margin-block-start: var(--space-md);
}
.section--ink .section__lead {
color: rgb(255 255 255 / 72%);
}
.skip-link {
position: absolute;
inset-block-start: var(--space-sm);
inset-inline-start: var(--space-sm);
z-index: 200;
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-sm);
background: var(--color-ink);
color: var(--color-page);
font-size: var(--text-sm);
transform: translateY(-160%);
transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
transform: translateY(0);
}
}
/* =========================================================================
COMPONENTS
========================================================================= */
@layer components {
/* ---------- Eyebrow ------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.eyebrow::before {
content: "";
inline-size: 20px;
block-size: 1px;
background: currentcolor;
opacity: 0.5;
}
.section--ink .eyebrow {
color: rgb(255 255 255 / 62%);
}
/* Brand-gradient accent inside display headings. Stops are tuned to
>= 3:1 on both white and ink so large text stays AA everywhere. */
.accent {
background: var(--grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- Buttons -------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
min-block-size: 48px;
padding: 0 var(--space-md);
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: -0.006em;
text-align: center;
white-space: nowrap;
transition: transform var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) linear;
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn--primary {
background: var(--color-violet-deep);
color: #fff;
box-shadow: var(--shadow-md);
}
.btn--primary:hover {
background: #5449b8;
box-shadow: var(--shadow-md);
}
.btn--secondary {
background: transparent;
border-color: var(--color-line-strong);
color: var(--color-ink);
}
.btn--secondary:hover {
background: rgb(38 36 46 / 5%);
border-color: var(--color-ink);
}
/* The quiet third option. It sits beside a bordered secondary button, so it
carries no fill and no border of its own, otherwise the pair reads as two
equally weighted actions and neither leads. */
.btn--ghost {
padding: 0 var(--space-2xs);
background: transparent;
border-color: transparent;
color: var(--color-ink-muted);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
transition: color var(--dur-fast) var(--ease-out),
text-decoration-color var(--dur-fast) var(--ease-out);
}
.btn--ghost:hover {
color: var(--color-ink);
text-decoration-color: currentColor;
transform: none;
}
.btn--inverse {
background: var(--color-page);
color: var(--color-ink);
}
.btn--inverse:hover {
background: #fff;
}
.btn--outline-inverse {
border-color: rgb(255 255 255 / 34%);
color: var(--color-page);
}
.btn--outline-inverse:hover {
border-color: var(--color-page);
background: rgb(255 255 255 / 8%);
}
.btn--sm {
min-block-size: 40px;
padding-inline: var(--space-sm);
font-size: var(--text-xs);
}
.btn--lg {
min-block-size: 56px;
padding-inline: var(--space-lg);
font-size: 1rem;
}
.btn--block {
inline-size: 100%;
}
/* Shared action cluster, used wherever a section ends in buttons. */
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-block-start: var(--space-lg);
}
.btn__icon {
inline-size: 16px;
block-size: 16px;
flex: none;
transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__icon {
transform: translateX(3px);
}
/* ---------- Site header ---------------------------------------------- */
.site-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 100;
transition: transform var(--dur-base) var(--ease-out),
background-color var(--dur-base) linear,
box-shadow var(--dur-base) linear;
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(255 255 255 / 85%);
opacity: 0;
transition: opacity var(--dur-base) linear;
}
.site-header.is-stuck::before {
opacity: 1;
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-block-end: 1px solid var(--color-line-soft);
}
.site-header.is-hidden {
transform: translateY(-102%);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
block-size: var(--header-h);
}
.site-header__nav {
display: none;
}
.site-header__links {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.site-header__link {
display: inline-flex;
align-items: center;
min-block-size: 44px;
padding-inline: var(--space-xs);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink-muted);
transition: color var(--dur-fast) linear;
}
.site-header__link:hover {
color: var(--color-ink);
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-2xs);
}
.site-header__cta-secondary {
display: none;
}
/* ---------- Brand lockup --------------------------------------------- */
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
.brand__mark {
inline-size: 30px;
block-size: 30px;
flex: none;
border-radius: 7px;
}
.brand__name {
font-size: 1.14rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.brand__by {
display: none;
align-items: center;
gap: 5px;
padding-inline-start: var(--space-2xs);
margin-inline-start: 2px;
border-inline-start: 1px solid var(--color-line);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
white-space: nowrap;
}
.brand__by-mark {
inline-size: 16px;
block-size: 16px;
flex: none;
color: var(--color-ink);
}
/* ---------- Hero ------------------------------------------------------ */
.hero {
position: relative;
z-index: 2;
/* Bottom padding is deliberately its own smaller value, not --space-3xl/
4xl: the hero already ends with the facts row's own margin-block-start,
and the next section (.section--tight) brings its own top padding, so
reusing the section scale here double-stacks into a huge dead gap. */
padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-lg);
overflow: clip;
}
/* Centered, smile.io-style: pill, headline, lead and actions stacked on
the page axis, with the live demo below inside a tinted stage panel. */
.hero__copy {
display: flex;
flex-direction: column;
align-items: center;
max-inline-size: 58rem;
margin-inline: auto;
text-align: center;
}
.hero__pill {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: 7px 16px;
border-radius: var(--radius-pill);
background: var(--color-violet-soft);
color: var(--color-violet-deep);
font-size: var(--text-sm);
font-weight: 600;
}
.hero__pill-dot {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--color-violet);
}
.hero__title {
font-size: clamp(2.55rem, 1.4rem + 4.6vw, 4.4rem);
line-height: 1.04;
letter-spacing: -0.028em;
font-weight: 600;
margin-block-start: var(--space-md);
}
.hero__lead {
max-inline-size: 48ch;
margin-block-start: var(--space-md);
font-size: var(--text-lead);
color: var(--color-ink-muted);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
margin-block-start: var(--space-lg);
}
.hero__note {
display: flex;
align-items: center;
gap: var(--space-2xs);
margin-block-start: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.hero__stage {
margin-block-start: var(--space-2xl);
padding: clamp(1rem, 0.4rem + 2.8vw, 3rem);
background: var(--color-violet-soft);
border-radius: clamp(20px, 3.5vw, 40px);
}
.hero__stage .demo {
max-inline-size: 900px;
margin-inline: auto;
}
.hero__note-icon {
inline-size: 15px;
block-size: 15px;
flex: none;
color: var(--color-success);
}
/* ---------- Fact strip ------------------------------------------------ */
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) var(--space-sm);
max-inline-size: 920px;
margin-inline: auto;
margin-block-start: var(--space-2xl);
text-align: center;
}
/* Definition lists must be then , but the value reads first.
column-reverse keeps the markup valid and the reading order visual.
In column-reverse the main axis runs bottom to top, so flex-end packs
the pair against the TOP of the stretched grid cell. Load-bearing: with
the default flex-start the pair sits on the bottom edge instead, and a
label that wraps to two lines shoves its own value upward, so the row of
numbers no longer shares a baseline. */
.facts__item {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
align-items: center;
}
.facts__value {
display: block;
margin-inline-start: 0;
font-size: clamp(1.28rem, 1.1rem + 0.8vw, 1.6rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
}
.facts__label {
display: block;
margin-block-start: 3px;
font-size: var(--text-xs);
line-height: 1.4;
color: var(--color-ink-subtle);
}
/* ---------- Product demo (hero + reused elsewhere) -------------------- */
.demo {
--demo-pad: clamp(1rem, 0.4rem + 2vw, 1.75rem);
position: relative;
border-radius: var(--radius-lg);
background: var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-lg);
}
.demo__chrome {
display: flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-xs) var(--demo-pad);
border-block-end: 1px solid var(--color-line-soft);
}
.demo__dots {
display: flex;
gap: 5px;
}
.demo__dot {
inline-size: 9px;
block-size: 9px;
border-radius: 50%;
background: var(--color-line-strong);
}
.demo__url {
flex: 1;
min-inline-size: 0;
padding: 3px var(--space-2xs);
border-radius: var(--radius-xs);
background: var(--color-surface-sunk);
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--color-ink-subtle);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo__body {
display: grid;
gap: var(--space-md);
padding: var(--demo-pad);
}
.demo__media {
position: relative;
border-radius: var(--radius-md);
background: var(--color-surface-sunk);
overflow: hidden;
}
.demo__stage {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 4 / 5;
transition: background-color var(--dur-slow) var(--ease-out);
}
.demo__badge {
position: absolute;
inset-block-start: var(--space-2xs);
inset-inline-start: var(--space-2xs);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--color-page);
font-size: var(--text-xs);
font-weight: 600;
opacity: 0;
transform: translateY(-4px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.demo__badge.is-visible {
opacity: 1;
transform: translateY(0);
}
.demo__thumbs {
display: flex;
gap: var(--space-2xs);
margin-block-start: var(--space-2xs);
}
.demo__thumb {
inline-size: 46px;
block-size: 46px;
flex: none;
border-radius: var(--radius-xs);
border: 1px solid var(--color-line);
background: var(--color-surface-sunk);
overflow: hidden;
transition: border-color var(--dur-fast) linear,
opacity var(--dur-base) var(--ease-out);
}
.demo__thumb[aria-current="true"] {
border-color: var(--color-ink);
}
.demo__thumb[hidden] {
display: none;
}
.demo__title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.02em;
}
.demo__meta {
display: flex;
align-items: baseline;
gap: var(--space-2xs);
margin-block-start: 2px;
}
.demo__price {
font-size: 1.05rem;
font-weight: 600;
}
.demo__compare {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
text-decoration: line-through;
}
.demo__option-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs);
margin-block-end: var(--space-2xs);
}
.demo__option-label {
font-size: var(--text-sm);
font-weight: 600;
}
.demo__option-value {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.demo__select {
inline-size: 100%;
min-block-size: 46px;
padding: 0 var(--space-lg) 0 var(--space-xs);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-xs);
background-color: var(--color-surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234e483a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-xs) center;
font-size: var(--text-sm);
appearance: none;
}
.demo__stock {
display: block;
min-block-size: 1.2em;
margin-block-start: var(--space-2xs);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-warn);
}
.demo__atc {
margin-block-start: var(--space-2xs);
}
.demo__caption {
margin-block-start: var(--space-xs);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
text-align: center;
}
/* Two panels stacked in the same grid cell, cross-faded by the toggle. */
.demo__picker {
display: grid;
}
.demo__panel {
grid-area: 1 / 1;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.demo__panel[aria-hidden="true"] {
opacity: 0;
transform: translateY(6px) scale(0.99);
pointer-events: none;
visibility: hidden;
}
/* ---------- Swatch row (the product, rendered honestly) -------------- */
.swatches {
display: flex;
flex-wrap: wrap;
gap: var(--swatch-gap);
align-items: flex-start;
}
.swatch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
inline-size: max(var(--swatch-size), 76px);
padding: 0;
background: none;
border: 0;
border-radius: var(--radius-xs);
}
.swatch__chip {
position: relative;
inline-size: var(--swatch-size);
block-size: var(--swatch-size);
border-radius: var(--swatch-radius);
background-color: var(--chip-a, var(--color-surface-sunk));
box-shadow: inset 0 0 0 var(--swatch-border) rgb(38 36 46 / 22%);
transition: box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-spring);
overflow: hidden;
}
/* Two-tone: hard split. Gradient: blend. Both real product capabilities. */
.swatch__chip--duo {
background-image: linear-gradient(
135deg,
var(--chip-a) 0 50%,
var(--chip-b) 50% 100%
);
}
.swatch__chip--gradient {
background-image: linear-gradient(135deg, var(--chip-a), var(--chip-b));
}
.swatch__chip--photo {
background-size: cover;
background-position: center;
}
.swatch[aria-checked="true"] .swatch__chip {
box-shadow: inset 0 0 0 var(--swatch-border) rgb(38 36 46 / 22%),
0 0 0 2px var(--color-surface), 0 0 0 4px var(--swatch-ring);
}
.swatch:hover .swatch__chip {
transform: translateY(-2px);
}
.swatch__label {
max-inline-size: 76px;
font-size: 0.72rem;
line-height: 1.25;
color: var(--color-ink-muted);
text-align: center;
overflow-wrap: break-word;
hyphens: auto;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.swatches--no-labels .swatch__label {
display: none;
}
.swatches--no-labels .swatch {
inline-size: max(var(--swatch-size), 44px);
}
/* Sold out: diagonal strike, never colour alone (label carries the state). */
.swatch[data-state="soldout"] .swatch__chip::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top left,
transparent calc(50% - 1px),
rgb(38 36 46 / 55%) calc(50% - 1px) calc(50% + 1px),
transparent calc(50% + 1px)
);
}
.swatch[data-state="soldout"] {
opacity: 0.72;
}
/* ---------- Before / after toggle ------------------------------------ */
.toggle {
display: inline-flex;
align-items: center;
padding: 3px;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line-soft);
}
.toggle__option {
position: relative;
z-index: 1;
min-block-size: 38px;
padding-inline: var(--space-sm);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-subtle);
transition: color var(--dur-base) linear;
}
.toggle__option[aria-pressed="true"] {
color: var(--color-page);
}
.toggle__save {
margin-inline-start: 6px;
color: var(--color-success);
font-weight: 700;
}
.toggle__option[aria-pressed="true"] .toggle__save {
color: var(--color-success-soft);
}
.toggle__thumb {
position: absolute;
inset-block: 3px;
z-index: 0;
border-radius: var(--radius-pill);
background: var(--color-ink);
transition: transform var(--dur-slow) var(--ease-spring),
inline-size var(--dur-slow) var(--ease-spring);
}
.toggle--framed {
position: relative;
}
/* ---------- Marquee --------------------------------------------------- */
.marquee {
position: relative;
overflow: hidden;
padding-block: var(--space-sm);
mask-image: linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
}
.marquee__track {
display: flex;
inline-size: max-content;
gap: var(--space-md);
animation: marquee-slide 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
animation-play-state: paused;
}
.marquee__item {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-md);
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
}
.marquee__dot {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
flex: none;
}
@keyframes marquee-slide {
to {
transform: translateX(calc(-50% - var(--space-md) / 2));
}
}
/* ---------- Steps (how it works) -------------------------------------- */
.steps {
display: grid;
gap: var(--space-2xl);
align-items: start;
}
.steps__list {
display: grid;
gap: var(--space-xs);
}
.step {
position: relative;
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: background-color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.step.is-active {
background: var(--color-surface);
border-color: var(--color-line);
box-shadow: var(--shadow-sm);
}
.step__head {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.step__index {
display: grid;
place-items: center;
inline-size: 32px;
block-size: 32px;
flex: none;
border-radius: 50%;
border: 1px solid var(--color-line-strong);
font-size: var(--text-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: background-color var(--dur-base) linear,
color var(--dur-base) linear, border-color var(--dur-base) linear;
}
.step.is-active .step__index {
background: var(--color-ink);
border-color: var(--color-ink);
color: var(--color-page);
}
.step__title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.018em;
}
.step__body {
margin-block-start: var(--space-2xs);
padding-inline-start: calc(32px + var(--space-xs));
color: var(--color-ink-muted);
font-size: var(--text-sm);
}
.step__meta {
display: inline-flex;
align-items: center;
gap: 5px;
margin-block-start: var(--space-2xs);
padding: 3px 9px;
border-radius: var(--radius-pill);
background: var(--color-violet-soft);
color: var(--color-violet-deep);
font-size: var(--text-xs);
font-weight: 600;
}
.steps__stage {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-md));
}
/* ---------- Admin mock (the stage visual) ----------------------------- */
.mock {
border-radius: var(--radius-lg);
border: 1px solid var(--color-line);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.mock__bar {
display: flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-sm);
border-block-end: 1px solid var(--color-line-soft);
background: var(--color-surface-sunk);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-muted);
}
.mock__panel {
display: grid;
gap: var(--space-sm);
padding: var(--space-md);
min-block-size: 330px;
align-content: start;
}
.mock__panel[hidden] {
display: none;
}
.mock__row {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-well);
font-size: var(--text-sm);
}
.mock__row-chip {
inline-size: 26px;
block-size: 26px;
flex: none;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(38 36 46 / 18%);
}
.mock__row-name {
flex: 1;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mock__row-state {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-subtle);
white-space: nowrap;
}
.mock__row.is-matched .mock__row-state {
color: var(--color-success);
}
.mock__note {
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.mock__cta {
justify-self: start;
}
/* ---------- Bento ----------------------------------------------------- */
.bento {
display: grid;
gap: var(--space-sm);
grid-template-columns: 1fr;
}
.tile {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.tile__visual {
display: grid;
place-items: center;
min-block-size: 116px;
padding: var(--space-sm);
border-radius: var(--radius-md);
background: var(--color-well);
border: 1px solid var(--color-line-soft);
order: -1;
}
.tile__title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.018em;
}
.tile__text {
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
/* Pastel card tints, one per tile (the smile.io feature-grid look).
Text stays ink on every tint: the softs are all >= 90% luminance, so
the existing ink/ink-muted pairings keep their AA contrast. */
.tile--pastel-violet,
.tile--pastel-blush,
.tile--pastel-cream,
.tile--pastel-clay {
border-color: transparent;
box-shadow: none;
}
.tile--pastel-violet {
background: var(--color-violet-soft);
}
.tile--pastel-blush {
background: var(--color-blush-soft);
}
.tile--pastel-cream {
background: #f5f1e8;
}
.tile--pastel-clay {
background: var(--color-clay-soft);
}
.tile--pastel-violet .tile__visual,
.tile--pastel-blush .tile__visual,
.tile--pastel-cream .tile__visual,
.tile--pastel-clay .tile__visual {
background: rgb(255 255 255 / 62%);
border-color: transparent;
}
.tile__tag {
align-self: flex-start;
padding: 3px 9px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.02em;
}
.tile__tag--free {
background: var(--color-success-soft);
color: var(--color-success);
}
.tile__tag--advance {
background: var(--color-clay-soft);
color: var(--color-clay-deep);
}
/* ---------- Style studio ---------------------------------------------- */
.studio {
display: grid;
gap: var(--space-lg);
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--color-line);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.studio__preview {
display: grid;
place-items: center;
padding: var(--space-lg) var(--space-md);
border-radius: var(--radius-md);
background: var(--color-well);
border: 1px solid var(--color-line-soft);
min-block-size: 170px;
}
.studio__controls {
display: grid;
gap: var(--space-md);
}
.field {
display: grid;
gap: var(--space-2xs);
}
.field__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.field__value {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: none;
letter-spacing: 0;
color: var(--color-ink);
}
.segmented {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 4px;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
}
.segmented__option {
flex: 1 1 auto;
min-block-size: 38px;
padding-inline: var(--space-xs);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-muted);
transition: background-color var(--dur-fast) linear,
color var(--dur-fast) linear;
}
.segmented__option[aria-pressed="true"] {
background: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-xs);
}
.slider {
inline-size: 100%;
block-size: 24px;
background: transparent;
appearance: none;
}
.slider::-webkit-slider-runnable-track {
block-size: 4px;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
}
.slider::-moz-range-track {
block-size: 4px;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
}
.slider::-webkit-slider-thumb {
appearance: none;
inline-size: 20px;
block-size: 20px;
margin-block-start: -8px;
border-radius: 50%;
background: var(--color-ink);
border: 3px solid var(--color-surface);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.slider::-moz-range-thumb {
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
background: var(--color-ink);
border: 3px solid var(--color-surface);
cursor: pointer;
}
.switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
min-block-size: 44px;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
}
.switch__control {
position: relative;
inline-size: 44px;
block-size: 26px;
flex: none;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
box-shadow: inset 0 0 0 1px var(--color-line);
transition: background-color var(--dur-base) var(--ease-out);
}
.switch__control::after {
content: "";
position: absolute;
inset-block-start: 3px;
inset-inline-start: 3px;
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-spring);
}
.switch__input {
position: absolute;
opacity: 0;
inline-size: 1px;
block-size: 1px;
}
.switch__input:checked + .switch__control {
background: var(--color-ink);
}
.switch__input:checked + .switch__control::after {
transform: translateX(18px);
}
.switch__input:focus-visible + .switch__control {
outline: 2px solid var(--color-violet-deep);
outline-offset: 3px;
}
/* ---------- Surface cards (where swatches appear) --------------------- */
.surfaces {
display: grid;
gap: var(--space-sm);
}
.surface-card {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-line);
background: var(--color-surface);
}
.surface-card__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xs);
}
.product-card {
display: grid;
gap: 6px;
padding: 7px;
border-radius: var(--radius-sm);
background: var(--color-well);
border: 1px solid var(--color-line-soft);
}
.product-card__media {
aspect-ratio: 4 / 5;
border-radius: var(--radius-xs);
overflow: hidden;
background: var(--color-surface-sunk);
}
.product-card__name {
font-size: 0.7rem;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-card__swatches {
display: flex;
gap: 5px;
}
.product-card__chip {
inline-size: 15px;
block-size: 15px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(38 36 46 / 18%);
}
.surface-card__title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.018em;
}
.surface-card__text {
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
/* ---------- Proof pillars --------------------------------------------- */
.pillars {
display: grid;
gap: var(--space-sm);
}
.pillar {
display: grid;
gap: var(--space-xs);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid rgb(255 255 255 / 14%);
background: rgb(255 255 255 / 4%);
}
.pillar__icon {
inline-size: 30px;
block-size: 30px;
color: var(--color-blush);
}
.pillar__title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.018em;
}
.pillar__text {
font-size: var(--text-sm);
color: rgb(255 255 255 / 70%);
}
.pillar__stat {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blush);
}
/* ---------- Split feature rows ---------------------------------------- */
.split {
display: grid;
gap: var(--space-lg);
align-items: center;
}
.split + .split {
margin-block-start: var(--space-3xl);
}
.split__title {
font-size: var(--text-h3);
font-weight: 600;
letter-spacing: -0.024em;
margin-block-start: var(--space-2xs);
}
.split__text {
margin-block-start: var(--space-xs);
color: var(--color-ink-muted);
}
.split__list {
display: grid;
gap: var(--space-2xs);
margin-block-start: var(--space-md);
}
.split__list-item {
display: flex;
align-items: flex-start;
gap: var(--space-2xs);
font-size: var(--text-sm);
}
.split__list-icon {
inline-size: 17px;
block-size: 17px;
flex: none;
margin-block-start: 4px;
color: var(--color-violet-deep);
}
.section--ink .split__text {
color: rgb(255 255 255 / 72%);
}
.section--ink .split__list-icon {
color: var(--color-blush);
}
/* ---------- Agent readiness scorecard --------------------------------- */
.scorecard {
display: grid;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--color-line);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.scorecard__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.scorecard__score {
font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.scorecard__grade {
display: grid;
place-items: center;
inline-size: 46px;
block-size: 46px;
border-radius: var(--radius-sm);
background: var(--color-success-soft);
color: var(--color-success);
font-size: 1.4rem;
font-weight: 700;
}
.scorecard__signals {
display: grid;
gap: var(--space-2xs);
}
.signal {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px var(--space-xs);
align-items: center;
font-size: var(--text-sm);
}
.signal__bar {
grid-column: 1 / -1;
block-size: 6px;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
overflow: hidden;
}
.signal__fill {
display: block;
block-size: 100%;
border-radius: inherit;
background: var(--color-violet);
inline-size: var(--fill, 0%);
transform-origin: left;
}
/* Hatched TRACK marks the shortfall; the fill stays at 0 so the bar
reads as empty rather than complete. */
.signal__bar--missing {
background: repeating-linear-gradient(
45deg,
var(--color-clay-soft) 0 5px,
#f6d8ca 5px 10px
);
box-shadow: inset 0 0 0 1px rgb(216 90 48 / 35%);
}
.signal__points {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* Marks the analytics illustration as sample data. App Store listing rules
bar stats and data in images, so the invented figures have to read as an
example, not as a reported result. */
.dash__note {
margin-top: var(--space-2xs);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.scorecard__note {
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ---------- Variants gallery mock ------------------------------------- */
.vgal {
padding: var(--space-sm);
}
.vgal__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
}
.vgal__chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink-muted);
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.vgal__chip:hover {
border-color: var(--color-line-strong);
color: var(--color-ink);
}
.vgal__chip[aria-pressed="true"] {
border-color: var(--color-ink);
background: var(--color-surface-sunk);
color: var(--color-ink);
}
.vgal__dot {
inline-size: 12px;
block-size: 12px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(38 36 46 / 12%);
}
.vgal__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xs);
margin-block-start: var(--space-sm);
}
.vgal__photo {
position: relative;
border-radius: var(--radius-sm);
overflow: clip;
border: 1px solid var(--color-line-soft);
}
/* [hidden] on a list item would normally win, but be explicit so the
filter can never be undone by a display rule elsewhere. */
.vgal__photo[hidden] {
display: none;
}
.vgal__photo svg {
display: block;
inline-size: 100%;
block-size: auto;
}
.vgal__badge {
position: absolute;
inset-block-start: 6px;
inset-inline-start: 6px;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--color-page);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.vgal__badge--n {
background: rgb(255 255 255 / 88%);
color: var(--color-ink);
}
/* ---------- Product groups mock --------------------------------------- */
.gjoin {
padding: var(--space-sm);
display: grid;
gap: var(--space-xs);
}
.gjoin__kicker {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.gjoin__caption {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink-muted);
}
.gjoin__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
}
.gjoin__chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink-muted);
}
.gjoin__chip.is-current {
border-color: var(--color-ink);
background: var(--color-surface-sunk);
color: var(--color-ink);
}
.gjoin__dot {
inline-size: 12px;
block-size: 12px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(38 36 46 / 12%);
}
.gjoin__members {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.gjoin__member {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--color-line-soft);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.gjoin__member.is-here {
border-color: var(--color-line);
background: var(--color-surface-sunk);
}
.gjoin__grip {
inline-size: 8px;
block-size: 14px;
flex: none;
background:
radial-gradient(circle, var(--color-ink-subtle) 1.1px, transparent 1.2px) 0 0 / 4px 5px;
opacity: 0.55;
}
.gjoin__thumb {
inline-size: 28px;
block-size: 28px;
flex: none;
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgb(38 36 46 / 10%);
}
.gjoin__meta {
display: grid;
gap: 1px;
min-inline-size: 0;
}
.gjoin__title {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: -0.01em;
}
.gjoin__sub {
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ---------- Analytics dashboard mock ---------------------------------- */
.dash {
padding: var(--space-md);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.dash__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.dash__range {
padding: 3px 10px;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.dash__tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xs);
margin-block-start: var(--space-sm);
}
.dash__tile {
display: flex;
flex-direction: column;
padding: var(--space-xs);
border-radius: var(--radius-md);
background: var(--color-well);
}
.dash__tile--warn {
background: var(--color-warn-soft);
}
.dash__num {
font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.dash__tile--warn .dash__num {
color: var(--color-warn);
}
.dash__lab {
margin-block-start: 2px;
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.dash__sub {
margin-block-start: var(--space-md);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.dash__signals {
display: grid;
gap: var(--space-2xs);
margin-block-start: var(--space-xs);
}
.dash__advice {
margin-block-start: var(--space-md);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
background: var(--color-clay-soft);
color: var(--color-clay-deep);
font-size: var(--text-sm);
}
/* ---------- Pricing ---------------------------------------------------- */
.pricing__switch {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
margin-block-end: var(--space-lg);
}
.pricing__trial-line {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
text-align: center;
}
.pricing__includes {
margin-block-start: var(--space-lg);
padding: var(--space-md);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.pricing__includes-title {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.018em;
margin-block-end: var(--space-sm);
}
.pricing__includes-list {
display: grid;
gap: var(--space-2xs);
margin: 0;
padding: 0;
list-style: none;
}
.pricing__includes .plan__feature-icon {
color: var(--color-success);
}
.pricing__grid {
display: grid;
gap: var(--space-md);
align-items: stretch;
}
.plan {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-lg) var(--space-md) var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--color-line);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) linear;
}
.plan:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-line-strong);
}
/* Every card carries a slim brand crown; only the highlighted plan's is lit. */
.plan::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 4px;
background: var(--color-line-soft);
}
.plan--highlight {
border-color: var(--color-violet);
box-shadow: var(--shadow-lg);
}
.plan--highlight::before {
background: var(--grad-accent);
}
.plan--highlight:hover {
border-color: var(--color-violet);
box-shadow: var(--shadow-lg);
}
.plan__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2xs);
}
.plan__name {
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.02em;
}
.plan__flag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-violet);
background: var(--color-violet-soft);
color: var(--color-violet-deep);
font-size: var(--text-xs);
font-weight: 700;
white-space: nowrap;
}
.plan__flag-icon {
inline-size: 13px;
block-size: 13px;
flex: none;
}
.plan__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 5px var(--space-2xs);
}
.plan__amount {
font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.75rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* The yearly discount is the crossed-out price of twelve monthly payments,
never a percentage, so the card reads the same way as the plan cards in
the app. Hidden on the monthly view by the `hidden` attribute. */
.plan__strike {
font-size: var(--text-lead);
font-weight: 600;
color: var(--color-ink-subtle);
/* Same line-height as the amount beside it: the default leading on a
smaller baseline-aligned flex item grew the price row by 3px, which put
the Free card's button above Grow's on the yearly view. */
line-height: 1;
text-decoration-line: line-through;
text-decoration-thickness: 1.5px;
font-variant-numeric: tabular-nums;
}
.plan__period {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.plan__note {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.plan__tagline {
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
/* The trial line under the tagline: same quiet weight on every card so the
four cards keep one rhythm whether the line says "trial" or "no limit". */
.plan__trial {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-subtle);
}
/* The feature list is the last thing in the card and the lists differ in
length, so the divider hangs off the list rather than the card edge. */
.plan__features {
padding-block-start: var(--space-sm);
border-block-start: 1px solid var(--color-line-soft);
}
.plan__features {
display: grid;
gap: var(--space-2xs);
font-size: var(--text-sm);
}
.plan__feature {
display: flex;
align-items: flex-start;
gap: var(--space-2xs);
}
.plan__feature-icon {
inline-size: 16px;
block-size: 16px;
flex: none;
margin-block-start: 4px;
color: var(--color-violet-deep);
}
.plan--advance .plan__feature-icon,
.plan--premium .plan__feature-icon {
color: var(--color-clay-deep);
}
.plan--free .plan__feature-icon {
color: var(--color-success);
}
.plan__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs) var(--space-xs);
padding-block-start: var(--space-2xs);
}
.pricing__note {
margin-block-start: var(--space-lg);
text-align: center;
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
/* ---------- Enstacked ------------------------------------------------- */
.maker {
display: grid;
gap: var(--space-xl);
align-items: center;
}
.maker__logo {
inline-size: clamp(88px, 18vw, 132px);
block-size: auto;
aspect-ratio: 1;
}
.maker__wordmark {
margin-block-start: var(--space-md);
font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
}
.maker__wordmark span {
color: var(--color-enstacked);
}
.maker__tagline {
margin-block-start: var(--space-2xs);
font-size: var(--text-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.maker__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin-block-start: var(--space-lg);
padding-block-start: var(--space-lg);
border-block-start: 1px solid var(--color-line);
}
/* Same shared-baseline rule as .facts__item, see the note there. */
.maker__stats > div {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.maker__stat-value {
display: block;
margin-inline-start: 0;
font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
font-weight: 600;
letter-spacing: -0.03em;
}
.maker__stat-label {
display: block;
margin-block-start: 2px;
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ---------- FAQ -------------------------------------------------------- */
.faq {
display: grid;
gap: var(--space-2xs);
}
.faq__item {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.faq__item[open] {
border-color: var(--color-line-strong);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
min-block-size: 60px;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-h4);
font-weight: 500;
letter-spacing: -0.015em;
cursor: pointer;
list-style: none;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__icon {
inline-size: 18px;
block-size: 18px;
flex: none;
color: var(--color-ink-subtle);
transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__icon {
transform: rotate(45deg);
}
.faq__answer {
padding: 0 var(--space-md) var(--space-md);
max-inline-size: 68ch;
color: var(--color-ink-muted);
font-size: var(--text-sm);
}
/* ---------- Closing CTA ------------------------------------------------ */
/* The tour LANDS in the seam above this panel: the paper dart parks there
centre stage with its last note under it, so this gap has to clear the
whole dart and the pill off the dark edge. It is deliberately larger
than every other seam - main.js places the finish inside it (FINISH_GAP)
and both numbers have to move together. */
.closer {
position: relative;
overflow: clip;
text-align: center;
margin-block-start: clamp(8rem, 4rem + 9vw, 14rem);
}
.closer__title {
font-size: var(--text-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: 500;
}
.closer__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
margin-block-start: var(--space-lg);
}
.closer__swatches {
display: flex;
justify-content: center;
gap: var(--space-xs);
margin-block-end: var(--space-lg);
}
.closer__swatch {
inline-size: clamp(30px, 6vw, 44px);
block-size: clamp(30px, 6vw, 44px);
border-radius: 50%;
animation: float-chip 5s var(--ease-in-out) infinite;
}
.closer__swatch:nth-child(2) {
animation-delay: 0.4s;
}
.closer__swatch:nth-child(3) {
animation-delay: 0.8s;
}
.closer__swatch:nth-child(4) {
animation-delay: 1.2s;
}
@keyframes float-chip {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
}
/* ---------- Footer ----------------------------------------------------- */
.site-footer {
position: relative;
z-index: 2;
padding-block: var(--space-2xl) var(--space-xl);
border-block-start: 1px solid var(--color-line);
}
.site-footer__grid {
display: grid;
gap: var(--space-xl);
}
.site-footer__blurb {
max-inline-size: 40ch;
margin-block-start: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-ink-muted);
}
.site-footer__nav-title {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-subtle);
margin-block-end: var(--space-2xs);
}
.site-footer__link {
display: inline-flex;
align-items: center;
min-block-size: 34px;
font-size: var(--text-sm);
color: var(--color-ink-muted);
transition: color var(--dur-fast) linear;
}
.site-footer__link:hover {
color: var(--color-ink);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-block-start: var(--space-2xl);
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--color-line-soft);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.site-footer__made {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
.site-footer__made-mark {
inline-size: 22px;
block-size: 22px;
flex: none;
color: var(--color-ink);
}
/* ---------- Mobile sticky CTA ------------------------------------------ */
.mobile-cta {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 90;
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs) var(--space-sm)
calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
background: rgb(255 255 255 / 92%);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-block-start: 1px solid var(--color-line);
transform: translateY(110%);
transition: transform var(--dur-base) var(--ease-out);
}
.mobile-cta.is-visible {
transform: translateY(0);
}
.mobile-cta__copy {
flex: 1;
min-inline-size: 0;
font-size: var(--text-xs);
line-height: 1.35;
color: var(--color-ink-muted);
}
.mobile-cta__copy b {
display: block;
color: var(--color-ink);
font-size: var(--text-sm);
}
/* ---------- Journey path ----------------------------------------------- */
/* A scroll-driven SVG route down the whole page: a faint dotted track
shows where the tour goes, a gradient line draws itself as far as the
visitor has scrolled, and a swatch-chip traveler rides the line from
section to section. Markup is generated by main.js; desktop only, and
the module never runs under prefers-reduced-motion.
z-index 1 keeps the whole route UNDER the sections (they are z-index 2),
so the line dives behind every sunk / ink panel and card and re-emerges
in the seams between them, instead of drawing over content. That is the
fallback: on a viewport narrow enough that the outer margin cannot hold
the dart, the route has nowhere safe to fly and this is what it does. */
.journey {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
display: none;
}
/* Wide viewports get the route LIFTED above the panels (main.js adds the
class once it has measured a margin the dart fits in). The route is
confined to that margin and every left-to-right crossing happens in the
empty band between two sections, so nothing is ever drawn over content -
it only crosses the blank edge of a panel, which is what keeps the trail
and the plane in view for the whole page instead of half of it. */
.journey--over {
z-index: 3;
}
@media (min-width: 992px) {
.journey {
display: block;
}
}
.journey svg {
inline-size: 100%;
block-size: 100%;
overflow: visible;
}
/* The trail the mark leaves BEHIND it. There is deliberately no preview
of the route ahead: the page reveals itself as you travel it. Round
caps on a zero-length dash render the stroke as a row of dots. */
.journey__trail {
fill: none;
stroke: var(--color-ink);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 0.1 18;
}
/* The same route drawn once more UNDER the ink dots, in the page colour
and a little larger. On white it is invisible; over a tinted or ink
panel it is what carries the trail, so one route reads on every
background the page has without the JS knowing what it is flying over. */
.journey__trail-halo {
fill: none;
stroke: var(--color-page);
stroke-width: 12;
stroke-linecap: round;
stroke-dasharray: 0.1 18;
}
/* Checkpoints share the trail's clip, so one is only ever visible once
the mark has reached it: it is always in its reached state. */
.journey__node {
fill: var(--color-violet);
stroke: var(--color-ink);
stroke-width: 2;
}
/* The traveler is the Varn brand mark riding the route. The shadow lifts
it off the line; JS keeps it upright and only leans it into curves.
The idle bob runs on the image INSIDE the group, so it composes with
the group's own translate/rotate instead of fighting it. The whole
journey module never runs under prefers-reduced-motion, so this
animation cannot reach a reduced-motion visitor. */
.journey__traveler {
filter: drop-shadow(0 3px 10px rgb(38 36 46 / 30%));
will-change: transform;
}
/* The traveler is a paper plane in a black-and-white sketch style: white
near wing, a shaded far wing, a darker keel for the underside fold, all
in an ink outline. JS rotates it to follow the path tangent.
Every fill is OPAQUE, and that is the whole point: the shading used to
be a transparent wash of ink, which reads as grey on the white page but
dissolves into an ink panel, leaving nothing but the white near wing -
a sliver, not a plane. Solid paper greys read against white AND against
the dark panels the route now flies over. The ink outline is the part
allowed to disappear on ink: by then the light fills carry the shape. */
.journey__plane-top,
.journey__plane-bot,
.journey__plane-keel {
stroke: var(--color-ink);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.journey__plane-top {
fill: var(--color-surface);
}
.journey__plane-bot {
fill: #dededf;
}
.journey__plane-keel {
fill: #b7b6bb;
}
.journey__logo {
animation: journey-bob 3.2s var(--ease-in-out) infinite;
}
@keyframes journey-bob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* The notification layer rides ABOVE the sections AND above the route, so
a bubble is never swallowed by a panel or crossed by the trail. */
.journey--top {
z-index: 4;
}
.jtoast {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-2xs);
padding: 0.45rem 0.9rem;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-spring);
}
.jtoast[data-side="left"] {
transform: translate(24px, -50%) scale(0.86);
transform-origin: left center;
}
.jtoast[data-side="right"] {
transform: translate(calc(-100% - 24px), -50%) scale(0.86);
transform-origin: right center;
}
/* Only the finish uses this side, and there the dart has levelled out and
points STRAIGHT DOWN - its nose reaches 34px past the point the pill is
measured from, so 28px would have put the pill through the nose. */
.jtoast[data-side="center"] {
transform: translate(-50%, 46px) scale(0.86);
transform-origin: center top;
}
.jtoast.is-on {
opacity: 1;
pointer-events: auto;
}
.jtoast[data-side="left"].is-on {
transform: translate(24px, -50%) scale(1);
}
.jtoast[data-side="right"].is-on {
transform: translate(calc(-100% - 24px), -50%) scale(1);
}
.jtoast[data-side="center"].is-on {
transform: translate(-50%, 46px) scale(1);
}
.jtoast__dot {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
flex: none;
}
.jtoast__cta {
color: var(--color-violet-deep);
font-weight: 700;
}
.jtoast__cta:hover {
text-decoration: underline;
}
}
/* =========================================================================
UTILITIES
========================================================================= */
@layer utilities {
.visually-hidden {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Scroll reveal. Default state is VISIBLE, the animation only starts it
lower, so a browser without scroll timelines still shows every section. */
.reveal {
opacity: 1;
}
@supports (animation-timeline: view()) {
.reveal {
animation: reveal-rise linear both;
animation-timeline: view();
animation-range: entry 0% cover 20%;
}
}
@keyframes reveal-rise {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stack-sm > * + * {
margin-block-start: var(--space-sm);
}
}
/* =========================================================================
RESPONSIVE - one block per breakpoint, mobile-first
========================================================================= */
/* ---- 576px ------------------------------------------------------------- */
@media (min-width: 36em) {
@layer components {
.facts {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demo__body {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: start;
}
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pillars {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.surfaces {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
}
/* ---- 768px ------------------------------------------------------------- */
@media (min-width: 48em) {
@layer components {
.brand__by {
display: inline-flex;
}
.site-header__cta-secondary {
display: inline-flex;
}
.studio {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: center;
padding: var(--space-lg);
}
.studio__preview {
min-block-size: 230px;
}
.maker__stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Four plans read as a 2x2 grid from tablet up, matching the in-app
plan page. Four across would crush the feature lists. */
.pricing__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing__includes-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__grid {
grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
}
}
}
/* ---- 992px ------------------------------------------------------------- */
@media (min-width: 62em) {
@layer base {
:root {
--header-h: 76px;
}
}
@layer components {
.site-header__nav {
display: block;
}
.hero {
padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-lg);
}
.steps {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: var(--space-3xl);
}
.bento {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Size carries hierarchy: two double-width anchor cells, one per row. */
.bento__item--wide {
grid-column: span 2;
}
.pillars {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.surfaces {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.split {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3xl);
}
.split--reverse .split__media {
order: -1;
}
.maker {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-4xl);
}
.mobile-cta {
display: none;
}
}
}
/* ---- 1200px ------------------------------------------------------------ */
@media (min-width: 75em) {
@layer components {
.demo {
--demo-pad: 1.75rem;
}
.site-header__links {
gap: var(--space-sm);
}
.pricing__includes-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
/* =========================================================================
MOTION PREFERENCES
========================================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
@layer utilities {
.reveal {
animation: none;
opacity: 1;
transform: none;
}
}
}
/* =========================================================================
PRINT
========================================================================= */
@media print {
.site-header,
.mobile-cta,
.marquee {
display: none !important;
}
body {
background: #fff;
}
}
/* =========================================================================
WAITLIST — waitlist.html only
=========================================================================
The page ground is a WebGL liquid field (assets/js/waitlist.js) painted
into .wl__flow. Everything readable sits on an opaque white card above it,
so no text ever depends on the shader for its contrast. If WebGL is
missing the canvas stays transparent and the CSS gradient underneath is
the ground - the page is complete either way.
========================================================================= */
@layer components {
.wl {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
isolation: isolate;
background:
radial-gradient(120% 90% at 18% 8%, #efeefb 0%, rgb(239 238 251 / 0%) 55%),
radial-gradient(110% 80% at 88% 22%, #fdeef3 0%, rgb(253 238 243 / 0%) 52%),
radial-gradient(120% 100% at 55% 105%, #fbeee7 0%, rgb(251 238 231 / 0%) 55%),
var(--color-cream, #f5f1e8);
}
/* Fixed, not absolute: the page scrolls, the field does not. */
.wl__flow {
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.9s var(--ease-out);
}
.wl__flow.is-live {
opacity: 1;
}
.wl__shell {
width: min(100% - (var(--shell-pad) * 2), 68rem);
margin-inline: auto;
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-lg);
padding-block: var(--space-md) var(--space-xl);
}
/* ---- Top bar ------------------------------------------------------- */
.wl__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
min-height: 44px;
}
.wl__brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.02em;
color: var(--color-ink);
text-decoration: none;
}
.wl__brand img {
border-radius: 7px;
display: block;
}
.wl__brand-by {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding-inline-start: 0.55rem;
margin-inline-start: 0.1rem;
border-inline-start: 1px solid var(--color-line);
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-ink-subtle);
}
.wl__back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
padding-inline: 0.9rem;
border-radius: var(--radius-pill);
background: rgb(255 255 255 / 72%);
border: 1px solid var(--color-line);
color: var(--color-ink);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
backdrop-filter: blur(8px);
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.wl__back:hover {
background: #fff;
border-color: var(--color-line-strong);
}
.wl__back svg {
flex: none;
}
/* ---- The card ------------------------------------------------------ */
.wl__card {
position: relative;
flex: 1;
display: grid;
align-content: center;
gap: var(--space-lg);
padding: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);
border-radius: var(--radius-xl);
background: rgb(255 255 255 / 92%);
border: 1px solid rgb(255 255 255 / 70%);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px) saturate(1.1);
overflow: hidden;
}
.wl__grid {
display: grid;
gap: var(--space-lg);
align-items: center;
}
@media (width >= 62rem) {
.wl__grid {
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
}
.wl__pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 var(--space-sm);
padding: 0.34rem 0.75rem 0.34rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--color-violet-soft);
color: var(--color-violet-deep);
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wl__pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-violet);
position: relative;
}
.wl__pill-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: wl-ping 2.4s var(--ease-out) infinite;
}
@keyframes wl-ping {
0% { transform: scale(1); opacity: 0.55; }
70%, 100% { transform: scale(2.6); opacity: 0; }
}
.wl__title {
margin: 0;
font-size: clamp(2.05rem, 1.3rem + 3.2vw, 3.5rem);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
font-weight: 600;
color: var(--color-ink);
text-wrap: balance;
}
.wl__lead {
margin: var(--space-sm) 0 0;
max-width: 34ch;
font-size: var(--text-lead);
line-height: 1.5;
color: var(--color-ink-muted);
}
.wl__by {
display: flex;
align-items: center;
gap: 0.45rem;
margin: var(--space-md) 0 0;
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
/* ---- Form ---------------------------------------------------------- */
.wl__panel {
padding: clamp(1.15rem, 0.85rem + 1.2vw, 1.75rem);
border-radius: var(--radius-lg);
background: var(--color-well);
border: 1px solid var(--color-line-soft);
}
.wl__form-title {
margin: 0 0 0.25rem;
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.wl__form-note {
margin: 0 0 var(--space-sm);
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-ink-subtle);
}
.wl__field {
display: grid;
gap: 0.6rem;
}
.wl__input {
width: 100%;
min-height: 52px;
padding: 0 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-line-strong);
background: #fff;
color: var(--color-ink);
font: inherit;
font-size: 1rem; /* >=16px: iOS must not zoom on focus */
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.wl__input::placeholder {
color: var(--color-ink-subtle);
opacity: 0.75;
}
.wl__input:focus-visible {
outline: none;
border-color: var(--color-violet);
box-shadow: 0 0 0 3px rgb(127 119 221 / 22%);
}
.wl__input[data-state="error"] {
border-color: var(--color-clay-deep);
box-shadow: 0 0 0 3px rgb(216 90 48 / 16%);
}
.wl__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 52px;
padding-inline: 1.25rem;
border: 0;
border-radius: var(--radius-sm);
background: var(--color-ink);
color: #fff;
font: inherit;
font-size: var(--text-body);
font-weight: 600;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.wl__submit:hover:not(:disabled) {
background: #131119;
}
.wl__submit:active:not(:disabled) {
transform: translateY(1px);
}
.wl__submit:disabled {
cursor: default;
opacity: 0.72;
}
.wl__submit svg {
flex: none;
transition: transform var(--dur-base) var(--ease-out);
}
.wl__submit:hover:not(:disabled) svg {
transform: translateX(3px);
}
.wl__spinner {
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid rgb(255 255 255 / 32%);
border-top-color: #fff;
animation: wl-spin 0.7s linear infinite;
}
@keyframes wl-spin {
to { transform: rotate(360deg); }
}
/* Empty by default, so it takes no space until something is announced. */
.wl__msg {
margin: 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-clay-deep);
}
.wl__msg:empty {
display: none;
}
.wl__msg[data-tone="ok"] {
color: var(--color-success);
}
.wl__proof {
display: flex;
align-items: center;
gap: 0.5rem;
margin: var(--space-sm) 0 0;
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-ink-subtle);
}
.wl__dots {
display: inline-flex;
flex: none;
}
.wl__dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid #fff;
margin-inline-start: -4px;
}
.wl__dot:first-child {
margin-inline-start: 0;
}
/* Honeypot: a real field for a bot to fill, invisible and unreachable
for a person. Not display:none - some bots skip those. */
.wl__trap {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---- Success state -------------------------------------------------- */
.wl__done {
display: grid;
justify-items: center;
text-align: center;
gap: var(--space-sm);
padding-block: var(--space-md);
}
.wl__done:focus-visible {
outline: none;
}
.wl__done-mark {
display: grid;
place-items: center;
width: 62px;
height: 62px;
margin: 0;
border-radius: 50%;
background: var(--color-success-soft);
color: var(--color-success);
}
.wl__done-title {
margin: 0;
font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
font-weight: 600;
color: var(--color-ink);
text-wrap: balance;
}
.wl__done-copy {
margin: 0;
max-width: 46ch;
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.wl__done-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2xs);
margin-top: var(--space-2xs);
}
.wl__done-swatches {
display: flex;
gap: 0.4rem;
margin: var(--space-2xs) 0 0;
}
.wl__done-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--color-line);
animation: wl-pop 0.5s var(--ease-spring) both;
animation-delay: var(--d, 0s);
}
@keyframes wl-pop {
from { transform: scale(0.2); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ---- What you get -------------------------------------------------- */
.wl__perks {
display: grid;
gap: var(--space-sm);
margin: 0;
padding: 0;
list-style: none;
}
@media (width >= 48rem) {
.wl__perks {
grid-template-columns: repeat(3, 1fr);
}
}
.wl__perk {
display: grid;
gap: 0.35rem;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background: rgb(255 255 255 / 82%);
border: 1px solid rgb(255 255 255 / 65%);
box-shadow: var(--shadow-xs);
backdrop-filter: blur(10px);
}
.wl__perk-title {
margin: 0;
display: flex;
align-items: center;
gap: 0.45rem;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
}
.wl__perk-title svg {
flex: none;
color: var(--color-violet-deep);
}
.wl__perk-copy {
margin: 0;
font-size: var(--text-xs);
line-height: 1.55;
color: var(--color-ink-muted);
}
/* ---- Footer -------------------------------------------------------- */
.wl__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2xs) var(--space-md);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.wl__foot p {
margin: 0;
}
.wl__foot-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.wl__foot a {
color: var(--color-ink-muted);
text-decoration: none;
border-bottom: 1px solid var(--color-line-strong);
padding-block-end: 1px;
}
.wl__foot a:hover {
color: var(--color-ink);
border-color: currentcolor;
}
/* Entrance: one staggered reveal, nothing loops. */
.wl__pill,
.wl__title,
.wl__lead,
.wl__by,
.wl__panel,
.wl__perk {
animation: wl-in 0.6s var(--ease-out) both;
}
.wl__pill { animation-delay: 0.10s; }
.wl__title { animation-delay: 0.16s; }
.wl__lead { animation-delay: 0.24s; }
.wl__by { animation-delay: 0.32s; }
.wl__panel { animation-delay: 0.22s; }
.wl__perk:nth-child(1) { animation-delay: 0.34s; }
.wl__perk:nth-child(2) { animation-delay: 0.40s; }
.wl__perk:nth-child(3) { animation-delay: 0.46s; }
@keyframes wl-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.wl__view.is-leaving {
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
}
/* =========================================================================
LEGAL — privacy.html and any future policy page
=========================================================================
A long document nobody reads front to back. The layout answers "is the
part I care about in here", so the contents list is a real control on
desktop and a native on small screens, and every section owns
an anchor a merchant can paste into a compliance form.
========================================================================= */
@layer components {
.legal-page {
padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-3xl);
}
.legal-hero {
display: grid;
gap: var(--space-sm);
padding-block-end: var(--space-lg);
border-block-end: 1px solid var(--color-line);
}
.legal-hero__title {
margin: 0;
font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
font-weight: 600;
color: var(--color-ink);
}
.legal-hero__meta {
margin: 0;
max-width: 62ch;
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.legal-hero__stamp {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line);
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-ink-muted);
width: max-content;
}
/* ---- At a glance ---------------------------------------------------- */
.legal-glance {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-xl);
}
@media (width >= 48rem) {
.legal-glance {
grid-template-columns: repeat(2, 1fr);
}
}
.legal-glance__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line-soft);
}
.legal-glance__icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--color-line);
color: var(--color-violet-deep);
}
.legal-glance__title {
margin: 0 0 0.15rem;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
}
.legal-glance__copy {
margin: 0;
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-ink-muted);
}
/* ---- Two column shell ----------------------------------------------- */
.legal-body {
display: grid;
gap: var(--space-xl);
align-items: start;
}
@media (width >= 62rem) {
.legal-body {
grid-template-columns: 15rem minmax(0, 1fr);
gap: var(--space-2xl);
}
}
.legal-toc__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
min-height: 48px;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
cursor: pointer;
list-style: none;
}
.legal-toc__summary::-webkit-details-marker {
display: none;
}
.legal-toc__summary svg {
transition: transform var(--dur-base) var(--ease-out);
}
.legal-toc[open] .legal-toc__summary svg {
transform: rotate(180deg);
}
.legal-toc__title {
display: none;
margin: 0 0 var(--space-2xs);
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.legal-toc__list {
margin: var(--space-2xs) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 1px;
}
.legal-toc__link {
display: block;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-xs);
border-inline-start: 2px solid transparent;
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-ink-muted);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.legal-toc__link:hover {
background: var(--color-surface-sunk);
color: var(--color-ink);
}
.legal-toc__link[aria-current="true"] {
border-inline-start-color: var(--color-violet);
background: var(--color-violet-soft);
color: var(--color-violet-deep);
font-weight: 600;
}
@media (width >= 62rem) {
.legal-toc {
position: sticky;
top: calc(var(--header-h) + var(--space-md));
max-height: calc(100svh - var(--header-h) - var(--space-xl));
overflow-y: auto;
}
/* On desktop the list is always open and the disclosure control is not
a control at all, so it is replaced by a plain heading. */
.legal-toc__summary {
display: none;
}
.legal-toc__title {
display: block;
}
}
/* ---- The document ---------------------------------------------------- */
.legal-doc {
max-width: 68ch;
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.legal-doc > section + section {
margin-block-start: var(--space-xl);
padding-block-start: var(--space-lg);
border-block-start: 1px solid var(--color-line-soft);
}
.legal-doc h2 {
/* Anchor jumps must clear the fixed header. */
scroll-margin-top: calc(var(--header-h) + var(--space-md));
margin: 0 0 var(--space-xs);
font-size: var(--text-h3);
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 600;
color: var(--color-ink);
}
.legal-doc p {
margin: 0 0 var(--space-sm);
}
.legal-doc p:last-child {
margin-bottom: 0;
}
.legal-doc ul {
margin: 0 0 var(--space-sm);
padding-inline-start: 1.15rem;
display: grid;
gap: 0.6rem;
}
.legal-doc li {
padding-inline-start: 0.2rem;
}
.legal-doc li::marker {
color: var(--color-violet);
}
.legal-doc strong {
color: var(--color-ink);
font-weight: 600;
}
.legal-doc a {
color: var(--color-violet-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-doc a:hover {
color: var(--color-ink);
}
.legal-callout {
display: grid;
gap: 0.4rem;
padding: var(--space-md);
margin-block: 0 var(--space-sm);
border-radius: var(--radius-md);
background: var(--color-violet-soft);
border: 1px solid rgb(127 119 221 / 22%);
color: var(--color-ink-muted);
}
.legal-callout__title {
margin: 0;
display: flex;
align-items: center;
gap: 0.45rem;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-violet-deep);
}
.legal-doc__end {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin-block-start: var(--space-xl);
padding-block-start: var(--space-lg);
border-block-start: 1px solid var(--color-line);
}
}
/* =========================================================================
MOTION PREFERENCES — waitlist + legal blocks
Everything lands on its final state; nothing is left mid-transition.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.wl__flow {
transition: none;
}
.wl__pill,
.wl__title,
.wl__lead,
.wl__by,
.wl__panel,
.wl__perk,
.wl__done-swatch {
animation: none !important;
opacity: 1;
transform: none;
}
.wl__pill-dot::after,
.wl__spinner {
animation: none;
}
/* The spinner is the only signal that a submit is in flight, so with
motion off it becomes a static ring rather than nothing at all. */
.wl__spinner {
border-top-color: rgb(255 255 255 / 55%);
}
.wl__submit:hover svg,
.legal-toc[open] .legal-toc__summary svg {
transition: none;
}
.wl__view.is-leaving {
transition: none;
}
}
/* =========================================================================
PRINT — the policy is the one page people actually print or file.
========================================================================= */
@media print {
.legal-toc,
.legal-doc__end,
.legal-glance__icon {
display: none;
}
.legal-page {
padding-block: 0;
}
.legal-body {
display: block;
}
.legal-doc {
max-width: none;
color: #000;
}
.legal-doc > section + section {
break-inside: avoid;
}
.legal-doc a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
word-break: break-all;
}
}
/* =========================================================================
FIXES verified in the browser at 390 / 768 / 1440
========================================================================= */
@layer components {
/* Both waitlist views are display:grid, which OUTRANKS the user agent's
[hidden] rule, so the form stayed on screen underneath the thank-you.
Caught by rendering the success state, not by reading the markup. */
.wl [hidden] {
display: none !important;
}
/* The honeypot's input inherits no width, so it reported a box wider than
a phone. It is clipped either way; this keeps the geometry honest. */
.wl__trap input {
width: 1px;
height: 1px;
padding: 0;
border: 0;
}
/* 44px minimum on every target, the rule the rest of the site follows. */
.wl__brand {
min-height: 44px;
}
.wl__foot a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.legal-toc__link {
display: flex;
align-items: center;
min-height: 44px;
}
.brand {
min-height: 44px;
}
}
/* =========================================================================
REFINEMENTS after inspecting the render
========================================================================= */
@layer components {
/* The field is a moving image, so contrast over it cannot be measured or
promised. Everything outside the main card now carries its own light
ground instead of borrowing the shader's. */
.wl__brand {
padding-inline: 0.75rem 0.9rem;
border-radius: var(--radius-pill);
background: rgb(255 255 255 / 72%);
border: 1px solid var(--color-line);
backdrop-filter: blur(8px);
}
.wl__foot {
padding: 0.6rem var(--space-md);
border-radius: var(--radius-md);
background: rgb(255 255 255 / 78%);
border: 1px solid rgb(255 255 255 / 60%);
backdrop-filter: blur(10px);
color: var(--color-ink-muted);
}
.wl__shell {
padding-block-end: var(--space-lg);
}
/* On a phone the top row has to stay one row, and "Built by Enstacked
Technologies" is already spelled out inside the card. */
@media (width < 30rem) {
.wl__brand-by {
display: none;
}
.wl__back {
padding-inline: 0.75rem;
}
}
/* The policy's three blocks (title, summary, document) shared a 1280px
shell while the prose itself is capped at 68ch, which left the right
edge ragged. One measure for all three. */
.legal-page {
max-width: 64rem;
margin-inline: auto;
}
}
@layer components {
/* The 44px hit area made the border-bottom sit at the base of the box
rather than under the words. Underline the text, keep the target. */
.wl__foot a {
border-bottom: 0;
text-decoration: underline;
text-decoration-color: var(--color-line-strong);
text-underline-offset: 3px;
}
.wl__foot a:hover {
text-decoration-color: currentcolor;
}
}
/* =========================================================================
STATUS — status.html, plus the strip on index.html
=========================================================================
Status tones borrow the brand where the brand already means the right
thing: a partial outage is clay, maintenance is violet. Green and red
stay conventional, because guessing at those costs a reader real time.
Every tone has a fill (for ticks and dots) and a darker text pair that
passes AA on white.
========================================================================= */
@layer base {
:root {
--st-operational: #3f9a63;
--st-operational-ink: #2f6b41;
--st-degraded: #e0a02a;
--st-degraded-ink: #8a5a00;
--st-partial: #d85a30;
--st-partial-ink: #9c3d1a;
--st-major: #b3261e;
--st-major-ink: #8f1d17;
--st-maintenance: #7f77dd;
--st-maintenance-ink: #453aa3;
--st-tick-radius: 3px;
}
}
@layer components {
/* ---- tone plumbing: one attribute drives dot, tick and badge ------- */
[data-status="operational"] { --st-tone: var(--st-operational); --st-tone-ink: var(--st-operational-ink); }
[data-status="degraded"] { --st-tone: var(--st-degraded); --st-tone-ink: var(--st-degraded-ink); }
[data-status="partial"] { --st-tone: var(--st-partial); --st-tone-ink: var(--st-partial-ink); }
[data-status="major"] { --st-tone: var(--st-major); --st-tone-ink: var(--st-major-ink); }
[data-status="maintenance"] { --st-tone: var(--st-maintenance); --st-tone-ink: var(--st-maintenance-ink); }
.st-dot {
position: relative;
display: inline-block;
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--st-tone, var(--st-operational));
}
.st-dot--live::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: st-ping 2.6s var(--ease-out) infinite;
}
@keyframes st-ping {
0% { transform: scale(1); opacity: 0.5; }
70%, 100% { transform: scale(2.8); opacity: 0; }
}
/* ---- page shell ---------------------------------------------------- */
.st-page {
max-width: 64rem;
margin-inline: auto;
padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-3xl);
}
.st-note {
margin: 0 0 var(--space-lg);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: 1.55;
}
.st-note[data-kind="preview"] {
background: var(--color-warn-soft);
border: 1px solid rgb(138 90 0 / 22%);
color: var(--color-warn);
}
.st-note[data-kind="error"] {
background: var(--color-clay-soft);
border: 1px solid rgb(156 61 26 / 22%);
color: var(--color-clay-deep);
}
/* ---- hero ----------------------------------------------------------- */
.st-hero {
padding-block-end: var(--space-xl);
border-block-end: 1px solid var(--color-line);
}
.st-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 var(--space-md);
padding: 0.42rem 0.9rem;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line);
font-size: var(--text-sm);
color: var(--color-ink-subtle);
}
.st-pill__label {
font-weight: 600;
color: var(--color-ink);
}
.st-pill__checked {
font-variant-numeric: tabular-nums;
}
.st-pill__checked:empty {
display: none;
}
.st-title {
margin: 0;
max-width: 20ch;
font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.6rem);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
font-weight: 600;
color: var(--color-ink);
text-wrap: balance;
}
.st-lead {
margin: var(--space-sm) 0 0;
max-width: 54ch;
font-size: var(--text-lead);
line-height: 1.55;
color: var(--color-ink-muted);
font-variant-numeric: tabular-nums;
}
.st-hero__actions {
margin: var(--space-md) 0 0;
}
.st-hero__actions:has(button[hidden]) {
margin: 0;
}
/* ---- sections -------------------------------------------------------- */
.st-section {
margin-block-start: var(--space-2xl);
}
.st-section__title {
margin: 0;
font-size: var(--text-h3);
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 600;
color: var(--color-ink);
}
.st-section__sub {
margin: 0.35rem 0 0;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--color-ink-subtle);
}
.st-toolbar {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-sm);
margin-block-end: var(--space-lg);
}
/* ---- component groups ------------------------------------------------ */
.st-groups {
display: grid;
gap: var(--space-lg);
}
.st-group {
display: grid;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-lg);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line-soft);
}
.st-group__title {
margin: 0;
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.st-svc {
display: grid;
gap: 0.6rem;
padding: var(--space-sm) var(--space-md) var(--space-md);
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-line-soft);
}
.st-svc__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem var(--space-md);
}
.st-svc__name {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: var(--text-body);
font-weight: 600;
color: var(--color-ink);
}
.st-svc__desc {
margin: 0.15rem 0 0;
padding-inline-start: 1.05rem;
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-ink-subtle);
}
.st-svc__meta {
display: flex;
align-items: baseline;
gap: var(--space-sm);
font-size: var(--text-sm);
white-space: nowrap;
}
.st-svc__state {
color: var(--color-ink-muted);
}
.st-svc__uptime {
font-weight: 600;
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.st-svc__latency {
color: var(--color-ink-muted);
font-variant-numeric: tabular-nums;
}
/* ---- the uptime bar --------------------------------------------------- */
.st-bar-wrap {
/* 90 thin ticks squeeze fine down to a phone, but if a longer range is
ever served this scrolls rather than shrinking to invisible. */
overflow-x: auto;
overscroll-behavior-x: contain;
}
.st-bar {
display: flex;
align-items: stretch;
gap: 1px;
height: 44px;
min-width: 100%;
}
.st-tick {
flex: 1 1 0;
min-width: 3px;
padding: 0;
border: 0;
border-radius: var(--st-tick-radius);
background: var(--st-tone, var(--st-operational));
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
}
.st-tick:hover,
.st-tick:focus-visible {
transform: scaleY(1.12);
opacity: 1;
}
.st-tick:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}
.st-tick[data-dim="true"] {
opacity: 0.32;
}
.st-tick[aria-pressed="true"] {
transform: scaleY(1.12);
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}
.st-axis {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-start: 0.45rem;
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
.st-axis__mid {
display: none;
}
@media (width >= 30rem) {
.st-axis__mid {
display: inline;
}
}
.st-bar-none {
margin: 0;
padding-block: var(--space-2xs);
font-size: var(--text-xs);
color: var(--color-ink-subtle);
}
/* ---- tooltip ----------------------------------------------------------- */
.st-tip {
position: fixed;
z-index: 60;
transform: translate(-50%, -100%);
padding: 0.45rem 0.65rem;
border-radius: var(--radius-xs);
background: var(--color-ink);
color: #fff;
pointer-events: none;
box-shadow: var(--shadow-md);
}
.st-tip__title {
margin: 0;
font-size: var(--text-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.st-tip__body {
margin: 0.1rem 0 0;
font-size: var(--text-xs);
color: rgb(255 255 255 / 72%);
}
/* ---- legend -------------------------------------------------------------- */
.st-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-md);
margin: var(--space-md) 0 0;
padding: 0;
list-style: none;
font-size: var(--text-xs);
color: var(--color-ink-muted);
}
.st-legend__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* ---- incidents ----------------------------------------------------------- */
.st-incidents,
.st-mnt-list {
display: grid;
gap: var(--space-md);
margin-block-start: var(--space-lg);
}
.st-inc,
.st-mnt {
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-xs);
}
.st-inc__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem var(--space-md);
}
.st-inc__title,
.st-mnt__title {
margin: 0;
font-size: var(--text-h4);
line-height: 1.3;
font-weight: 600;
color: var(--color-ink);
}
.st-inc__badges {
display: flex;
gap: 0.35rem;
margin: 0;
}
.st-inc__badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--color-surface-sunk);
border: 1px solid var(--color-line);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-ink-muted);
}
.st-inc__badge[data-state="resolved"] {
background: var(--color-success-soft);
border-color: rgb(47 107 65 / 22%);
color: var(--color-success);
}
.st-inc__badge[data-state="investigating"],
.st-inc__badge[data-state="identified"],
.st-inc__badge[data-state="monitoring"] {
background: var(--color-warn-soft);
border-color: rgb(138 90 0 / 22%);
color: var(--color-warn);
}
.st-inc__meta {
margin: 0.5rem 0 0;
font-size: var(--text-xs);
color: var(--color-ink-subtle);
font-variant-numeric: tabular-nums;
}
.st-inc__summary {
margin: var(--space-2xs) 0 0;
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
.st-inc__updates {
display: grid;
gap: var(--space-sm);
margin: var(--space-md) 0 0;
padding: 0 0 0 var(--space-md);
list-style: none;
border-inline-start: 2px solid var(--color-line);
}
.st-inc__update {
position: relative;
}
.st-inc__update::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--space-md) * -1 - 5px);
top: 0.42rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-line-strong);
}
.st-inc__update:first-child::before {
background: var(--color-violet);
}
.st-inc__update-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
margin: 0;
}
.st-inc__update-state {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
}
.st-inc__update-at {
font-size: var(--text-xs);
color: var(--color-ink-subtle);
font-variant-numeric: tabular-nums;
}
.st-inc__update-body {
margin: 0.15rem 0 0;
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
/* ---- empty, filter, skeleton ---------------------------------------------- */
.st-empty {
padding: var(--space-lg) var(--space-md);
border-radius: var(--radius-md);
background: var(--color-surface-sunk);
border: 1px dashed var(--color-line-strong);
text-align: center;
}
.st-empty__title {
margin: 0;
font-size: var(--text-body);
font-weight: 600;
color: var(--color-ink);
}
.st-empty__copy {
margin: 0.3rem 0 0;
max-width: 52ch;
margin-inline: auto;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--color-ink-subtle);
}
.st-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2xs);
padding: 0.5rem 0.6rem 0.5rem var(--space-md);
border-radius: var(--radius-pill);
background: var(--color-violet-soft);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-violet-deep);
}
.st-skel {
display: grid;
gap: 0.6rem;
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--color-surface-sunk);
}
.st-skel__line,
.st-skel__bar {
display: block;
border-radius: var(--radius-xs);
background: linear-gradient(
90deg,
var(--color-line-soft) 25%,
var(--color-line) 37%,
var(--color-line-soft) 63%
);
background-size: 400% 100%;
animation: st-shimmer 1.4s linear infinite;
}
.st-skel__line { width: 40%; height: 14px; }
.st-skel__bar { width: 100%; height: 44px; }
@keyframes st-shimmer {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* ---- about --------------------------------------------------------------- */
.st-about__grid {
display: grid;
gap: var(--space-md);
margin-block-start: var(--space-md);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-ink-muted);
}
@media (width >= 48rem) {
.st-about__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
}
.st-about__grid p {
margin: 0;
}
.st-about__grid a {
color: var(--color-violet-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
/* =======================================================================
THE STRIP — index.html
A live line, not a badge: it says the state, the number behind it, and
where to go for the detail. It reserves its own height so arriving data
never shifts the page.
===================================================================== */
.status-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm) var(--space-md);
min-height: 64px;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-pill);
background: var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-xs);
}
@media (width < 40rem) {
.status-strip {
border-radius: var(--radius-lg);
}
}
.status-strip__state {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.status-strip__label {
font-size: var(--text-body);
font-weight: 600;
color: var(--color-ink);
}
.status-strip__detail {
font-size: var(--text-sm);
color: var(--color-ink-subtle);
font-variant-numeric: tabular-nums;
}
.status-strip__services {
display: flex;
gap: 3px;
margin-inline-start: auto;
}
@media (width < 48rem) {
.status-strip__services {
margin-inline-start: 0;
}
}
.status-strip__pip {
width: 8px;
height: 22px;
border-radius: var(--st-tick-radius);
background: var(--st-tone, var(--st-operational));
}
.status-strip__link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 44px;
padding-inline: 0.9rem;
border-radius: var(--radius-pill);
border: 1px solid var(--color-line);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-out);
}
.status-strip__link:hover {
background: var(--color-surface-sunk);
}
/* Until the fetch lands there is nothing true to show but the shape. */
.status-strip[data-state="loading"] .status-strip__label {
color: var(--color-ink-subtle);
}
.status-strip[data-state="loading"] .st-dot {
background: var(--color-line-strong);
}
}
@media (prefers-reduced-motion: reduce) {
.st-dot--live::after,
.st-skel__line,
.st-skel__bar {
animation: none;
}
.st-skel__line,
.st-skel__bar {
background: var(--color-line-soft);
}
.st-tick {
transition: none;
}
}
@media print {
.st-tip,
.segmented,
.st-hero__actions {
display: none;
}
}
@layer components {
/* .btn sets display: inline-flex, which outranks the user agent's
[hidden] rule — so a hidden button stayed on screen. Caught by seeing
"Try again" sitting under a healthy status board. */
.btn[hidden],
.st-page [hidden] {
display: none !important;
}
}
@layer components {
/* Open incidents, above the grid. Marked by the clay edge rather than a
shouting background: it has to read as urgent without making the rest
of a mostly-healthy page feel broken. */
.st-active {
margin-block-start: var(--space-xl);
padding: var(--space-md);
border-radius: var(--radius-lg);
background: var(--color-clay-soft);
border: 1px solid rgb(216 90 48 / 22%);
border-inline-start: 3px solid var(--color-clay);
}
.st-active .st-incidents {
margin-block-start: var(--space-sm);
}
.st-active .st-section__title {
font-size: var(--text-h4);
color: var(--color-clay-deep);
}
}
@layer components {
/* At 390 the 90 ticks needed 359px and the bar scrolled, which puts
today off screen on the page where today matters most. Thinner ticks
fit the whole window; the row stays 44px tall, so the target only
narrows, it does not shrink. */
@media (width < 30rem) {
.st-tick {
min-width: 2px;
border-radius: 2px;
}
}
/* The range switcher is a real control on a page people use on a phone. */
.segmented__option {
min-height: 44px;
}
}
@layer components {
/* Third time this has bitten on this site: a component with its own
`display` (.btn inline-flex, .segmented flex, the waitlist views grid)
outranks the user agent's [hidden] rule, so hiding it in JavaScript does
nothing. Anything inside the status page that sets [hidden] means it. */
.st-page [hidden] {
display: none !important;
}
}
@layer components {
/* "We do not know" is a real status and needs its own tone. Grey, not
green: the failure screenshot had a green dot beside a headline saying
the check could not be reached. */
[data-status="unknown"] {
--st-tone: var(--color-ink-subtle);
--st-tone-ink: var(--color-ink-muted);
}
/* The separator sits BEFORE the timestamp, so `:empty + *` pointed at the
wrong element and left a dangling "·" whenever there was no time to
print. Ask the pill about its own contents instead. */
.st-pill:has(.st-pill__checked:empty) .st-pill__sep {
display: none;
}
}
@layer components {
/* Where an incident was written. Quiet: it is provenance, not a call to
action, and it must not compete with the update timeline above it. */
.st-inc__source {
margin: var(--space-sm) 0 0;
}
.st-inc__source a,
.st-inc__all a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 44px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink-muted);
text-decoration: none;
}
.st-inc__source a:hover,
.st-inc__all a:hover {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.st-inc__source svg,
.st-inc__all svg {
flex: none;
}
.st-inc__all {
margin: 0;
text-align: center;
}
}