/* * Responsive + app-shell layer. * * Kept separate from tokens.css on purpose: tokens.css is ALSO inlined into * by ApplicationHelper#inline_design_tokens, so anything added there ships twice on * every request. This file is linked once via stylesheet_link_tag "app". * * BREAKPOINT: 780px. Set by docs/Grahik_Product_Documentation.md L74-76 and by the * prototype's `window.innerWidth <= 780`. CSS can't use custom properties in media * queries, so 780px is repeated literally below -- change all occurrences together. * * >780px desktop: left sidebar, multi-column grids, centered modals * <=780px mobile: bottom tab bar + FAB, single column, bottom-sheet modals */ :root { --topbar-h: 65px; --bottom-nav-h: 66px; --fab-size: 56px; /* Resolves to 0 unless the viewport meta carries viewport-fit=cover. */ --safe-b: env(safe-area-inset-bottom, 0px); } /* ---------- global hygiene ---------- */ html { -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: none; } img, svg, video { max-width: 100%; } /* Suppress the grey flash on tap without removing focus affordance. */ a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } /* Available to screen readers, invisible on screen. Used for section headings that are structurally required but visually redundant. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- app shell ---------- */ .app-shell { display: flex; max-width: 1320px; margin: 0 auto; align-items: flex-start; } .app-content { flex: 1; min-width: 0; padding: 24px 32px 64px; } .app-sidebar { width: 216px; flex: none; padding: 24px 14px; position: sticky; top: var(--topbar-h); align-self: flex-start; } .app-topbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; } /* ---------- layout primitives ---------- */ .gk-grid-home, .gk-grid-money { display: grid; gap: 16px; } .gk-grid-home { grid-template-columns: 2fr 1fr; } .gk-grid-money { grid-template-columns: 1.2fr 1fr; } /* ---------- public customer journey (B1 discover -> B2 services -> B3 details) ---------- */ /* Step panels are toggled by join_flow_controller; !important so a flex/grid display on the panel itself can't defeat the hidden attribute. */ [hidden] { display: none !important; } .pq-shell { max-width: 480px; margin: 0 auto; min-height: 100dvh; background: var(--bg); } /* Selectable service card. The checked state is pure CSS (:has) -- the controller only computes the running total and the enabled state of Continue. */ .svc-pick { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 14px 16px; margin-bottom: 10px; border: 1.5px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); cursor: pointer; } .svc-pick input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .svc-pick:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; } .svc-pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } /* Total + Continue, pinned to the bottom of the services step. */ .pq-footer { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 14px 16px calc(20px + var(--safe-b)); margin-top: 16px; } .pq-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; flex: none; background: none; border: none; font: 700 18px var(--font-body); color: var(--ink); cursor: pointer; } /* Public page header. Without photos this is the flat ink block the page has always had; with them, the photo track scrolls behind the text under a scrim heavy enough that a bright midday shopfront cannot swallow the shop name. */ .pq-header { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); padding: 22px 20px 30px; } /* Only the photo states get a minimum height: the photo track fills the header via inset:0, and a short shop name would otherwise leave too little room to show a photo. The plain header has no photos to size for, so it stays content-driven at its pre-existing height -- unconditional min-height here would grow the zero-photo header past what it rendered before Task 5 and break the "visually identical" requirement plus the panel's calibrated overlap. */ .pq-header-photo { min-height: 170px; } .pq-header-glow { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--brand-glow), transparent 70%); } .pq-header-photo .pq-header-body { position: relative; pointer-events: none; } .pq-header-body { position: relative; } .pq-photo-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .pq-photo-track::-webkit-scrollbar { display: none; } .pq-photo { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; } .pq-photo-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 30, 28, 0.25) 0%, rgba(15, 30, 28, 0.55) 45%, rgba(15, 30, 28, 0.92) 100%); } .pq-photo-counter { position: absolute; top: 18px; right: 14px; font: 600 9px var(--font-mono); letter-spacing: 0.8px; color: rgba(250, 250, 247, 0.7); pointer-events: none; } .pq-photo-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; } .pq-photo-dot { width: 5px; height: 5px; padding: 0; border: none; border-radius: 9px; background: rgba(250, 250, 247, 0.45); cursor: pointer; transition: width 0.2s ease; } .pq-photo-dot.is-active { width: 16px; background: var(--bg); } .pq-status-pill { flex: none; padding: 3px 8px; border-radius: var(--r-pill); font: 700 9px var(--font-mono); text-transform: uppercase; letter-spacing: 1px; } /* ---------- modals / bottom sheets ---------- */ /* * BUG FIX: dialog.gk-modal (tokens.css) sets no max-height and no overflow, so on a * phone with the keyboard raised the add-member modal ran past the viewport with no * way to reach its submit button. Constrain and scroll at every size. */ dialog.gk-modal { max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 780px) { /* Bottom sheet: anchored to the bottom edge, full width, rounded top corners. */ dialog.gk-modal { max-width: none; width: 100%; margin: 0 auto 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto; border-radius: var(--r-3xl) var(--r-3xl) 0 0; max-height: 92dvh; padding-bottom: var(--safe-b); animation: sheetUp 0.22s ease-out; } /* Grab handle, so it reads as a sheet rather than a stuck panel. */ dialog.gk-modal::before { content: ""; display: block; width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border-2); margin: 10px auto 0; } } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ---------- centered card screens (onboarding, login, landing) ---------- */ /* * dvh rather than vh: on iOS Safari 100vh includes the browser chrome, so a * "full height" centered card gets clipped and jumps as the URL bar hides. * On mobile these go full-bleed and behave like app screens. */ .center-shell { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } .center-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: 32px; } /* Opt-in for long cards that should scroll internally on desktop. */ .center-card--scroll { max-height: 90dvh; overflow-y: auto; } /* Landing page wants a little more air above the wordmark. */ .center-card--hero { padding-top: 44px; } @media (max-width: 780px) { .center-shell { padding: 0; align-items: stretch; } .center-card, .center-card--scroll { min-height: 100dvh; max-height: none; overflow-y: visible; border: none; border-radius: 0; box-shadow: none; padding: 24px 20px calc(28px + var(--safe-b)); } } /* ---------- service editor rows (settings + onboarding step 2) ---------- */ /* * Desktop keeps one row. The price box, Save and delete buttons are all flex:none * (~206px combined), which on a phone squeezes the name field to ~60px -- so on * mobile the name takes a full row of its own and the controls wrap beneath it. */ .svc-row { display: flex; gap: 8px; align-items: center; } /* Flex lives here, not inline, so the mobile rule below can actually win. */ .svc-name { flex: 1; min-width: 0; } .svc-del { flex: none; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: none; color: var(--muted-2); font: 600 14px var(--font-body); cursor: pointer; } @media (max-width: 780px) { .svc-row { flex-wrap: wrap; } .svc-row .svc-name { flex: 1 1 100%; } .svc-row input, .svc-row input[type="submit"] { min-height: 44px; } /* Destructive control -- was 30px, well under the 44px minimum. */ .svc-del { width: 44px; height: 44px; } } /* Bottom nav + FAB are desktop-hidden; the media query below turns them on. */ .bottom-nav, .fab { display: none; } .bottom-nav a { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; text-decoration: none; color: var(--muted); font: 600 10px var(--font-body); } .bottom-nav a[aria-current="page"] { color: var(--brand); } /* ---------- queue row actions ---------- * * Used by app/views/queue/_entry.html.erb. These are the controls a barber hits * mid-cut, one-handed, so they carry the same 44px target as .bottom-nav a rather * than the ~30px the old inline padding gave them. * * button_to wraps every control in a
, so the FORM is the flex item and the * button only fills it -- sizing has to run through both. */ .q-actions { display: flex; align-items: center; gap: 10px; flex: none; } .q-actions form { margin: 0; display: flex; } .q-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--r-md); font: 700 14px var(--font-body); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 200ms ease-out, transform 160ms ease-out; } /* --ink, matching .mkt-btn--primary and the ＋ Walk-in button above the list. */ .q-btn--primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-sm); } .q-btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); } .q-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } /* Done takes money, so it keeps --brand to stay distinct from Start's --ink. */ .q-btn--brand { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .q-btn--brand:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .q-btn--brand:active { transform: translateY(0); box-shadow: var(--shadow-sm); } /* The second payment tile. Darker so Cash and UPI are never misread for each other. */ .q-btn--brand-dark { background: var(--brand-dark); } .q-btn--brand-dark:hover { background: var(--ink); } /* Same size as primary, no fill. Remove is destructive but rarely the intent, so it only turns red once the pointer is on it instead of shouting from every row. */ .q-btn--secondary { background: var(--surface); color: var(--muted); border-color: var(--border-2); } .q-btn--secondary:hover { color: var(--error); border-color: var(--error); } /* ---------- settings: rail + pane ---------- */ /* One response, two layouts. The rail and the pane are both always in the DOM; the modifier on .settings-screen decides which the current width shows. Mobile is the base case (hub shows the rail, a section shows the pane) and the >780 layer turns both on at once -- the same breakpoint the app shell uses to drop the sidebar. */ .settings-screen { max-width: 900px; } .settings-screen__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .settings-screen__back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; color: var(--ink); text-decoration: none; flex: none; } .settings-screen__back:hover { background: var(--surface-2); } .settings-screen__title { font: 800 24px var(--font-head); letter-spacing: -0.7px; color: var(--ink); margin: 0; } .settings-pane__title { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin: 0 0 14px; } /* ---- the rail ---- */ .settings-rail__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; margin-bottom: 8px; cursor: pointer; font: inherit; } .settings-rail__row:hover { border-color: var(--border-2); } .settings-rail__icon { display: flex; flex: none; color: var(--muted); } .settings-rail__row[aria-current="page"] .settings-rail__icon { color: var(--brand); } .settings-rail__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .settings-rail__label { font: 700 13.5px var(--font-body); color: var(--ink); } .settings-rail__summary { font: 500 11.5px var(--font-body); color: var(--muted); } .settings-rail__chevron { flex: none; color: var(--muted-2); display: flex; } .settings-rail__divider { height: 1px; background: var(--border); margin: 16px 0; } /* button_to wraps its button in a form; the form must not break the rail's flow. */ .settings-rail form { margin: 0; } .settings-rail__row--logout .settings-rail__label { color: var(--ink); } .settings-pane__placeholder { min-height: 320px; border-radius: var(--r-lg); background: var(--surface-2); } /* ---- mobile: one or the other, never both ---- */ .settings-screen--hub .settings-pane { display: none; } .settings-screen--section .settings-rail { display: none; } .settings-screen__back--up { display: none; } .settings-screen--section .settings-screen__back--out { display: none; } .settings-screen--section .settings-screen__back--up { display: flex; } /* ---- cards: the unit that saves ---- */ /* A card is a bounded group of settings with at most one Save, and that Save governs exactly what the card's border encloses. The boundary is structural rather than decorative: it is the only thing telling an owner which fields a Save button covers. */ .settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; } .settings-card + .settings-card { margin-top: 14px; } .settings-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .settings-card__head .settings-block__title { margin-bottom: 0; } .settings-card__foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .settings-field__label { display: block; font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 6px; } .settings-field { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: var(--r-lg); font: 600 14px var(--font-body); color: var(--ink); background: var(--surface); } .settings-field:focus { outline: none; border-color: var(--brand); } .settings-readonly { background: var(--surface-2); border-radius: var(--r-lg); padding: 11px 14px; font: 600 12.5px var(--font-head); color: var(--muted); word-break: break-all; } .settings-save { padding: 11px 18px; background: var(--ink); color: var(--bg); border: none; border-radius: var(--r-lg); font: 700 13px var(--font-head); cursor: pointer; } /* dirty-form greys this out until a field differs from what was rendered. Without JS the button is simply always live, which is the behaviour this screen had before. */ .settings-save:disabled { background: var(--surface-2); color: var(--muted-2); cursor: default; } /* ---- blocks inside a pane ---- */ .settings-block__title { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin-bottom: 10px; } .settings-block__note { font: 600 11px var(--font-body); color: var(--muted-2); } @media (min-width: 781px) { .settings-screen__body { display: flex; align-items: flex-start; gap: 32px; } /* Matches .app-sidebar's width so the two nav columns line up down the page. */ .settings-rail { width: 216px; flex: none; position: sticky; top: calc(var(--topbar-h) + 24px); } .settings-pane { flex: 1; min-width: 0; max-width: 620px; } /* Both panels show at this width, so neither mobile hide applies... */ .settings-screen--hub .settings-pane, .settings-screen--section .settings-rail { display: block; } /* ...and back always means "leave settings", because the rail handles the rest. */ .settings-screen--section .settings-screen__back--out { display: flex; } .settings-screen--section .settings-screen__back--up { display: none; } /* The rail is a nav here, not a list of destinations: chevrons and the row borders are list-affordances that only make sense when the row IS the whole screen. */ .settings-rail__chevron { display: none; } .settings-rail__row { border-color: transparent; background: transparent; padding: 10px 12px; margin-bottom: 2px; } .settings-rail__row:hover { background: var(--surface-2); border-color: transparent; } .settings-rail__row[aria-current="page"] { background: var(--brand-soft); border-color: transparent; } /* Only meaningful beside a pane: it says "this row is what you're looking at". At phone widths the rail is a list of destinations and there is no pane to belong to. */ .settings-rail__row--default { background: var(--brand-soft); border-color: transparent; } .settings-rail__row--default .settings-rail__icon { color: var(--brand); } .settings-rail__summary { display: none; } .settings-rail__label { font-size: 13px; } } /* ---------- mobile ---------- */ @media (max-width: 780px) { .app-shell { display: block; max-width: none; } .app-sidebar { display: none; } .app-content { /* Clear the fixed bottom nav (and the FAB sitting above it). */ padding: 16px 16px calc(var(--bottom-nav-h) + var(--fab-size) + var(--safe-b)); } .app-topbar { padding: 12px 16px; } /* Reclaim width for the business name; the date is low value on a phone. */ .topbar-date { display: none; } .gk-grid-home, .gk-grid-money { grid-template-columns: 1fr; } /* * The entry row wraps here, so the actions take the whole second line and split it * evenly: full-width thumb targets instead of two small buttons pinned right. */ .q-actions { flex: 1 1 100%; } .q-actions form { flex: 1 1 0; min-width: 0; } /* Three buttons (Done · Cash / Done · UPI / Remove) have to survive a 360px phone. */ .q-btn { padding: 0 12px; } .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: var(--safe-b); } .fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 18px; bottom: calc(var(--bottom-nav-h) + 14px + var(--safe-b)); width: var(--fab-size); height: var(--fab-size); border-radius: 50%; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-brand); font-size: 26px; line-height: 1; text-decoration: none; z-index: 56; } /* * iOS Safari zooms the whole page when focusing an input under 16px. Every input * in the app is currently 13.5-15px except sessions/new, and they all set size via * the `font:` shorthand inline -- which beats a plain class rule, hence !important. * Opt a deliberately-large input out with data-keep-font (e.g. the OTP field). */ input:not([type="checkbox"]):not([type="radio"]):not([data-keep-font]), select:not([data-keep-font]), textarea:not([data-keep-font]) { font-size: 16px !important; } } /* ---------- money book ---------- * * SCOPE: .mb-* only, used by app/views/money/show.html.erb and nothing else. * * The screen is one day of a ledger. Its signature is .mb-run: every row carries the * day's running total down a ruled right margin, the way a paper money book does, so * the shape of the day (a fat morning, a dead afternoon) is readable and not just the * total. That column survives on the narrowest phone -- it is the reason for the screen. */ .mb-datebar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 12px; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .mb-nav { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 18px/1 var(--font-body); text-decoration: none; transition: background 0.15s, border-color 0.15s; } .mb-nav:hover { background: var(--surface-2); border-color: var(--ink); } /* A missing next-day link still occupies the slot, so the date never shifts sideways. */ .mb-nav--off { opacity: 0.28; pointer-events: none; } /* Go rides beside the next-day arrow rather than taking a grid column of its own -- date_jump_controller hides it the moment JS is up, and an empty column would leave a permanent gap for everyone else. */ .mb-datebar-end { display: flex; align-items: center; gap: 8px; } .mb-nav--go { width: auto; padding: 0 14px; font: 600 12.5px var(--font-body); } .mb-pick { position: relative; text-align: center; min-width: 0; padding: 4px 8px; border-radius: var(--r-lg); margin: 0; } .mb-pick:hover { background: var(--surface-2); } /* The weekday leads: a shopkeeper reasons in "Sundays are dead", not in dates. */ .mb-weekday { display: block; font: 800 clamp(21px, 5.4vw, 27px)/1 var(--font-head); letter-spacing: -0.9px; color: var(--ink); } .mb-fulldate { display: block; margin-top: 6px; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.9px; text-transform: uppercase; color: var(--muted); } .mb-fulldate em { font-style: normal; color: var(--brand); font-weight: 700; } /* The real control, laid transparently over the label so the whole block is the target. */ .mb-pick input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: none; background: none; cursor: pointer; } /* align-content, not the grid default of stretch: the right column's cards are shorter than the ledger beside them and would otherwise grow to match it, leaving the week card half empty. */ .mb-col { display: grid; gap: 16px; align-content: start; } .mb-label { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); } /* ---- the day ---- */ .mb-hero { background: var(--ink); color: var(--bg); border-radius: var(--r-2xl); padding: 24px; } .mb-hero .mb-label { color: var(--brand-tint); } .mb-amount { font: 800 clamp(40px, 10vw, 52px)/1 var(--font-head); letter-spacing: -2.2px; margin-top: 12px; font-variant-numeric: tabular-nums; } .mb-amount span { font-size: 0.62em; letter-spacing: -0.5px; margin-right: 2px; opacity: 0.75; } .mb-sub { margin-top: 10px; font: 500 13px var(--font-body); color: rgba(250, 250, 247, 0.7); } .mb-rule { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(250, 250, 247, 0.15); } .mb-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 9px 0; background: rgba(250, 250, 247, 0.15); } .mb-mixbar i { display: block; } .mb-mixbar .upi { background: var(--brand-tint); } .mb-mixbar .cash { background: rgba(250, 250, 247, 0.32); } .mb-legend { display: flex; justify-content: space-between; gap: 12px; font: 600 11.5px var(--font-body); color: rgba(250, 250, 247, 0.78); font-variant-numeric: tabular-nums; } .mb-compare { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 500 12.5px/1.55 var(--font-body); color: rgba(250, 250, 247, 0.82); } .mb-delta { font: 700 12.5px var(--font-mono); font-variant-numeric: tabular-nums; } .mb-delta--up { color: var(--brand-tint); } .mb-delta--down { color: #f0c48a; } .mb-delta--flat { color: rgba(250, 250, 247, 0.6); } /* ---- the wider picture ---- */ .mb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow-sm); } .mb-accrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mb-fig { font: 800 26px/1 var(--font-head); letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; } .mb-note { font: 500 11.5px var(--font-mono); color: var(--muted-2); letter-spacing: 0.4px; } .mb-week { display: flex; align-items: flex-end; gap: 6px; margin: 18px 0 2px; } /* Each bar is a link to that day; the tall flex column keeps the tap target thumb-sized even when the bar itself is 3px tall. */ .mb-day { flex: 1; min-width: 0; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; text-decoration: none; } .mb-day i { display: block; width: 100%; min-height: 3px; border-radius: 3px 3px 2px 2px; background: rgba(17, 94, 89, 0.24); transition: background 0.18s; } .mb-day:hover i { background: rgba(17, 94, 89, 0.45); } .mb-day b { font: 600 10px/1 var(--font-mono); color: var(--muted-2); letter-spacing: 0.5px; } .mb-day--sel i { background: var(--ink); } .mb-day--sel b { color: var(--ink); font-weight: 700; } /* Days that have not happened yet read as ruled-off, not as zero takings. The floor height beats the inline height so the hatch is legible as "not yet" rather than looking like a 3px rendering artefact. */ .mb-day--future i { min-height: 12px; background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 3px, transparent 3px, transparent 6px); } .mb-monthrow { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mb-monthfig { font: 700 18px/1 var(--font-head); letter-spacing: -0.6px; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---- the ledger ---- */ .mb-ledger { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .mb-ledger-head, .mb-entry { display: grid; grid-template-columns: 56px minmax(0, 1fr) 84px 78px; align-items: center; gap: 12px; padding: 13px 20px; } .mb-ledger-head { align-items: end; padding: 15px 20px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .mb-ledger-head .mb-label:nth-child(3) { text-align: right; } .mb-ledger-head .mb-label:nth-child(4) { text-align: right; color: var(--muted-2); border-left: 1px solid var(--border-2); padding-left: 12px; } .mb-entry { border-bottom: 1px solid var(--border); } .mb-entry:last-child { border-bottom: none; } .mb-entry:hover { background: #fcfcfa; } .mb-t { font: 500 11.5px var(--font-mono); color: var(--muted); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; } .mb-who { min-width: 0; } /* The name holds one line and truncates. Wrapping it breaks the row rhythm that makes a column of entries scannable, and a name split across two lines reads worse than a name with an ellipsis. Services below it may wrap freely. */ .mb-who b { display: block; font: 600 13.5px/1.3 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mb-who span { display: block; margin-top: 3px; font: 400 12px/1.4 var(--font-body); color: var(--muted); } .mb-pay { display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: var(--r-pill); font: 600 9.5px var(--font-mono); letter-spacing: 0.7px; text-transform: uppercase; font-style: normal; vertical-align: 1px; } .mb-pay--upi { background: var(--brand-soft); color: var(--brand); } .mb-pay--cash { background: var(--surface-3); color: var(--ink-3); } .mb-amt { text-align: right; font: 700 14.5px var(--font-head); letter-spacing: -0.3px; color: var(--ink); font-variant-numeric: tabular-nums; } /* The ledger margin. One hairline and a carried sum -- the last row's figure IS the day total, so the page closes its own loop. */ .mb-run { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding-left: 12px; border-left: 1px solid var(--border); font: 500 12.5px var(--font-mono); letter-spacing: -0.3px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .mb-entry:last-child .mb-run { color: var(--ink); font-weight: 700; } .mb-empty { padding: 44px 24px; text-align: center; } .mb-empty p { margin: 0; font: 400 20px/1.4 var(--font-serif); font-style: italic; color: var(--muted); } .mb-empty small { display: block; margin-top: 12px; font: 500 12.5px var(--font-body); color: var(--muted-2); } /* ---- what sold ---- */ .mb-svc + .mb-svc { margin-top: 13px; } .mb-svc-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font: 600 12.5px var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; } .mb-svc-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .mb-svc-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; } .mb-quiet { margin: 0; font: 400 15px/1.5 var(--font-serif); font-style: italic; color: var(--muted); } @media (max-width: 780px) { .mb-datebar { padding: 10px; gap: 8px; } .mb-hero { padding: 20px; } /* The four columns hold on a phone -- collapsing them into stacked rows would break the alignment that makes a ledger scannable. Only the gutters give way. */ .mb-ledger-head, .mb-entry { grid-template-columns: 44px minmax(0, 1fr) 66px 58px; gap: 8px; padding-left: 14px; padding-right: 14px; } .mb-ledger-head .mb-label:nth-child(4), .mb-run { padding-left: 8px; } .mb-who b { font-size: 13px; } .mb-who span { font-size: 11.5px; } .mb-amt { font-size: 13.5px; } .mb-run { font-size: 11.5px; } .mb-t { font-size: 10.5px; } .mb-legend { font-size: 11px; } .mb-empty { padding: 34px 18px; } } /* Small phones (<=360px hardware). Every fixed column gives up a few pixels so the name column keeps enough room for a full name -- "Mahesh Patil" truncating to "Mahesh P..." is the failure this tier exists to prevent. Must stay below the 780 block: same specificity, so source order decides. */ @media (max-width: 400px) { .mb-ledger-head, .mb-entry { grid-template-columns: 38px minmax(0, 1fr) 54px 54px; gap: 6px; padding-left: 12px; padding-right: 12px; } .mb-ledger-head .mb-label:nth-child(4), .mb-run { padding-left: 6px; } /* "RUNNING" at the tracked-out label size is wider than its own column here, and .mb-ledger clips it without a scrollbar to say so. */ .mb-ledger-head .mb-label { font-size: 8.5px; letter-spacing: 0.4px; } .mb-pay { margin-left: 0; } } /* ---------- marketing homepage ---------- * * SCOPE: .mkt-* only, used by app/views/pages/home.html.erb and nothing else. * * BREAKPOINTS: unlike the app shell above (which is max-width:780 corrective), this * section is mobile-first with additive min-width layers at 600 / 900 / 1120 / 1440. * 780 is deliberately avoided so the two systems can never both apply on one band. * Do not add a max-width query below this line. */ .mkt-page { background: var(--bg); /* Fluid scale, 375px -> 1440px viewport. No font-size media queries anywhere. */ --mkt-h1: clamp(1.75rem, 1.05rem + 3vw, 3.25rem); --mkt-h2: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); --mkt-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --mkt-lead: clamp(1.0625rem, 0.98rem + 0.6vw, 1.375rem); --mkt-body: 0.9375rem; --mkt-small: 0.8125rem; --mkt-lh-tight: 1.15; --mkt-lh-head: 1.25; --mkt-lh-body: 1.65; /* One knob for section rhythm instead of five hand-tuned paddings. */ --mkt-section-y: clamp(3rem, 1.8rem + 5vw, 6.5rem); --mkt-measure: 62ch; } .mkt-container { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 18px; } /* The header is sticky (~70px), so an in-page jump to #faq would land with the heading underneath it. Clear it. */ .mkt-page [id] { scroll-margin-top: 84px; } .mkt-container--narrow { max-width: 720px; } .mkt-hero, .mkt-night, .mkt-meet, .mkt-steps, .mkt-payoff, .mkt-early, .mkt-audience, .mkt-faq, .mkt-ambition { padding-block: var(--mkt-section-y); } /* ---------- marketing: shared components ---------- */ .mkt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 28px; border: 1.5px solid transparent; border-radius: var(--r-lg); font-family: var(--font-head); font-size: 0.9375rem; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; transition: transform 160ms ease-out, box-shadow 200ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; } /* --ink, not --brand: matches every primary button inside the product, so the landing page and the app read as one thing. */ .mkt-btn--primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-sm); } .mkt-btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); } .mkt-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .mkt-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-2); } .mkt-btn--secondary:hover { background: var(--surface-2); border-color: var(--ink); } /* For the dark ambition band, where --ink on --brand-dark would vanish. */ .mkt-btn--invert { background: #fff; color: var(--brand-dark); box-shadow: var(--shadow-sm); } .mkt-btn--invert:hover { background: var(--brand-tint); transform: translateY(-1px); } .mkt-btn--lg { min-height: 54px; padding: 17px 36px; font-size: 1rem; } .mkt-btn--full { display: flex; width: 100%; } .mkt-icon { display: block; flex: none; color: var(--brand); } /* Inside a button the icon must track the label colour, not the brand. */ .mkt-btn .mkt-icon { color: currentColor; } .mkt-section-title { font-family: var(--font-head); font-size: var(--mkt-h2); font-weight: 800; line-height: var(--mkt-lh-head); letter-spacing: -0.6px; color: var(--ink); margin: 0 0 10px; text-align: center; } .mkt-section-subhead { font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); text-align: center; max-width: 52ch; margin: 0 auto 32px; } .mkt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 20px; } /* ---------- marketing: header ---------- */ .mkt-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(10px); } @supports not (backdrop-filter: blur(10px)) { .mkt-header { background: var(--surface); } } .mkt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; } .mkt-header__actions { display: flex; align-items: center; gap: 8px; } .mkt-header__login { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border-2); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: border-color 160ms ease-out, background-color 160ms ease-out; } .mkt-header__login:hover { border-color: var(--ink); background: var(--surface-2); } /* The global focus rule forces --r-sm; pill controls need their own radius back. */ .mkt-header__login:focus-visible { border-radius: var(--r-pill); } .mkt-header__cta { display: none; } /* Language switcher. A
, so open/close is the browser's job. */ .mkt-lang { position: relative; } .mkt-lang__current { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 11px 12px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: var(--ink-3); cursor: pointer; list-style: none; transition: color 160ms ease-out, background-color 160ms ease-out; } /* Safari draws its own disclosure triangle from this pseudo-element. */ .mkt-lang__current::-webkit-details-marker { display: none; } .mkt-lang__current:hover { color: var(--ink); background: var(--surface-2); } .mkt-lang__current:focus-visible { border-radius: var(--r-pill); } .mkt-lang[open] .mkt-lang__caret { transform: rotate(180deg); } .mkt-lang__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 168px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 12px 28px rgb(0 0 0 / 12%); } .mkt-lang__menu a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; } .mkt-lang__menu a:hover { background: var(--surface-2); } .mkt-lang__menu a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); } /* The mobile header already carries the logo and Log in, and hides the CTA. "Hinglish" plus both of those does not fit at 360px, so only the globe shows until the breakpoint that brings the CTA back. */ .mkt-lang__name { display: none; } /* Vertical padding (not inline-flex) to clear the 44px touch minimum -- it measured 30px as a bare text link. Flex would make __dot a flex item and centre it, which lifts it off the wordmark's baseline. */ .mkt-logo { display: inline-block; padding-block: 7px; font-family: var(--font-head); font-size: 1.375rem; font-weight: 800; letter-spacing: -1px; color: var(--ink); text-decoration: none; } .mkt-logo--sm { font-size: 1.0625rem; } .mkt-logo__accent { color: var(--brand); } .mkt-logo__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-left: 3px; } /* ---------- marketing: hero ---------- */ .mkt-hero { background: var(--surface-2); } .mkt-hero__inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; } .mkt-hero__copy { text-align: center; max-width: 40ch; margin-inline: auto; } .mkt-hero__eyebrow { font-family: var(--font-body); font-size: 0.78125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); margin: 0 0 14px; } .mkt-hero__title { font-family: var(--font-head); font-size: var(--mkt-h1); font-weight: 800; line-height: var(--mkt-lh-tight); letter-spacing: -1.5px; color: var(--ink); margin: 0; text-wrap: balance; } .mkt-hero__subhead { font-family: var(--font-serif); font-size: var(--mkt-lead); font-style: italic; font-weight: 400; line-height: 1.4; color: var(--brand); margin: 16px 0 0; } .mkt-hero__cta { margin-top: 28px; } .mkt-hero__micro { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 18px 0 0; padding: 0; font-family: var(--font-body); font-size: var(--mkt-small); font-weight: 500; color: var(--muted); } .mkt-hero__micro li { display: inline-flex; align-items: center; gap: 5px; } .mkt-hero__micro .mkt-icon { color: var(--success); } /* ---------- marketing: product mock ---------- * * A CSS drawing of the owner's queue screen. Mirrors the real row layout in * app/views/queue/_entry.html.erb -- if that changes, change this too. * The whole interior is aria-hidden; the
carries one aria-label. * The hero entrance is armed by reveal_controller and transitioned under * [data-hero-mock] in the motion primitives below, so that no-JS and * reduced-motion visitors get a fully visible static page. */ .mkt-mock { margin: 0; } .mkt-mock__frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3xl); box-shadow: var(--shadow-lg); padding: 14px; max-width: 420px; margin-inline: auto; } .mkt-mock__bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; border-bottom: 1px solid var(--border); } .mkt-mock__biz { font-family: var(--font-head); font-size: 0.875rem; font-weight: 800; color: var(--ink); } .mkt-mock__count { margin-left: auto; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--muted); } .mkt-mock__row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 6px; border-bottom: 1px solid var(--border); } .mkt-mock__pos { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--brand-soft); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--brand); } .mkt-mock__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mkt-mock__who b { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; color: var(--ink); } .mkt-mock__who i { font-family: var(--font-body); font-size: 0.6875rem; font-style: normal; font-weight: 500; color: var(--muted); } .mkt-mock__amt { margin-left: auto; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; color: var(--ink); /* Tabular figures so a late font swap cannot reflow the column. */ font-variant-numeric: tabular-nums; } .mkt-mock__status { flex: none; padding: 4px 9px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; color: var(--muted); background: var(--surface-2); } .mkt-mock__status--now { color: var(--brand); background: var(--brand-soft); } .mkt-mock__stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 14px 6px 4px; } .mkt-mock__stat-label { grid-column: 1; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); } .mkt-mock__stat-value { grid-column: 1; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.8px; color: var(--ink); font-variant-numeric: tabular-nums; } .mkt-mock__spark { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 40px; } .mkt-mock__caption { margin-top: 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; color: var(--muted); text-align: center; } /* ---------- marketing: find-or-claim band ---------- * * Promoted from the old bottom-of-page directory section: already-listed * businesses claiming themselves is an acquisition channel, so the search sits * directly under the hero. */ .mkt-claim { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: clamp(2.25rem, 1.3rem + 3.5vw, 4rem); } .mkt-claim__title { font-family: var(--font-head); font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); font-weight: 800; line-height: var(--mkt-lh-head); letter-spacing: -0.4px; color: var(--ink); text-align: center; margin: 0 0 8px; } .mkt-claim__subhead { font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); text-align: center; max-width: 52ch; margin: 0 auto 22px; } .mkt-claim__hint { font-family: var(--font-body); font-size: var(--mkt-small); font-weight: 500; color: var(--muted); text-align: center; margin: 14px 0 0; } /* ---------- marketing: story chapters ---------- * * Shared chapter furniture for the four #story sections. The marker is a * mono "time stamp" (the story's structural device is one day at the shop); * the narration is the storyteller's voice in the serif face. */ .mkt-chapter__head { max-width: 720px; margin-inline: auto; text-align: center; } .mkt-chapter__marker { font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand); margin: 0 0 14px; } .mkt-chapter__title { font-family: var(--font-head); font-size: var(--mkt-h2); font-weight: 800; line-height: var(--mkt-lh-head); letter-spacing: -0.6px; color: var(--ink); margin: 0 0 12px; text-wrap: balance; } .mkt-chapter__narration { font-family: var(--font-serif); font-size: var(--mkt-lead); font-style: italic; font-weight: 400; line-height: 1.45; color: var(--brand); margin: 0; } .mkt-chapter__body { font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); margin: 12px 0 0; } .mkt-chapter__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: center; } .mkt-chapter__head--left { text-align: left; margin-inline: 0; } /* ---------- marketing: chapter 1, the invisible day ---------- * * The one deliberate risk on the page: the problem chapter is night. The * story's conflict (the day disappearing at shutter-down) renders on the same * dark band as the closing ambition section; the payoff chapter answers it * back in daylight. */ .mkt-night { background: var(--brand-dark); /* --warn is 3.2:1 on --brand-dark; this lighter marigold reads at small sizes. */ --mkt-marigold: #e8a04c; } .mkt-night .mkt-chapter__marker { color: var(--mkt-marigold); } .mkt-night .mkt-chapter__title { color: #fff; } .mkt-night .mkt-chapter__narration { color: var(--brand-tint); } .mkt-night__grid, .mkt-steps__grid, .mkt-features__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .mkt-night__grid { margin-top: clamp(2rem, 1rem + 3vw, 3rem); } .mkt-night__item { display: flex; align-items: flex-start; gap: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-xl); padding: 20px; font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .mkt-night__item .mkt-icon { color: var(--mkt-marigold); margin-top: 1px; } /* The global ring is --brand, invisible on --brand-dark. */ .mkt-night :focus-visible { outline-color: #fff; } /* ---------- marketing: motion primitives ---------- * * No animation library. reveal_controller only adds classes: * .is-armed -> rewind to the start frame (set here, never in a bare rule) * .is-revealed -> transition forward * All easing and timing lives below. Because the start frame is applied ONLY * under .is-armed -- which JS adds -- a no-JS or reduced-motion visitor never * sees a hidden element. Never give these selectors an unguarded opacity: 0. */ /* Hero: copy rises, then the queue mock overshoots in behind it. */ .mkt-page [data-hero-copy].is-armed, .mkt-page [data-hero-mock].is-armed { opacity: 0; } .mkt-page [data-hero-copy].is-armed { transform: translateY(14px); } .mkt-page [data-hero-mock].is-armed { transform: translateY(28px) scale(0.96); } .mkt-page [data-hero-copy].is-armed.is-revealed { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 600ms ease-out; } /* cubic-bezier overshoot stands in for the spring the library used. */ .mkt-page [data-hero-mock].is-armed.is-revealed { opacity: 1; transform: none; transition: opacity 520ms ease-out 150ms, transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms; } /* Scroll reveals. Without [data-reveal-stagger] the whole block moves as one; with it, the parent stays put and its children come in one after another. */ .mkt-page [data-reveal].is-armed:not([data-reveal-stagger]) { opacity: 0; transform: translateY(18px); } .mkt-page [data-reveal].is-armed.is-revealed:not([data-reveal-stagger]) { opacity: 1; transform: none; transition: opacity 550ms ease-out, transform 550ms ease-out; } .mkt-page [data-reveal-stagger].is-armed > * { opacity: 0; transform: translateY(18px); } .mkt-page [data-reveal-stagger].is-armed.is-revealed > * { opacity: 1; transform: none; transition: opacity 550ms ease-out, transform 550ms ease-out; } /* 120ms apart, matching the stagger the library generated. Six covers every staggered group on the page (the widest is three). */ .mkt-page [data-reveal-stagger].is-armed.is-revealed > :nth-child(2) { transition-delay: 120ms; } .mkt-page [data-reveal-stagger].is-armed.is-revealed > :nth-child(3) { transition-delay: 240ms; } .mkt-page [data-reveal-stagger].is-armed.is-revealed > :nth-child(4) { transition-delay: 360ms; } .mkt-page [data-reveal-stagger].is-armed.is-revealed > :nth-child(5) { transition-delay: 480ms; } .mkt-page [data-reveal-stagger].is-armed.is-revealed > :nth-child(6) { transition-delay: 600ms; } /* Sparklines draw themselves left to right. The markup carries pathLength="1", which normalises the dash units so no JS getTotalLength() call is needed. */ .mkt-page [data-draw].is-armed { stroke-dasharray: 1; stroke-dashoffset: 1; } .mkt-page [data-draw].is-armed.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms ease-in-out 200ms; } /* ---------- marketing: illustration scenes ---------- * * Line-art SVG scenes built on one motif: solid stroke = a customer you know, * dotted stroke = a customer you've lost. Scenes render their FINISHED frame * by default; reveal_controller adds .is-armed (rewind) on connect and * .is-played (crossfade forward) when scrolled into view, so no-JS and * reduced-motion visitors simply see the final drawing. */ .mkt-scene { max-width: 560px; margin: clamp(2rem, 1rem + 3vw, 3rem) auto 0; } .mkt-scene svg { display: block; width: 100%; height: auto; } .mkt-scene--night { color: rgba(255, 255, 255, 0.85); } .mkt-scene--day { color: var(--ink); } .mkt-scene__caption { margin-top: 14px; font-family: var(--font-serif); font-size: 0.9375rem; font-style: italic; color: var(--muted); text-align: center; } .mkt-scene--night .mkt-scene__caption { color: rgba(255, 255, 255, 0.6); } .sc-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .sc-line--dotted { stroke-dasharray: 3 7; } .sc-accent { stroke: var(--warn); } .mkt-scene--night .sc-accent { stroke: var(--mkt-marigold, #e8a04c); } .sc-star { opacity: 0.7; } .sc-text { font-family: var(--font-body); font-weight: 600; fill: var(--ink); } .sc-text--small { font-size: 13px; fill: var(--muted); } .sc-text--big { font-family: var(--font-head); font-size: 46px; font-weight: 800; fill: var(--brand); } /* Solid/ghost crossfade. Each .sc-fig sets its own endpoints and delay inline (--solid-start/end, --ghost-start/end, --fade-delay). */ .mkt-scene .sc-fig__solid { opacity: var(--solid-end, 1); transition: opacity 720ms ease-out; } .mkt-scene .sc-fig__ghost { opacity: var(--ghost-end, 0); transition: opacity 720ms ease-out; } .mkt-scene.is-played .sc-fig__solid, .mkt-scene.is-played .sc-fig__ghost { transition-delay: var(--fade-delay, 0ms); } .mkt-scene.is-armed:not(.is-played) .sc-fig__solid { opacity: var(--solid-start, 1); transition: none; } .mkt-scene.is-armed:not(.is-played) .sc-fig__ghost { opacity: var(--ghost-start, 0); transition: none; } /* Token-card entrance in the day scene. */ .mkt-scene .sc-pop { transform-box: fill-box; transform-origin: center; transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); } .mkt-scene.is-played .sc-pop { transition-delay: 150ms; } .mkt-scene.is-armed:not(.is-played) .sc-pop { opacity: 0; transform: translateY(10px) scale(0.92); transition: none; } /* ---------- marketing: chapter 4, the payoff ---------- * * The evening from chapter 1, answered. The "before" card echoes the night * band; the "after" card is the same shop rendered knowable. */ .mkt-payoff { background: var(--surface-2); } .mkt-payoff__pair { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; margin: clamp(2rem, 1rem + 3vw, 3rem) auto 0; } .mkt-payoff-card { border-radius: var(--r-xl); padding: 24px 22px; } .mkt-payoff-card--before { background: var(--brand-dark); } .mkt-payoff-card--after { background: var(--surface); border: 1.5px solid var(--brand-tint); box-shadow: var(--shadow-md); } .mkt-payoff-card__title { font-family: var(--font-head); font-size: 1rem; font-weight: 800; margin: 0 0 16px; } .mkt-payoff-card--before .mkt-payoff-card__title { color: rgba(255, 255, 255, 0.92); } .mkt-payoff-card--after .mkt-payoff-card__title { color: var(--ink); } .mkt-payoff-card__figs { display: block; width: 96px; height: auto; margin-bottom: 16px; } .mkt-payoff-card--before .mkt-payoff-card__figs { color: rgba(255, 255, 255, 0.7); } .mkt-payoff-card--after .mkt-payoff-card__figs { color: var(--brand); } .mkt-payoff-card__rows { display: grid; gap: 10px; margin: 0; } .mkt-payoff-card__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .mkt-payoff-card__rows dt { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; } .mkt-payoff-card__rows dd { margin: 0; font-family: var(--font-head); font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; } .mkt-payoff-card--before .mkt-payoff-card__rows dt { color: rgba(255, 255, 255, 0.7); } .mkt-payoff-card--before .mkt-payoff-card__rows dd { color: rgba(255, 255, 255, 0.5); } .mkt-payoff-card--after .mkt-payoff-card__rows dt { color: var(--muted); } .mkt-payoff-card--after .mkt-payoff-card__rows dd { color: var(--ink); } .mkt-payoff-card__spark { width: 100%; height: 40px; margin-top: 16px; } .mkt-payoff__lede { font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 600; color: var(--muted); text-align: center; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 20px; } /* ---------- marketing: how it works ---------- */ .mkt-steps { background: var(--brand-soft); } .mkt-steps__grid { margin-top: clamp(2rem, 1rem + 3vw, 3rem); } .mkt-step { background: var(--surface); border-radius: var(--r-xl); padding: 24px 22px; box-shadow: var(--shadow-sm); } .mkt-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mkt-step__num { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--brand); } .mkt-step__title { font-family: var(--font-head); font-size: var(--mkt-h3); font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0 0 8px; } .mkt-step__body { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); margin: 0; } /* ---------- marketing: what you get ---------- */ .mkt-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 22px; } .mkt-feature__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--brand-soft); margin-bottom: 14px; } .mkt-feature__title { font-family: var(--font-head); font-size: var(--mkt-h3); font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0 0 8px; } .mkt-feature__body { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); margin: 0; } /* ---------- marketing: early access ---------- */ .mkt-early { background: var(--surface-2); } .mkt-early__card { max-width: 640px; margin-inline: auto; text-align: center; background: var(--surface); border: 1.5px solid var(--brand-tint); border-radius: var(--r-2xl); padding: 32px 24px; } .mkt-early__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--brand-soft); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--brand); margin-bottom: 16px; } .mkt-early__title { font-family: var(--font-head); font-size: var(--mkt-h2); font-weight: 800; line-height: var(--mkt-lh-head); letter-spacing: -0.6px; color: var(--ink); margin: 0 0 12px; } .mkt-early__body { font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); max-width: 48ch; margin: 0 auto 22px; } /* ---------- marketing: audience ---------- */ .mkt-audience__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; } .mkt-chip { display: inline-block; font-family: var(--font-body); font-size: 0.84375rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 9px 18px; } /* ---------- marketing: directory search ---------- */ .mkt-search { display: flex; align-items: stretch; gap: 8px; max-width: 480px; margin-inline: auto; } .mkt-search__field { flex: 1 1 auto; /* Without this the input cannot shrink below its intrinsic ~180px min-content. */ min-width: 0; padding: 13px 14px; border: 1.5px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); font-family: var(--font-body); /* 16px: anything smaller makes iOS zoom the page in on focus. */ font-size: 1rem; font-weight: 600; color: var(--ink); } .mkt-search__field::placeholder { color: var(--muted); font-weight: 500; } .mkt-search__field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .mkt-search__btn { flex: 0 0 auto; padding: 0 22px; background: var(--brand); color: var(--bg); border: 1.5px solid var(--brand); border-radius: var(--r-lg); font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out; } .mkt-search__btn:hover { background: var(--brand-dark); } /* The promoted band under the hero gets a wider, taller search. */ .mkt-search--lg { max-width: 560px; } .mkt-search--lg .mkt-search__field { padding-block: 15px; } /* ---------- marketing: FAQ ---------- */ /* --bg, not --surface-2: the early-access band above is already --surface-2, and the section order alternates cream / white the whole way. */ .mkt-faq { background: var(--bg); } .mkt-faq__list { max-width: 720px; margin-inline: auto; } .mkt-faq__item { border-bottom: 1px solid var(--border-2); } .mkt-faq__q { display: flex; align-items: center; gap: 12px; padding: 18px 4px; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--ink); } .mkt-faq__q::-webkit-details-marker { display: none; } .mkt-faq__q .mkt-icon { margin-left: auto; transition: transform 200ms ease-out; } .mkt-faq__item[open] .mkt-faq__q .mkt-icon { transform: rotate(180deg); } .mkt-faq__a { margin: 0; padding: 0 4px 20px; max-width: var(--mkt-measure); font-family: var(--font-body); font-size: var(--mkt-body); font-weight: 500; line-height: var(--mkt-lh-body); color: var(--muted); } /* ---------- marketing: ambition + closing CTA ---------- */ .mkt-ambition { background: var(--brand-dark); text-align: center; } .mkt-ambition__title { font-family: var(--font-head); font-size: var(--mkt-h2); font-weight: 800; line-height: 1.4; color: #fff; max-width: 30ch; margin: 0 auto 26px; text-wrap: balance; } .mkt-ambition__questions { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 24px; padding: 0; } .mkt-ambition__q { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: var(--r-pill); padding: 10px 20px; } .mkt-ambition__closing { font-family: var(--font-serif); font-size: 1.1875rem; font-style: italic; font-weight: 400; color: var(--brand-tint); margin: 0 0 8px; } .mkt-ambition__caption { font-family: var(--font-body); font-size: var(--mkt-small); font-weight: 500; color: rgba(255, 255, 255, 0.72); margin: 0; } .mkt-ambition__cta { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .mkt-ambition__cta-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 18px; } /* The global ring is --brand, which is nearly invisible on --brand-dark. */ .mkt-ambition :focus-visible { outline-color: #fff; } /* ---------- marketing: footer ---------- */ .mkt-footer { padding-block: 28px; border-top: 1px solid var(--border); } .mkt-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .mkt-footer__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; padding: 0; } /* inline-flex + min-height: bare 16px-tall text links miss the touch minimum. */ .mkt-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); text-decoration: none; } .mkt-footer__links a:hover { color: var(--brand); text-decoration: underline; } /* --muted, not --muted-2: #9b9b9b on --bg is 2.66:1 and fails WCAG AA. */ .mkt-footer__copy { font-family: var(--font-body); font-size: 0.78125rem; font-weight: 500; color: var(--muted); margin: 0; } /* ---------- marketing: responsive layers ---------- */ @media (min-width: 600px) { .mkt-night__grid { grid-template-columns: repeat(2, 1fr); } /* Three items in a 2-up grid leave an orphan; let the last one span the row. */ .mkt-night__grid > :last-child { grid-column: 1 / -1; } .mkt-payoff__pair { grid-template-columns: 1fr 1fr; } .mkt-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; } } @media (min-width: 900px) { .mkt-container { padding-inline: 24px; } .mkt-night__grid, .mkt-steps__grid, .mkt-features__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .mkt-night__grid > :last-child { grid-column: auto; } /* Meet-Grahik chapter: copy left, token scene right. */ .mkt-chapter__grid { grid-template-columns: 1.05fr 0.95fr; } .mkt-header__cta { display: inline-flex; min-height: 44px; padding: 11px 20px; } .mkt-lang__name { display: inline; } } @media (min-width: 1120px) { .mkt-hero__inner { grid-template-columns: 1.05fr 0.95fr; } .mkt-hero__copy { text-align: left; max-width: none; margin-inline: 0; } .mkt-hero__micro { justify-content: flex-start; } .mkt-mock__frame { max-width: none; } } @media (min-width: 1440px) { .mkt-container { max-width: 1180px; } }