/* ========================================================================== Londry — core Palette is drawn from laundry materials rather than a generic brand blue: porcelain enamel, detergent liquid, soft water, and the optical brightener that makes whites fluoresce violet. Citrus is the fragrance note. ========================================================================== */ :root { /* ── Colour ─────────────────────────────────────────────────────────── */ --porcelain: #f4f8fc; --porcelain-deep: #e8f0f8; --white: #ffffff; --ink: #0b1f2e; --ink-soft: #1e3a4f; --slate: #52697d; --slate-light: #7e93a5; --hairline: #dbe6f0; --hairline-soft: #eaf1f8; --detergent: #0e7ce8; --detergent-deep: #0a5bb0; --detergent-wash: #e7f2fe; --aqua: #35d3e8; --aqua-wash: #e2f9fc; --brightener: #7c5cfc; --brightener-wash: #f0ecff; --citrus: #ffb325; --citrus-deep: #e8930a; --citrus-wash: #fff5e0; --mint: #17c08a; --mint-wash: #e3f8f1; --coral: #f4685e; --coral-wash: #ffeceb; /* Signature gradient: water → detergent → brightener */ --grad-cycle: linear-gradient(135deg, var(--aqua) 0%, var(--detergent) 48%, var(--brightener) 100%); --grad-soft: linear-gradient(135deg, var(--aqua-wash) 0%, var(--detergent-wash) 55%, var(--brightener-wash) 100%); --grad-citrus: linear-gradient(135deg, #ffc94d 0%, var(--citrus) 60%, var(--citrus-deep) 100%); /* ── Type ───────────────────────────────────────────────────────────── */ --font-display: 'Bricolage Grotesque', 'Segoe UI Variable Display', 'Trebuchet MS', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --step-xl: clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem); --step-lg: clamp(2rem, 1.3rem + 3vw, 3.5rem); --step-md: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); --step-sm: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --step-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --step-lede: clamp(1.06rem, 0.98rem + 0.42vw, 1.28rem); --step-small: 0.875rem; --step-micro: 0.75rem; /* ── Space ──────────────────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --section-y: clamp(4.5rem, 9vw, 8rem); --gutter: clamp(1.15rem, 4vw, 2.5rem); --measure: 62ch; /* ── Form ───────────────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(11, 31, 46, 0.05); --shadow-sm: 0 1px 2px rgba(11, 31, 46, 0.04), 0 4px 12px -4px rgba(11, 31, 46, 0.08); --shadow-md: 0 1px 2px rgba(11, 31, 46, 0.04), 0 14px 34px -12px rgba(11, 31, 46, 0.14); --shadow-lg: 0 2px 4px rgba(11, 31, 46, 0.04), 0 30px 60px -18px rgba(11, 31, 46, 0.2); --shadow-glow: 0 12px 40px -12px rgba(14, 124, 232, 0.45); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 620ms; --header-h: 72px; } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Horizontal clipping lives here, not on . Clipping on the body makes it a clip container and silently breaks `position: sticky` for every descendant — which is the whole hero. */ overflow-x: clip; } body { min-height: 100vh; background: var(--porcelain); color: var(--ink); font-family: var(--font-body); font-size: var(--step-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: var(--detergent-deep); text-decoration-color: color-mix(in oklab, var(--detergent) 35%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2.5px solid var(--detergent); outline-offset: 3px; border-radius: 4px; } ::selection { background: color-mix(in oklab, var(--aqua) 40%, transparent); color: var(--ink); } /* ── Typography ───────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; } h1 { font-size: var(--step-xl); } h2 { font-size: var(--step-lg); } h3 { font-size: var(--step-md); line-height: 1.18; letter-spacing: -0.02em; } h4 { font-size: var(--step-sm); line-height: 1.3; letter-spacing: -0.012em; } p { text-wrap: pretty; } .lede { font-size: var(--step-lede); line-height: 1.55; color: var(--slate); max-width: 54ch; } .muted { color: var(--slate); } .micro { font-family: var(--font-mono); font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-light); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tabular { font-variant-numeric: tabular-nums; } /* Gradient text — kept for the single hero emphasis, not sprinkled around. */ .grad-text { background: var(--grad-cycle); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Layout ───────────────────────────────────────────────────────────── */ .wrap { width: min(100% - (var(--gutter) * 2), 1200px); margin-inline: auto; } .wrap-narrow { width: min(100% - (var(--gutter) * 2), 820px); margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } .section-tight { padding-block: clamp(3rem, 6vw, 5rem); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head-center { margin-inline: auto; text-align: center; } .section-head-center .lede { margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--step-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--detergent-deep); margin-bottom: var(--s-4); } .eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-cycle); } .section-head-center .eyebrow { justify-content: center; } .stack > * + * { margin-top: var(--s-4); } .grid { display: grid; gap: var(--s-5); } .cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .flow-x { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: var(--s-4); z-index: 200; padding: var(--s-3) var(--s-5); background: var(--ink); color: var(--white); border-radius: var(--r-sm); text-decoration: none; transition: top var(--dur) var(--ease-out); } .skip-link:focus-visible { top: var(--s-4); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--hairline); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0.8rem 1.5rem; border-radius: var(--r-pill); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, opacity var(--dur-fast) linear; } .btn:hover:not(:disabled) { transform: translateY(-2px); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-primary { --btn-border: transparent; --btn-fg: var(--white); background: var(--grad-cycle); background-size: 160% 160%; background-position: 0% 50%; box-shadow: var(--shadow-glow); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-position var(--dur-slow) var(--ease-out); } .btn-primary:hover:not(:disabled) { background-position: 100% 50%; box-shadow: 0 18px 46px -12px rgba(14, 124, 232, 0.55); } .btn-citrus { --btn-border: transparent; --btn-fg: #4a2c00; background: var(--grad-citrus); box-shadow: 0 12px 34px -12px rgba(232, 147, 10, 0.55); } .btn-ink { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: transparent; } .btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--slate); } .btn-ghost:hover:not(:disabled) { --btn-bg: var(--hairline-soft); --btn-fg: var(--ink); } .btn-outline { --btn-bg: transparent; --btn-border: var(--hairline); } .btn-outline:hover:not(:disabled) { --btn-border: var(--detergent); --btn-fg: var(--detergent-deep); } .btn-lg { padding: 1.05rem 2rem; font-size: 1.0125rem; } .btn-sm { padding: 0.5rem 0.95rem; font-size: 0.85rem; } .btn-block { width: 100%; } .btn-danger { --btn-bg: var(--coral-wash); --btn-fg: #a3312a; --btn-border: color-mix(in oklab, var(--coral) 35%, transparent); } .btn .btn-arrow { transition: transform var(--dur) var(--ease-out); } .btn:hover:not(:disabled) .btn-arrow { transform: translateX(3px); } /* ── Surfaces ─────────────────────────────────────────────────────────── */ .card { background: var(--white); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); } .card-flush { padding: 0; overflow: hidden; } .card-lift { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--hairline); } .panel { background: var(--white); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .divider { height: 1px; background: var(--hairline-soft); border: 0; margin-block: var(--s-5); } /* ── Badges & pills ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.28rem 0.7rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; background: var(--hairline-soft); color: var(--slate); white-space: nowrap; } .badge-ocean { background: var(--detergent-wash); color: var(--detergent-deep); } .badge-sky { background: var(--aqua-wash); color: #0b7c8c; } .badge-mint { background: var(--mint-wash); color: #0a7d5a; } .badge-lilac { background: var(--brightener-wash); color: #5a3fd6; } .badge-amber { background: var(--citrus-wash); color: #96650a; } .badge-peach { background: var(--citrus-wash); color: #96650a; } .badge-coral { background: var(--coral-wash); color: #a3312a; } .badge-grey { background: var(--hairline-soft); color: var(--slate); } .badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* ── Forms ────────────────────────────────────────────────────────────── */ .field { display: block; margin-bottom: var(--s-4); } .field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; } .field-hint { display: block; font-size: 0.8rem; color: var(--slate-light); margin-top: 0.35rem; } .input, .select, .textarea { width: 100%; padding: 0.75rem 1rem; background: var(--white); border: 1.5px solid var(--hairline); border-radius: var(--r-md); font-size: 0.975rem; color: var(--ink); transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, background-color var(--dur-fast) linear; } .input::placeholder, .textarea::placeholder { color: var(--slate-light); } .input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: color-mix(in oklab, var(--detergent) 30%, var(--hairline)); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--detergent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--detergent) 16%, transparent); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--hairline-soft); color: var(--slate-light); cursor: not-allowed; } .input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--coral); } .input[aria-invalid='true']:focus, .textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--coral) 18%, transparent); } .textarea { min-height: 7rem; resize: vertical; line-height: 1.6; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2352697d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .field-error { display: block; font-size: 0.8rem; color: #b3392f; margin-top: 0.35rem; font-weight: 500; } .checkbox { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.5; color: var(--slate); cursor: pointer; } .checkbox input[type='checkbox'] { appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--hairline); border-radius: 6px; background: var(--white); cursor: pointer; transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear; } .checkbox input[type='checkbox']:checked { background: var(--detergent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; border-color: var(--detergent); } .form-alert { padding: 0.85rem 1.1rem; border-radius: var(--r-md); font-size: 0.9rem; font-weight: 500; margin-bottom: var(--s-4); border: 1px solid transparent; } .form-alert-error { background: var(--coral-wash); color: #a3312a; border-color: color-mix(in oklab, var(--coral) 30%, transparent); } .form-alert-success { background: var(--mint-wash); color: #0a6a4d; border-color: color-mix(in oklab, var(--mint) 30%, transparent); } .form-alert-info { background: var(--detergent-wash); color: var(--detergent-deep); border-color: color-mix(in oklab, var(--detergent) 25%, transparent); } .form-alert ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } /* ── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: color-mix(in oklab, var(--porcelain) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) linear, background-color var(--dur) linear, box-shadow var(--dur) linear; } .site-header.is-stuck { border-bottom-color: var(--hairline-soft); background: color-mix(in oklab, var(--white) 88%, transparent); box-shadow: 0 6px 24px -18px rgba(11, 31, 46, 0.5); } .header-inner { display: flex; align-items: center; gap: var(--s-5); width: 100%; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); text-decoration: none; flex: none; } .brand:hover { text-decoration: none; } .brand-mark { width: 34px; height: 34px; flex: none; } .nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; } .nav-link { padding: 0.5rem 0.85rem; border-radius: var(--r-pill); font-size: 0.925rem; font-weight: 500; color: var(--slate); text-decoration: none; transition: color var(--dur-fast) linear, background-color var(--dur-fast) linear; } .nav-link:hover { color: var(--ink); background: var(--hairline-soft); text-decoration: none; } .nav-link[aria-current='page'] { color: var(--detergent-deep); background: var(--detergent-wash); } .header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; } .nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--white); } .nav-toggle-bars { display: block; position: relative; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: background-color var(--dur-fast) linear; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--dur) var(--ease-out); } .nav-toggle-bars::before { transform: translateY(-6px); } .nav-toggle-bars::after { transform: translateY(6px); } .nav-toggle[aria-expanded='true'] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded='true'] .nav-toggle-bars::before { transform: rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle-bars::after { transform: rotate(-45deg); } @media (max-width: 940px) { .nav-toggle { display: inline-flex; order: 3; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--s-4) var(--gutter) var(--s-6); background: var(--white); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-lg); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease-out), opacity var(--dur) linear, visibility var(--dur) linear; } .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-link { padding: 0.85rem 0.75rem; border-radius: var(--r-md); font-size: 1.05rem; } .header-actions .btn-header-signin { display: none; } } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { background: var(--ink); color: color-mix(in oklab, var(--white) 72%, transparent); padding-block: clamp(3rem, 6vw, 5rem) var(--s-6); margin-top: var(--section-y); } .footer-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); padding-bottom: var(--s-7); } .site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-3); opacity: 0.55; } .footer-links { display: flex; flex-direction: column; gap: 0.55rem; } .footer-links a { color: color-mix(in oklab, var(--white) 78%, transparent); font-size: 0.925rem; text-decoration: none; transition: color var(--dur-fast) linear; width: fit-content; } .footer-links a:hover { color: var(--white); } .footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.035em; color: var(--white); text-decoration: none; margin-bottom: var(--s-3); } .footer-blurb { font-size: 0.925rem; line-height: 1.65; max-width: 32ch; color: color-mix(in oklab, var(--white) 62%, transparent); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid color-mix(in oklab, var(--white) 12%, transparent); font-size: 0.825rem; color: color-mix(in oklab, var(--white) 52%, transparent); } .footer-bottom a { color: inherit; } /* ── Toast ────────────────────────────────────────────────────────────── */ .toast-stack { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 300; display: flex; flex-direction: column; gap: var(--s-3); pointer-events: none; max-width: min(24rem, calc(100vw - 2rem)); } .toast { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1.1rem; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); font-size: 0.9rem; font-weight: 500; pointer-events: auto; animation: toast-in 380ms var(--ease-spring) both; } .toast.is-leaving { animation: toast-out 240ms var(--ease-out) both; } .toast-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--white); margin-top: 1px; } .toast-success .toast-icon { background: var(--mint); } .toast-error .toast-icon { background: var(--coral); } .toast-info .toast-icon { background: var(--detergent); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px); } } /* ── Scroll reveal ────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal='fade'] { transform: none; } [data-reveal='left'] { transform: translateX(-26px); } [data-reveal='right'] { transform: translateX(26px); } [data-reveal='scale'] { transform: scale(0.94); } [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } /* On narrow screens a sideways offset pushes content past the gutter before it animates in. Fall back to the vertical rise, which never overflows. */ @media (max-width: 700px) { [data-reveal='left'], [data-reveal='right'] { transform: translateY(22px); } } /* ── Care symbols ─────────────────────────────────────────────────────── */ /* Real ISO 3758 laundry glyphs, used where they actually mean something. */ .care-symbol { width: 34px; height: 34px; flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ── Utilities ────────────────────────────────────────────────────────── */ .center { text-align: center; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .hidden { display: none !important; } .spinner { width: 16px; height: 16px; border: 2px solid color-mix(in oklab, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 720ms linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient( 90deg, var(--hairline-soft) 25%, var(--porcelain-deep) 37%, var(--hairline-soft) 63% ); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--r-sm); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }