/* ============================================================ FORGED — marketing design system (v3, dark) ------------------------------------------------------------ One stylesheet behind every public page. Structure: 1. Fonts self-hosted, OFL, latin subset only 2. Tokens colour, type, space, radius, motion 3. Base reset, body, focus, skip link 4. Type the ten typographic roles — use these 5. Layout shell, sections, grids 6. Components nav, buttons, chips, cards, pricing … 7. Product UI the demo interfaces (class prefix ui-) 8. Pages the few page-specific compositions 9. Motion reveal, reduced motion Rules for editing: - Typography comes from the tokens in section 2 and the role classes in section 4. Do not write a raw font-size anywhere else; if a new size is needed, it is a new token. - Responsive overrides for a component go directly AFTER that component's base rules (the old sheet put a media block above the base rules and lost every override to cascade). - Product pages set data-vertical on , which moves only --signal. Everything else is inherited. ============================================================ */ /* ============================================================ 1. FONTS Saira (display), Geist (text/UI), Geist Mono (labels). swap, not block: text paints immediately in the fallback, and the fallbacks below are metric-adjusted to limit shift. ============================================================ */ @font-face { font-family: "Saira"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/saira-500.woff2") format("woff2"); } @font-face { font-family: "Saira"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/saira-600.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/geist-400.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/geist-500.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/geist-mono-400.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/geist-mono-500.woff2") format("woff2"); } /* Fallbacks tuned so the swap moves as little as possible. */ @font-face { font-family: "Saira Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; } @font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; } /* ============================================================ 2. TOKENS ============================================================ */ :root { color-scheme: dark; /* ---- Ground and surfaces: near-black, faintly cool ---- */ --bg: #0A0B0D; --bg-raise: #0D0F12; /* alternate section ground */ --surface: #111317; /* cards */ --surface-2: #161920; /* cards inside cards, inputs */ --surface-3: #1C2028; /* hover, selected */ --line: #1E2229; /* hairlines */ --line-2: #2A2F38; /* borders you are meant to see */ --line-3: #3A404B; /* hover borders */ /* ---- Ink (contrast measured on --bg) ---- */ --ink: #EDEFF2; /* 17.6:1 */ --ink-2: #B3BAC5; /* 10.2:1 — body copy */ --ink-3: #8A929F; /* 6.3:1 — secondary, labels */ --ink-4: #7A828F; /* 5.1:1 on --bg, 4.5:1 on --surface-2 — the floor for small text */ /* ---- Signal: the one accent. Forged is ember; the products re-tone it (sports blue, auto red). ---- */ --ember: #FF6B2C; --sports: #4DA8FF; --auto: #FF4F4A; --signal: var(--ember); --signal-ink: #0A0B0D; /* ---- Status tones (lifted from the Forged admin: live, pending, draft, past, off) ---- */ --ok: #3DD68C; --warn: #F5B84A; --off: #FF6B6B; --info: #4DA8FF; /* ---- Type families ---- */ --ff-display: "Saira", "Saira Fallback", "Arial Narrow", Arial, sans-serif; --ff-text: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale. Each role: size / line-height / tracking / weight. Fluid between 375px and 1440px viewports. ---- */ --display-size: clamp(3rem, 1.9rem + 4.7vw, 5.75rem); /* 48 → 92 */ --display-lh: 0.94; --display-tr: -0.03em; --display-wt: 600; --h1-size: clamp(2.625rem, 1.9rem + 3.1vw, 4.5rem); /* 42 → 72 */ --h1-lh: 0.96; --h1-tr: -0.028em; --h1-wt: 600; --h2-size: clamp(2rem, 1.5rem + 2.1vw, 3.5rem); /* 32 → 56 */ --h2-lh: 1; --h2-tr: -0.025em; --h2-wt: 600; --h3-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); /* 20 → 24 */ --h3-lh: 1.15; --h3-tr: -0.012em; --h3-wt: 500; --body-lg-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20 */ --body-lg-lh: 1.55; --body-size: 1rem; /* 16 */ --body-lh: 1.6; --body-sm-size: 0.875rem; /* 14 */ --body-sm-lh: 1.5; --label-size: 0.6875rem; /* 11 — mono, uppercase, tracked */ --label-lh: 1.3; --label-tr: 0.14em; --ui-size: 0.875rem; /* 14 — buttons, nav, inputs */ --ui-tr: -0.005em; --mono-size: 0.75rem; /* 12 — product UI, data */ --mono-lh: 1.45; /* ---- Space: 4px base ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: clamp(80px, 5rem + 4vw, 152px); /* ---- Shape ---- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; /* ---- Layout ---- */ --page: 1240px; --gut: clamp(16px, 4vw, 40px); --nav-h: 64px; /* ---- Elevation: glow comes from the signal, very quietly ---- */ --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0,0,0,.8); --shadow-float: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -24px rgba(0,0,0,.9), 0 0 0 1px var(--line-2); /* ---- Motion ---- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms; } body[data-vertical="sports"] { --signal: var(--sports); } body[data-vertical="auto"] { --signal: var(--auto); } /* ============================================================ 3. BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--ff-text); font-size: var(--body-size); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } ::selection { background: color-mix(in srgb, var(--signal) 40%, transparent); color: var(--ink); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-xs); } .skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 500; text-decoration: none; } .skip:focus { top: var(--s-4); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 4. TYPE ROLES Display · H1 · H2 · H3 · Body Large · Body · Body Small · Label · UI · Mono. Every text style on the site is one of these. ============================================================ */ .t-display, .t-h1, .t-h2, .t-h3, .t-figure { font-family: var(--ff-display); color: var(--ink); font-kerning: normal; text-wrap: balance; } .t-display { font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: var(--display-tr); font-weight: var(--display-wt); } .t-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tr); font-weight: var(--h1-wt); } .t-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tr); font-weight: var(--h2-wt); } .t-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tr); font-weight: var(--h3-wt); } .t-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); letter-spacing: -0.006em; color: var(--ink-2); text-wrap: pretty; } .t-body { font-size: var(--body-size); line-height: var(--body-lh); color: var(--ink-2); text-wrap: pretty; } .t-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--ink-3); } .t-label { font-family: var(--ff-mono); font-size: var(--label-size); line-height: var(--label-lh); letter-spacing: var(--label-tr); text-transform: uppercase; font-weight: 500; color: var(--ink-3); } .t-ui { font-family: var(--ff-text); font-size: var(--ui-size); letter-spacing: var(--ui-tr); font-weight: 500; } .t-mono { font-family: var(--ff-mono); font-size: var(--mono-size); line-height: var(--mono-lh); font-variant-numeric: tabular-nums; } /* Figures: prices, counts, times. Saira with tabular digits. */ .t-figure { font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; } .t-dim { color: var(--ink-3); } .t-signal { color: var(--signal); } /* The section label: "01 / PLATFORM". A code, a slash, a word. */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: var(--label-size); line-height: var(--label-lh); letter-spacing: var(--label-tr); text-transform: uppercase; font-weight: 500; color: var(--ink-3); } .kicker b { color: var(--signal); font-weight: 500; } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 12px color-mix(in srgb, var(--signal) 70%, transparent); } /* ============================================================ 5. LAYOUT ============================================================ */ .shell { width: 100%; max-width: calc(var(--page) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: calc(var(--section-y) * .66); } .section--raise { background: var(--bg-raise); border-block: 1px solid var(--line); } .section-head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); } .section-head .t-body-lg { max-width: 600px; } .section-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--s-6); } @media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; gap: var(--s-4); } } /* Faint engineering grid behind a section. Decorative, masked out at the edges so it never reads as a pattern. */ .gridbg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .gridbg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); } /* ============================================================ 6. COMPONENTS ============================================================ */ /* ---------- Masthead ---------- */ /* The blur lives on a pseudo-element: backdrop-filter on .mast itself would make it the containing block for the fixed mobile sheet, collapsing the sheet to the bar's own height. */ .mast { position: sticky; top: 0; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; transition: border-color var(--t-med) ease; } .mast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 11, 13, .72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); transition: background var(--t-med) ease; } .mast.is-scrolled { border-bottom-color: var(--line); } .mast.is-scrolled::before, .mast[data-open="true"]::before { background: rgba(10, 11, 13, .92); } .mast-in { height: 100%; display: flex; align-items: center; gap: var(--s-5); } .wordmark { display: inline-flex; align-items: center; flex: none; padding: 6px 0; border-radius: var(--r-xs); } .wordmark img { width: 118px; height: auto; } .nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; } .nav-link, .nav-disc { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-sm); font-family: var(--ff-text); font-size: var(--ui-size); letter-spacing: var(--ui-tr); font-weight: 500; color: var(--ink-2); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color var(--t-fast) ease, background var(--t-fast) ease; } .nav-link:hover, .nav-disc:hover, .nav-disc[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); } .nav-link[aria-current="page"] { color: var(--ink); } .nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; flex: none; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) ease; opacity: .7; } .nav-disc[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(225deg); } .nav-item { position: relative; } .nav-menu { position: absolute; top: calc(100% + 10px); left: -8px; width: 340px; padding: var(--s-2); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); display: none; } .nav-disc[aria-expanded="true"] + .nav-menu { display: grid; gap: 2px; } .nav-menu a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); text-decoration: none; } .nav-menu a:hover { background: var(--surface-2); } .nav-menu strong { display: block; color: var(--ink); font-weight: 500; font-size: var(--ui-size); } .nav-menu span.t-label { display: block; margin-top: 2px; letter-spacing: .08em; } .nav-menu .arr { color: var(--ink-4); transition: transform var(--t-fast) ease, color var(--t-fast) ease; } .nav-menu a:hover .arr { transform: translateX(3px); color: var(--ink); } .pmark { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--ff-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); background: color-mix(in srgb, var(--pm, var(--ember)) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--pm, var(--ember)) 35%, transparent); } .pmark--sports { --pm: var(--sports); } .pmark--auto { --pm: var(--auto); } .nav-cta { margin-left: var(--s-3); } .nav-toggle { display: none; margin-left: auto; height: 40px; padding: 0 14px; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: var(--label-tr); text-transform: uppercase; color: var(--ink); cursor: pointer; } .nav-toggle-icon { position: relative; width: 14px; height: 10px; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t-med) var(--ease-out), top var(--t-med) var(--ease-out); } .nav-toggle-icon::before { top: 1px; } .nav-toggle-icon::after { top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 4px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 4px; transform: rotate(-45deg); } /* Without the script the sheet cannot open, so the links simply wrap under the bar, and the Solutions menu opens on hover/focus. */ html:not(.js) .nav-item:hover .nav-menu, html:not(.js) .nav-item:focus-within .nav-menu { display: grid; gap: 2px; } @media (max-width: 900px) { html:not(.js) .mast { position: static; height: auto; } html:not(.js) .mast-in { flex-wrap: wrap; padding-block: 12px; } html:not(.js) .nav { width: 100%; flex-wrap: wrap; margin: 0; } } /* Narrow: the nav becomes a full-height sheet under the bar. */ @media (max-width: 900px) { html:not(.js) .nav-toggle { display: none !important; } } @media (max-width: 900px) { .js .nav-toggle { display: inline-flex; } } @media (max-width: 900px) { .js .nav { position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; margin: 0; padding: var(--s-5) var(--gut) calc(var(--s-6) + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-top: 1px solid var(--line); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); } .js .mast[data-open="true"] .nav { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s; } .js .nav-link, .js .nav-disc { width: 100%; height: auto; justify-content: space-between; padding: 18px 0; border-radius: 0; border-bottom: 1px solid var(--line); font-family: var(--ff-display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); } .js .nav-link:hover, .js .nav-disc:hover, .js .nav-disc[aria-expanded="true"] { background: none; } .js .nav-caret { width: 10px; height: 10px; } .js .nav-menu { position: static; width: auto; padding: var(--s-2) 0 var(--s-4); background: none; border: 0; box-shadow: none; border-bottom: 1px solid var(--line); border-radius: 0; } .js .nav-menu a { padding: var(--s-3) 0; } .js .nav-menu a:hover { background: none; } .js .nav-cta { margin: var(--s-6) 0 0; width: 100%; justify-content: center; height: 52px; } body.nav-open { overflow: hidden; } } /* ---------- Buttons ---------- */ .btn { --b-bg: var(--ink); --b-fg: var(--bg); --b-bd: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); font-family: var(--ff-text); font-size: var(--ui-size); font-weight: 500; letter-spacing: var(--ui-tr); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; } .btn:hover { --b-bg: #FFFFFF; --b-bd: #FFFFFF; } .btn:active { transform: translateY(1px); } .btn .arr { transition: transform var(--t-med) var(--ease-out); } .btn:hover .arr { transform: translateX(3px); } .btn--ghost { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-2); } .btn--ghost:hover { --b-bg: var(--surface-2); --b-bd: var(--line-3); } .btn--lg { height: 52px; padding: 0 24px; font-size: 15px; } .btn--sm { height: 36px; padding: 0 14px; } .btn[disabled] { opacity: .6; cursor: progress; } .arr { display: inline-block; font-family: var(--ff-text); } .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } @media (max-width: 480px) { .actions .btn { flex: 1 1 100%; } } .link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--ui-size); border-bottom: 1px solid var(--line-3); padding-bottom: 2px; transition: border-color var(--t-fast) ease; } .link:hover { border-color: var(--signal); } .link:hover .arr { transform: translateX(3px); } .link .arr { transition: transform var(--t-med) var(--ease-out); } /* ---------- Chips and status ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-xs); font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: var(--label-tr); text-transform: uppercase; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; } .chip--signal { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); background: color-mix(in srgb, var(--signal) 8%, transparent); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; } .dot--live { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .metaline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); } .metaline .t-label { display: inline-flex; align-items: center; gap: 8px; } .metaline .sep { width: 1px; height: 12px; background: var(--line-2); } @media (max-width: 480px) { .metaline .sep { display: none; } } /* ---------- Cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } /* ---------- Product cards (platform section) ---------- */ .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } @media (max-width: 860px) { .products { grid-template-columns: 1fr; } } .pcard { --pc: var(--ember); display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color var(--t-med) ease, transform var(--t-med) var(--ease-out); } .pcard--sports { --pc: var(--sports); } .pcard--auto { --pc: var(--auto); } .pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--pc) 12%, transparent), transparent 55%); transition: opacity var(--t-slow) var(--ease-out); } .pcard:hover { border-color: color-mix(in srgb, var(--pc) 45%, var(--line-2)); transform: translateY(-2px); } .pcard:hover::before { opacity: 1; } .pcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-7); } .pcard-code { color: var(--pc); } .pcard .t-h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); } .pcard-scope { margin-top: var(--s-2); } .pcard-desc { margin-top: var(--s-4); max-width: 34em; } .pcard-preview { margin-top: var(--s-6); } .pcard-foot { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); } .pcard-go { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line-2); transition: background var(--t-med) ease, border-color var(--t-med) ease, color var(--t-med) ease; } .pcard-go svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); } .pcard:hover .pcard-go { background: var(--pc); border-color: var(--pc); color: var(--bg); } .pcard:hover .pcard-go svg { transform: translateX(2px) rotate(-45deg); } /* ---------- Pricing ---------- */ .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } @media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .plans { grid-template-columns: 1fr; } } .plan { display: flex; flex-direction: column; padding: var(--s-5); border-radius: var(--r-lg); } .plan--featured { border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 7%, transparent), transparent 40%), var(--surface); } .plan-head { display: flex; justify-content: space-between; align-items: center; min-height: 28px; } .plan-name { color: var(--ink); } .plan-price { margin-top: var(--s-5); } .plan-setup { margin-top: var(--s-2); color: var(--signal); } .plan-line { margin-top: var(--s-4); min-height: 3em; } .plan-feats { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: var(--s-5); } .plan-feats li { position: relative; padding-left: 22px; font-size: var(--body-sm-size); line-height: 1.45; color: var(--ink-2); } .plan-feats li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 9px; height: 5px; border-left: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(-45deg); } .plan-feats li.carry { padding-left: 0; color: var(--ink-3); font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; } .plan-feats li.carry::before { display: none; } .plan .btn { margin-top: auto; width: 100%; } /* The $0 setup band: a statement, not a discount sticker. */ .setup { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); margin-top: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 9%, transparent), transparent 45%), var(--surface); } .setup-fig { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; white-space: nowrap; } .setup-fig span { color: var(--ember); } .setup .t-label { color: var(--ink-2); } @media (max-width: 860px) { .setup { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); } } /* ---------- Comparison table ---------- */ .compare { margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .compare > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--s-5); color: var(--ink); font-weight: 500; } .compare > summary::-webkit-details-marker { display: none; } .sign { position: relative; width: 12px; height: 12px; flex: none; } .sign::before, .sign::after { content: ""; position: absolute; background: currentColor; left: 0; right: 0; top: 5.25px; height: 1.5px; transition: transform var(--t-med) var(--ease-out); } .sign::after { transform: rotate(90deg); } details[open] > summary .sign::after { transform: rotate(0deg); } .table-wrap { overflow-x: auto; border-top: 1px solid var(--line); } .cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--body-sm-size); } .cmp th, .cmp td { padding: 12px var(--s-4); text-align: center; border-bottom: 1px solid var(--line); } .cmp thead th { font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: var(--label-tr); text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .cmp thead th.is-featured { color: var(--signal); } .cmp tbody th { text-align: left; font-weight: 400; color: var(--ink-2); } .cmp td { color: var(--ink-2); } .cmp td.yes { color: var(--ok); } .cmp td.no { color: var(--ink-4); } .cmp .cmp-group th { font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: var(--label-tr); text-transform: uppercase; color: var(--ink-3); padding-top: var(--s-5); background: var(--bg-raise); } .cmp th:first-child { position: sticky; left: 0; background: var(--surface); width: 36%; } .cmp .cmp-group th:first-child { background: var(--bg-raise); } .table-hint { display: none; padding: 0 var(--s-5) var(--s-3); } @media (max-width: 700px) { .table-hint { display: block; } } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .qa { border-bottom: 1px solid var(--line); } .qa > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; color: var(--ink); font-family: var(--ff-display); font-weight: 500; font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tr); } .qa > summary::-webkit-details-marker { display: none; } .qa > summary:hover { color: #fff; } .qa-body { padding: 0 0 var(--s-5); max-width: 720px; display: grid; gap: var(--s-3); } /* ---------- Lists ---------- */ .ticks { list-style: none; padding: 0; display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 24px; color: var(--ink-2); } .ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(-45deg); } .ticks--grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px var(--s-5); } /* ---------- Steps (01 → 04) ---------- */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); counter-reset: step; } @media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } .step { padding: var(--s-5); border-radius: var(--r-md); } .step .t-label { color: var(--signal); } .step .t-h3 { margin-top: var(--s-6); } .step .t-body-sm { margin-top: var(--s-2); color: var(--ink-2); } /* ---------- Feature tiles (product pages) ---------- */ .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } @media (max-width: 1080px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } } .tile { padding: var(--s-5); border-radius: var(--r-md); transition: border-color var(--t-med) ease; } .tile:hover { border-color: var(--line-2); } .tile .t-h3 { margin-top: var(--s-4); } .tile .t-body-sm { margin-top: var(--s-2); color: var(--ink-2); } .tiles-group + .tiles-group { margin-top: var(--s-7); } .tiles-group > .t-label { display: block; margin-bottom: var(--s-4); } /* ---------- Loop (product lifecycle) ---------- */ .loop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .loop-step { padding: var(--s-5); border-right: 1px solid var(--line); position: relative; } .loop-step:last-child { border-right: 0; } .loop-step .t-label b { color: var(--signal); font-weight: 500; } .loop-step .t-h3 { margin-top: var(--s-5); } .loop-step .t-body-sm { margin-top: var(--s-2); color: var(--ink-2); } @media (max-width: 1080px) { .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } .loop-step:nth-child(3n) { border-right: 0; } .loop-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); } } @media (max-width: 600px) { .loop { grid-template-columns: 1fr; } .loop-step { border-right: 0; border-bottom: 1px solid var(--line); } .loop-step:last-child { border-bottom: 0; } } /* ---------- Ladder (plan progression on product pages) ---------- */ .ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } @media (max-width: 960px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ladder { grid-template-columns: 1fr; } } .rung { padding: var(--s-5); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-2); } .rung-top { display: flex; justify-content: space-between; align-items: baseline; } .rung-top { gap: var(--s-2); flex-wrap: wrap; } .rung .t-h3 { margin-top: var(--s-3); font-size: 19px; } .rung .t-body-sm { color: var(--ink-2); } .rung--featured { border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); } /* ---------- Panels ---------- */ .panel { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); } .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } @media (max-width: 760px) { .split { grid-template-columns: 1fr; } } .panel .t-h3 + * { margin-top: var(--s-4); } .panel p + p { margin-top: var(--s-3); } .notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raise); font-size: var(--body-sm-size); color: var(--ink-3); } .notice strong { color: var(--ink-2); font-weight: 500; } .notice a { color: var(--ink); } /* ---------- Final CTA ---------- */ .cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 8vw, 112px) clamp(24px, 6vw, 88px); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: var(--surface); text-align: center; } .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 50% 120%, color-mix(in srgb, var(--signal) 22%, transparent), transparent 70%), linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 56px 56px; mask-image: radial-gradient(90% 90% at 50% 70%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(90% 90% at 50% 70%, #000 30%, transparent 100%); } .cta .kicker { justify-content: center; } .cta .t-display { margin-top: var(--s-5); font-size: clamp(2.75rem, 1.8rem + 4vw, 5.25rem); } .cta .t-body-lg { margin: var(--s-5) auto 0; max-width: 520px; } .cta .actions { justify-content: center; margin-top: var(--s-6); } .cta .metaline { justify-content: center; margin-top: var(--s-6); } /* ---------- Page hero (inner pages) ---------- */ .phero { position: relative; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(48px, 6vw, 88px); } .phero .t-h1 { margin-top: var(--s-5); max-width: 15ch; } .phero .t-body-lg { margin-top: var(--s-5); max-width: 600px; } .phero .actions { margin-top: var(--s-6); } .phero .metaline { margin-top: var(--s-6); } .phero--product { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .phero--product .t-h1 { max-width: 12ch; } @media (max-width: 1000px) { .phero--product { grid-template-columns: 1fr; } } /* ---------- Contact form ---------- */ .contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 960px) { .contact { grid-template-columns: 1fr; } } .contact-side { position: sticky; top: calc(var(--nav-h) + 32px); } @media (max-width: 960px) { .contact-side { position: static; } } .next { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: 0; border-top: 1px solid var(--line); } .next li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); } .next .t-label { color: var(--signal); padding-top: 3px; } .next strong { display: block; color: var(--ink); font-weight: 500; } .next span.t-body-sm { display: block; margin-top: 2px; } .form { padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); } .f-wide { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .f-label { display: block; margin-bottom: var(--s-2); color: var(--ink); font-size: var(--ui-size); font-weight: 500; } .f-label .opt { color: var(--ink-3); font-weight: 400; } .f-input, .f-select, .f-area { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 16px; /* 16px stops iOS zooming the page on focus */ transition: border-color var(--t-fast) ease, background var(--t-fast) ease; } .f-input::placeholder, .f-area::placeholder { color: var(--ink-4); } .f-input:hover, .f-select:hover, .f-area:hover { border-color: var(--line-3); } .f-input:focus-visible, .f-select:focus-visible, .f-area:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); } .f-input[aria-invalid="true"], .f-select[aria-invalid="true"] { border-color: var(--off); } .f-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; } .f-select option { background: var(--surface-2); color: var(--ink); } .f-area { min-height: 132px; resize: vertical; line-height: 1.5; } .f-error { display: block; min-height: 1.2em; margin-top: 6px; font-size: 13px; color: var(--off); } .f-error:empty { min-height: 0; margin: 0; } .f-set { border: 0; padding: 0; margin: 0; min-width: 0; } .f-set legend { padding: 0; } .f-hint { display: block; margin: -4px 0 var(--s-3); } .needs { display: flex; flex-wrap: wrap; gap: var(--s-2); } .need { position: relative; } .need input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .need span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); font-size: var(--ui-size); font-weight: 500; color: var(--ink-2); transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease; pointer-events: none; } .need span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line-3); transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .need:hover span { border-color: var(--line-3); color: var(--ink); } .need input:checked + span { border-color: var(--signal); color: var(--ink); background: color-mix(in srgb, var(--signal) 10%, var(--surface-2)); } .need input:checked + span::before { background: var(--signal); border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--surface-2); } .need input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); } .form-foot .t-body-sm { flex: 1 1 240px; } @media (max-width: 480px) { .form-foot .btn { width: 100%; } } .sent { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); border-color: color-mix(in srgb, var(--ok) 40%, var(--line-2)); } .sent .t-h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); } .sent p { margin-top: var(--s-4); } .sent.sent--failed { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); } .sent-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); padding-bottom: var(--s-6); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); } @media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } } .foot-brand img { width: 128px; height: auto; } .foot-brand .t-body-sm { margin-top: var(--s-4); max-width: 30ch; } .foot-col h2 { margin-bottom: var(--s-4); } .foot-links { display: grid; gap: 2px; } .foot-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; width: fit-content; color: var(--ink-2); text-decoration: none; font-size: var(--body-sm-size); transition: color var(--t-fast) ease; } .foot-links a:hover { color: var(--ink); } .foot-links .soon { color: var(--ink-4); font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .foot-ig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; } .foot-base { margin-top: clamp(48px, 6vw, 80px); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); } /* ============================================================ 7. PRODUCT UI — the demo interfaces Built from real text so they stay sharp at every size and read to a screen reader as one labelled image (role="img"). Sizes here are the product's own UI scale, deliberately smaller than the marketing scale. ============================================================ */ .ui { --ui-bg: #0E1014; font-family: var(--ff-text); font-size: 12px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; } .ui-win { position: relative; background: var(--ui-bg); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-float); overflow: hidden; } .ui-bar { display: flex; align-items: center; gap: var(--s-3); height: 38px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line); background: #0B0D10; } .ui-lights { display: flex; gap: 6px; } .ui-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); } .ui-crumb { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-crumb b { color: var(--ink); font-weight: 500; } .ui-bar .ui-pill { margin-left: auto; } .ui-pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: 4px; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--tone, var(--ink-3)); background: color-mix(in srgb, var(--tone, var(--ink-3)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone, var(--ink-3)) 28%, transparent); white-space: nowrap; } .ui-pill--live { --tone: var(--ok); } .ui-pill--pending { --tone: var(--warn); } .ui-pill--info { --tone: var(--info); } .ui-pill--off { --tone: var(--off); } .ui-pill--signal { --tone: var(--signal); } .ui-k { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .ui-v { font-family: var(--ff-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; } .ui-v small { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; margin-left: 4px; font-weight: 400; } .ui-delta { font-family: var(--ff-mono); font-size: 10px; color: var(--ok); } .ui-panel { background: #12151A; border: 1px solid var(--line); border-radius: var(--r-sm); } /* Admin layout: sidebar + main */ .ui-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 0; } .ui-side { border-right: 1px solid var(--line); padding: var(--s-3) var(--s-2); display: grid; align-content: start; gap: 2px; } .ui-side-h { padding: 6px 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; font-size: 12px; } .ui-nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; color: var(--ink-3); font-size: 12px; } .ui-nav i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; flex: none; } .ui-nav.is-on { background: var(--surface-3); color: var(--ink); } .ui-nav.is-on i { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 30%, transparent); opacity: 1; } .ui-nav em { margin-left: auto; font-style: normal; font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3); } .ui-main { padding: var(--s-4); display: grid; gap: var(--s-3); min-width: 0; } .ui-main-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } .ui-title { font-family: var(--ff-display); font-weight: 500; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; } .ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); } .ui-kpi { padding: 10px 12px; display: grid; gap: 4px; } .ui-cols { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s-2); } /* Day board: rows = courts, columns = hours. Blocks are absolutely placed on a percentage track so they reflow with the width. */ .ui-board { padding: 10px 12px 12px; } .ui-board-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ui-legend { display: flex; gap: 10px; } .ui-legend span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: .06em; } .ui-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); } .ui-hours, .ui-lane { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; } .ui-hours-track { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-4); padding: 0 0 4px; } .ui-lane { height: 30px; border-top: 1px solid var(--line); } .ui-lane-n { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; } .ui-track { position: relative; height: 100%; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 6) 100%; } .ui-blk { position: absolute; top: 4px; bottom: 4px; left: var(--x); width: var(--w); border-radius: 4px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; font-size: 10px; font-weight: 500; color: var(--ink); white-space: nowrap; background: color-mix(in srgb, var(--c) 20%, #12151A); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left-width: 2px; } .c-member { --c: var(--sports); } .c-dropin { --c: #A78BFA; } .c-lesson { --c: var(--ok); } .c-program { --c: var(--warn); } .c-ember { --c: var(--ember); } .ui-now { position: absolute; top: -2px; bottom: -2px; left: var(--x); width: 1px; background: var(--ember); box-shadow: 0 0 8px var(--ember); z-index: 2; } .ui-now::before { content: ""; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); } .ui-list { display: grid; } .ui-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); } .ui-row:first-of-type { border-top: 0; } .ui-time { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); } .ui-who { min-width: 0; } .ui-who b { display: block; color: var(--ink); font-weight: 500; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-who span { display: block; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Phone */ .ui-phone { width: 236px; padding: 10px; border-radius: 34px; background: #07080A; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset; } .ui-screen { border-radius: 26px; background: var(--ui-bg); overflow: hidden; padding: 30px 14px 14px; position: relative; } .ui-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 10px; background: #000; } .ui-dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 10px 0 12px; } .ui-date { display: grid; justify-items: center; gap: 1px; padding: 6px 0; border-radius: 8px; border: 1px solid var(--line); } .ui-date .ui-k { font-size: 8.5px; letter-spacing: .08em; } .ui-date b { font-family: var(--ff-display); font-weight: 500; font-size: 15px; color: var(--ink); } .ui-date.is-on { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 14%, transparent); } .ui-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .ui-slot { display: grid; place-items: center; height: 30px; border-radius: 7px; border: 1px solid var(--line-2); font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); } .ui-slot.is-off { color: var(--ink-4); border-style: dashed; border-color: var(--line); text-decoration: line-through; } .ui-slot.is-on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 500; } .ui-sum { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 5px; } .ui-sum div { display: flex; justify-content: space-between; font-size: 11px; } .ui-sum div b { color: var(--ink); font-weight: 500; } .ui-cta { margin-top: 10px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 12px; } /* Toast */ .ui-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 10px; background: #14171C; border: 1px solid var(--line-2); box-shadow: 0 20px 50px -10px rgba(0,0,0,.9); } .ui-toast-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); flex: none; } .ui-toast-ic svg { width: 14px; height: 14px; } .ui-toast b { display: block; color: var(--ink); font-size: 12px; font-weight: 500; } .ui-toast span { display: block; color: var(--ink-3); font-size: 10.5px; font-family: var(--ff-mono); } /* ---------- Hero composition ---------- */ .hero { position: relative; padding-top: clamp(48px, 7vw, 104px); overflow: clip; } .hero-copy { position: relative; z-index: 2; } .hero .t-display { margin-top: var(--s-5); max-width: 13ch; } .hero-lede { margin-top: var(--s-5); max-width: 560px; } .hero .actions { margin-top: var(--s-6); } .hero .metaline { margin-top: var(--s-5); } .hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); } @media (max-width: 1000px) { .hero-row { grid-template-columns: 1fr; } } .hero-stage { position: relative; margin-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 96px); } @media (min-width: 861px) { .hero-ui .ui-win { margin-bottom: 56px; } } .hero-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 70%; z-index: 0; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 70%); filter: blur(40px); pointer-events: none; } .hero-stage .ui-win { position: relative; z-index: 1; } .hero-phone { position: absolute; z-index: 3; right: clamp(-8px, 1vw, 24px); bottom: -8px; } @media (min-width: 861px) { .hero-ui .ui-board { margin-right: 236px; } .hero-ui .ui-main { padding-bottom: 28px; } } .hero-toast { position: absolute; z-index: 3; top: clamp(-18px, -1vw, -8px); right: clamp(24px, 12vw, 200px); } @media (max-width: 860px) { .ui-app { grid-template-columns: 1fr; } .ui-side { display: none; } .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-phone { display: none; } .hero-toast { right: 12px; top: -16px; } .ui-legend { display: none; } } @media (max-width: 520px) { .ui-main { padding: var(--s-3); } .ui-hours, .ui-lane { grid-template-columns: 54px minmax(0, 1fr); } .ui-hours-track span:nth-child(even) { visibility: hidden; } .ui-lane-n .lg { display: none; } .ui-blk { font-size: 9px; padding: 0 4px; } .ui-v { font-size: 19px; } .hero-toast { left: 12px; right: auto; } } /* ---------- Hero demo: one shell, two configurations ---------- Tones t1–t4 are the four booking types; each configuration maps them to its own palette, and the signal moves with the product. Everything that changes on a switch either slides (blocks), crossfades (text) or eases its colour — the shell itself never moves. */ .hero-ui { --signal: var(--sports); --t1: var(--sports); --t2: #A78BFA; --t3: var(--ok); --t4: var(--warn); } .hero-ui[data-v="auto"] { --signal: var(--auto); --t1: var(--ember); --t2: #A78BFA; --t3: var(--ok); --t4: var(--warn); } .ui-blk.t1, .ui-legend .t1 { --c: var(--t1); } .ui-blk.t2, .ui-legend .t2 { --c: var(--t2); } .ui-blk.t3, .ui-legend .t3 { --c: var(--t3); } .ui-blk.t4, .ui-legend .t4 { --c: var(--t4); } .ui-legend i { background: var(--c); } .hero-ui .ui-blk { transition: left 700ms var(--ease-out), width 700ms var(--ease-out), background-color 500ms ease, border-color 500ms ease, opacity 400ms ease; } .hero-ui .ui-blk.is-empty { opacity: 0; border-width: 0; padding: 0; } .hero-ui .ui-blk.is-new { background: color-mix(in srgb, var(--signal) 32%, #12151A); border-color: var(--signal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent), 0 0 18px -4px color-mix(in srgb, var(--signal) 80%, transparent); } .hero-ui .ui-pill--signal, .hero-ui .ui-nav.is-on i, .hero-ui .ui-date.is-on, .hero-ui .ui-slot.is-on, .hero-mark { transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease; } .hero-mark { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; --pm: var(--signal); } .hero-ui [data-b], .hero-ui [data-t] { transition: opacity 220ms ease, filter 220ms ease; } .hero-ui.is-swap [data-b], .hero-ui.is-swap [data-t] { opacity: 0; filter: blur(2px); } .hero-ui.is-swap .hero-toast { opacity: 0; transform: translateY(-6px); } .hero-toast { transition: opacity 300ms ease, transform 400ms var(--ease-out); } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } .ui-service { margin-top: 8px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-family: var(--ff-mono); font-size: 10px; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line-2); } .ui-sum div { gap: 8px; } .hero-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); position: relative; z-index: 4; } .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); } .seg button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-family: var(--ff-text); font-size: var(--ui-size); font-weight: 500; color: var(--ink-3); transition: background var(--t-fast) ease, color var(--t-fast) ease; } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); } .seg-dot { width: 7px; height: 7px; border-radius: 2px; opacity: .5; } .seg-dot--sports { background: var(--sports); } .seg-dot--auto { background: var(--auto); } .seg button[aria-pressed="true"] .seg-dot { opacity: 1; } /* The progress hairline shows time until the next automatic switch. */ .seg-bar { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 1.5px; border-radius: 1px; background: transparent; } .seg-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--ink-3); border-radius: 1px; } .hero-demo.is-auto .seg button[aria-pressed="true"] .seg-bar i { animation: seg-fill var(--hero-interval, 6s) linear forwards; } .hero-demo.is-held .seg button[aria-pressed="true"] .seg-bar i { animation-play-state: paused; } @keyframes seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .seg-pause { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); } .seg-pause:hover { color: var(--ink); border-color: var(--line-3); } .seg-pause-ic { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .seg-pause[data-state="play"] .seg-pause-ic { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .hero-caption { margin-left: auto; } @media (max-width: 600px) { .hero-caption { display: none; } .seg { flex: 1; } .seg button { flex: 1; justify-content: center; padding: 0 8px; } } @media (max-width: 860px) { .hero-demo .hero-stage { padding-bottom: var(--s-4); } } @media (max-width: 520px) { .hero-stats .ui-kpi:nth-child(3) { display: none; } .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-lane-n { font-size: 9px; letter-spacing: 0; white-space: nowrap; } } .hero-demo { margin-top: clamp(40px, 5vw, 72px); } .hero-demo .hero-stage { margin-top: clamp(28px, 3vw, 40px); } /* ---------- Prices: launch price big, regular price small and struck ---------- */ .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .price-now { line-height: 1; } .price-per { color: var(--ink-3); } .price-was { flex-basis: 100%; font-family: var(--ff-mono); font-size: 12px; color: var(--ink-4); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-4) 80%, transparent); letter-spacing: .02em; order: 3; } .price--plan .price-now { font-size: clamp(2.75rem, 2.2rem + 1.4vw, 3.5rem); } .price--rung { flex-wrap: nowrap; } .price--rung .price-now { font-size: 26px; } .price--rung .price-was { flex-basis: auto; font-size: 11px; order: 0; } .launch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); padding: 12px 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 8%, transparent), transparent 60%); } .launch .t-body-sm { color: var(--ink-2); } .launch strong { color: var(--ink); font-weight: 500; } .chip--launch { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, transparent); background: color-mix(in srgb, var(--ember) 10%, transparent); } .launch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); } /* ============================================================ 8. PAGE COMPOSITIONS ============================================================ */ /* ---------- Problem: six systems → one ---------- */ .problem { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } @media (max-width: 960px) { .problem { grid-template-columns: 1fr; } } .pains { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; border-top: 1px solid var(--line); } .pains li { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); letter-spacing: -0.012em; color: var(--ink-3); transition: color var(--t-slow) var(--ease-out); } .pains li .t-label { color: var(--ink-4); transition: color var(--t-slow) ease; } .pains li.is-fix { color: var(--ink); } .pains li.is-fix .t-label { color: var(--signal); } .merge-wrap { max-width: 560px; margin-inline: auto; width: 100%; } .merge-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); margin-bottom: var(--s-4); } .merge-toggle button { height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-family: var(--ff-mono); font-size: var(--label-size); letter-spacing: var(--label-tr); text-transform: uppercase; color: var(--ink-3); } .merge-toggle button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); } .merge { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin-inline: auto; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-raise); overflow: hidden; } .merge::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 10% 10%; } .merge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .merge-wire { fill: none; stroke: var(--line-3); stroke-width: .35; stroke-dasharray: 1.2 1.6; transition: stroke var(--t-slow) ease, stroke-width var(--t-slow) ease; } .merge-wire--x { stroke: color-mix(in srgb, var(--off) 55%, transparent); } .merge-link { fill: none; stroke: var(--signal); stroke-width: .45; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 900ms var(--ease-out); } .merge-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; width: 24%; transition: left 900ms var(--ease-out), top 900ms var(--ease-out), opacity var(--t-slow) ease; } .merge-node b { display: grid; place-items: center; width: 100%; height: 38px; padding: 0 6px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); font-family: var(--ff-mono); font-size: clamp(9px, .55rem + .25vw, 11px); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: border-color var(--t-slow) ease, color var(--t-slow) ease, transform var(--t-slow) var(--ease-out); } .merge-node span { font-family: var(--ff-mono); font-size: 9.5px; color: var(--off); letter-spacing: .06em; transition: opacity var(--t-med) ease; white-space: nowrap; } .merge-node:nth-child(odd) b { transform: rotate(-3deg); } .merge-node:nth-child(even) b { transform: rotate(2.5deg); } .merge-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.86); display: grid; place-items: center; align-content: center; gap: 6px; border-radius: var(--r-lg); border: 1px dashed var(--line-3); background: var(--bg); opacity: .55; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) ease, border-color var(--t-slow) ease, box-shadow var(--t-slow) ease; } .merge-core img { width: 70%; opacity: .6; transition: opacity var(--t-slow) ease; } .merge-core .t-label { font-size: 9.5px; } .merge[data-state="forged"] .merge-link { stroke-dashoffset: 0; } .merge[data-state="forged"] .merge-wire { stroke: transparent; } .merge[data-state="forged"] .merge-node b { transform: none; border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); color: var(--ink); } .merge[data-state="forged"] .merge-node span { opacity: 0; } .merge[data-state="forged"] .merge-core { transform: translate(-50%, -50%) scale(1); opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--signal) 60%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 6%, transparent), 0 0 60px -10px color-mix(in srgb, var(--signal) 60%, transparent); } .merge[data-state="forged"] .merge-core img { opacity: 1; } .merge[data-state="forged"] .merge-core .t-label { color: var(--ok); } /* ---------- Capabilities bento ---------- */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); } .cap { padding: var(--s-5); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .cap-head { display: grid; gap: var(--s-2); } .cap-head .t-label b { color: var(--signal); font-weight: 500; } .cap-head .t-body-sm { color: var(--ink-2); max-width: 36ch; } .cap-demo { margin-top: var(--s-5); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .cap--book { grid-column: span 4; } .cap--pay { grid-column: span 2; } .cap--cust { grid-column: span 2; } .cap--web { grid-column: span 2; } .cap--ops { grid-column: span 2; } .cap--rep { grid-column: span 6; } @media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cap--book, .cap--rep { grid-column: span 2; } .cap--pay, .cap--cust, .cap--web, .cap--ops { grid-column: span 1; } } @media (max-width: 680px) { .bento { grid-template-columns: 1fr; } .cap--book, .cap--rep, .cap--pay, .cap--cust, .cap--web, .cap--ops { grid-column: auto; } } /* ---------- Schedule grid (assets/schedule-grid.js): time DOWN, resources ACROSS. Open slots are the only filled shapes; booked ones recede to a hatch. Whole Facility sits behind a divider. Below 520px of CONTAINER width each time becomes a group of thumb-sized tiles (the homepage card is a swipe card). */ .sched { display: grid; } .sg { --sg-bg: var(--surface); --sg-time: 84px; --sg-col: 68px; --sg-fac: 124px; --sg-open: var(--ok); container-type: inline-size; display: grid; gap: var(--s-4); min-width: 0 } .sg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); } .sg-title { display: grid; gap: 5px; min-width: 0; } .sg-label { display: flex; align-items: center; gap: 8px; color: var(--ink); } .sg-date { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .sg-date [data-sg-date] { color: var(--ink); } .sg-count { --tone: var(--sg-open); flex: none; } .sg-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .sg-grid { display: grid; min-width: min-content; } .sg-head, .sg-row { display: grid; align-items: center; column-gap: 6px; grid-template-columns: var(--sg-time) repeat(var(--sg-n), minmax(var(--sg-col), 1fr)) } .has-group .sg-head, .has-group .sg-row { grid-template-columns: var(--sg-time) repeat(var(--sg-n), minmax(var(--sg-col), 1fr)) minmax(var(--sg-fac), 1.3fr) } .sg-cells { display: contents; } .sg-corner, .sg-col { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; transition: color var(--t-fast) ease } .sg-corner { position: sticky; left: 0; z-index: 2; background: var(--sg-bg); color: var(--ink-4); } .sg-col { text-align: center; } .sg-col.is-hot { color: var(--ink); } .sg-col--group { display: grid; gap: 2px; text-align: left; color: var(--ink-2); align-self: stretch; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line-2) } .sg-col--group small { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--ink-4); } .sg-row { padding-block: 3px; border-top: 1px solid var(--line); border-radius: 0; transition: background var(--t-fast) ease; } .sg-row.is-hot { background: color-mix(in srgb, var(--ink) 2.5%, transparent); } .sg-time { position: sticky; left: 0; z-index: 1; align-self: stretch; display: grid; align-content: center; gap: 1px; padding-right: 8px; background: var(--sg-bg) } .sg-row.is-hot .sg-time { background: color-mix(in srgb, var(--ink) 2.5%, var(--sg-bg)); } .sg-time-l { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .sg-time-s { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-open); } .sg-row.is-full .sg-time-l { color: var(--ink-3); } .sg-row.is-full .sg-time-s { color: var(--ink-4); } .sg-fac { align-self: stretch; display: flex; align-items: center; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line-2); } .sg-slot { position: relative; height: 42px; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 1px solid transparent; background: none; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease } .sg-res { display: none; } .sg-hot { display: none; } .sg-slot.is-taken { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.03) 6px 12px) } .sg-slot.is-open { cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--sg-open) 9%, var(--surface-2)); border-color: color-mix(in srgb, var(--sg-open) 30%, transparent) } .sg-idle::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--sg-open) } .sg-slot.is-open:hover, .sg-slot.is-open:focus-visible { background: color-mix(in srgb, var(--sg-open) 17%, var(--surface-2)); border-color: var(--sg-open) } .sg-slot.is-open:hover .sg-idle, .sg-slot.is-open:focus-visible .sg-idle { display: none; } .sg-slot.is-open:hover .sg-hot, .sg-slot.is-open:focus-visible .sg-hot { display: inline; } .sg-slot.is-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .sg-slot.is-open:active { transform: scale(.97); } .sg-slot.is-sel, .sg-slot.is-sel:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 500 } .sg-slot.is-incl, .sg-slot.is-incl:hover { background: color-mix(in srgb, var(--signal) 14%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--signal) 70%, transparent); color: var(--ink) } /* Beats the :hover/:focus-visible "Book" swap, which would otherwise show through. */ .sg-slot.is-open.is-sel .sg-idle, .sg-slot.is-open.is-sel .sg-hot, .sg-slot.is-open.is-incl .sg-idle, .sg-slot.is-open.is-incl .sg-hot { display: none; } .sg-slot.is-sel .sg-state::after { content: "Selected"; } .sg-slot.is-incl .sg-state::after { content: "Included"; } .sg-slot.is-mine { background: color-mix(in srgb, var(--signal) 20%, var(--surface-2)); border-color: color-mix(in srgb, var(--signal) 60%, transparent); color: var(--ink) } .sg-row.is-picking, .sg-row.is-facility { background: color-mix(in srgb, var(--signal) 5%, transparent); } .sg-row.is-picking .sg-time, .sg-row.is-facility .sg-time { background: color-mix(in srgb, var(--signal) 5%, var(--sg-bg)); } .sg-slot--group { justify-content: flex-start; padding: 0 12px; letter-spacing: .04em; white-space: nowrap; } .sg-slot--group.is-open:not(.is-sel):not(.is-incl) { background: transparent; } .sg-row.is-mine-row .sg-time-s { color: var(--signal); } .sg-slot--group.is-taken:not(.is-mine) { background: none; text-transform: none; letter-spacing: .02em; font-size: 11px; } .sg-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 58px; padding: 10px 12px 10px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line) } .sg-msg { flex: 1 1 260px; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .sg-msg strong { color: var(--ink); font-weight: 500; } .sg-demo { color: var(--ink-3); } .sg-actions { display: flex; gap: 8px; flex-wrap: wrap; } .sg-actions:empty { display: none; } @container (max-width: 520px) { .sg-head { display: none; } .sg-grid { min-width: 0; gap: 14px; } .sg-row, .has-group .sg-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0; border-top: 0; } .sg-row.is-hot { background: none; } .sg-row.is-picking, .sg-row.is-facility { background: none; } .sg-time, .sg-row.is-hot .sg-time, .sg-row.is-picking .sg-time, .sg-row.is-facility .sg-time { position: static; background: none; padding: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sg-row.is-full .sg-time-s::after { content: "y booked"; } /* "Full" becomes "Fully booked" where there is room */ .sg-row.is-full .sg-cells { display: none; } .sg-cells { display: grid; grid-template-columns: repeat(min(var(--sg-n), 4), minmax(0, 1fr)); gap: 6px; } .sg-slot { height: 54px; flex-direction: column; gap: 3px; padding: 0 2px; font-size: 9.5px; letter-spacing: .06em; } .sg-res { display: block; font-family: var(--ff-text); font-size: 12px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sg-slot.is-taken .sg-res { color: var(--ink-4); } .sg-slot.is-mine .sg-res { color: var(--ink); } .sg-actions .btn { height: 44px; } .sg-slot--group.is-taken.is-mine { height: 48px; flex-direction: row; justify-content: space-between; padding: 0 14px; } .sg-idle::before { display: none; } .sg-fac { margin: 0; padding: 0; border: 0; } .sg-fac:has(.is-taken:not(.is-mine)) { display: none; } /* offer the facility only where it is free */ .sg-slot--group { height: 48px; flex-direction: row; justify-content: space-between; padding: 0 14px; border-style: solid; } .sg-slot--group .sg-res { font-size: 13px; } .sg-top { flex-wrap: wrap; } .sg-date { white-space: normal; } .sg-meta { display: block; } .sg-sep { display: none; } } @container (max-width: 250px) { /* The homepage swipe card on a 320px phone: tiles are ~50px wide. */ .sg-res[data-short] { font-size: 0; } .sg-res[data-short]::before { content: attr(data-short); font-size: 12px; } } @media (max-width: 680px) { .bento.snap { align-items: start; } } /* the schedule card is tallest; siblings keep their own height */ /* Payment */ .pay { padding: 14px; display: grid; gap: 10px; } .pay-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; } .pay-line b { color: var(--ink); font-weight: 500; } .pay-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); } .pay-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2); } .pay-card i { width: 26px; height: 17px; border-radius: 3px; background: linear-gradient(135deg, #3a4150, #1f242c); border: 1px solid var(--line-3); } .pay-card span { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); } .pay-btn { height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 12px; } .pay-ok { display: flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 10.5px; color: var(--ok); letter-spacing: .06em; } /* Customer */ .cust { padding: 14px; display: grid; gap: 12px; } .cust-top { display: flex; align-items: center; gap: 10px; } .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--ff-display); font-weight: 500; font-size: 13px; color: var(--ink); background: color-mix(in srgb, var(--signal) 22%, var(--surface-3)); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); } .cust-top .avatar { display: grid; color: var(--ink); font-family: var(--ff-display); font-size: 13px; } .cust-top b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; } .cust-top span { display: block; font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); } .meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; } .meter i { display: block; height: 100%; width: var(--p); background: var(--signal); border-radius: 3px; } .kv { display: flex; justify-content: space-between; font-size: 11.5px; } .kv b { color: var(--ink); font-weight: 500; } .family { display: flex; gap: 6px; flex-wrap: wrap; } /* Website */ .site-mock { position: relative; padding-right: 64px; } .site-mock .ui-win { border-radius: var(--r-sm); } .site-mock .ui-bar { height: 24px; } .site-mock .ui-lights i { width: 6px; height: 6px; } .site-body { padding: 14px; display: grid; gap: 8px; min-height: 150px; background: linear-gradient(160deg, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%); } .site-body .hl { font-family: var(--ff-display); font-weight: 600; font-size: 19px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .bar { height: 6px; border-radius: 3px; background: var(--surface-3); } .site-btn { width: fit-content; height: 22px; padding: 0 10px; border-radius: 5px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 9.5px; font-weight: 500; } .site-phone { position: absolute; right: 0; bottom: -10px; width: 82px; padding: 4px; border-radius: 16px; background: #07080A; border: 1px solid var(--line-2); box-shadow: 0 20px 40px -10px rgba(0,0,0,.9); } .site-phone div { border-radius: 12px; background: var(--ui-bg); padding: 12px 7px 8px; display: grid; gap: 5px; min-height: 140px; } .site-phone .hl { font-family: var(--ff-display); font-weight: 600; font-size: 11px; line-height: 1; color: var(--ink); } .lh-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } /* Operations: check-in list */ .ops .ui-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 8px 12px; } /* Reporting */ .rep { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-5); align-items: start; } .rep-stats { display: grid; gap: var(--s-3); } .rep-big { font-size: clamp(2.5rem, 2rem + 1.8vw, 3.75rem); line-height: 1; } .chart { padding: 14px 14px 10px; } .bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; } .bars i { display: block; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 85%, #fff 0%), color-mix(in srgb, var(--signal) 35%, transparent)); transform-origin: bottom; transform: scaleY(1); transition: transform 900ms var(--ease-out); } .bars i:nth-child(n+1) { transition-delay: calc(var(--i, 0) * 40ms); } .bars i.is-dim { background: var(--surface-3); } .axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px; font-family: var(--ff-mono); font-size: 9px; color: var(--ink-4); text-align: center; letter-spacing: .04em; } @media (max-width: 760px) { .rep { grid-template-columns: 1fr; } .bars { height: 110px; gap: 4px; } .axis { gap: 4px; } .axis span:nth-child(even) { visibility: hidden; } } /* ---------- Snap rows: long card sets become a swipeable row on phones, which keeps the homepage short without hiding anything. ---------- */ .snap-hint { display: none; } @media (max-width: 680px) { .snap { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 12px; scroll-padding-inline: var(--gut); scrollbar-width: none; } .snap::-webkit-scrollbar { display: none; } .snap > * { scroll-snap-align: start; grid-column: auto !important; } .snap:focus-visible { outline-offset: -2px; } .snap-hint { display: block; text-align: right; margin: 0 0 var(--s-3); } } /* ---------- Product-card previews ---------- */ .mini { padding: 12px; } .mini-rows { display: grid; gap: 6px; } .mini-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; } .mini-row .ui-k { font-size: 9px; } .mini-track { position: relative; height: 22px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .mini-track .ui-blk { top: 2px; bottom: 2px; font-size: 9.5px; } /* ---------- Product-page aside demo ---------- */ .demo-card { padding: clamp(16px, 2.4vw, 24px); border-radius: var(--r-lg); } .demo-note { margin-top: var(--s-3); } /* ---------- Company: product family ---------- */ .family-tree { display: grid; gap: var(--s-3); } .ft-root { padding: var(--s-5); border-radius: var(--r-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .ft-root img { width: 150px; } .ft-kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); position: relative; } @media (max-width: 700px) { .ft-kids { grid-template-columns: 1fr; } } .ft-node { padding: var(--s-5); border-radius: var(--r-lg); text-decoration: none; display: grid; align-content: start; gap: var(--s-2); transition: border-color var(--t-med) ease; } .ft-node:hover { border-color: var(--line-3); } .ft-node .t-h3 { display: flex; align-items: center; gap: 10px; } .ft-sub { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px dashed var(--line-2); display: grid; gap: 2px; } .ft-sub b { color: var(--ink); font-weight: 500; } .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } @media (max-width: 900px) { .principles { grid-template-columns: 1fr; } } /* ============================================================ 9. MOTION Content is visible by default. Only when the script has run (html.js) does anything start hidden, and only when motion is welcome does it move. ============================================================ */ @media (prefers-reduced-motion: no-preference) { .js .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--d, 0ms); } .js .rv.is-in { opacity: 1; transform: none; } .js .bars:not(.is-in) i { transform: scaleY(.04); } .hero-toast { animation: float 7s ease-in-out infinite; } .hero-phone { animation: float 9s ease-in-out -2s infinite; } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }