. Every component rule hangs off #main; the nav state rules off body.pub (tests/public-system-scope). 3. The partial markers: , (skip link and nav), , each closed by , stamped by scripts/public-partials.mjs. 4. A phone mockup also links assets/public/public-app.css (the device and the real app screens), and stamps its panes from partials/public-pane-*. 5. A translated page stamps and (es, fr, it, pt, ru), each from that language's own labels. 6. A private approved page that keeps its own design (/online/, /train-with-the-founder/, /founder/) takes only the shell: it links assets/public/public-shell.css and public.js and stamps and ; nothing else. COMPONENTS (class names fixed by the plan, section 2.2) Bands dark: section.pub-band.atmo.dialed-band[data-mood=sky][data-mz-band=dark] light: .pub-light sunk: .pub-sunk.dialed-band wrap: .pub-wrap Type .pub-eyebrow .pub-h1 / .pub-h2 with one pivot .pub-lede .pub-head Actions .dialed-pill.pub-pill (ONE white pill per view) .dialed-frosty.pub-pill .dialed-fill-light.pub-pill.pub-ink .pub-link .pub-chip-link .pub-ctas Rings svg.pub-ring (.pub-ring-track .pub-ring-lum .pub-ring-arc, pathLength 100), role colour from .is-t teal, .is-aq aqua, .is-a amber, .is-b blue on the ring or its card Cards .pub-panel (the lit panel on paper) .pub-doors > .pub-door (6 row subgrid) .pub-tiers > .pub-tier (9 row subgrid) .pub-door-l/-h/-p/-amt/-per/-list/-cta .pub-tier-n/-for/-p/-v .pub-offerline .pub-rider Offer section.offer-strip.pub-sunk.dialed-band.pub-offer > .offer-strip-in (.pub-offer-copy, .pub-offer-side, .offer-strip-code.pub-code) Money .pub-fee (.pub-fee-copy .pub-fee-t .pub-fee-b) with figure.pub-flow (.pub-flow-in, .pub-flow-bar > .pub-flow-you + .pub-flow-cut, .pub-flow-out > .pub-flow-y + .pub-flow-m), counted figures span.pub-count[data-pub-count] .pub-nots (the four things you do not pay) Trust .pub-honest > .pub-honest-grid (.pub-honest-head, .pub-honest-cta) .pub-qa > .pub-qa-item[data-pub-q] (.pub-qa-q, .pub-qa-ic, .pub-qa-chev, .pub-qa-a) .pub-proof > .pub-pc (.pub-pc-founder) Hero .pub-hero (.pub-hero-grid .pub-hero-copy .pub-sub .pub-note .pub-tags > .pub-tag, entrance lines .pub-l1 to .pub-l5) .pub-horizon (hz-atmo hz-planet hz-rim) .pub-mark (.pub-mark-hero, .pub-mark-close; markup in partials/public-mark.html) Close .pub-close (#setup) > .pub-close-in (.pub-close-h .pub-steps .pub-close-sub .pub-ctas-c) Console figure.pub-console > .pub-console-bar + .pub-console-glass > .pub-console-app (.cn-card .cn-eb .cn-h .cn-row .cn-muted) Chips .pub-chips > .pub-chip Motion .pub-pause[data-pub-pause] on any page with a loop (hero or close) MOTION. A block marked [data-pub] gets .is-in once at 0.35 in view (public.js) and plays its one graphic. The base rules ARE the rest state; every start state lives under html.pub-armed, set by the head gate only when motion is allowed and not paused. The two loops (ring 24s, rim 70s) live under html.pub-loops and rest off screen ([data-pub-loop] gets .pub-off). Only opacity, transform, stroke-dasharray, stroke-dashoffset, stroke-opacity and box-shadow move. No filter, no backdrop blur, no library, no decorative dots, no em or en dashes. ===================================================================== */ /* ---------- The shell: the nav, the skip link and the footer every public page carries. TAP FLOORS (Gauntlet L5_TARGET_SIZE_FLOOR): 24px on both axes from 768 up, 44px under 768; each phone rule sits after its base rule. tests/gauntlet-smoke-20260915 reads .brand, .nav-cta, .nav-menu .nav-link, .skip-link, .foot-cols a and .foot-legal a here by name. ---------- */ /* ---------- The nav: the homepage's disclosure menu (partials/public-nav.html). ---------- */ .nav-inner{padding-left:var(--space-3);padding-right:var(--space-3);justify-content:space-between} .nav-left{display:flex;align-items:center;gap:14px;position:relative} .brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px} .brand svg{flex:none} .nav-toggle{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--rule-strong);border-radius:12px;color:var(--ink-primary);cursor:pointer} .nav-toggle:hover{border-color:var(--ink-primary)} .nav-toggle-bars{display:flex;flex-direction:column;gap:4px;width:18px} .nav-toggle-bars i{display:block;height:2px;background:var(--ink-primary);border-radius:2px;transition:transform var(--mz-dur-base) ease,opacity var(--mz-dur-base) ease} .nav.open .nav-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav.open .nav-toggle-bars i:nth-child(2){opacity:0} .nav.open .nav-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .nav-menu{position:absolute;top:calc(100% + 12px);left:0;display:none;flex-direction:column;align-items:stretch;min-width:264px} .nav.open .nav-menu{display:flex} .nav-menu .nav-link{display:flex;align-items:center;min-height:44px;padding:0 14px} .nav-cta{min-height:24px;min-width:24px} /* THE PIN. css/styles.css resizes and indents .nav .nav-cta at 720, 480, 374 and 360 with a two class rule, so the phone floor is restated at the same weight, after the base rule. */ @media(max-width:767px){.nav .nav-cta{min-height:44px;min-width:44px}} .skip-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center} /* ---------- The footer: the one dark surface, the same dark as the pill. ---------- */ .foot{padding:var(--space-6) var(--space-3) var(--space-4)} /* assets/css/atelier-public.css 5 zeroes the side padding on every footer, which put this one flush to the glass on a phone. Restated at the same weight, winning on order, and the inner width matches the sections so the columns line up. */ :root[data-mz-console="atelier"] :where(body) > footer{padding-inline:var(--space-3)} .foot-in{max-width:calc(var(--atelier-max-width) - 2 * var(--space-3));margin:0 auto;display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between} .foot-brand{max-width:320px} .foot-logo{font-family:var(--serif);font-weight:var(--weight-serif);font-size:24px;display:flex;align-items:center;gap:12px} .foot-brand p{margin-top:12px;font-size:14px;line-height:1.5;letter-spacing:0.35px} .foot-cols{display:flex;gap:clamp(32px,6vw,72px);flex-wrap:wrap} .foot-cols h3{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:14px} /* 44px hit area on a 14px word. Inline flex so the block margin does not collapse between siblings, width 100% so each link owns its own row. */ .foot-cols a{display:inline-flex;align-items:center;width:100%;min-height:24px;min-width:24px;font-size:14px;padding:0} @media (max-width:767px){.foot-cols a{min-height:44px;min-width:44px}} .foot-legal{max-width:calc(var(--atelier-max-width) - 2 * var(--space-3));margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,0.10);display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:0.5px;line-height:1.5} .foot-legal a{display:inline-flex;align-items:center;min-height:24px;min-width:24px} /* AFTER the base rule, because a same specificity phone rule placed before it loses on source order and the floor silently reverts to 24. */ @media (max-width:767px){.foot-legal a{min-height:44px;min-width:44px}} @media (prefers-reduced-motion: reduce){.nav-toggle-bars i{transition:none}} /* The page frame, 1280 cap from L1. :where() keeps the weight of a bare main rule. */ main:where(.pub-main){padding:0 var(--space-3);display:flex;flex-direction:column} /* Every band of the frame is a flex item; zero weight min-width 0 lets a wide child (a dashboard preview on a translated page) pan inside its own box instead of holding the column open. */ main:where(.pub-main) > *{min-width:0} /* ---------- 0. The page ---------- */ /* Component floor: lists and headings inside the components start from zero at ZERO specificity, so this only ever beats the browser's own defaults and never an author rule (the homepage's reset does the same job there). */ :where(body.pub #main) :where(.pub-tags, .pub-chips, .pub-steps, .pub-nots, .pub-door-list) { margin: 0; padding: 0; list-style: none; } :where(body.pub #main) :where(.pub-door, .pub-tier, .pub-pc, .pub-fee, .pub-flow, .pub-close-in, .pub-head, .pub-hero-copy, .pub-qa-item) :where(h1, h2, h3, p, figure, figcaption) { margin: 0; } :where(body.pub #main) :where(.pub-qa-item) :where(button) { font: inherit; } #main.pub-main { padding-bottom: 0; } #main .pub-wrap { width: 100%; max-width: calc(var(--atelier-max-width) - 2 * var(--space-3)); margin-inline: auto; } #main .pub-eyebrow { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; } #main .pub-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } #main .pub-h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; } #main .pub-h2 em { font-style: italic; font-weight: 300; } #main .pub-lede { margin: 0; font-size: 17px; line-height: 1.55; max-width: 62ch; } #main .pub-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 20px; text-decoration: none; white-space: nowrap; } #main .pub-link { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } #main .pub-link:hover { text-decoration: underline; text-underline-offset: 4px; } #main .mono { font-family: var(--mono); font-weight: 500; } #main .pub-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hy-hairline); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hy-aqua-hi); white-space: normal; } #main .pub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } #main .pub-chips .pub-chip { border-color: color-mix(in srgb, var(--hy-aqua) 45%, transparent); } #main .pub-more { margin-top: 12px; } #main :focus-visible { outline: 2px solid var(--hy-aqua-hi); outline-offset: 2px; } /* The dark bands: dialed-web.css paints the ground; this is their rhythm. */ #main > .dialed-band { padding-block: 112px; margin-block: 0; } #main > .dialed-band .pub-h2, #main > .dialed-band h3 { color: var(--hy-ink); } #main > .dialed-band .pub-h2 em { color: var(--hy-aqua-hi); } #main > .dialed-band .pub-eyebrow { color: var(--hy-aqua-hi); } #main > .dialed-band .pub-lede { color: var(--hy-muted); } #main > .dialed-band .pub-link { color: var(--hy-aqua-hi); } /* The light bands: the public paper, quiet. */ #main > .pub-light { padding-block: 112px; } #main > .pub-light .pub-eyebrow { color: var(--marrow-accent); } #main > .pub-light .pub-h2 { color: var(--ink-primary); } #main > .pub-light .pub-h2 em { color: var(--marrow-accent); } #main > .pub-light .pub-lede { color: var(--ink-secondary); } #main > .pub-light .pub-link, #main > .pub-light p > a:not([class]) { color: var(--marrow-accent); } #main > .pub-light :focus-visible { outline-color: var(--ink-primary); } /* Tier and fee type read the same on a dark band and on the lit .pub-panel (:is keeps the weight). */ /* The sunk band: a plane set into the page, its lower edge curved. */ #main .pub-sunk.dialed-band { width: auto; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: max(calc(50vw - 50%), calc(50vw - var(--atelier-max-width) / 2)); border-radius: 0 0 50% 50% / 0 0 28px 28px; color: var(--hy-ink); background: var(--hy-sunk); background-image: none; padding-block: 56px 72px; border-top: 1px solid var(--hy-hairline); } /* The offer band on its sunk plane (the live offer-strip markup, offer-live.js). */ #main .pub-offer .offer-strip-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding: 0; background: none; border: 0; border-radius: 0; color: var(--hy-ink); } #main .pub-offer-copy { display: flex; flex-direction: column; gap: 12px; } #main .pub-offer h2#offer-strip-h { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.15; color: var(--hy-ink); } #main .pub-offer h2#offer-strip-h em { color: var(--hy-aqua-hi); font-weight: 300; } #main .pub-offer .offer-strip-fee { margin: 0; font-size: 15px; color: var(--hy-muted); max-width: 60ch; } #main .pub-offer .offer-strip-fee strong { color: var(--hy-ink); font-weight: 500; } #main .pub-offer .offer-strip-days { color: var(--hy-aqua-hi); } #main .pub-offer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } #main .pub-offer .offer-strip-code.pub-code { height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--color-pure-white); background: var(--hy-card); color: var(--hy-ink); font-size: 15px; letter-spacing: 0.16em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.33), 0 10px 34px -10px color-mix(in srgb, var(--hy-teal) 37%, transparent), 0 0 0 6px color-mix(in srgb, var(--hy-teal) 6%, transparent); } #main .pub-offer .offer-strip-clockbox { display: flex; align-items: flex-end; } #main .pub-offer :is(.o-num, .o-sep) { color: var(--hy-ink); font-variant-numeric: tabular-nums; } #main .pub-offer .o-lab { color: var(--hy-muted); } #main .pub-offer .offer-strip-clock { color: var(--hy-muted); } #main .pub-offer .offer-strip-cta.pub-link { height: auto; padding: 0; border: 0; border-radius: 0; color: var(--hy-aqua-hi); background: none; } #main .pub-offer .offer-strip-cta.pub-link:hover { background: none; color: var(--hy-aqua-hi); } #main .pub-ink { background: var(--hy-card); border: 1px solid var(--hy-card); color: var(--hy-ink); transition: border-color 160ms ease, box-shadow 160ms ease; } @media (hover: hover) and (pointer: fine) { #main .pub-ink:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-teal) 30%, transparent); } } /* ---------- 1. The hero ---------- */ #main #hero { padding-block: 0; } #main #hero .pub-hero { position: relative; overflow: hidden; border-radius: 0; box-shadow: none; padding-bottom: 0; } #main .pub-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; min-height: min(calc(100vh - 56px - 64px), 800px); padding-bottom: 120px; } #main .pub-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } #main .pub-hero .pub-eyebrow { color: var(--hy-aqua-hi); } #main .pub-h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.025em; color: var(--hy-ink); text-wrap: balance; } #main .pub-h1 em { font-style: italic; font-weight: 300; color: var(--hy-aqua-hi); } #main .pub-hero p.pub-sub { margin: 0; font-size: 18px; line-height: 1.5; max-width: 52ch; color: var(--hy-ink); } #main .pub-ctas { display: flex; flex-wrap: wrap; gap: 12px; } #main .dialed-band .dialed-pill.pub-pill { min-height: 48px; padding: 0 24px; font-size: 15px; } #main .dialed-band .dialed-frosty.pub-pill { min-height: 48px; padding: 0 24px; font-size: 15px; } #main .pub-hero p.pub-note { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; color: var(--hy-aqua-hi); max-width: 60ch; } #main .pub-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } #main .pub-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hy-aqua-hi) 45%, transparent); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-aqua-hi); } /* The ringed mark (logo system Level 2): the ring turns, the mark inside never moves. */ #main .pub-mark { position: relative; aspect-ratio: 1; justify-self: center; } #main .pub-mark-hero { width: clamp(260px, 30vw, 420px); } #main .pub-mark > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } #main .pub-mark-track { stroke: var(--hy-edge); stroke-opacity: 0.45; stroke-width: 2.4; } #main .pub-mark-arc { stroke-width: 4.8; stroke-linecap: round; stroke-dasharray: 132.5 533.5; transform-origin: 120px 120px; } #main .pub-mark-arc.pub-mark-lum { stroke-width: 17; stroke-opacity: 0.16; } #main .pub-mark-a1 { stroke: var(--hy-teal); transform: rotate(-90deg); } #main .pub-mark-a2 { stroke: var(--hy-aqua-hi); transform: rotate(0deg); } #main .pub-mark-a3 { stroke: var(--atelier-dark-amber); transform: rotate(90deg); } #main .pub-mark-a4 { stroke: var(--atelier-dark-blue); transform: rotate(180deg); } #main .pub-mark-outer { stroke: var(--hy-aqua-hi); } #main .pub-mark-cells { stroke: var(--hy-aqua); stroke-opacity: 0.78; } #main .pub-mark-core-lum { stroke: var(--hy-teal); stroke-opacity: 0.22; fill: none; } #main .pub-mark-core-fill { fill: var(--hy-teal); } #main .pub-mark-sun { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240, 255, 251, 0.5) 0%, rgba(120, 236, 214, 0.32) 24%, rgba(59, 201, 196, 0.14) 52%, transparent 74%); opacity: 0.55; transform: scale(0.55); } /* The Horizon (the approved entrance): a planet whose curved rim is the hero's floor. */ #main .pub-horizon { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #main .pub-horizon > span { position: absolute; } #main .hz-atmo { left: -10%; right: -10%; bottom: 0; height: 62%; background: radial-gradient(58% 70% at 50% 100%, rgba(59, 201, 196, 0.2) 0%, rgba(59, 201, 196, 0.06) 48%, transparent 74%); } #main .hz-planet, #main .hz-rim { left: 50%; top: calc(100% - 64px); width: 300vmax; height: 300vmax; margin-left: -150vmax; border-radius: 50%; } #main .hz-planet { background: var(--hy-sunk); box-shadow: 0 -1px 0 0 rgba(190, 255, 240, 0.42), 0 -8px 30px -4px rgba(94, 230, 203, 0.32), 0 -60px 150px -10px rgba(59, 201, 196, 0.18); } #main .hz-rim { background: conic-gradient(from -16deg, transparent 0deg, rgba(234, 255, 250, 0.95) 16deg, transparent 32deg, transparent 360deg); -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); } #main .pub-pause { position: absolute; z-index: 3; right: max(16px, calc(50vw - var(--atelier-max-width) / 2 + 24px)); bottom: 12px; min-height: 44px; padding: 0 12px; background: transparent; border: 0; color: var(--hy-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } #main .pub-pause:hover { color: var(--hy-aqua-hi); } #main .pub-rider { margin: 4px 0 0; } #main .pub-chip-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; } #main .dialed-band .pub-chip-link { color: var(--hy-aqua-hi); } #main .pub-light .pub-chip-link { color: var(--marrow-accent); } #main .pub-panel { position: relative; isolation: isolate; overflow: hidden; padding: 64px 56px 56px; border-radius: 28px; color: var(--hy-ink); background-color: var(--hy-ground); background-image: radial-gradient(48% 60% at 8% 0%, color-mix(in srgb, var(--hy-pool-teal) 18%, transparent) 0%, transparent 72%), radial-gradient(40% 60% at 100% 30%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 70%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%); box-shadow: 0 50px 90px -60px rgba(2, 8, 9, 0.75), inset 0 0 0 1px color-mix(in srgb, var(--hy-edge) 50%, transparent); } #main .pub-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 20px; } #main .pub-door { grid-row: span 6; display: grid; grid-template-rows: subgrid; align-items: start; row-gap: 0; padding: 32px 28px 28px; border-radius: 20px; min-width: 0; background: var(--hy-card); border: 1px solid var(--hy-hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -44px rgba(2, 8, 9, 0.9); } #main .is-t { color: var(--hy-teal); } #main .is-b { color: var(--atelier-dark-blue); } #main .is-a { color: var(--atelier-dark-amber); } #main .is-aq { color: var(--hy-aqua-hi); } #main .pub-ring { width: 64px; height: 64px; overflow: visible; margin-bottom: 26px; } #main .pub-ring-track { stroke: color-mix(in srgb, var(--hy-edge) 45%, transparent); stroke-width: 4; } #main :is(.pub-ring-arc, .pub-ring-lum) { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 78 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 36px 36px; } #main .pub-ring-arc { stroke-width: 4; } #main .pub-ring-lum { stroke-width: 12; stroke-opacity: 0.18; } /* On paper (logo system light ground rule): the hue deepened toward bone black, no glow. A ring inside a lit .pub-panel keeps the dark look. */ #main .pub-light .pub-ring:not(.pub-panel .pub-ring) { color: color-mix(in srgb, currentColor 72%, var(--bone-black)); } #main .pub-light .pub-ring:not(.pub-panel .pub-ring) .pub-ring-lum { stroke-opacity: 0; } #main .pub-light .pub-ring:not(.pub-panel .pub-ring) .pub-ring-track { stroke: var(--rule-soft); } #main .dialed-band p.pub-door-l, #main p.pub-door-l { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); } #main .pub-door-h { margin: 0 0 22px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--hy-ink); } #main p.pub-door-p { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--hy-hairline); display: flex; align-items: baseline; gap: 8px; color: var(--hy-ink); } #main .pub-door-amt { font-family: var(--serif); font-weight: 300; font-size: 52px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; } #main .pub-door-per { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--hy-muted); } #main .pub-door-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; } #main .pub-door-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--hy-ink); } #main .pub-door-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); color: var(--hy-aqua-hi); } #main .pub-door-cta { align-self: end; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--hy-sunk); border: 1px solid var(--hy-edge); color: var(--hy-ink); font-weight: 500; font-size: 15px; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; } #main .pub-door-cta:hover { border-color: var(--hy-aqua-hi); background: var(--hy-card); } #main .pub-type { white-space: pre-wrap; } #main .pub-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(9, auto); column-gap: 20px; } #main .pub-tier { grid-row: span 9; display: grid; grid-template-rows: subgrid; align-items: start; row-gap: 0; padding: 32px 28px 28px; border-radius: 20px; min-width: 0; background: var(--hy-card); border: 1px solid var(--hy-hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -44px rgba(2, 8, 9, 0.9); } #main .pub-tier.is-b { border-color: color-mix(in srgb, var(--atelier-dark-blue) 40%, var(--hy-hairline)); } #main .pub-tier .pub-ring { margin-bottom: 22px; } #main :is(.dialed-band, .pub-panel) .pub-tier-n { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); } #main :is(.dialed-band, .pub-panel) p.pub-tier-for { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--hy-muted); } #main :is(.dialed-band, .pub-panel) p.pub-tier-p { margin: 0 0 14px; display: flex; align-items: baseline; gap: 8px; color: var(--hy-ink); } #main :is(.dialed-band, .pub-panel) p.pub-offerline { margin: 0 0 22px; padding: 6px 10px; justify-self: start; align-self: start; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--hy-aqua-hi) 45%, transparent); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; color: var(--hy-aqua-hi); } #main .pub-offerline[hidden] { display: none; } #main .pub-tier .pub-door-list { margin-bottom: 18px; padding-top: 22px; border-top: 1px solid var(--hy-hairline); } #main :is(.dialed-band, .pub-panel) p.pub-tier-v { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--hy-muted); } #main .pub-tier .pub-rider { margin: 0 0 14px; } #main .pub-tier .pub-door-cta { align-self: end; grid-row: 9; } #main .pub-fee { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 40px; border-radius: 20px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); } #main .pub-fee-t { margin: 10px 0 16px; font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.01em; color: var(--hy-ink); } #main :is(.dialed-band, .pub-panel) p.pub-fee-b { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--hy-muted); } #main .pub-flow { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 16px; background: var(--hy-card); border: 1px solid var(--hy-hairline); } #main .pub-flow-in, #main .pub-flow-y, #main .pub-flow-m { display: flex; flex-direction: column; gap: 4px; } #main .pub-flow .mono { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); } #main .pub-flow b { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; } #main .pub-flow-bar { position: relative; display: flex; gap: 6px; height: 14px; } #main .pub-flow-you { flex: 92 1 0; border-radius: 999px; background: color-mix(in srgb, var(--hy-edge) 40%, transparent); overflow: hidden; } #main .pub-flow-cut { transform: translate(6px, -10px); flex: 8 1 0; border-radius: 999px; background: color-mix(in srgb, var(--hy-edge) 40%, transparent); overflow: hidden; } #main .pub-flow-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; } #main .pub-flow-you i { background: var(--hy-teal); box-shadow: 0 0 18px color-mix(in srgb, var(--hy-teal) 55%, transparent); } #main .pub-flow-cut i { background: var(--atelier-dark-amber); } #main .pub-flow-out { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } #main .pub-flow-y b { color: var(--hy-teal); } #main .pub-flow-m { align-items: flex-end; text-align: right; } #main .pub-flow-m b { font-size: 30px; color: var(--atelier-dark-amber); } #main .pub-flow figcaption { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-aqua-hi); } #main .pub-nots { list-style: none; margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; } #main .pub-nots li { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border-radius: 14px; border: 1px solid var(--hy-hairline); } #main .pub-nots svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; fill: none; stroke: var(--hy-aqua-hi); stroke-width: 2.4; stroke-linecap: round; background: color-mix(in srgb, var(--hy-aqua-hi) 12%, transparent); } #main .pub-nots span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--hy-muted); } #main .pub-nots b { font-weight: 600; color: var(--hy-ink); } /* ---------- The console frame: a web dashboard screen, drawn at 1120 wide and scaled in ---------- The hybrid dashboard card recipe (design-canon/dashboard-design-approved-20261004.html): a lit ground, cards on --hy-card with a teal edge. assets/public/public.js sets --s to the frame's width over 1120 as it resizes; 0.5 holds until it runs. No window dots: a dot that decorates is banned, so the bar carries the screen's address as a mono label. */ #main .pub-console { --s: 0.5; position: relative; margin: 0; width: 100%; max-width: 760px; border-radius: 18px; overflow: hidden; background: var(--hy-card); border: 1px solid var(--hy-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 50px 90px -60px rgba(2, 8, 9, 0.85); } #main .pub-console-bar { display: flex; align-items: center; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--hy-hairline); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); } #main .pub-console-glass { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } #main .pub-console-app { position: absolute; top: 0; left: 0; width: 1120px; height: calc(100% / var(--s, 0.5)); transform: scale(var(--s, 0.5)); transform-origin: 0 0; padding: 32px; color: var(--hy-ink); font-family: var(--sans); background-color: var(--hy-ground); background-image: radial-gradient(44% 40% at 8% 0%, color-mix(in srgb, var(--hy-pool-teal) 16%, transparent) 0%, transparent 72%), radial-gradient(36% 44% at 100% 34%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 70%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%); } #main .pub-console-app p { margin: 0; } #main .pub-console .cn-card { padding: 22px; border-radius: 14px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 70%, transparent); } #main .pub-console .cn-eb { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-aqua-hi); } #main .pub-console .cn-h { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1.15; color: var(--hy-ink); } #main .pub-console .cn-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-bottom: 1px solid var(--hy-hairline); font-size: 16px; color: var(--hy-ink); } #main .pub-console .cn-row:last-child { border-bottom: 0; } #main .pub-console .cn-muted { color: var(--hy-muted); } /* ---------- 8. The honest part: four objections, one open at a time ---------- */ #main .pub-honest-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } #main .pub-honest-head { position: sticky; top: 112px; margin-bottom: 0; } #main .pub-honest-cta { align-self: flex-start; margin-top: 10px; } #main .pub-qa { display: flex; flex-direction: column; gap: 12px; } #main .pub-qa-item { border-radius: 16px; background: var(--paper-card); border: 1px solid var(--rule-soft); transition: border-color 200ms ease, box-shadow 300ms ease; } #main .pub-qa-item.is-open { border-color: color-mix(in srgb, var(--marrow-accent) 45%, var(--rule-soft)); box-shadow: 0 24px 48px -36px rgba(11, 26, 28, 0.45); } #main .pub-qa-q { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 76px; padding: 16px 20px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-primary); font: inherit; border-radius: 16px; } #main .pub-qa-q:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; } #main .pub-qa-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hy-card); } #main .pub-qa-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--hy-aqua-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #main .pub-qa-q q { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; quotes: none; } #main .pub-qa-chev svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } #main .pub-qa-item.is-open .pub-qa-chev svg { transform: rotate(180deg); } #main .pub-qa-a > div > p { margin: 0; padding: 0 24px 22px 80px; font-size: 17px; line-height: 1.55; color: var(--ink-secondary); } .pub-qa-js #main .pub-qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1); } .pub-qa-js #main .pub-qa-a > div { overflow: hidden; min-height: 0; } .pub-qa-js #main .pub-qa-a > div > p { opacity: 0; transform: translateY(-6px); transition: opacity 360ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } .pub-qa-js #main .pub-qa-item.is-open .pub-qa-a { grid-template-rows: 1fr; } .pub-qa-js #main .pub-qa-item.is-open .pub-qa-a > div > p { opacity: 1; transform: none; transition-delay: 80ms; } #main .pub-proof { margin-top: 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; } #main .pub-pc { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: var(--paper-card); border: 1px solid var(--rule-soft); } #main .pub-pc h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink-primary); } #main .pub-pc p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); } #main .pub-pc strong { color: var(--ink-primary); font-weight: 500; } #main .pub-pc img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } #main .pub-pc.pub-pc-founder { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-content: start; } #main .pub-pc-founder img { grid-row: 1 / span 3; } #main .pub-pc-founder > :not(img) { grid-column: 2; } #main .pub-pc-founder .pub-link { min-height: 32px; } /* ---------- 9. The close ---------- */ #main > #setup.pub-close { position: relative; overflow: hidden; border-radius: 0; box-shadow: none; margin-block: 0; padding-block: 112px 168px; } #main .pub-close-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } #main .pub-mark-close { width: 96px; } #main .pub-close-h { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--hy-ink); } #main .pub-close-h em { font-style: italic; color: var(--hy-aqua-hi); font-weight: 300; } #main .pub-steps { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; border: 1px solid var(--hy-hairline); border-radius: 12px; background: var(--hy-card); } #main .pub-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-ink); } #main .pub-steps li + li { border-left: 1px solid var(--hy-hairline); } #main .pub-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hy-boundary); font-weight: 500; color: var(--hy-aqua-hi); font-variant-numeric: tabular-nums; } #main .dialed-band p.pub-close-sub { margin: 0; font-size: 17px; color: var(--hy-muted); } #main .pub-ctas-c { justify-content: center; } #main .pub-horizon-close .hz-planet, #main .pub-horizon-close .hz-rim { top: calc(100% - 48px); } /* ---------- The nav over a public page: transparent over the hero, one white pill on screen ---------- */ :root[data-mz-console="atelier"] body.pub .nav { transition: background-color 160ms ease, border-color 160ms ease; } :root[data-mz-console="atelier"] body.pub:not(.pub-at-hero) .nav { background: var(--hy-card); border-bottom: 1px solid var(--hy-hairline); --ink-primary: var(--color-pure-white); } :root[data-mz-console="atelier"] body.pub:not(.pub-at-hero) .nav :is(.nav-link, .brand) { color: var(--hy-ink); } :root[data-mz-console="atelier"] body.pub .nav .nav-cta { border-radius: 999px; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } :root[data-mz-console="atelier"] body.pub:not(.pub-own) .nav .nav-cta { background: var(--color-pure-white); border-color: var(--color-pure-white); color: var(--hy-ground); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 34px -10px color-mix(in srgb, var(--hy-teal) 62%, transparent), 0 0 0 6px color-mix(in srgb, var(--hy-teal) 10%, transparent); } :root[data-mz-console="atelier"][data-mz-console] body.pub.pub-own .nav .nav-cta { background: var(--hy-card); border: 1px solid var(--hy-hairline); color: var(--hy-ink); box-shadow: none; } /* ---------- Phone first ---------- */ @media (max-width: 1023px) { #main .pub-offer .offer-strip-in { grid-template-columns: minmax(0, 1fr); } #main .pub-offer-side { align-items: flex-start; } #main .pub-offer .offer-strip-clockbox { display: flex; align-items: flex-start; } #main .pub-offer .offer-strip-clock { text-align: left; } #main .pub-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding-bottom: 104px; } #main .pub-mark-hero { order: -1; width: 220px; } #main .pub-tiers { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; } #main .pub-tier { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; align-items: stretch; } #main .pub-tier .pub-door-cta { grid-row: auto; align-self: stretch; margin-top: auto; } #main .pub-tier .pub-ring, #main :is(.dialed-band, .pub-panel) .pub-tier p.pub-offerline { align-self: flex-start; } #main .pub-fee { grid-template-columns: minmax(0, 1fr); gap: 28px; } #main .pub-nots { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main .pub-honest-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } #main .pub-honest-head { position: static; } #main .pub-doors { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; } #main .pub-door { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; align-items: stretch; } #main .pub-ring { align-self: flex-start; } #main .pub-door-cta { align-self: stretch; margin-top: auto; } #main .pub-panel { padding: 48px 32px 32px; } #main .pub-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main .pub-pc-founder { grid-column: 1 / -1; } } @media (max-width: 767px) { #main > .dialed-band, #main > .pub-light { padding-block: 72px; } #main .pub-head { margin-bottom: 28px; } #main .pub-mark-hero { width: 180px; } #main .pub-hero-grid { gap: 24px; padding-bottom: 96px; } #main .pub-hero p.pub-sub { font-size: 17px; } #main .pub-ctas { flex-direction: column; align-items: stretch; width: 100%; } #main .pub-ctas .pub-pill { width: 100%; } #main .pub-proof { grid-template-columns: minmax(0, 1fr); } #main .pub-nots { grid-template-columns: minmax(0, 1fr); } #main .pub-fee, #main .pub-flow { padding: 22px; } #main .pub-flow b { font-size: 38px; } #main .pub-qa-q { grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; padding: 14px 16px; } #main .pub-qa-ic { width: 40px; height: 40px; } #main .pub-qa-q q { font-size: 18px; } #main .pub-qa-a > div > p { padding: 0 18px 20px 68px; font-size: 16px; } #main .pub-pc-founder .pub-link { min-height: 44px; } #main .pub-tier { padding: 22px; } #main .pub-door { padding: 26px 22px 22px; } #main .pub-panel { padding: 40px 16px 16px; border-radius: 24px; } #main .pub-door-amt { font-size: 46px; } #main .pub-steps { flex-direction: column; width: 100%; } #main .pub-steps li + li { border-left: 0; border-top: 1px solid var(--hy-hairline); } #main > #setup.pub-close { padding-block: 80px 136px; } #main .pub-pause { right: 16px; bottom: 6px; } } /* ===================================================================== MOTION. Everything below runs only when the visitor allows it. ===================================================================== */ @media (prefers-reduced-motion: no-preference) { /* The offer code pill lights up once and stays lit. */ .pub-armed #main .pub-offer [data-pub]:not(.is-in) .pub-code { box-shadow: none; } .pub-armed #main .pub-offer [data-pub].is-in .pub-code { animation: pub-kf-lightup 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* The loops: the ring turns, the rim drifts. Paused off screen and by Pause motion. */ .pub-loops #main .pub-mark-ring { animation: pub-kf-turn 24s linear 1.3s infinite; } .pub-loops #main .hz-rim { animation: pub-kf-drift 70s ease-in-out infinite alternate; } .pub-loops #main .pub-off :is(.pub-mark-ring, .hz-rim) { animation-play-state: paused; } /* The hero moment, once on load. */ .pub-armed #main .pub-hero .pub-mark-sun { animation: pub-kf-sunrise 820ms cubic-bezier(0.5, 0, 0.2, 1) both; } .pub-armed #main .pub-mark-hero .pub-mark-core { animation: pub-kf-mark-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both; } .pub-armed #main .pub-mark-hero .pub-mark-arcs { transform-origin: 120px 120px; animation: pub-kf-sweep 1100ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both; } .pub-armed #main .pub-mark-hero .pub-mark-arc { animation: pub-kf-arc-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both; } .pub-armed #main .pub-hero .pub-l1 { animation: pub-kf-line 600ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both; } .pub-armed #main .pub-hero .pub-l2 { animation: pub-kf-line 700ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both; } .pub-armed #main .pub-hero .pub-l3 { animation: pub-kf-line 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both; } .pub-armed #main .pub-hero .pub-l4 { animation: pub-kf-line 700ms cubic-bezier(0.22, 1, 0.36, 1) 640ms both; } .pub-armed #main .pub-hero .pub-l5 { animation: pub-kf-line 600ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both; } @media (hover: hover) and (pointer: fine) { #main .pub-door { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease; } #main .pub-door:is(:hover, :focus-within) { transform: translateY(-4px); border-color: var(--hy-edge); } } .pub-armed #main .pub-honest.is-in .pub-rise { animation-duration: 600ms; animation-delay: calc(var(--i) * 80ms); } /* A typed line: each character arrives in turn (assets/public/public.js splits it). */ .pub-armed #main [data-pub]:not(.is-in) .pub-ch { opacity: 0; } .pub-armed #main [data-pub].is-in .pub-ch { animation: pub-kf-fade 90ms linear both; animation-delay: var(--t); } /* Doors and tiers: the cards rise, then their rings draw from twelve. */ .pub-armed #main [data-pub]:not(.is-in) :is(.pub-ring-arc, .pub-ring-lum) { stroke-dasharray: 0 100; } .pub-armed #main [data-pub]:not(.is-in) :is(.pub-door, .pub-tier) { opacity: 0; transform: translateY(24px); } .pub-armed #main [data-pub].is-in :is(.pub-door, .pub-tier) { animation: pub-kf-rise 820ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .pub-armed #main [data-pub].is-in :is(.pub-door, .pub-tier):nth-child(2) { animation-delay: 120ms; } .pub-armed #main [data-pub].is-in :is(.pub-door, .pub-tier):nth-child(3) { animation-delay: 240ms; } .pub-armed #main [data-pub].is-in :is(.pub-ring-arc, .pub-ring-lum) { animation: pub-kf-ring78 1100ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both; } .pub-armed #main [data-pub].is-in .pub-doors > .pub-door:nth-child(2) :is(.pub-ring-arc, .pub-ring-lum) { animation-delay: 540ms; } .pub-armed #main [data-pub].is-in .pub-doors > .pub-door:nth-child(3) :is(.pub-ring-arc, .pub-ring-lum) { animation-delay: 660ms; } /* Rows rise in one at a time (--i is the row). */ .pub-armed #main :is([data-pub], .hm-pane):not(.is-in) .pub-rise { opacity: 0; transform: translateY(16px); } .pub-armed #main :is([data-pub], .hm-pane).is-in .pub-rise { animation: pub-kf-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(240ms + var(--i) * 120ms); } .pub-armed #main .pub-fee:not(.is-in) .pub-flow-bar i { transform: scaleX(0); } .pub-armed #main .pub-fee:not(.is-in) .pub-flow-cut { transform: none; } .pub-armed #main .pub-fee:not(.is-in) :is(.pub-flow-out, .pub-flow figcaption) { opacity: 0; transform: translateY(10px); } .pub-armed #main .pub-fee.is-in .pub-flow-you i { animation: pub-kf-fill 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both; } .pub-armed #main .pub-fee.is-in .pub-flow-cut i { animation: pub-kf-fill 300ms ease-out 1150ms both; } .pub-armed #main .pub-fee.is-in .pub-flow-cut { animation: pub-kf-peel 700ms cubic-bezier(0.22, 1, 0.36, 1) 1350ms both; } .pub-armed #main .pub-fee.is-in .pub-flow-out { animation: pub-kf-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms both; } .pub-armed #main .pub-fee.is-in .pub-flow figcaption { animation: pub-kf-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 2100ms both; } } @keyframes pub-kf-turn { to { transform: rotate(360deg); } } @keyframes pub-kf-drift { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } } @keyframes pub-kf-sunrise { from { opacity: 0; transform: translateY(60%) scale(0.25); } to { opacity: 0.55; transform: scale(0.55); } } @keyframes pub-kf-mark-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } } @keyframes pub-kf-sweep { from { transform: rotate(-200deg); } to { transform: rotate(0deg); } } @keyframes pub-kf-arc-in { from { stroke-dasharray: 0 666.02; } to { stroke-dasharray: 132.5 533.5; } } @keyframes pub-kf-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes pub-kf-lightup { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 10px 34px -10px transparent, 0 0 0 0 transparent; } } @keyframes pub-kf-draw1 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes pub-kf-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pub-kf-press-out { 0% { opacity: 1; visibility: visible; transform: scale(1); } 23% { transform: scale(0.97); } 46% { opacity: 1; transform: scale(1); } 100% { opacity: 0; visibility: hidden; transform: scale(1); } } @keyframes pub-kf-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.97); } } @keyframes pub-kf-ring78 { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 78 100; } } @keyframes pub-kf-ringp { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--p) 100; } } @keyframes pub-kf-sheet { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } } @keyframes pub-kf-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pub-kf-peel { 0% { transform: none; } 100% { transform: translate(6px, -10px); } } @keyframes pub-kf-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes pub-kf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Pause motion (WCAG 2.2.2): everything rests at its final state. */ .motion-paused #main *, .motion-paused #main *::before, .motion-paused #main *::after { animation: none !important; transition: none !important; }