/* ============================================================ Piccabee Design System ============================================================ */ :root { /* Neutrals */ --bg-page: #ffffff; --bg-surface: #fafafa; --bg-soft: #f4f4f5; --bg-sunken: #efeff2; --ink-1: #0a0a0f; --ink-2: #18181b; --ink-3: #52525b; --ink-4: #a1a1aa; --ink-5: #d4d4d8; --border: #e4e4e7; --border-strong: #d4d4d8; /* Primary honey→magenta */ --accent-start: #f59e0b; --accent-mid: #f97316; --accent-end: #ec4899; --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ec4899 100%); --accent-gradient-soft: linear-gradient(135deg, #fef3c7 0%, #fee2e2 50%, #fce7f3 100%); /* Secondary teal→indigo */ --cool-start: #0d9488; --cool-end: #6366f1; --cool-gradient: linear-gradient(135deg, #0d9488 0%, #6366f1 100%); /* Solids */ --accent-solid: #ec4899; --cool-solid: #6366f1; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* Status soft */ --success-soft: #d1fae5; --warning-soft: #fef3c7; --error-soft: #fee2e2; --info-soft: #dbeafe; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px; /* Bento — the gutter between the chrome tiles and the canvas edge. Used as the layout padding, the grid gap, and the sticky offset for the sidebar and topbar, so all four stay in step from one value. */ --bento-gap: 14px; /* Active nav pill. Cool indigo against the sidebar's warm amber/pink blooms, so the current page separates by hue and not just by brightness — the white-on-white version relied on brightness alone and read weakly. The tint stays translucent so the glass still shows through it, and the ink is dark enough to hold contrast over a pale wash on a light panel. */ --nav-active-tint: rgba(99,102,241,0.20); --nav-active-ink: #3730a3; /* Shadows */ --shadow-xs: 0 1px 2px rgba(10, 10, 15, 0.04); --shadow-sm: 0 1px 3px rgba(10, 10, 15, 0.05), 0 1px 2px rgba(10, 10, 15, 0.03); --shadow-md: 0 1px 3px rgba(10, 10, 15, 0.05), 0 8px 24px rgba(244, 114, 182, 0.06); --shadow-lg: 0 4px 6px rgba(10, 10, 15, 0.05), 0 16px 40px rgba(244, 114, 182, 0.10); --shadow-xl: 0 8px 12px rgba(10, 10, 15, 0.06), 0 32px 64px rgba(244, 114, 182, 0.14); --shadow-focus: 0 0 0 3px rgba(236, 72, 153, 0.18); /* Type */ --font-sans: "Inter", "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* The Claude Design uses Quicksand for every spec label, eyebrow and numeral — JetBrains Mono is loaded in those files but never applied. Kept separate from --font-mono so dashboard tables keep tabular monospace numerals, which Quicksand cannot do. */ --font-label: "Quicksand", "Inter", sans-serif; --font-tamil: "Noto Serif Tamil", serif; --font-deva: "Noto Serif Devanagari", serif; } * { box-sizing: border-box; } /* ============================================================ Defensive width reset — some host themes (Twenty Twenty-Four via theme.json, Elementor kit settings, Loobek's container widths, etc.) constrain `` or the `wp-site-blocks` wrapper to a fixed max-width (~1080-1280px) without an auto margin. That makes the marketing SPA's centred 1200-px containers appear LEFT-anchored in wider viewports — content sits in the left half of the screen with empty space on the right. Force every layer of the mount chain back to full width so the SPA's own `margin: 0 auto` rules can take over. ============================================================ */ html, body { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; } body.asib-studio-blank, body.asib-studio-page { display: block !important; } #piccabee-root, .piccabee-root, .piccabee-marketing-root { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body { font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; color: var(--ink-2); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; padding: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Utility classes used across the app */ .grad-text { background: var(--accent-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .cool-text { background: var(--cool-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .num { font-variant-numeric: tabular-nums; } /* ============================================================ App shell ============================================================ */ .app-root { min-height: 100vh; background: var(--bg-page); color: var(--ink-2); } /* Bento canvas. The sidebar, topbar and every content card become discrete tiles floating on a sunken surface, rather than panels flush against each other. Only the two dashboard shells use .layout (marketing has its own), so this is scoped to the app without touching the public site. The canvas being darker than the tiles is what does the work: it is also what finally gives the glass chrome something other than flat white behind it, so the sidebar and topbar read as glass even before anything scrolls. */ .layout { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg-sunken); padding: var(--bento-gap); gap: var(--bento-gap); } .layout--collapsed { grid-template-columns: 72px 1fr; } .layout--marketing { grid-template-columns: 1fr; } .main-col { display: flex; flex-direction: column; min-width: 0; gap: var(--bento-gap); } /* ============================================================ Sidebar ============================================================ */ /* Light glass, same language as the marketing header's .pb-nav pill. The layered fill is doing real work, not decoration. On desktop the sidebar sits in a grid column over the flat white page, so backdrop-filter alone has nothing to refract and the panel would read as plain white — the accent blooms give it colour of its own, and the diagonal sheen gives it the direction-of-light that makes it read as glass rather than as tinted paper. The blur still earns its keep on mobile, where this is a drawer floating over page content. Same two-layer approach as --cfk-glass in the editor. */ .sidebar { background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.30) 42%, rgba(255,255,255,.58)), radial-gradient(120% 58% at 0% 0%, rgba(245,158,11,.20), transparent 62%), radial-gradient(110% 55% at 8% 54%, rgba(236,72,153,.17), transparent 64%), radial-gradient(120% 52% at 0% 100%, rgba(99,102,241,.15), transparent 62%), rgba(255,255,255,.55); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-2xl); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 20px rgba(20,16,40,.06); color: var(--ink-2); display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; position: sticky; top: var(--bento-gap); height: calc(100vh - (var(--bento-gap) * 2)); overflow-y: auto; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sidebar { background: #fbfaf8; } } @media (prefers-reduced-transparency: reduce) { .sidebar { background: #fbfaf8; backdrop-filter: none; -webkit-backdrop-filter: none; } } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; } .sidebar__plan { margin: 8px 4px 16px; padding: 14px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(236,72,153,0.18)); border: 1px solid rgba(236,72,153,0.25); display: flex; flex-direction: column; gap: 10px; } .sidebar__plan-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .sidebar__plan-name { font-weight: 600; font-size: 15px; color: var(--ink-1); } .sidebar__plan-meter { height: 6px; background: rgba(20,16,40,0.10); border-radius: var(--r-full); overflow: hidden; margin-top: 2px; } .sidebar__plan-fill { height: 100%; background: var(--accent-gradient); } .sidebar__plan-text { font-size: 11px; color: var(--ink-3); } .sidebar__plan-cta { margin-top: 4px; font-size: 12px; color: var(--accent-solid); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .sidebar__section { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); /* Matches the nav pill's inner padding so labels and items share a left edge. */ padding: 16px 14px 6px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 12px; /* Wider sides than the old 10px: a pill needs room inside the curve or the icon crowds the edge. */ padding: 9px 14px; border-radius: var(--r-full); color: var(--ink-3); font-size: 14px; font-weight: 500; transition: background 120ms, color 120ms; position: relative; cursor: pointer; } .nav-item:hover { background: rgba(20,16,40,0.05); color: var(--ink-1); } /* Tinted glass pill, not an opaque chip: the white sheen over a translucent indigo wash keeps the panel's blooms visible through it, so the highlight still reads as glass rather than as a solid sticker laid on top. The old left accent rail is gone on purpose — it sat outside the shape at `left: -14px`, which reads as detached once the highlight is a pill. The tinted pill carries the wayfinding on its own now. */ .nav-item--active { color: var(--nav-active-ink); background: linear-gradient(150deg, rgba(255,255,255,.45), rgba(255,255,255,.10) 55%, rgba(255,255,255,.30)), var(--nav-active-tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(79,70,229,.16); } .nav-item svg { flex-shrink: 0; } .nav-item__badge { margin-left: auto; background: var(--accent-gradient); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-full); } .sidebar__user { margin-top: auto; padding: 10px 8px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(20,16,40,0.08); padding-top: 14px; } .sidebar__user-avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--accent-gradient); display: grid; place-items: center; font-weight: 600; color: #fff; font-size: 13px; } .sidebar__user-meta { font-size: 13px; line-height: 1.25; min-width: 0; } .sidebar__user-name { color: var(--ink-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__user-role { color: var(--ink-3); font-size: 11px; } /* ============================================================ Top bar ============================================================ */ /* Frosted strip, matching the sidebar's glass. This one is already sticky over scrolling content, so unlike the sidebar the blur has something real to refract and needs no accent bloom of its own. It is deliberately quieter than the sidebar too: one tinted glass surface per screen reads as chrome, two compete. The dropdowns that hang off this bar stay opaque — they are lists of text, and legibility beats translucency (same call --cfk-glass-strong makes in the editor). */ .topbar { height: 64px; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56)), rgba(255,255,255,.52); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-full); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 20px rgba(20,16,40,.06); display: flex; align-items: center; gap: 16px; /* A 64px-tall pill curves 32px in from each end, so the first and last controls need to clear that curve — 22px left them clipping into it. */ padding: 0 28px; position: sticky; top: var(--bento-gap); z-index: 20; flex: 0 0 auto; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: rgba(255,255,255,.96); } } @media (prefers-reduced-transparency: reduce) { .topbar { background: #fdfdfc; backdrop-filter: none; -webkit-backdrop-filter: none; } } .topbar .topbar__menu { display: none; } .topbar__title { font-weight: 600; font-size: 15px; } /* Whose shop this is, and who works here. Sits at the head of the bar, ahead of search, because it answers "where am I" — the question a counter clerk and an owner sharing one screen actually have. `min-width: 0` so a long business name truncates instead of squeezing the search box out. */ .topbar__shop { display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 260px; line-height: 1.25; } .topbar__shop-name { font-size: 14px; font-weight: 700; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__shop-staff { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__search { flex: 1; max-width: 480px; display: flex; align-items: center; gap: 8px; /* An inset well rather than an opaque grey pill — a solid fill would read as a flat patch stuck onto the glass. Focus goes near-opaque: you have to be able to read what you are typing. */ background: rgba(20,16,40,.045); border: 1px solid rgba(20,16,40,.05); border-radius: var(--r-full); /* Wider sides than the 8px-radius version needed: the curve now cuts in from both ends, so the search icon and the ⌘K chip would otherwise sit inside it. */ padding: 8px 16px; font-size: 13px; color: var(--ink-3); transition: background 120ms, border-color 120ms; } .topbar__search:focus-within { background: rgba(255,255,255,.92); border-color: var(--border-strong); box-shadow: var(--shadow-focus); } .topbar__search input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink-2); } .topbar__kbd { font-family: var(--font-mono); font-size: 10px; background: rgba(255,255,255,.78); border: 1px solid rgba(20,16,40,.09); /* Pill too — a 4px-radius rectangle inside a fully round field reads as a leftover from the old shape. */ border-radius: var(--r-full); padding: 2px 7px; color: var(--ink-4); } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .topbar__icon-btn { width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; color: var(--ink-3); transition: background 120ms, color 120ms; position: relative; } .topbar__icon-btn:hover { background: rgba(20,16,40,.05); color: var(--ink-2); } .topbar__notify-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent-end); box-shadow: 0 0 0 2px rgba(255,255,255,.85); } /* Spotlight search dropdown */ .topbar__spotlight { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(10,10,15,0.16); padding: 6px; z-index: 50; max-height: 360px; overflow-y: auto; } .topbar__spotlight-empty { padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; } .topbar__spotlight-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; } /* Driven by the active index, not :hover — the mouse writes to that index too, so exactly one row is ever highlighted whichever input moved last. */ .topbar__spotlight-item--active { background: var(--bg-soft); } /* Notification dropdown */ .topbar__notif-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(10,10,15,0.16); padding: 6px; z-index: 50; } .topbar__notif-head { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 6px; } .topbar__notif-empty { display: flex; align-items: center; gap: 8px; padding: 16px 10px; font-size: 13px; color: var(--ink-3); } .topbar__notif-item { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-1); cursor: pointer; } .topbar__notif-item:hover { background: var(--bg-soft); } /* ============================================================ Content surface ============================================================ */ /* Deliberately NOT a tile of its own. The cards, stats and tables inside are already self-contained bordered surfaces, so they become the compartments directly on the canvas — wrapping them in one big card would flatten the bento back into a single panel. Horizontal padding is 0 so those tiles line up with the topbar tile above them. */ .page { padding: 4px 0 26px; max-width: 1400px; width: 100%; margin: 0 auto; } .page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page__h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-1); } .page__sub { color: var(--ink-3); font-size: 14px; margin-top: 4px; } /* ============================================================ Buttons ============================================================ */ /* Fully round, every variant. Sides get a little wider than the old 8px-radius version needed — a pill with tight sides reads cramped, because the curve eats into the space the label used to have. This also brings the app in line with the marketing site, whose .pb-btn and nav CTA were already 999px. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--r-full); font-weight: 500; font-size: 14px; transition: transform 80ms, box-shadow 120ms, background 120ms, color 120ms, border-color 120ms; border: 1px solid transparent; white-space: nowrap; } /* Press feedback: a scale reads as the control yielding under the finger, where a 1px nudge mostly reads as a rendering wobble. */ .btn:active { transform: scale(0.97); } .btn--primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(236, 72, 153, 0.25); } .btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 18px rgba(236, 72, 153, 0.35); } .btn--secondary { background: var(--ink-1); color: #fff; } .btn--secondary:hover { background: #1f1f24; } .btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--border); } .btn--ghost:hover { background: var(--bg-soft); } .btn--soft { background: var(--bg-soft); color: var(--ink-2); } .btn--soft:hover { background: var(--bg-sunken); } .btn--danger { background: var(--error); color: #fff; } .btn--lg { padding: 12px 26px; font-size: 15px; } .btn--sm { padding: 6px 14px; font-size: 13px; } /* Icon-only. The height has to be stated rather than left to padding: without it the box comes out wider than it is tall, and the inherited 999px radius then yields an oval instead of a circle. Pairs with .btn--sm for the smaller circle used on card action rows. */ .btn--icon { padding: 0; width: 36px; height: 36px; } .btn--icon.btn--sm { padding: 0; width: 30px; height: 30px; } /* ============================================================ Cards ============================================================ */ /* Bento compartments. Rounder than the old 12px so they read as tiles against the sunken canvas, but a step tighter than the 20px chrome — nested radii descending outside-in is what keeps the nesting legible. */ .card { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); } .card--surface { background: var(--bg-surface); } .card--padded { padding: 20px; } /* ============================================================ Badges & chips ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); letter-spacing: 0.02em; } .badge--grad { background: var(--accent-gradient); color: #fff; } .badge--cool { background: var(--cool-gradient); color: #fff; } .badge--success { background: var(--success-soft); color: #065f46; } .badge--warning { background: var(--warning-soft); color: #92400e; } .badge--info { background: var(--info-soft); color: #1e40af; } /* Ready: the pipeline's "act now" state — Confirmed's soft blue at full strength. Deliberately not --cool-gradient: that pill is the Pro tier's. */ .badge--ready { background: #1e40af; color: #fff; } .badge--neutral { background: var(--bg-soft); color: var(--ink-3); } .badge--outline { border: 1px solid var(--border); color: var(--ink-3); background: var(--bg-page); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-page); font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; } .chip:hover { background: var(--bg-soft); } .chip--active { background: var(--ink-1); color: #fff; border-color: var(--ink-1); } .chip--count { background: var(--bg-soft); padding: 1px 6px; border-radius: var(--r-full); font-size: 10px; color: var(--ink-3); } .chip--active .chip--count { background: rgba(255,255,255,0.18); color: #fff; } /* ============================================================ Forms ============================================================ */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 13px; font-weight: 500; color: var(--ink-2); } .field__hint { font-size: 12px; color: var(--ink-3); } .input, .textarea, .select { background: var(--bg-page); border: 1px solid var(--border); font-size: 14px; color: var(--ink-1); transition: border-color 120ms, box-shadow 120ms; outline: none; width: 100%; } /* Single-line controls take the pill. Sides widen with the radius so the text and the caret clear the curve instead of starting inside it. */ .input, .select { border-radius: var(--r-full); padding: 10px 18px; } /* A textarea is deliberately NOT a pill. The radius is half the height on a single-line box, but on a tall one it bows the left and right edges inward and crowds the first and last lines against the curve. It takes the card radius instead, so it still reads as part of the same rounded family. */ .textarea { border-radius: var(--r-xl); padding: 12px 14px; } .input:focus, .textarea:focus, .select:focus { border-color: var(--accent-end); box-shadow: var(--shadow-focus); } .input--lg { padding: 14px 22px; font-size: 15px; } /* ============================================================ Skeleton shimmer ============================================================ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-sunken) 50%, var(--bg-soft) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r-md); } /* ============================================================ Dashboard specific ============================================================ */ /* Bento spans rather than four equal quarters. A 5-column track lets 2+3 fill the first row and 3+2 the second, so the wide slot alternates corner to corner instead of every tile carrying identical weight. Children 2 and 3 take the wide slots because that is where the sparkline stats sit on both overview pages, and a sparkline is the one thing here that genuinely wants horizontal room. On the pages whose middle stats are plain numerals it simply reads as deliberate asymmetry. All three call sites pass exactly four children; the `span 2` default means a fifth would open a third row rather than break the grid. */ .dash-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; } .dash-grid > * { grid-column: span 2; } .dash-grid > :nth-child(2), .dash-grid > :nth-child(3) { grid-column: span 3; } .stat { position: relative; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px 18px 14px; overflow: hidden; isolation: isolate; } .stat__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; } .stat__value { font-family: var(--font-sans); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; line-height: 1.05; margin-top: 12px; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; } .stat__value--grad { background: var(--accent-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .stat__delta { font-size: 12px; font-weight: 600; color: var(--success); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; } .stat__delta--down { color: var(--error); } .stat__sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; } .stat__spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 14px; /* A sparkline is a small chart, and its bars are flex:1 — so without a ceiling it inherits the tile's width. In the super-admin console the tiles are ~690px, which turned 14 bars into 46px-wide, 4px-tall dashes: a row of horizontal strips that read as a rendering fault rather than 14 days of activity. Capped so the chart keeps its shape whatever it is dropped into. */ max-width: 180px; } .stat__spark-bar { flex: 1; background: var(--bg-soft); border-radius: 2px; min-height: 4px; position: relative; overflow: hidden; } .stat__spark-bar--on::after { content: ""; position: absolute; inset: 0; background: var(--accent-gradient); border-radius: 2px; } .stat__ring { position: absolute; top: 16px; right: 16px; } .section-head { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 14px; gap: 12px; } .section-head__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); } .section-head__link { font-size: 13px; color: var(--ink-3); font-weight: 500; } .section-head__link:hover { color: var(--ink-1); } .draft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .draft-card { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 160ms, box-shadow 160ms, border-color 160ms; } .draft-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .draft-card__thumb { aspect-ratio: 4 / 3; background: var(--bg-soft); position: relative; overflow: hidden; } .draft-card__body { padding: 14px 16px; } .draft-card__title { font-weight: 600; font-size: 14px; color: var(--ink-1); } .draft-card__meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; display: flex; justify-content: space-between; } .split-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } .activity { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; } .activity__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .activity__item:last-child { border-bottom: none; } .activity__icon { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; background: var(--bg-soft); color: var(--ink-3); } .activity__icon--grad { background: var(--accent-gradient-soft); color: var(--accent-end); } .activity__text { color: var(--ink-2); line-height: 1.4; } .activity__text b { color: var(--ink-1); font-weight: 600; } .activity__time { color: var(--ink-4); font-size: 11px; margin-top: 2px; } /* ============================================================ Templates ============================================================ */ .tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .tpl-card { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 160ms, box-shadow 160ms, border-color 160ms; cursor: pointer; } .tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .tpl-card__thumb { aspect-ratio: 3 / 4; background: var(--bg-soft); position: relative; overflow: hidden; } /* --------------------------------------------------------------- MASONRY Cards hold real invitations, and those come portrait, landscape and square. Forcing every thumb into one 3/4 box meant an off-ratio design was shown letterboxed over a blurred copy of itself — the card wasted height and the artwork read smaller than it is. Real grid, not CSS columns: `columns` flows top-to-bottom per column, which scrambles a "newest first" list. Here each card keeps its place in reading order and simply spans however many 4px rows it needs; the span is measured in JS (useMasonry) because the height depends on the image ratio AND on how many lines the title wraps to. --------------------------------------------------------------- */ .tpl-grid--masonry { grid-auto-rows: 4px; align-items: start; /* Row gap must be ZERO: with 4px implicit rows, an 18px gap would be inserted between every one of them and a card spanning 60 rows would grow by a metre. The vertical rhythm comes from the card's own margin-bottom instead, which the span calculation accounts for. */ row-gap: 0; column-gap: 18px; } .tpl-grid--masonry > * { margin-bottom: 18px; } /* The thumb takes the artwork's own ratio; JS stamps it from the loaded image. Until then this keeps the card from collapsing to nothing. */ .tpl-grid--masonry .tpl-card__thumb { aspect-ratio: 3 / 4; } /* Nothing is letterboxed any more, so the blurred backdrop has no gap to fill — it only muddied the artwork's edges. */ .tpl-grid--masonry .thumb-fill__bg { display: none; } /* Before the spans are measured, keep the grid from stacking every card on row 1 (which flashes as a pile on first paint). */ .tpl-grid--masonry > * { grid-row-end: span 80; } /* Same treatment for the designs grid. Its own gap is 16px, and the hook reads that off the card rather than assuming the template grid's 18. */ .draft-grid--masonry { grid-auto-rows: 4px; align-items: start; row-gap: 0; column-gap: 16px; } .draft-grid--masonry > * { margin-bottom: 16px; grid-row-end: span 80; } .draft-grid--masonry .draft-card__thumb { aspect-ratio: 4 / 3; } .draft-grid--masonry .thumb-fill__bg { display: none; } /* Blurred-fill thumbnail: full design shown (contain) over a soft blurred backdrop, so no part of an invitation gets cropped regardless of its aspect ratio. Used by template cards + draft cards. */ .thumb-fill { position: absolute; inset: 0; overflow: hidden; } .thumb-fill__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(20px) brightness(0.9) saturate(1.1); transform: scale(1.15); } .thumb-fill__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); } .thumb-fill__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* Page-flip carousel for multi-page template thumbnails. Slides stack; only the active one is visible (opacity swap — cheap, no reflow). The chevrons/dots surface on card hover so grids stay calm at rest. */ .thumb-car { position: absolute; inset: 0; overflow: hidden; } .thumb-car__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .thumb-car__slide.is-active { opacity: 1; pointer-events: auto; } .thumb-car__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-full); border: none; cursor: pointer; background: rgba(10, 10, 15, 0.55); color: #fff; opacity: 0; transition: opacity 140ms ease, background 140ms ease; z-index: 2; } .thumb-car__nav--prev { left: 8px; } .thumb-car__nav--next { right: 8px; } .tpl-card:hover .thumb-car__nav, .draft-card:hover .thumb-car__nav, .thumb-car:hover .thumb-car__nav { opacity: 1; } .thumb-car__nav:hover { background: rgba(10, 10, 15, 0.8); } .thumb-car__dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 5px; z-index: 2; } .thumb-car__dot { width: 6px; height: 6px; border-radius: var(--r-full); border: none; padding: 0; cursor: pointer; background: rgba(10, 10, 15, 0.28); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); transition: background 140ms ease, transform 140ms ease; } .thumb-car__dot.is-active { background: rgba(10, 10, 15, 0.82); transform: scale(1.25); } .thumb-car__count { position: absolute; right: 8px; bottom: 6px; padding: 2px 7px; border-radius: var(--r-full); background: rgba(10, 10, 15, 0.55); color: #fff; font-size: 10px; font-weight: 500; opacity: 0; transition: opacity 140ms ease; z-index: 2; pointer-events: none; } .tpl-card:hover .thumb-car__count, .thumb-car:hover .thumb-car__count { opacity: 1; } /* Draft cards keep a status-badge + progress row pinned to the thumb's bottom edge — lift the dots above it and drop the page counter (the progress pill already owns that corner). */ .draft-card .thumb-car__dots { bottom: 40px; } .draft-card .thumb-car__count { display: none; } .tpl-card__thumb-bg { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; text-align: center; } .tpl-card__lang-badge { position: absolute; top: 10px; left: 10px; background: rgba(10,10,15,0.85); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: var(--r-full); backdrop-filter: blur(8px); font-weight: 500; } .tpl-card__tier-badge { position: absolute; top: 10px; right: 10px; } .tpl-card__body { padding: 12px 14px; } .tpl-card__title { font-weight: 600; font-size: 14px; color: var(--ink-1); } .tpl-card__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; } /* Who designed it. A quieter step down from __sub — attribution, not something to compete with the template's own name. Truncates rather than wrapping the card taller than its neighbours in the grid. */ .tpl-card__by { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-4); margin-top: 5px; min-width: 0; } .tpl-card__by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpl-card--metadata .tpl-card__thumb { aspect-ratio: 5 / 4; } .tpl-card--metadata .tpl-card__body { padding: 14px; } .tpl-card--metadata .tpl-card__meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } /* ============================================================ Designs table ============================================================ */ .table { width: 100%; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; border-collapse: separate; border-spacing: 0; } .table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 12px 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border); } .table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink-2); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--bg-surface); } /* ============================================================ Settings tabs ============================================================ */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; } .tab { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tab--active { color: var(--ink-1); border-bottom-color: transparent; position: relative; } .tab--active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent-gradient); border-radius: 2px; } /* ============================================================ Editor wrapper ============================================================ */ .editor-shell { display: grid; grid-template-rows: 56px 1fr; height: 100vh; } .editor-topbar { background: var(--bg-page); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; } .editor-topbar__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); font-weight: 500; padding: 6px 10px; border-radius: var(--r-md); } .editor-topbar__back:hover { background: var(--bg-soft); color: var(--ink-1); } .editor-topbar__center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 10px; } .editor-topbar__title { font-size: 14px; font-weight: 600; color: var(--ink-1); } .editor-topbar__tenant { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 8px; border-radius: var(--r-full); background: var(--bg-soft); color: var(--ink-3); font-weight: 500; } .editor-topbar__tenant-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--accent-gradient); } .editor-topbar__actions { display: flex; gap: 8px; align-items: center; } .editor-canvas { background: var(--bg-sunken); display: grid; grid-template-columns: 64px 280px 1fr 320px; min-height: 0; overflow: hidden; } .editor-rail { background: var(--bg-page); border-right: 1px solid var(--border); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; } .editor-rail__btn { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-3); } .editor-rail__btn:hover { background: var(--bg-soft); color: var(--ink-1); } .editor-rail__btn--active { background: var(--bg-soft); color: var(--ink-1); } .editor-rail__btn--active::before { content: ""; position: absolute; width: 3px; height: 24px; background: var(--accent-gradient); border-radius: 2px; margin-left: -12px; } .editor-panel { background: var(--bg-page); border-right: 1px solid var(--border); padding: 18px 16px; overflow-y: auto; } .editor-stage { display: grid; place-items: center; padding: 32px; overflow: auto; background: radial-gradient(circle at 12px 12px, var(--bg-sunken) 1px, transparent 1.5px), var(--bg-soft); background-size: 24px 24px; } .editor-props { background: var(--bg-page); border-left: 1px solid var(--border); padding: 18px 16px; overflow-y: auto; } .editor-card-preview { aspect-ratio: 2 / 3; width: min(420px, 100%); background: linear-gradient(160deg, #faf5ec 0%, #fdf0e2 50%, #fcedf3 100%); border-radius: var(--r-lg); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(10,10,15,0.06); padding: 48px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } /* ============================================================ Marketing ============================================================ */ .mk-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .mk-nav__inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; } .mk-nav__links { display: flex; gap: 22px; margin-left: 28px; } .mk-nav__link { font-size: 14px; color: var(--ink-3); font-weight: 500; } .mk-nav__link:hover { color: var(--ink-1); } .mk-nav__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } .mk-section { padding: 80px 24px; } .mk-section__inner { max-width: 1200px; margin: 0 auto; } .hero { position: relative; padding: 88px 24px 80px; overflow: hidden; } .hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-full); background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--border); margin-bottom: 20px; } .hero__h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink-1); } .hero__sub { margin-top: 22px; font-size: 18px; color: var(--ink-3); max-width: 540px; line-height: 1.5; } .hero__ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero__trust { margin-top: 36px; display: flex; gap: 18px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; } .hero__visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-2xl); background: linear-gradient(180deg, var(--bg-surface), var(--bg-page)); border: 1px solid var(--border); box-shadow: var(--shadow-xl); overflow: hidden; } .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .problem-card { padding: 28px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-lg); } .problem-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin-bottom: 14px; } .problem-card__h { font-size: 18px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; } .problem-card__p { font-size: 14px; color: var(--ink-3); margin-top: 8px; line-height: 1.55; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .price-card { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; position: relative; transition: transform 160ms, box-shadow 160ms, border-color 160ms; } .price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .price-card--featured { border-color: transparent; background: linear-gradient(var(--bg-page), var(--bg-page)) padding-box, var(--accent-gradient) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); } .price-card__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: var(--accent-gradient); color: #fff; font-size: 11px; font-weight: 600; border-radius: var(--r-full); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .price-card__name { font-size: 18px; font-weight: 600; color: var(--ink-1); } .price-card__sub { font-size: 13px; color: var(--ink-3); } .price-card__price { display: flex; align-items: baseline; gap: 6px; } .price-card__amount { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-1); } .price-card__per { font-size: 13px; color: var(--ink-3); } .price-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .price-card__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.45; } .price-card__features svg { flex-shrink: 0; color: var(--accent-end); margin-top: 2px; } /* Pricing ribbon variants */ .price-card__ribbon--corner { top: 16px; left: auto; right: -8px; transform: rotate(0); border-radius: var(--r-md) 0 0 var(--r-md); } .price-card__ribbon--dot { top: 24px; left: 24px; transform: none; padding: 0; width: 8px; height: 8px; border-radius: 50%; text-indent: -9999px; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .testimonial { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .testimonial__quote { font-size: 15px; color: var(--ink-2); line-height: 1.5; } .testimonial__author { display: flex; align-items: center; gap: 12px; } .testimonial__avatar { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--accent-gradient); display: grid; place-items: center; font-weight: 600; color: #fff; font-size: 13px; } .testimonial__name { font-size: 13px; font-weight: 600; color: var(--ink-1); } .testimonial__role { font-size: 12px; color: var(--ink-3); } .faq { max-width: 760px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--border); padding: 18px 0; cursor: pointer; } .faq__q { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font-size: 16px; font-weight: 500; color: var(--ink-1); } .faq__a { font-size: 14px; color: var(--ink-3); margin-top: 10px; line-height: 1.55; } footer.mk-footer { background: var(--bg-surface); border-top: 1px solid var(--border); padding: 56px 24px 28px; } .mk-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; } .mk-footer__col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; } .mk-footer__col a { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; } .mk-footer__col a:hover { color: var(--accent-end); } .mk-footer__bot { max-width: 1200px; margin: 36px auto 0; border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-4); } /* ============================================================ Auth ============================================================ */ .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .auth-form-side { padding: 64px; display: flex; flex-direction: column; justify-content: center; max-width: 560px; width: 100%; margin: 0 auto; } .auth-aside { background: var(--ink-1); color: #fff; padding: 64px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .step-pips { display: flex; gap: 8px; margin-bottom: 32px; } .step-pip { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--bg-soft); } .step-pip--active { background: var(--accent-gradient); } .step-pip--done { background: var(--ink-2); } /* ============================================================ Toast + Empty ============================================================ */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink-1); color: #fff; padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); z-index: 100; animation: toast-in 200ms ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .empty { text-align: center; padding: 64px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--bg-surface); } .empty__title { font-weight: 600; font-size: 16px; color: var(--ink-1); margin-top: 16px; } .empty__sub { font-size: 14px; color: var(--ink-3); margin-top: 6px; max-width: 360px; margin-left: auto; margin-right: auto; } .empty__actions { margin-top: 20px; display: flex; gap: 10px; justify-content: center; } /* ============================================================ Subscription + Settings utility ============================================================ */ .meter { height: 8px; background: var(--bg-soft); border-radius: var(--r-full); overflow: hidden; margin-top: 8px; } .meter__fill { height: 100%; background: var(--accent-gradient); } /* ============================================================ Landing section headings — the "editorial console" rhythm: a mono spec-sheet marker, an oversized headline, one paragraph. ============================================================ */ .sec-num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #b45309; margin-bottom: 14px; } .sec-h2 { margin: 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--ink-1); } .sec-p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-3); max-width: 56ch; } /* ============================================================ Header — the design's floating glass pill. Replaces the old full-width .mk-nav bar entirely. ============================================================ */ .pb-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 14px 20px 0; } .pb-nav { width: 100%; max-width: 1240px; display: flex; align-items: center; gap: 28px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 1px 0 rgba(20,16,40,.04), inset 0 1px 0 rgba(255,255,255,.7); transition: box-shadow .3s ease; } .pb-nav__brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; } .pb-nav__links { display: flex; gap: 26px; margin-left: 8px; } .pb-nav__link { font-size: 14.5px; font-weight: 500; color: var(--ink-3); text-decoration: none; } .pb-nav__link:hover { color: var(--ink-1); } .pb-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .pb-nav__ghost, .pb-nav__cta { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14.5px; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 44px; } .pb-nav__ghost { padding: 0 18px; font-weight: 600; color: var(--ink-2); border: 1px solid rgba(20,16,40,.12); background: transparent; } .pb-nav__cta { padding: 0 20px; font-weight: 700; color: #fff; border: none; background-image: var(--accent-gradient); box-shadow: 0 8px 24px rgba(236,72,153,.28); } /* The signed-in shop's own name, where "Log in" sits for everyone else. Truncates rather than pushing the button off a narrow header — a long business name is the common case, not the exception. */ .pb-nav__shop { font-size: 14px; font-weight: 700; color: var(--ink-2); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1099px) { .pb-nav__links { display: none; } } @media (max-width: 600px) { .pb-navbar { padding: 10px 12px 0; } .pb-nav { gap: 10px; padding: 8px 8px 8px 14px; } .pb-nav__ghost { display: none; } .pb-nav__shop { display: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pb-nav { background: rgba(255,255,255,.92); } } @media (prefers-reduced-transparency: reduce) { .pb-nav { background: rgba(255,255,255,.94); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ============================================================ Landing hero — asymmetric split with a cropped console panel ============================================================ */ .pb-hero-wrap { position: relative; overflow: hidden; padding: 150px 0 40px; min-height: 760px; background: var(--bg-page); } .pb-orb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .pb-orb--1 { top: 40px; right: -140px; width: 640px; height: 640px; filter: blur(60px); background: radial-gradient(closest-side, rgba(245,158,11,.44), rgba(236,72,153,.24) 55%, rgba(236,72,153,0) 75%); } .pb-orb--2 { top: 420px; right: 180px; width: 480px; height: 480px; filter: blur(64px); background: radial-gradient(closest-side, rgba(99,102,241,.32), rgba(13,148,136,.20) 55%, rgba(13,148,136,0) 75%); } .pb-orb--3 { top: 240px; left: -180px; width: 420px; height: 420px; filter: blur(60px); background: radial-gradient(closest-side, rgba(245,158,11,.18), rgba(245,158,11,0) 72%); } .pb-hero-grid { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-start; gap: 24px; } .pb-hero-copy { flex: 0 1 620px; min-width: 0; padding-top: 26px; } .pb-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 26px; } .pb-hero-h1 { margin: 0; font-size: clamp(42px, 6.6vw, 92px); line-height: .98; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; } .pb-specimen { margin-top: 22px; font-family: var(--font-tamil), var(--font-deva), serif; font-size: clamp(19px, 2.1vw, 27px); font-weight: 600; line-height: 1.5; background-image: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .pb-hero-sub { margin: 22px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--ink-3); max-width: 54ch; } .pb-hero-fine { margin-top: 20px; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--ink-4); text-transform: uppercase; } .pb-cta-primary, .pb-cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; font-size: 16px; font-family: inherit; cursor: pointer; text-decoration: none; will-change: transform; } .pb-cta-primary { padding: 0 30px; font-weight: 700; color: #fff; border: none; background-image: var(--accent-gradient); box-shadow: 0 14px 34px rgba(236,72,153,.30); } .pb-cta-secondary { padding: 0 26px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--border-strong); background: var(--bg-page); } .pb-console-wrap { flex: 1 1 auto; position: relative; min-height: 620px; min-width: 0; align-self: stretch; } /* Tilt on the wrapper; the glass child keeps its backdrop-filter. */ .pb-console-tilt { position: absolute; top: 36px; right: -120px; width: 680px; transform: rotate(-1.2deg); will-change: transform; } .pb-console { border-radius: 22px; background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 12px 40px rgba(20,16,40,.10), inset 0 1px 0 rgba(255,255,255,.7); } .pb-console__bar { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(20,16,40,.08); } .pb-dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex: 0 0 9px; } .pb-console__title { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--ink-2); text-transform: uppercase; } .pb-console__saved { margin-left: auto; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; color: var(--ink-4); } .pb-console__body { display: grid; grid-template-columns: 1fr 218px; gap: 18px; padding: 20px 22px; } .pb-console__card { background: #fff7ed; border: 1px solid #f3e0c8; border-radius: 12px; padding: 30px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; min-height: 330px; justify-content: center; } .pb-console__card-kicker { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; letter-spacing: .28em; color: #b45309; } .pb-console__rule { width: 44px; height: 1px; background: #d97706; } .pb-console__names { font-family: var(--font-tamil), serif; font-size: 34px; font-weight: 700; color: #431407; line-height: 1.35; } .pb-console__date { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .22em; color: #92400e; } .pb-console__side { display: flex; flex-direction: column; font-family: var(--font-label); font-weight: 600; } .pb-console__spec { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(20,16,40,.07); } .pb-console__spec span { font-size: 10px; letter-spacing: .14em; color: var(--ink-4); } .pb-console__spec b { font-size: 11.5px; color: var(--ink-2); } .pb-console__shared { margin-top: 14px; padding: 12px; border-radius: 10px; background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.25); } .pb-console__shared-k { font-size: 10px; letter-spacing: .12em; color: #047857; } .pb-console__shared-v { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); margin-top: 5px; font-weight: 600; } .pb-console__shared-s { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .pb-console__export { margin-top: 14px; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: #fff; background-image: var(--cool-gradient); } .pb-console__langs { display: flex; gap: 8px; padding: 0 22px 20px; flex-wrap: wrap; } .pb-console__lang { font-family: var(--font-tamil), serif; font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(20,16,40,.14); color: var(--ink-3); } .pb-console__lang--on { background: var(--ink-2); color: #fff; border-color: transparent; } /* Left progress rail */ .pb-rail-left { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 18px; align-items: center; } .pb-rail-left a { font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: .12em; color: var(--ink-4); text-decoration: none; transition: color .3s ease; } /* Trust marquee */ .pb-marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-surface); overflow: hidden; } .pb-marquee__mask { display: flex; padding: 22px 0; } .pb-marquee__track { display: flex; align-items: center; white-space: nowrap; will-change: transform; } .pb-marquee__item { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; margin-right: 34px; } /* Horizontal scroll-snap rail */ .pb-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 44px max(24px, calc((100vw - 1192px) / 2)) 10px; scroll-padding-left: max(24px, calc((100vw - 1192px) / 2)); scrollbar-width: none; } .pb-rail::-webkit-scrollbar { display: none; } .pb-rail-card { flex: 0 0 300px; height: 410px; scroll-snap-align: start; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft); } .pb-rail-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-rail-card--cta { border: 1px dashed var(--border-strong); background: var(--bg-surface); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; } .pb-rail-card__k { font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--ink-4); text-transform: uppercase; } .pb-rail-card__h { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-2); } .pb-rail-card__f { font-family: var(--font-label); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; color: var(--ink-4); } .pb-rail-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-page); font-size: 17px; color: var(--ink-2); cursor: pointer; } @media (max-width: 1199px) { .pb-rail-left { display: none; } } @media (max-width: 1023px) { .pb-hero-grid { flex-direction: column; } .pb-hero-copy { flex: 1 1 auto; } /* The console stops bleeding off-screen and becomes a normal card. */ .pb-console-wrap { min-height: 0; width: 100%; } .pb-console-tilt { position: static; width: 100%; transform: none; } .pb-console__body { grid-template-columns: 1fr; } .pb-hero-wrap { min-height: 0; padding: 120px 0 40px; } } /* ============================================================ Landing sections — ported from Home.dc.html ============================================================ */ .pb-sec { padding: 110px 0; } .pb-sec--white { background: var(--bg-page); } .pb-sec--soft { background: var(--bg-soft); padding: 100px 0; } .pb-sec--surface { background: var(--bg-surface); } .pb-sec--dark { background: var(--ink-1); color: #fff; } .pb-sec__head { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .sec-num--light { color: var(--accent-start); } /* 02 — before / after */ .pb-compare2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; } .pb-cmp { background: var(--bg-page); border: 1px solid var(--border); border-radius: 18px; padding: 34px; } .pb-cmp--good { border-color: var(--success); box-shadow: 0 12px 40px rgba(16,185,129,.10); } .pb-cmp__k { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; color: var(--ink-4); text-transform: uppercase; } .pb-cmp__k--good { color: #047857; } .pb-cmp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .pb-cmp__dot--good { background: var(--success); } .pb-cmp__specimen { margin-top: 26px; font-family: var(--font-tamil), serif; font-size: clamp(24px, 2.6vw, 34px); color: var(--ink-1); line-height: 1.6; } .pb-cmp__specimen--bad { color: var(--ink-3); letter-spacing: .06em; } .pb-cmp__note { margin-top: 24px; font-size: 14px; line-height: 1.55; color: var(--ink-3); } .pb-scriptchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .pb-scriptchips span { font-size: 14px; padding: 10px 18px; border-radius: 999px; background: var(--bg-page); border: 1px solid var(--border); color: var(--ink-2); } /* 03 — spec grid */ .pb-specgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: #27272a; border: 1px solid #27272a; border-radius: 16px; overflow: hidden; margin-top: 48px; } .pb-specgrid2 > div { background: var(--ink-1); padding: 30px 26px; } .pb-specgrid2__k { font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: #71717a; text-transform: uppercase; } .pb-specgrid2__v { font-family: var(--font-label); font-size: 30px; font-weight: 600; color: #fff; margin-top: 12px; } .pb-specgrid2__n { font-size: 13px; color: var(--ink-4); margin-top: 8px; } /* 04 — steps */ .pb-step { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 34px 0; border-top: 1px solid var(--border); } .pb-step:last-child { border-bottom: 1px solid var(--border); } .pb-step__n { font-family: var(--font-label); font-size: 44px; font-weight: 600; color: var(--ink-5); line-height: 1; } .pb-step__h { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .pb-step__p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 56ch; } /* Pricing preview */ .pb-orb--p1 { top: 120px; left: 8%; width: 520px; height: 520px; filter: blur(70px); background: radial-gradient(closest-side, rgba(245,158,11,.34), rgba(236,72,153,.20) 55%, rgba(236,72,153,0) 75%); } .pb-orb--p2 { bottom: -80px; right: 6%; width: 560px; height: 560px; filter: blur(70px); background: radial-gradient(closest-side, rgba(99,102,241,.28), rgba(13,148,136,.18) 55%, rgba(13,148,136,0) 75%); } .pb-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; align-items: stretch; } .pb-pcard { position: relative; border-radius: 20px; padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 12px 40px rgba(20,16,40,.10), inset 0 1px 0 rgba(255,255,255,.7); } .pb-pcard--featured { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.75); box-shadow: 0 18px 54px rgba(236,72,153,.16), inset 0 1px 0 rgba(255,255,255,.8); } .pb-pcard__ribbon { position: absolute; top: -13px; left: 30px; padding: 6px 14px; border-radius: 999px; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; color: #fff; background-image: var(--accent-gradient); } .pb-pcard__name { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; } .pb-pcard__name--featured { color: #be185d; } .pb-pcard__price { display: flex; align-items: baseline; gap: 8px; } .pb-pcard__amt { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; } .pb-pcard__unit { font-size: 14px; color: var(--ink-3); } .pb-pcard__feat { font-size: 14.5px; line-height: 1.7; color: var(--ink-3); } .pb-pcard__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; color: var(--ink-2); border: 1px solid var(--border-strong); background: var(--bg-page); } .pb-pcard__cta--featured { color: #fff; border: none; background-image: var(--accent-gradient); box-shadow: 0 10px 26px rgba(236,72,153,.28); } .pb-underlink { font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid var(--accent-start); padding-bottom: 2px; } /* Testimonial rail */ .pb-quote { flex: 0 0 400px; scroll-snap-align: start; margin: 0; border: 1px solid var(--border); border-radius: 18px; padding: 32px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 22px; } .pb-quote blockquote { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); } .pb-quote figcaption { margin-top: auto; } .pb-quote__name { font-weight: 700; font-size: 15px; } .pb-quote__shop { font-family: var(--font-label); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; color: var(--ink-4); margin-top: 4px; text-transform: uppercase; } /* FAQ — native

, works without JS */ .pb-faq { border-top: 1px solid var(--border); } .pb-faq:last-of-type { border-bottom: 1px solid var(--border); } .pb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; font-size: 17px; font-weight: 600; min-height: 44px; list-style: none; cursor: pointer; } .pb-faq summary::-webkit-details-marker { display: none; } .pb-faq__ico { font-size: 22px; font-weight: 400; color: var(--ink-4); line-height: 1; transition: transform .3s ease; } .pb-faq[open] .pb-faq__ico { transform: rotate(45deg); } .pb-faq p { margin: 0; padding: 0 40px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-3); } /* Final CTA */ .pb-homecta { position: relative; padding: 120px 0; background: var(--ink-1); overflow: hidden; } .pb-orb--cta { top: -120px; right: 12%; width: 540px; height: 540px; filter: blur(70px); background: radial-gradient(closest-side, rgba(245,158,11,.34), rgba(236,72,153,.18) 55%, rgba(236,72,153,0) 75%); } .pb-homecta__h { margin: 0 auto; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; color: #fff; max-width: 20ch; } .pb-homecta__fine { margin-top: 18px; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: #71717a; text-transform: uppercase; } .pb-cta-onDark { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff; border: 1px solid #3f3f46; text-decoration: none; will-change: transform; } @media (max-width: 1023px) { .pb-sec { padding: 72px 0; } .pb-compare2 { grid-template-columns: 1fr; } .pb-step { grid-template-columns: 64px 1fr; gap: 16px; } .pb-step__n { font-size: 32px; } .pb-homecta { padding: 80px 0; } } /* ============================================================ Responsive ============================================================ */ /* Tablet landscape and below: sidebar becomes a drawer, hamburger appears */ @media (max-width: 1024px) { /* Tighter gutter — on a phone the bento gap is a luxury the content needs more than the canvas does. */ .layout { grid-template-columns: 1fr; padding: 10px; gap: 10px; } .main-col { gap: 10px; } .topbar { top: 10px; } /* The drawer is an overlay, not a tile: full height, flush to the edge, and square on the left where it meets the screen. The floating-tile geometry from the desktop rule has to be undone explicitly, or `height` and `top` fight the `inset` that stretches it. */ .sidebar { position: fixed; inset: 0 auto 0 0; top: 0; height: 100%; width: 280px; z-index: 60; border: none; border-radius: 0 var(--r-2xl) var(--r-2xl) 0; transform: translateX(-100%); transition: transform 240ms ease; box-shadow: var(--shadow-xl); } .sidebar--open { transform: translateX(0); } .topbar .topbar__menu { display: grid; } .scrim { position: fixed; inset: 0; background: rgba(10,10,15,0.5); z-index: 55; } /* Two even columns below 1024px — the 2/3 asymmetry needs five tracks to read as intentional, and at this width it just looks like a mistake. The span overrides have to be undone too, or every tile claims 2 of 2. */ .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-grid > *, .dash-grid > :nth-child(2), .dash-grid > :nth-child(3) { grid-column: span 1; } .tpl-grid { grid-template-columns: repeat(3, 1fr); } .split-2 { grid-template-columns: 1fr; } .hero__inner { grid-template-columns: 1fr; } .pricing-grid, .problem-grid, .testimonial-grid { grid-template-columns: 1fr; } .mk-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .draft-grid { grid-template-columns: repeat(2, 1fr); } .auth-split { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-form-side { padding: 40px 24px; } .editor-canvas { grid-template-columns: 56px 1fr; } .editor-panel, .editor-props { display: none; } } @media (max-width: 720px) { .topbar { padding: 0 16px; } .topbar__search { display: none; } /* The shop name survives on a phone; the staff line is the first thing to go, since the sidebar carries the same names one tap away. */ .topbar__shop { max-width: 150px; } .topbar__shop-staff { display: none; } .page { padding: 2px 0 26px; } .dash-grid { grid-template-columns: 1fr; } .tpl-grid { grid-template-columns: repeat(2, 1fr); } .draft-grid { grid-template-columns: 1fr; } .page__h1 { font-size: 24px; } .mk-section { padding: 56px 20px; } .hero { padding: 48px 20px; } .mk-nav__links { display: none; } .editor-rail { display: none; } .editor-canvas { grid-template-columns: 1fr; } .editor-topbar__center { display: none; } .table th, .table td { padding: 10px 12px; font-size: 12px; } } /* ---- Signup, ported from Signup.dc.html ------------------------------ The whole page shell lives here rather than inline in marketing.jsx, because every piece of it is conditional on there being room for two columns and an inline style cannot carry a media query. The design's generous 44px gutter is right on a laptop and eats a phone alive: at 375px it leaves 287px for a seven-field form. */ .su-page { min-height: 100vh; box-sizing: border-box; padding: 16px; background: #f2f1ef; } .su-card { position: relative; overflow: hidden; border-radius: 30px; background: #fff; box-shadow: 0 1px 0 rgba(20,16,40,.05), 0 30px 80px rgba(20,16,40,.08); display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 32px); } .su-form { padding: 16px 44px 14px; } .su-art { position: relative; padding: 14px; box-sizing: border-box; min-height: 420px; } .su-art__frame { position: sticky; top: 14px; height: calc(100vh - 60px); min-height: 420px; overflow: hidden; border-radius: 24px; background: #04061a; } /* The picture fills the panel here and becomes a band at the top of it on a phone, so its box cannot be an inline style. objectPosition sits left of centre because the monitor does. */ .su-art__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 48%; } /* Pinned over the picture and sized with it — the paint stays inline. */ .su-art__tint { position: absolute; inset: 0; pointer-events: none; } /* Glass floating on the photograph, bottom-left-to-right. */ .su-art__proof { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.26); } /* One column below 900px — a 468px form and a photograph will not share a tablet, let alone a phone. This replaces an inline `repeat(auto-fit, minmax(440px, 1fr))`, which flipped to one column on its own but kept the 440px floor while doing it: under a 472px viewport the card was wider than the page it sat in, and because body.asib-studio-page sets `overflow-x: hidden` the overhang was clipped rather than scrollable. That is what cut the Log in pill and the right edge of every field off on a phone. */ @media (max-width: 900px) { /* And with one column there is no box left to draw. The grey mat, the rounded corners and the shadow all exist to say "this card is a thing sitting on a page" — on a phone the card IS the page, the viewport is already its edge, and all three do is spend 32px of a 393px screen announcing a frame nobody can see the outside of. */ .su-page { padding: 0; background: #fff; } .su-card { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; min-height: 0; } /* Unpinned and full-bleed: sticky needs a second column to be pinned beside, and `calc(100vh - 60px)` of photograph after the button is a whole screen of scrolling. The panel stops being a slot the picture fills and becomes a picture with its text stacked underneath — the overlay is what fails first here, not the photograph. Two things break it at once: `cover` in a slot a phone has room for turns near-square and crops a 2800x2408 composition down to a corner of the bezel, and the proof card grows to 233px, which at 393px overlapped the badge above it by 15px. Both go away once the picture is a landscape band and the text is out from under it. `clamp(200px, 56vw, 380px)` is that band, and it is stated twice on purpose: as `padding-top` on the frame, which is what reserves the space the absolutely-positioned picture occupies, and as `height` on the picture and its tints, which is what makes them stop there. Both must agree. Measured 393x220 (1.8:1) on a phone, 820x380 on a tablet. */ .su-art { padding: 0; min-height: 0; } .su-art__frame { /* relative, not static: it has to stay the containing block the band and the badge are pinned to, but sticky's `top` has no business here. */ position: relative; height: auto; min-height: 0; padding-top: clamp(200px, 56vw, 380px); border-radius: 0; } .su-art__img, .su-art__tint { height: clamp(200px, 56vw, 380px); bottom: auto; } /* Out from under the picture and no longer a card: glass needs something behind it to be glass, and below the band there is only the panel's own #04061a. A bordered, shadowed card floating on near-black is a card on a card, so what is left is the text on the panel — which is also why the linear tint's 0.78 bottom stop now reads as the picture fading into it. The side padding tracks .su-form's gutter at each width so the stats line up with the fields above them. */ .su-art__proof { position: static; padding: 22px 44px 26px; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (max-width: 560px) { .su-form { padding: 16px 20px 18px; } .su-art__proof { padding: 22px 20px 26px; } /* The wordmark, "Already a member?" and the pill do not fit one line at 393px: flex shrinks the label to 110px and it wraps mid-phrase. The pill it introduces already reads "Log in", so the label is what goes. */ .su-member { display: none; } } /* ---- Signup form controls ------------------------------------------- The design's fields are near-invisible glass: a 1px white border on a white card reads as no border at all. These keep the glass fill but put a real stroke on it, and add the focus ring inline styles cannot carry. */ .su-input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(20,16,40,.18); background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); font-family: inherit; font-size: 14.5px; color: var(--ink-1); box-shadow: 0 2px 8px rgba(20,16,40,.05), inset 0 1px 0 rgba(255,255,255,.9); transition: border-color .15s ease, box-shadow .15s ease; } .su-input::placeholder { color: #a1a1aa; } .su-input:hover { border-color: rgba(20,16,40,.32); } .su-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.20), inset 0 1px 0 rgba(255,255,255,.9); } .su-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 0 0 6px 16px; } .su-hint { display: block; font-size: 11px; line-height: 1.4; color: var(--ink-4); margin: 3px 0 0 16px; } .su-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .su-grid2 { grid-template-columns: 1fr; } } /* ---------------- Keyboard focus ---------------- The clickable non-controls (nav items, cards, expandable table rows) are tabbable now; a visible ring is what makes that real. Mouse clicks stay clean — :focus-visible only paints for keyboard focus. */ .nav-item:focus-visible, .draft-card:focus-visible, .tpl-card:focus-visible { outline: 2px solid var(--accent-end); outline-offset: 2px; } .table tbody tr:focus-visible { outline: 2px solid var(--accent-end); outline-offset: -2px; } /* Error toast — same pill, failure paint. A failed delete must not share the shell (or the checkmark) of "Font removed." */ .toast--error { background: var(--error); } /* ============================================================ Motion ------------------------------------------------------------ Entrance motion earns its place in one situation here: the dashboard swaps skeletons for real content, and an instant swap reads as a glitch rather than an arrival. Everything below is transform + opacity only (compositor work, no layout), stays under 300ms, and degrades to a plain fade when the OS asks for reduced motion. Deliberately NOT animated: the ⌘K spotlight. A surface opened from the keyboard many times a day feels slower with an animation on it, however short. ============================================================ */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes num-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes dialog-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } /* Stats and draft cards rise as the data lands, 40ms apart. The delay ceiling is 200ms — stagger is decoration and must never be something the shop waits on. */ .dash-grid > .stat, .draft-grid > .draft-card { animation: rise-in 300ms var(--ease-out) both; } .dash-grid > .stat:nth-child(2), .draft-grid > .draft-card:nth-child(2) { animation-delay: 40ms; } .dash-grid > .stat:nth-child(3), .draft-grid > .draft-card:nth-child(3) { animation-delay: 80ms; } .dash-grid > .stat:nth-child(4), .draft-grid > .draft-card:nth-child(4) { animation-delay: 120ms; } .draft-grid > .draft-card:nth-child(5) { animation-delay: 160ms; } .draft-grid > .draft-card:nth-child(6) { animation-delay: 200ms; } /* The numeral settles in when the real figure replaces the loading dash. Deliberately NOT applied inside a gradient numeral: --grad paints the figure with background-clip:text and a transparent fill, and a transformed child gets composited into its own layer that the ancestor's clipped background does not reach — so the settle can play as the number simply not being there. The gradient stats in the super-admin console are exactly that case. They fade instead. */ .stat__value:not(.stat__value--grad) .stat__num { animation: num-settle 260ms var(--ease-out) both; } .stat__value--grad .stat__num { animation: fade-in 260ms var(--ease-out) both; } /* Modal: scrim fades, card scales from 0.96 — never from 0, which reads as appearing out of nothing. Origin stays centre: a dialog is not anchored to a trigger the way a popover is. */ .dialog-scrim { animation: fade-in 160ms var(--ease-out) both; } .dialog-card { animation: dialog-in 200ms var(--ease-out) both; } /* Loading spinner. Fast on purpose: a quicker spin makes the same wait feel shorter. */ .spinner { animation: spin 640ms linear infinite; flex-shrink: 0; } /* Lift-on-hover is a pointer affordance. On touch it fires on tap and sticks, which reads as a stuck card. */ @media (hover: none) { .draft-card:hover, .tpl-card:hover, .price-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { /* Gentler, not gone: the arrival still reads, the movement does not. The toast is in this list rather than switched off — a status that pops in with no fade is easier to miss, not calmer. */ .dash-grid > .stat, .draft-grid > .draft-card, .stat__num, .dialog-card, .toast { animation-name: fade-in; } /* A sequenced arrival is itself motion. Everything lands together. */ .dash-grid > .stat, .draft-grid > .draft-card { animation-delay: 0ms; } /* The shimmer is the one perpetual animation on the page, and it is pure decoration — it holds still here. */ .skeleton { animation: none; } .draft-card, .tpl-card, .price-card { transition: none; } .draft-card:hover, .tpl-card:hover, .price-card:hover { transform: none; } /* .btn:active deliberately keeps its 0.97 press. It is a direct answer to the finger rather than travel across the screen, and dropping it would leave the system with no press feedback at all. */ /* The spinner is status, not decoration — slowed, never stopped. */ .spinner { animation-duration: 1.4s; } }