/* ============================================================ Never Overpay: design system Clean, minimalist, inspired by ChatGPT/Claude layouts. Base: Bootstrap (utilities kept for legacy pages) + Tailwind utility classes (preflight disabled; see App.razor). ============================================================ */ :root { color-scheme: light; --ink: #16181d; --ink-2: #3f4450; --ink-3: #6b7280; --hint: #9ca1ab; --line: #dcdfe5; --line-soft: #e5e7ec; --hover: #e5e7ec; /* Page versus surface. The page is deliberately off-white so a full-screen view is not glaring; cards and inputs sit a shade brighter on top. */ --paper: #eff1f5; --surface: #f9fafb; --canvas: #e7e9ee; --sidebar: #eceef3; --nav-glass: rgba(239, 241, 245, .72); --accent: #047857; --accent-2: #0d9488; --accent-soft: #ecfdf5; --accent-line: #c7ece0; --accent-glow: rgba(4, 120, 87, .35); --solid: #16181d; --solid-ink: #ffffff; --ok: #12853f; --warn-bg: #fff7ed; --warn-ink: #9a3412; --danger: #dc2626; --danger-line: #fecaca; --danger-ink: #b91c1c; --tier-budget: #0e7490; --tier-upgrade: #b45309; --radius-lg: 1rem; --radius-xl: 1.5rem; --shadow-1: 0 1px 2px rgba(22, 24, 29, .06), 0 5px 14px -8px rgba(22, 24, 29, .18); --shadow-2: 0 6px 16px -10px rgba(22, 24, 29, .18), 0 22px 44px -28px rgba(22, 24, 29, .32); --shadow-3: 0 10px 24px -14px rgba(22, 24, 29, .22), 0 40px 76px -46px rgba(22, 24, 29, .48); --shadow-band: 0 -28px 54px -44px rgba(22, 24, 29, .55), 0 28px 54px -44px rgba(22, 24, 29, .55); --shadow-menu: 0 10px 40px -12px rgba(22, 24, 29, .18); /* Categorical chart palette. Segment 1 and 2 follow the accent preset; the rest are fixed hues so a doughnut stays readable in every theme. */ --chart-1: var(--accent); --chart-2: var(--accent-2); --chart-3: #3b82f6; --chart-4: #8b5cf6; --chart-5: #f59e0b; --chart-6: #f43f5e; /* Frosted panel that sits on the solid dashboard hero. */ --hero-panel: rgba(255, 255, 255, .12); --hero-panel-line: rgba(255, 255, 255, .22); } /* Dark palette. The theme script in App.razor always resolves an explicit data-theme ("light"/"dark"), so this single block covers both the OS preference and a manual choice. */ :root[data-theme="dark"] { color-scheme: dark; /* Softened, muted emerald. The previous #10b981 sat at full luminance and glared against a near-black page; lifting the surfaces and desaturating the accent keeps it readable without the glow. */ --ink: #e4e8ee; --ink-2: #c3cad4; --ink-3: #9aa3b0; --hint: #7f8894; --line: #333a45; --line-soft: #2a3038; --hover: #2a3038; --paper: #1b1f26; --surface: #20252d; --canvas: #171b21; --sidebar: #20252c; --nav-glass: rgba(27, 31, 38, .72); --accent: #4aa585; --accent-2: #63b8a0; --accent-soft: rgba(74, 165, 133, .16); --accent-line: rgba(74, 165, 133, .34); --accent-glow: rgba(74, 165, 133, .26); --solid: #333b47; --solid-ink: #f3f5f8; --ok: #58b98a; --warn-bg: #3a2412; --warn-ink: #fdba74; --danger: #ef4444; --danger-line: #6d2020; --danger-ink: #f87171; --tier-budget: #5fa8cf; --tier-upgrade: #cf9f52; --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 5px 14px -8px rgba(0, 0, 0, .55); --shadow-2: 0 6px 16px -10px rgba(0, 0, 0, .5), 0 22px 44px -28px rgba(0, 0, 0, .7); --shadow-3: 0 10px 24px -14px rgba(0, 0, 0, .55), 0 40px 76px -46px rgba(0, 0, 0, .85); --shadow-band: 0 -28px 54px -44px rgba(0, 0, 0, .75), 0 28px 54px -44px rgba(0, 0, 0, .75); --shadow-menu: 0 10px 40px -12px rgba(0, 0, 0, .6); /* Brighter, lower-saturation segment hues for the near-black page. */ --chart-3: #7aa7f7; --chart-4: #a78bfa; --chart-5: #e0a44e; --chart-6: #f08aa0; } /* Accent presets. `data-accent` on repaints every --accent-* action colour; the token defaults (emerald) apply when nothing is chosen. */ :root[data-accent="blue"] { --accent: #1d4ed8; --accent-2: #2563eb; --accent-soft: #eff6ff; --accent-line: #c7dbfe; --accent-glow: rgba(37, 99, 235, .32); } :root[data-accent="violet"] { --accent: #6d28d9; --accent-2: #7c3aed; --accent-soft: #f5f3ff; --accent-line: #ddd6fe; --accent-glow: rgba(124, 58, 237, .30); } :root[data-accent="rose"] { --accent: #be123c; --accent-2: #e11d48; --accent-soft: #fff1f2; --accent-line: #fecdd3; --accent-glow: rgba(225, 29, 72, .30); } :root[data-accent="amber"] { --accent: #b45309; --accent-2: #d97706; --accent-soft: #fffbeb; --accent-line: #fde68a; --accent-glow: rgba(217, 119, 6, .30); } :root[data-accent="slate"] { --accent: #334155; --accent-2: #475569; --accent-soft: #f1f5f9; --accent-line: #cbd5e1; --accent-glow: rgba(51, 65, 85, .28); } :root[data-theme="dark"][data-accent="blue"] { --accent: #6ea8fe; --accent-2: #93c5fd; --accent-soft: rgba(96, 165, 250, .16); --accent-line: rgba(96, 165, 250, .34); --accent-glow: rgba(96, 165, 250, .28); } :root[data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; --accent-2: #c4b5fd; --accent-soft: rgba(167, 139, 250, .16); --accent-line: rgba(167, 139, 250, .34); --accent-glow: rgba(167, 139, 250, .28); } :root[data-theme="dark"][data-accent="rose"] { --accent: #f08aa0; --accent-2: #f4a7b8; --accent-soft: rgba(240, 138, 160, .16); --accent-line: rgba(240, 138, 160, .34); --accent-glow: rgba(240, 138, 160, .28); } :root[data-theme="dark"][data-accent="amber"] { --accent: #e0a44e; --accent-2: #f0bd77; --accent-soft: rgba(224, 164, 78, .16); --accent-line: rgba(224, 164, 78, .34); --accent-glow: rgba(224, 164, 78, .28); } :root[data-theme="dark"][data-accent="slate"] { --accent: #94a3b8; --accent-2: #b0bccb; --accent-soft: rgba(148, 163, 184, .16); --accent-line: rgba(148, 163, 184, .34); --accent-glow: rgba(148, 163, 184, .28); } html, body { font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } /* ============================================================ Form controls & buttons (Bootstrap overrides) One token-based definition overrides every Bootstrap control, so an input anywhere looks like the chat composer and every button carries the theme accent instead of Bootstrap blue. Components keep using the plain Bootstrap classes; this is the single source of truth for their look. ============================================================ */ .form-control, .form-select { border: 1px solid var(--line); border-radius: .7rem; background-color: var(--surface); color: var(--ink); font-size: .9rem; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .form-control { padding: .5rem .75rem; } .form-select { padding: .5rem 2.25rem .5rem .75rem; } .form-control::placeholder { color: var(--hint); } .form-control:focus, .form-select:focus { border-color: var(--accent-2); background-color: var(--surface); color: var(--ink); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--paper); border-color: var(--line-soft); color: var(--ink-3); opacity: 1; } .form-control-sm, .form-select-sm { border-radius: .55rem; padding: .3rem .55rem; font-size: .82rem; min-height: 0; } .form-select-sm { padding-right: 1.9rem; } /* A native dropdown list is drawn by the browser, so only the rows can be themed - the popup frame is out of reach. The `option:checked` gradient is deliberate: on Windows the OS highlight paints over a plain background-color, so the selected row needs an image layer to pick up the accent tint. */ .form-select option, .form-select optgroup { background-color: var(--surface); color: var(--ink); font-family: inherit; font-size: .9rem; padding: .4rem .6rem; } .form-select option:checked { background: linear-gradient(0deg, var(--accent-soft) 0%, var(--accent-soft) 100%) var(--surface); color: var(--accent); font-weight: 600; } .form-select-sm option { font-size: .82rem; } /* Native toggles follow the accent. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } .btn { --bs-btn-border-radius: .7rem; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .95rem; --bs-btn-font-size: .88rem; border-radius: .7rem; font-weight: 500; transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); outline: none; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--solid-ink); --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2); --bs-btn-hover-color: var(--solid-ink); --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2); --bs-btn-active-color: var(--solid-ink); --bs-btn-disabled-bg: var(--hover); --bs-btn-disabled-border-color: var(--hover); --bs-btn-disabled-color: var(--hint); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent-line); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-2); --bs-btn-hover-color: var(--accent); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent-2); --bs-btn-active-color: var(--accent); --bs-btn-disabled-color: var(--hint); --bs-btn-disabled-border-color: var(--line); } .btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--hover); --bs-btn-active-border-color: var(--line); --bs-btn-active-color: var(--ink); --bs-btn-disabled-color: var(--hint); --bs-btn-disabled-border-color: var(--line); } .btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-color: var(--solid-ink); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: var(--solid-ink); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-active-color: var(--solid-ink); --bs-btn-disabled-bg: var(--hover); --bs-btn-disabled-border-color: var(--hover); --bs-btn-disabled-color: var(--hint); } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-outline-danger { --bs-btn-color: var(--danger-ink); --bs-btn-border-color: var(--danger-line); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--danger-ink); --bs-btn-hover-color: var(--danger-ink); --bs-btn-active-bg: var(--hover); --bs-btn-active-border-color: var(--danger-ink); --bs-btn-active-color: var(--danger-ink); --bs-btn-disabled-color: var(--hint); --bs-btn-disabled-border-color: var(--line); } .btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; } .btn-link { color: var(--accent); } /* Muted copy follows the token palette instead of Bootstrap's grey. */ .text-muted { color: var(--ink-3) !important; } /* Mode change: marketing page <-> app. Blazor swaps the DOM without a reload, which reads as a hard cut. A short branded veil covers the swap (ui.js raises it on an internal link click and drops it on enhancedload), and the incoming view settles in underneath it. */ .page-veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(56rem 38rem at 50% 38%, var(--accent-soft), transparent 72%), var(--paper); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; } .page-veil.is-on { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s; } .page-veil-mark { position: relative; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1.05rem; font-size: 1.55rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 20px 44px -18px var(--accent-glow); opacity: 0; transform: scale(.82); transition: transform .15s cubic-bezier(.16, 1, .3, 1), opacity .15s ease; } /* A ring breathing out of the mark, so the beat reads as "entering" rather than a blank flash of the page colour. */ .page-veil-mark::after { content: ""; position: absolute; inset: -.55rem; border-radius: 1.5rem; border: 1px solid var(--accent-line); opacity: 0; } .page-veil.is-on .page-veil-mark { opacity: 1; transform: scale(1); } .page-veil.is-on .page-veil-mark::after { animation: veil-ring .55s cubic-bezier(.16, 1, .3, 1) both; } @keyframes veil-ring { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } } @keyframes page-in { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } } html.page-enter .main-col, html.page-enter .marketing { animation: page-in .15s ease-out both; } /* Cross-document loads (a hard navigation) get the same treatment natively. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { html.page-enter .main-col, html.page-enter .marketing { animation: none; } .page-veil-mark, .page-veil.is-on .page-veil-mark { transition: none; transform: none; opacity: 1; } } a { color: var(--ink); } a:focus, button:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; } h1:focus { outline: none; } /* App shell -------------------------------------------------- */ .app-shell { display: flex; min-height: 100dvh; } .main-col { flex: 1; min-width: 0; position: relative; } /* Legacy (bootstrap) pages get comfortable padding. The padding lives on the column ONCE, not on each child: a page built from a component with several root elements (heading, intro, list) used to stack the gap between every one of them. */ .main-col { padding: 2.5rem 2rem; } /* Full-height app screens manage their own spacing. */ .main-col:has(> .chat-home), .main-col:has(> .research-layout), .main-col:has(> .research-shell) { padding: 0; } /* Long pages stay readable on a wide monitor. */ .main-col > :not(.landing):not(.research-shell):not(.research-layout):not(.marketing):not(.chat-home) { max-width: 72rem; } /* Chat home (/chats) ----------------------------------------- */ /* A plain window: the same composer idea as the landing hero, with no gradients, blobs or scroll cue. Colour comes only from the theme tokens. */ .chat-home { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; } .chat-home-inner { width: 100%; max-width: 46rem; text-align: center; } .chat-home-inner h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 750; letter-spacing: -.02em; margin: 0 0 1.4rem; color: var(--ink); } .chat-home-form { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: .5rem .5rem .4rem 1rem; text-align: left; transition: border-color .15s ease; } .chat-home-form:focus-within { border-color: var(--accent-2); } .chat-home-input { width: 100%; border: 0; outline: none; resize: none; background: transparent; padding: .6rem 0 .3rem; font-family: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink); } .chat-home-input::placeholder { color: var(--hint); } .chat-home-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 .25rem .1rem 0; } .chat-home-hint { font-size: .78rem; color: var(--hint); padding-left: .2rem; } .chat-home-send { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: .8rem; background: var(--accent); color: var(--solid-ink); cursor: pointer; transition: background .15s ease, opacity .15s ease; } .chat-home-send:hover:not(:disabled) { background: var(--accent-2); } .chat-home-send:disabled { background: var(--hover); color: var(--hint); cursor: default; } .chat-home-options { justify-content: center; margin-top: 1rem; } /* Sidebar ---------------------------------------------------- */ .sidebar { width: 288px; flex-shrink: 0; } .nav-toggle { display: none; } .sidebar-inner { position: fixed; top: 0; bottom: 0; left: 0; width: 288px; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); z-index: 40; } .sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .6rem; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--ink); } .brand-mark { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; color: #fff; font-size: .85rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 12px -3px var(--accent-glow); } .sidebar-close { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-3); padding: .3rem; border-radius: .45rem; transition: background .15s ease, color .15s ease; } .sidebar-close:hover { background: var(--hover); color: var(--ink); } .sidebar-close .icon { width: 1.05rem; height: 1.05rem; } .sidebar-scroll { flex: 1; overflow-y: auto; padding: 0 .6rem .6rem; scrollbar-width: thin; } .sidebar-new { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: 0 1px 2px rgba(22, 24, 29, .05); font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--ink); transition: background .15s ease, transform .15s ease; } .sidebar-new:hover { background: var(--line-soft); transform: translateY(-1px); } .sidebar-new.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .sidebar-nav { display: flex; flex-direction: column; gap: .15rem; margin-top: .8rem; } .sidebar-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: .6rem; font-size: .92rem; color: var(--ink-2); text-decoration: none; transition: background .15s ease; } .sidebar-item .icon { width: 1rem; height: 1rem; color: var(--ink-3); } .sidebar-item:hover:not(.is-disabled) { background: var(--hover); } .sidebar-item.is-disabled { color: var(--hint); cursor: default; } .sidebar-item.is-disabled .icon { color: var(--hint); opacity: .7; } .sidebar-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar-item.is-active .icon { color: var(--accent); } .soon { margin-left: auto; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .12rem .45rem; } .sidebar-section { margin: 1.1rem .75rem .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); } .sidebar-recent { list-style: none; padding: 0; margin: 0; } .sidebar-recent a { display: block; padding: .42rem .75rem; border-radius: .6rem; font-size: .9rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease; } .sidebar-recent a:hover { background: var(--hover); } .sidebar-recent a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } /* A chat row: turn state, title, and a pin toggle that appears on hover. */ .sidebar-recent li.chat-row { display: flex; align-items: center; border-radius: .6rem; padding-right: .2rem; transition: background .15s ease; } .sidebar-recent li.chat-row:hover { background: var(--hover); } .sidebar-recent li.chat-row > a { flex: 1 1 auto; min-width: 0; padding-left: .55rem; } .sidebar-recent li.chat-row > a:hover { background: transparent; } /* A search hit: the chat title with the matching line underneath, so similar titles can still be told apart (P2-M18). */ .sidebar-recent li.chat-hit { padding-bottom: .15rem; } .chat-hit-snippet { display: block; padding: 0 .75rem .3rem; font-size: .72rem; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* One marker slot: a spinner while running, red when failed, a dot when unread, blank once read. */ .chat-status { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: .75rem; height: .75rem; margin-left: .6rem; /* Keep the marker clear of the title's selected/hover pill. */ margin-right: .35rem; } .chat-status.is-thinking { border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .chat-status.is-failed, .chat-status.is-unread { width: .5rem; height: .5rem; border-radius: 50%; } .chat-status.is-failed { background: var(--danger); } .chat-status.is-unread { background: var(--accent); } .chat-pin { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: .45rem; background: transparent; color: var(--hint); cursor: pointer; } .chat-pin .icon { width: 14px; height: 14px; } /* The pin toggle stays hidden until the row is hovered. */ .chat-row:hover .chat-pin { display: inline-flex; } .chat-pin:hover { color: var(--accent); background: var(--accent-soft); } .chat-pin.is-pinned { color: var(--accent); } .sidebar-footer { position: relative; padding: .7rem .8rem .8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .55rem; } .sidebar-tools { display: flex; align-items: center; gap: .45rem; } .sidebar-account { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; } .account { display: flex; align-items: center; gap: .55rem; min-width: 0; } .avatar { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: .8rem; font-weight: 600; flex-shrink: 0; overflow: hidden; } .avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; } .account-id { display: flex; flex-direction: column; flex: 1; min-width: 0; } .account-name { font-size: .88rem; line-height: 1.25; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-tier { font-size: .74rem; line-height: 1.2; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Account menu (opens upward from the sidebar footer) -------- */ .account-menu-backdrop { position: fixed; inset: 0; z-index: 55; } .account-menu { position: absolute; left: .5rem; right: .5rem; bottom: calc(100% + .4rem); z-index: 60; display: flex; flex-direction: column; gap: .1rem; padding: .4rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow-2); animation: rise .14s ease both; } .account-menu-head { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: .6rem; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s ease; } .account-menu-head:hover { background: var(--hover); } .account-menu-id { display: flex; flex-direction: column; flex: 1; min-width: 0; } .account-menu-name { font-size: .9rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-tier { font-size: .74rem; color: var(--ink-3); } .account-menu-sep { height: 1px; margin: .3rem .35rem; background: var(--line); } .account-menu-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: .6rem; background: transparent; font-family: inherit; font-size: .88rem; color: var(--ink-2); text-align: left; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; } .account-menu-item:hover { background: var(--hover); color: var(--ink); } .account-menu-item .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--ink-3); } .account-menu-item:hover .icon { color: var(--accent); } .account-menu-item.danger, .account-menu-item.danger .icon { color: var(--danger-ink); } .account-menu-item.danger:hover { background: var(--hover); } /* Account settings dialog ------------------------------------ */ .account-btn { flex: 1; min-width: 0; padding: .2rem .3rem; border: 0; border-radius: .6rem; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s ease; } .account-btn:hover { background: var(--hover); } .account-chevron { width: .85rem; height: .85rem; margin-left: auto; flex-shrink: 0; color: var(--hint); } .account-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.5rem; } .account-modal:focus { outline: none; } .account-modal-backdrop { position: absolute; inset: 0; background: rgba(22, 24, 29, .45); } .account-modal-panel { position: relative; display: flex; flex-direction: column; width: min(52rem, 100%); height: min(38rem, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-3); animation: rise .18s ease both; } .account-modal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); } .account-modal-id { min-width: 0; } .account-modal-name { margin: 0; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-modal-sub { margin: .1rem 0 0; font-size: .82rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-modal-close { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: var(--ink-3); cursor: pointer; } .account-modal-close:hover { background: var(--hover); color: var(--ink); } .account-modal-body { display: grid; grid-template-columns: 12rem 1fr; flex: 1; min-height: 0; } .account-tabs { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .6rem; border-right: 1px solid var(--line); background: var(--paper); overflow-y: auto; } .account-tab { display: block; width: 100%; padding: .5rem .7rem; border: 0; border-radius: .6rem; background: transparent; font-family: inherit; font-size: .9rem; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; } .account-tab:hover { background: var(--hover); } .account-tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .account-pane { padding: 1.2rem 1.4rem 1.5rem; overflow-y: auto; } .account-pane h3 { margin: 0 0 .35rem; font-size: 1.1rem; } .account-hint { margin-top: 1rem; } .account-prefs { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; } .account-plan-name { margin: .5rem 0 0; font-size: 1.4rem; font-weight: 700; } .account-plan-price { margin: .1rem 0 .75rem; color: var(--ink-3); } .account-danger { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .account-danger h4 { margin: 0 0 .35rem; font-size: .95rem; color: var(--danger-ink); } /* Small confirm dialog (sign out) reuses the modal overlay. */ .confirm-modal-panel { position: relative; width: min(24rem, 100%); padding: 1.25rem 1.35rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-3); animation: rise .18s ease both; } .confirm-modal-title { margin: 0 0 .9rem; font-size: 1rem; font-weight: 650; color: var(--ink); } .confirm-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; } .confirm-modal-actions form { margin: 0; } @media (max-width: 640px) { .account-modal { padding: 0; } .account-modal-panel { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; } .account-modal-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .account-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .account-tab { width: auto; white-space: nowrap; } } /* Theme + language controls */ .anon-bar { position: fixed; top: 1rem; right: 1.25rem; z-index: 40; display: flex; align-items: center; gap: .5rem; } /* Theme toggle, language picker and sign-in share one control shape so the cluster reads as a single group. */ .icon-btn, .lang-picker > summary, .signin-corner, .mk-signin { display: inline-flex; align-items: center; justify-content: center; height: 2.15rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: .82rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .icon-btn { width: 2.15rem; padding: 0; } .icon-btn .icon { width: 1rem; height: 1rem; } .icon-btn:hover, .lang-picker > summary:hover, .signin-corner:hover, .mk-signin:hover { background: var(--hover); border-color: var(--line); color: var(--ink); } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .lang-picker { position: relative; display: inline-block; margin: 0; } .lang-picker > summary { gap: .45rem; padding-right: .7rem; list-style: none; user-select: none; } .lang-picker > summary::-webkit-details-marker { display: none; } .lang-picker > summary .icon { width: .8rem; height: .8rem; color: var(--ink-3); transition: transform .2s ease; } .lang-picker[open] > summary .icon { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60; min-width: 9rem; margin: 0; padding: .3rem; list-style: none; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); box-shadow: var(--shadow-menu); animation: rise .18s ease both; } /* In the settings pane the picker sits at the left edge, and the pane clips horizontal overflow, so a right-aligned menu would be cut off. Open to the right instead. */ .account-pane .lang-menu { right: auto; left: 0; } .lang-menu a { display: block; padding: .5rem .7rem; border-radius: .6rem; font-size: .85rem; color: var(--ink-2); text-decoration: none; } .lang-menu a:hover { background: var(--hover); color: var(--ink); } .lang-menu a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Appearance settings: theme, accent and language -------------- */ .appearance { display: grid; gap: 1.4rem; } .appearance h3 { margin: 0 0 .2rem; font-size: .95rem; } .appearance-hint { margin: 0 0 .6rem; font-size: .82rem; color: var(--ink-3); } .seg { display: inline-flex; gap: .15rem; padding: .2rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); } .seg-btn { padding: .4rem .85rem; border: 0; border-radius: .55rem; background: transparent; color: var(--ink-2); font-family: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; } .seg-btn:hover { background: var(--hover); color: var(--ink); } .seg-btn.is-active { background: var(--accent); color: var(--solid-ink); } .accent-swatches { display: flex; flex-wrap: wrap; gap: .5rem; } .accent-swatch { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .accent-swatch:hover { transform: translateY(-1px); } .accent-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .accent-swatch-dot { width: 1.25rem; height: 1.25rem; border-radius: 999px; } .accent-swatch[data-accent="emerald"] .accent-swatch-dot { background: #047857; } .accent-swatch[data-accent="blue"] .accent-swatch-dot { background: #2563eb; } .accent-swatch[data-accent="violet"] .accent-swatch-dot { background: #7c3aed; } .accent-swatch[data-accent="rose"] .accent-swatch-dot { background: #e11d48; } .accent-swatch[data-accent="amber"] .accent-swatch-dot { background: #d97706; } .accent-swatch[data-accent="slate"] .accent-swatch-dot { background: #475569; } /* Plan benefits, the upgrade button and the upgrade page ------- */ .check-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; } .check-list li { position: relative; padding-left: 1.4rem; font-size: .86rem; line-height: 1.45; color: var(--ink-2); } .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .btn-upgrade { display: block; width: 100%; padding: .7rem 1rem; font-size: .95rem; } .plan-note { margin: .6rem 0 0; font-size: .8rem; } .upgrade-head { display: flex; justify-content: center; margin: 1.4rem 0 1.9rem; } .seg-save { margin-left: .4rem; font-size: .72rem; opacity: .85; } .upgrade-cta { width: 100%; } /* Billing & checkout (UI scaffold for Stripe, plan 03) --------- */ .upgrade-page, .billing-page { max-width: 68rem; margin: 0 auto; } .upgrade-intro { text-align: center; margin-bottom: 1.25rem; } .upgrade-intro h1 { margin: 0 0 .35rem; } .billing-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .billing-card h2 { margin: 0; font-size: 1rem; } .billing-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .billing-badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 600; } .billing-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; } .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.1rem; align-items: start; } .checkout-summary { position: sticky; top: 1rem; } .checkout-total { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; margin: .5rem 0 .9rem; border-top: 1px solid var(--line); } .checkout-total strong { font-size: 1.1rem; } @media (max-width: 820px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } } /* Plan tab: billing rows ------------------------------------- */ .plan-billing { display: grid; gap: .1rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); } .plan-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .55rem; border-radius: .55rem; color: var(--ink-2); font-size: .88rem; text-decoration: none; transition: background .15s ease, color .15s ease; } .plan-link:hover { background: var(--hover); color: var(--ink); } .plan-link.danger { color: var(--danger-ink); } .plan-link-chevron { color: var(--hint); } /* Phone + email inputs ---------------------------------------- */ .phone-input { display: flex; gap: .5rem; } .phone-country { width: 7.5rem; flex-shrink: 0; } .phone-number { flex: 1; min-width: 0; } .field-error { margin: .35rem 0 0; color: var(--danger-ink); font-size: .78rem; } .form-control.is-invalid { border-color: var(--danger); } .form-control.is-invalid:focus { border-color: var(--danger); box-shadow: none; } .sidebar-open { display: none; position: fixed; top: .8rem; left: .9rem; z-index: 50; padding: .5rem; border-radius: .6rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; box-shadow: 0 4px 14px -6px rgba(22, 24, 29, .2); } /* Mobile sidebar behaviour (CSS only) */ @media (max-width: 767px) { .sidebar { width: 0; } .sidebar-inner { transform: translateX(-102%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); box-shadow: none; } .nav-toggle:checked + .sidebar-inner { transform: translateX(0); box-shadow: var(--shadow-menu); } .sidebar-close { display: inline-flex; } .sidebar-open { display: inline-flex; } .nav-toggle:checked ~ .sidebar-open { display: none; } } /* Desktop: the same header toggle collapses the sidebar to the edge; the floating button (shown once collapsed) brings it back. */ @media (min-width: 768px) { .sidebar { transition: width .24s ease; } .sidebar-inner { transition: transform .24s ease; } .app-shell:has(.nav-toggle:checked) .sidebar { width: 0; } .app-shell:has(.nav-toggle:checked) .sidebar-inner { transform: translateX(-102%); box-shadow: none; } .app-shell:has(.nav-toggle:checked) .sidebar-open { display: inline-flex; } } /* Small screens: tighter page padding, controls that wrap, calmer headings. */ @media (max-width: 640px) { .main-col { padding: 1.25rem 1rem; } .main-col h1 { font-size: 1.6rem; } .seg { flex-wrap: wrap; } } /* Dense tables scroll sideways inside their own box instead of the whole page. */ @media (max-width: 900px) { .admin-table, .usage-table { display: block; overflow-x: auto; white-space: nowrap; } } /* Landing page ----------------------------------------------- */ .landing { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem 3rem; overflow: hidden; } .landing-blob { position: absolute; border-radius: 999px; filter: blur(90px); opacity: .16; pointer-events: none; } .landing-blob.one { width: 420px; height: 420px; background: var(--accent); top: -120px; left: 12%; animation: drift 16s ease-in-out infinite; } .landing-blob.two { width: 360px; height: 360px; background: var(--accent-2); bottom: -100px; right: 10%; animation: drift 20s ease-in-out infinite reverse; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } } .landing-center { position: relative; width: 100%; max-width: 720px; text-align: center; } .landing-kicker { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .landing h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 1.1rem; } .landing h1 .grad { background: linear-gradient(100deg, var(--accent), var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Staggered entrance */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Answer bubbles fade up */ .landing-center > *, .landing-search, .landing-options { animation: rise .65s cubic-bezier(.22, .8, .36, 1) both; } .landing-center > :nth-child(1) { animation-delay: .05s; } .landing-center > :nth-child(2) { animation-delay: .12s; } .landing-center > :nth-child(3) { animation-delay: .19s; } .landing-center > :nth-child(4) { animation-delay: .28s; } .landing-center > :nth-child(5) { animation-delay: .4s; } .landing-options { animation-delay: .34s; } .landing-search { border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); padding: .35rem .4rem .35rem 1.15rem; box-shadow: 0 18px 50px -24px rgba(22, 24, 29, .25); transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; text-align: left; } .landing-search:focus-within { border-color: var(--accent-2); box-shadow: 0 20px 60px -20px var(--accent-glow); transform: translateY(-2px); } .landing-search textarea { width: 100%; border: 0; outline: none; resize: none; background: transparent; padding: .85rem 0 .35rem; font-size: 1rem; line-height: 1.5; color: var(--ink); } .landing-search textarea::placeholder { color: var(--hint); } .landing-search-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 .35rem .15rem 0; } .landing-search-hint { font-size: .78rem; color: var(--hint); padding-left: .35rem; } .landing-send { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .85rem; border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .landing-send:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 8px 20px -6px var(--accent-glow); } .landing-send:disabled { background: var(--hover); cursor: default; } /* Buttons ---------------------------------------------------- */ .btn-chat { border: 0; background: var(--accent); color: #fff !important; padding: .45rem 1rem; border-radius: .65rem; font-size: .88rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s ease, opacity .15s ease; } .btn-chat:hover:not(:disabled) { background: var(--accent-2); } .btn-chat:disabled { opacity: .45; cursor: default; } .btn-ghost { border: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: .32rem .8rem; border-radius: .65rem; font-size: .83rem; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .btn-ghost:hover:not(:disabled) { background: var(--line-soft); border-color: #dcdce2; } .btn-ghost:disabled { opacity: .45; cursor: default; } /* Research chat ---------------------------------------------- */ /* The chat column plus the dockable favourites / comparison rail. */ .research-layout { display: flex; height: 100dvh; min-height: 0; } .research-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; } /* The scrollable transcript and its floating "scroll to latest" button. The wrapper is the positioning context, so the button sits just above the composer. */ .research-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .research-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; } .scroll-to-bottom { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: 0 12px 30px -14px rgba(22, 24, 29, .5); cursor: pointer; z-index: 5; animation: rise .18s ease both; transition: background .16s ease, color .16s ease, border-color .16s ease; } .scroll-to-bottom:hover { background: var(--accent); border-color: var(--accent); color: var(--solid-ink); } .scroll-to-bottom .icon { width: 1.1rem; height: 1.1rem; } .research-main { max-width: 48rem; margin: 0 auto; padding: 2.25rem 1.25rem 1rem; } .session-title { font-size: .88rem; color: var(--ink-3); font-weight: 500; margin: 0 0 1.4rem; text-align: center; } .chat { display: flex; flex-direction: column; gap: 1.5rem; } .msg { display: flex; } .msg.user { justify-content: flex-end; } /* Results stack as rows: shortlist cards, then "also worth a look", then the comparison table. Without this the siblings sit side by side as columns. */ .msg.assistant { flex-direction: column; } .msg.user .bubble { background: var(--solid); color: var(--solid-ink); padding: .75rem 1.05rem; border-radius: 1.3rem; border-bottom-right-radius: .45rem; max-width: 85%; } .msg.assistant > .bubble, .msg.assistant > * { width: 100%; } .bubble { min-width: 0; } .msg.assistant .bubble { padding: 0; background: transparent; } .bubble pre { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 1rem; color: inherit; } /* Answer fade-in */ .msg.assistant { animation: rise .4s ease both; } /* Clarifying questions dock One question at a time, in the composer slot. Answer, Next, Next, Send - Back revisits an earlier answer and the dots show how much is left. */ .question-panel { max-width: 48rem; margin: 0 auto; padding: 1.05rem 1.2rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 18px 50px -28px rgba(22, 24, 29, .35); transition: opacity .2s ease, transform .2s ease; } /* Submitting the last answer: the dock bows out before the composer returns. */ .question-panel.is-leaving { opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; } .question-panel-head { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); } .question-panel-head .icon { width: .95rem; height: .95rem; color: var(--accent); } .question-count { margin-left: auto; font-size: .74rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); } .question-dots { display: flex; gap: .3rem; margin: .7rem 0 1.1rem; } .question-dot { flex: 1; height: .25rem; border-radius: 999px; background: var(--line-soft); transition: background .2s ease; } .question-dot.is-answered { background: var(--accent-2); } .question-dot.is-current { background: var(--accent); } .question-text { margin: 0 0 .9rem; font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--ink); } .qp-options { display: flex; flex-direction: column; gap: .45rem; } .option-row { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: .9rem; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .option-row:hover:not(:disabled) { border-color: var(--accent-2); color: var(--ink); } .option-row .pick { position: relative; flex-shrink: 0; width: 1.05rem; height: 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); transition: border-color .15s ease, background .15s ease; } .option-row.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; } .option-row.selected .pick { border-color: var(--accent); } .option-row.selected .pick::after { content: ""; position: absolute; inset: .22rem; border-radius: 999px; background: var(--accent); } .option-row:disabled { opacity: .6; cursor: default; } .option-own { cursor: text; } .option-own .question-input { flex: 1; min-width: 0; } .question-input { border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: .9rem; padding: .1rem 0; outline: none; } .question-input::placeholder { color: var(--hint); } .question-input:disabled { color: var(--hint); } .question-panel-foot { display: flex; align-items: center; gap: .75rem; margin-top: 1.15rem; } .question-hint { flex: 1; min-width: 0; font-size: .78rem; color: var(--hint); } .qp-nav { display: flex; gap: .45rem; flex-shrink: 0; } .qp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid transparent; border-radius: .7rem; padding: .45rem 1rem; font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .qp-btn .icon { width: .95rem; height: .95rem; } .qp-btn-ghost { border-color: var(--line); background: transparent; color: var(--ink-2); } .qp-btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); } .qp-btn-primary { background: var(--accent); color: #fff; } .qp-btn-primary:hover:not(:disabled) { background: var(--accent-2); } .qp-btn:disabled { opacity: .5; cursor: default; } .chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: .38rem .9rem; font-size: .86rem; font-family: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .chip:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent); background: var(--accent-soft); } .chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; } .chip:disabled { opacity: .55; cursor: default; } .options { display: flex; flex-wrap: wrap; gap: .45rem; } .landing-options { justify-content: center; margin-top: .9rem; } /* Thinking indicator Three dots drift across the pill and merge into each other through an SVG goo filter, so the loader reads as a small flow of liquid rather than a blink. The filter only adds the merging; without it the dots still float. */ .thinking { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; max-width: 100%; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3); font-size: .88rem; animation: rise .3s ease both; } /* Small bubbles rise, sway and fade, like the landing-page blobs miniaturised, so the loader reads as gentle motion rather than a spinner. */ .thinking-bubbles { position: relative; flex: 0 0 auto; width: 1.1rem; height: 1rem; } .thinking-bubbles .bubble-dot { position: absolute; bottom: 0; left: 0; width: .3rem; height: .3rem; border-radius: 999px; background: var(--accent); opacity: 0; animation: bubble-rise 1.9s ease-in infinite; } .thinking-bubbles .bubble-dot:nth-child(1) { left: 0; } .thinking-bubbles .bubble-dot:nth-child(2) { left: .5rem; width: .22rem; height: .22rem; --sway: .2rem; animation-delay: .45s; } .thinking-bubbles .bubble-dot:nth-child(3) { left: .82rem; --sway: -.18rem; animation-delay: .95s; } .thinking-bubbles .bubble-dot:nth-child(4) { left: .38rem; width: .17rem; height: .17rem; --sway: .14rem; animation-delay: 1.4s; } @keyframes bubble-rise { 0% { transform: translate(0, .15rem) scale(.55); opacity: 0; } 22% { opacity: .95; } 55% { transform: translate(var(--sway, .12rem), -.3rem) scale(.9); opacity: .8; } 100% { transform: translate(calc(var(--sway, .12rem) * -.4), -.85rem) scale(1); opacity: 0; } } /* Live reasoning summary (P2-M17) The model's own thinking, streamed as it works. It sits where the answer will appear, then folds down to a small strip once the turn settles. */ .thinking-panel { align-self: flex-start; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); animation: rise .3s ease both; overflow: hidden; } .thinking-toggle { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .95rem; border: 0; background: transparent; color: var(--ink-3); font-family: inherit; font-size: .86rem; text-align: left; cursor: pointer; transition: color .15s ease; } .thinking-toggle:hover { color: var(--ink-2); } .thinking-caret { width: 1rem; color: var(--hint); text-align: center; } .thinking-body { max-height: 16rem; overflow-y: auto; padding: 0 .95rem .8rem 2.15rem; color: var(--ink-3); font-size: .84rem; line-height: 1.55; } .thinking-body > :last-child { margin-bottom: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Circling activity mark: shared by the chat loading state and the "researching" pill, so a running turn always reads as moving. */ .spinner { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 999px; animation: spin .7s linear infinite; } .chat-loading { display: inline-flex; align-items: center; gap: .55rem; padding: 1.5rem 0; color: var(--ink-3); font-size: .9rem; } /* The quiet "answer is in" mark after a turn completes. */ .turn-done { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin: .1rem 0 0; color: var(--hint); font-size: .78rem; } .turn-done-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); } /* Chats the assistant found for a "take me back to that chat" request. Links, never an automatic redirect (P2-M18). */ .found-chats { align-self: flex-start; max-width: 34rem; border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--accent-soft); padding: .6rem .85rem; } .found-chats-title { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; color: var(--ink-2); } .found-chats ul { list-style: none; margin: 0; padding: 0; } .found-chats li + li { margin-top: .4rem; } .found-chats a { color: var(--accent); font-weight: 500; text-decoration: none; } .found-chats a:hover { text-decoration: underline; } .found-chat-snippet { display: block; margin-top: .1rem; font-size: .75rem; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } /* Hold the bubbles still but keep them visible. */ .thinking-bubbles .bubble-dot { animation: none; opacity: .85; } .thinking-bubbles .bubble-dot:nth-child(1) { transform: translate(0, -.1rem); } .thinking-bubbles .bubble-dot:nth-child(2) { transform: translate(.12rem, -.35rem); } .thinking-bubbles .bubble-dot:nth-child(3) { transform: translate(-.12rem, -.55rem); } .thinking-bubbles .bubble-dot:nth-child(4) { transform: translate(.1rem, -.72rem); } .question-panel { transition: none; } } /* Composer --------------------------------------------------- */ .research-bottom { padding: .5rem 1rem max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 78%, transparent); } .composer { max-width: 48rem; margin: 0 auto; display: flex; gap: .5rem; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: .6rem .55rem .55rem .95rem; box-shadow: 0 12px 40px -20px rgba(22, 24, 29, .3); transition: border-color .2s ease, box-shadow .2s ease; } .composer:focus-within { border-color: var(--accent-2); box-shadow: 0 12px 44px -18px var(--accent-glow); } .composer textarea { flex: 1; border: 0; outline: none; background: transparent; resize: none; display: block; min-height: 2.5rem; padding: .55rem 0 .5rem; font-size: .96rem; line-height: 1.5; color: var(--ink); max-height: 200px; } .composer textarea::placeholder { color: var(--hint); } .composer-send { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; flex-shrink: 0; border-radius: .75rem; border: 0; color: var(--solid-ink); background: var(--solid); cursor: pointer; transition: background .15s ease, transform .15s ease, opacity .15s ease; } .composer-send:hover:not(:disabled) { background: var(--accent); transform: scale(1.05); } .composer-send:disabled { background: var(--hover); cursor: default; } .composer-input { flex: 1; min-width: 0; display: flex; flex-direction: column; } .photo-row { display: flex; align-items: center; gap: .5rem; min-height: 1.9rem; padding-bottom: .15rem; font-size: .83rem; } .photo-input { display: none; } /* Attach control: an icon button, with the label revealed on hover/focus. */ .attach-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .55rem; border: 1px solid transparent; color: var(--ink-3); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .attach-btn .icon { width: 1.05rem; height: 1.05rem; } .attach-btn:hover, .attach-btn:focus-within { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .photo-input:disabled + .attach-btn { color: var(--hint); opacity: .6; cursor: default; } .attach-tip { position: absolute; bottom: calc(100% + .4rem); left: 50%; z-index: 20; transform: translate(-50%, .25rem); padding: .3rem .55rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink-2); font-size: .75rem; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .attach-btn:hover .attach-tip, .attach-btn:focus-within .attach-tip { opacity: 1; transform: translate(-50%, 0); } .photo-chip { position: relative; display: inline-flex; align-items: center; } .photo-chip img { height: 1.9rem; width: 1.9rem; object-fit: cover; border-radius: .5rem; border: 1px solid var(--line); } .photo-remove { position: absolute; top: -.4rem; right: -.4rem; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .6rem; line-height: 1; cursor: pointer; } .photo-error { color: var(--danger-ink); font-size: .8rem; } .research-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; max-width: 48rem; margin: 0 auto; padding: .55rem 0 .6rem; } /* The "remember facts about me" call to action: the one coloured action in the transcript and the most valuable follow-up a finished chat offers. When it scrolls into view it pops and throws a halo, so the user notices it (armed by shoppingUi.watchRememberCta). */ .remember-cta { position: relative; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: .86rem; font-weight: 600; padding: .48rem 1rem; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-1); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .remember-cta:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--solid-ink); transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--accent-glow); } .remember-cta:disabled { opacity: .55; cursor: default; } /* The attentive halo, drawn behind the button. */ .remember-cta::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; pointer-events: none; } .remember-cta.is-in { animation: remember-pop .55s cubic-bezier(.2, 1.35, .4, 1) both; } .remember-cta.is-in::before { animation: remember-halo 2s ease-out .25s 3; } @keyframes remember-pop { 0% { transform: scale(.8); opacity: 0; } 55% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes remember-halo { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .remember-cta.is-in, .remember-cta.is-in::before { animation: none; } } /* Streaming bubble */ .stream-bubble { color: var(--ink-2); } /* Usage panel ------------------------------------------------ */ .usage-panel { max-width: 48rem; margin: 0 auto; padding: 1.1rem 1.25rem 1.4rem; } .usage-panel h2 { font-size: .95rem; margin: 0 0 .2rem; } .usage-panel .hint { color: var(--ink-3); font-size: .8rem; margin-bottom: .8rem; } .usage-table { width: 100%; font-size: .82rem; white-space: nowrap; } .usage-table th { font-weight: 500; color: var(--ink-3); } .usage-table tfoot th { border-top: 2px solid var(--line); color: var(--ink); font-weight: 600; } /* Product cards ---------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; width: 100%; margin: .4rem 0; } .product-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.05rem 1.15rem; background: var(--surface); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(22, 24, 29, .3); } /* The shortlist is a ranked column of wide (horizontal) cards, not a tight grid: photo on the left, everything else on the right, so the whole shortlist stays readable while scrolling. */ .shortlist { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin: .6rem 0; } .product-card-wide { flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; } .product-card-wide.is-top-pick { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2), 0 16px 38px -22px rgba(22, 24, 29, .35); } .product-card-wide .card-media { flex: 0 0 180px; width: 180px; height: auto; min-height: 150px; margin: 0; border-bottom: none; border-right: 1px solid var(--line-soft); border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px); } .card-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 1.05rem 1.15rem; } .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; } .card-rank { font-weight: 800; font-size: .9rem; color: var(--accent); letter-spacing: -.02em; } .is-top-pick .card-rank { font-size: 1rem; } .card-headline { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .card-top-flag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); border: 1px solid var(--accent-2); border-radius: 999px; padding: .1rem .5rem; } /* Heart + compare sit at the far right of the head row (not overlaid on the photo). */ .card-head .card-tools { position: static; top: auto; right: auto; display: flex; gap: .35rem; margin-left: auto; } .card-facts { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .35rem; } .card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin-bottom: .5rem; } /* Compact enough to scan five in one screen: the criteria run as inline chips instead of one tall row each, and every vertical gap is tightened. */ .product-card-wide .card-main { padding: .8rem 1rem; } .product-card-wide .card-head { margin-bottom: .3rem; } .product-card-wide h3 { font-size: .98rem; margin: 0 0 .35rem; } .product-card-wide .card-facts { gap: .6rem; margin-bottom: .2rem; } .product-card-wide .card-meta { gap: .7rem; margin-bottom: .3rem; } .product-card-wide .price { font-size: 1.1rem; } .product-card-wide .score, .product-card-wide .shop-row, .product-card-wide .delivery { margin: 0; } .product-card-wide .criteria { margin: .35rem 0 .1rem; } .product-card-wide .criteria-head { margin: 0 0 .3rem; } .product-card-wide .criteria ul { flex-direction: row; flex-wrap: wrap; gap: .25rem .8rem; } .product-card-wide .criteria li { align-items: center; font-size: .8rem; line-height: 1.3; } .product-card-wide .criterion-text, .product-card-wide .criterion-name { display: inline; } .product-card-wide .criterion-value { display: inline; margin-left: .3rem; font-size: .76rem; } .product-card-wide .why { flex: 0 0 auto; margin: .35rem 0 .5rem; font-size: .85rem; } .product-card-wide .card-actions { margin-top: auto; } @media (max-width: 640px) { .product-card-wide { flex-direction: column; } .product-card-wide .card-media { flex-basis: 150px; width: 100%; min-height: 150px; border-right: none; border-bottom: 1px solid var(--line-soft); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; } } .product-card h3 { font-size: 1.05rem; margin: .1rem 0 .5rem; letter-spacing: -.01em; } /* Product photo. The URL points at the shop's own image, so it can be missing or hotlink-blocked: the media box always paints the fallback underneath. */ .card-media { position: relative; display: grid; place-items: center; height: 150px; margin: -1.05rem -1.15rem 1rem; border-bottom: 1px solid var(--line-soft); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: var(--paper); overflow: hidden; } .card-media img { width: 100%; height: 100%; padding: .6rem; object-fit: contain; } .card-media-fallback { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink-3); opacity: .45; user-select: none; } .card-media:not(.is-empty) .card-media-fallback { display: none; } .card-media.is-empty img { display: none; } .product-card .price { font-size: 1.25rem; font-weight: 700; margin: 0 0 .1rem; } /* Evidence score. Deliberately labelled: the product invariant forbids ranking on retailer star ratings, so this is our own assessment and it says so on hover. */ .score { display: inline-flex; align-items: center; gap: .45rem; margin: .3rem 0 .1rem; } .score-label { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); } .score-stars { position: relative; display: inline-flex; cursor: help; } .score-track, .score-fill { display: inline-flex; gap: .06rem; } .score-track .star { color: var(--line); } .score-fill { position: absolute; top: 0; left: 0; width: calc(var(--score) / 5 * 100%); overflow: hidden; color: var(--accent); } .score-fill .star { flex: 0 0 auto; } .star { width: .85rem; height: .85rem; fill: currentColor; } .score-num { font-size: .78rem; font-weight: 600; color: var(--ink-3); } /* The shop the card links to, taken from the link itself. */ .shop-row { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 .2rem; } .shop-logo { width: 1.1rem; height: 1.1rem; object-fit: contain; border-radius: .25rem; } .shop-name { color: var(--ink-2); font-size: .88rem; font-weight: 500; } .delivery { display: flex; align-items: flex-start; gap: .35rem; margin: .1rem 0 .2rem; color: var(--ink-3); font-size: .82rem; line-height: 1.35; } .delivery .icon { width: .95rem; height: .95rem; flex-shrink: 0; margin-top: .08rem; } /* The parameters the card was chosen against, i.e. what the assistant weighed. */ .criteria { margin: .55rem 0 .1rem; } .criteria-head { margin: 0 0 .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); } .criteria ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; } .criteria li { display: flex; align-items: flex-start; gap: .45rem; font-size: .83rem; line-height: 1.35; } .criteria .icon { width: .9rem; height: .9rem; flex-shrink: 0; margin-top: .1rem; } .criteria li.is-met .icon { color: var(--ok); } .criteria li.is-miss .icon { color: var(--warn-ink); } .criterion-text { display: block; min-width: 0; } .criterion-name { display: block; color: var(--ink-2); } .criterion-value { display: block; font-size: .78rem; color: var(--ink-3); } .product-card .why { color: var(--ink-2); font-size: .88rem; margin: .6rem 0 .8rem; flex: 1; } .card-cta { align-self: flex-start; border: 1px solid var(--accent); color: var(--accent) !important; background: transparent; padding: .38rem .95rem; border-radius: .65rem; font-size: .86rem; font-weight: 500; text-decoration: none; transition: all .18s ease; } .card-cta:hover { background: var(--accent-soft); transform: translateY(-1px); } /* Favourites / comparison rail --------------------------------- */ .rail { flex-shrink: 0; height: 100dvh; /* Now the left edge of the research screen, between the chat and the app nav. */ border-right: 1px solid var(--line); background: var(--sidebar); } .rail.is-collapsed { width: 3.1rem; } .rail.is-open { display: flex; flex-direction: column; width: min(23rem, 40vw); } .rail-strip { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .4rem; } .rail-strip-btn { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .rail-strip-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .rail-strip-btn .icon { width: 1.1rem; height: 1.1rem; } .rail-badge { position: absolute; top: -.35rem; right: -.35rem; display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; } .rail-head { display: flex; align-items: center; gap: .25rem; padding: .6rem .6rem .5rem .75rem; border-bottom: 1px solid var(--line); } .rail-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 0; border-radius: .6rem; background: transparent; color: var(--ink-3); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .rail-tab:hover { background: var(--hover); color: var(--ink); } .rail-tab.is-active { background: var(--accent-soft); color: var(--accent); } .rail-count { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; } .rail-close { margin-left: auto; width: 1.7rem; height: 1.7rem; border: 0; border-radius: .5rem; background: transparent; color: var(--ink-3); font-size: 1.1rem; line-height: 1; cursor: pointer; } .rail-close:hover { background: var(--hover); color: var(--ink); } .rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: .8rem; scrollbar-width: thin; } .rail-empty { color: var(--ink-3); font-size: .85rem; line-height: 1.5; margin: .3rem 0; } .compare-item { border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); padding: .75rem .85rem; margin-bottom: .6rem; } .compare-item.is-cheapest { border-color: var(--accent-2); } .compare-head { display: flex; align-items: flex-start; gap: .5rem; } .compare-head h3 { flex: 1; min-width: 0; margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.35; } .compare-remove { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border: 0; border-radius: .45rem; background: transparent; color: var(--ink-3); font-size: .75rem; line-height: 1; cursor: pointer; } .compare-remove:hover { background: var(--hover); color: var(--danger-ink); } .compare-flag { display: inline-block; margin-top: .4rem; padding: .12rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .compare-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: .55rem 0 .5rem; font-size: .8rem; } .compare-facts > div { display: contents; } .compare-facts dt { color: var(--hint); white-space: nowrap; } .compare-facts dd { margin: 0; color: var(--ink-2); } .compare-open { font-size: .8rem; font-weight: 500; } /* Card tool buttons (favourite / compare) --------------------- */ .card-tools { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; } .icon-pill { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--nav-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink-3); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; } .icon-pill .icon { width: 1rem; height: 1rem; } .icon-pill:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-1px); } .icon-pill.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } @media (max-width: 640px) { .rail.is-open { position: fixed; top: 0; right: 0; z-index: 45; width: 100vw; } } /* Markdown answers ------------------------------------------- */ .bubble.markdown { min-width: 0; font-size: .96rem; line-height: 1.65; color: var(--ink-2); } .bubble.markdown > :last-child { margin-bottom: 0; } .bubble.markdown p, .bubble.markdown ul { color: var(--ink-2); } .bubble.markdown h1, .bubble.markdown h2, .bubble.markdown h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.1rem 0 .35rem; } .bubble.markdown h1:first-child, .bubble.markdown h2:first-child, .bubble.markdown h3:first-child, .bubble.markdown p:first-child { margin-top: 0; } .bubble.markdown ul, .bubble.markdown ol { margin: .4rem 0 .6rem; padding-left: 1.4rem; } .bubble.markdown table { border-collapse: collapse; margin: .6rem 0; font-size: .9rem; display: block; overflow-x: auto; } .bubble.markdown th, .bubble.markdown td { border: 1px solid var(--line); padding: .3rem .55rem; text-align: left; } .bubble.markdown th { background: var(--line-soft); font-weight: 600; } .bubble.markdown a { color: var(--accent); } .bubble.markdown code { background: var(--line-soft); padding: .08rem .3rem; border-radius: .3rem; font-size: .88em; } /* Notice / error alerts --------------------------------------- */ .alert { border-radius: .75rem; padding: .7rem .95rem; font-size: .88rem; border: 1px solid var(--line); margin: .6rem 0; } .alert-warning { background: var(--warn-bg); border-color: #fed7aa; color: var(--warn-ink); } .alert-secondary { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .alert a { color: inherit; text-decoration: underline; } /* Cookie consent ---------------------------------------------- */ .cookie-banner { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); width: min(58rem, calc(100vw - 2rem)); animation: cookie-rise .55s cubic-bezier(.16, 1, .3, 1) both; } @keyframes cookie-rise { from { opacity: 0; transform: translate(-50%, 1.4rem); } to { opacity: 1; transform: translate(-50%, 0); } } .cookie-banner-card { display: flex; align-items: center; gap: .85rem 1rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--nav-glass); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: var(--shadow-2); } .cookie-banner-mark { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .65rem; color: var(--accent); background: var(--accent-soft); } .cookie-banner-mark svg { width: 1.1rem; height: 1.1rem; } .cookie-banner-text { flex: 1; min-width: 15rem; margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); } .cookie-banner-text a { color: var(--accent); font-weight: 500; text-underline-offset: 2px; } .cookie-banner-actions { display: flex; gap: .5rem; flex-shrink: 0; margin-left: auto; } .cookie-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; padding: 0 1.05rem; border: 1px solid transparent; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .cookie-btn.primary { background: var(--accent); color: #fff; } .cookie-btn.primary:hover { background: var(--accent-2); } .cookie-btn.ghost { border-color: var(--line); background: transparent; color: var(--ink-2); } .cookie-btn.ghost:hover { background: var(--hover); color: var(--ink); } @media (max-width: 620px) { .cookie-banner-actions { width: 100%; margin-left: 0; } .cookie-btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } } /* Cookie policy ---------------------------------------------- */ .legal { max-width: 52rem; } .legal h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 .6rem; } .legal-lead { color: var(--ink-2); line-height: 1.6; margin: 0 0 1.6rem; } .legal-group { margin: 0 0 1.8rem; } .legal-group h2 { font-size: 1.05rem; margin: 0 0 .3rem; } .legal-note { color: var(--ink-3); font-size: .85rem; line-height: 1.55; margin: .2rem 0 .8rem; } .legal-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .legal-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .legal-table th, .legal-table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); } .legal-table th { color: var(--hint); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; background: var(--line-soft); } .legal-table tr:last-child td { border-bottom: 0; } .legal-table code { font-size: .8rem; color: var(--ink); background: var(--line-soft); padding: .1rem .35rem; border-radius: .3rem; } .legal-table td:nth-child(3) { white-space: nowrap; color: var(--ink-3); } .legal-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* Memory page -------------------------------------------------- */ .memory-compose { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.05rem 1.15rem 1.15rem; margin: 1.25rem 0 1.75rem; } .memory-compose-title { margin: 0 0 .7rem; font-size: .9rem; font-weight: 650; color: var(--ink-2); } .memory-compose-fields { display: grid; grid-template-columns: 170px 1fr auto; gap: .5rem; align-items: start; } .memory-groups { display: grid; gap: 1.4rem; } .memory-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; } .memory-group-head h2 { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .memory-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--line-soft); color: var(--ink-3); font-size: .72rem; font-weight: 600; } .memory-list { display: grid; gap: .5rem; } .memory-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: .8rem 1rem; transition: border-color .15s ease, opacity .15s ease; } .memory-card.is-inactive { opacity: .55; } .memory-card.is-editing { border-color: var(--accent-line); } .memory-content { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .memory-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; color: var(--ink-3); font-size: .78rem; } .memory-origin { color: var(--ink-3); } .memory-actions { display: flex; gap: .2rem; margin-left: auto; } .memory-action { border: 0; background: transparent; color: var(--ink-3); font-family: inherit; font-size: .78rem; font-weight: 500; padding: .16rem .45rem; border-radius: .45rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .memory-action:hover { background: var(--hover); color: var(--ink); } .memory-action.danger { color: var(--danger-ink); } .memory-action.danger:hover { background: var(--hover); color: var(--danger-ink); } .memory-status { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-3); padding: .12rem .55rem; font-size: .74rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .memory-status:hover { border-color: var(--accent-2); color: var(--accent); } .memory-status.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .memory-edit-kind { width: auto; min-width: 9rem; } .memory-edit-input { margin-top: .55rem; } .memory-edit-actions { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; } .memory-delete { margin-left: auto; } .memory-empty { text-align: center; padding: 2.5rem 1.25rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-3); } .memory-empty-mark { display: block; font-size: 1.3rem; color: var(--accent); margin-bottom: .5rem; } .memory-empty-text { margin: 0 auto; max-width: 26rem; font-size: .88rem; line-height: 1.55; } @media (max-width: 640px) { .memory-compose-fields { grid-template-columns: 1fr; } .memory-actions { margin-left: 0; } } /* Admin -------------------------------------------------------- */ .stat-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; } .stat-card { border: 1px solid var(--line); border-radius: .75rem; padding: .7rem 1rem; min-width: 110px; background: var(--surface); } .stat-card span { display: block; font-size: 1.35rem; font-weight: 700; } .stat-card label { color: var(--ink-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .stat-card.cost span { color: var(--accent); } .dev-badge { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .admin-table { font-size: .85rem; } .admin-table .session-title-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Generic page scaffolding for legacy pages -------------------- */ .page-note { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.25rem; } /* Validation + error UI ---------------------------------------- */ .validation-message { color: var(--danger-ink); font-size: .82rem; } .invalid { outline: 1px solid #e50000; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } /* Errors. A crash is the moment the app owes the user the most clarity, so these are calm, themed surfaces with one obvious way out - never a red wall of text. */ /* Circuit-level failure: Blazor's script flips display to block, so the layout lives on the inner card rather than on this element. */ #blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 0 1rem max(1rem, env(safe-area-inset-bottom)); } .error-toast { display: flex; align-items: center; gap: .7rem; max-width: 46rem; margin: 0 auto; padding: .7rem .8rem .7rem .85rem; border: 1px solid var(--danger-line); border-radius: .95rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); font-size: .88rem; animation: toast-in .32s cubic-bezier(.16, 1, .3, 1) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .error-toast-icon { display: grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); } .error-toast-icon svg { width: 1.05rem; height: 1.05rem; } .error-toast-text { flex: 1; min-width: 0; color: var(--ink-2); } .error-toast-action { flex-shrink: 0; padding: .35rem .8rem; border-radius: .65rem; background: var(--accent); color: #fff; font-size: .84rem; font-weight: 600; text-decoration: none; } .error-toast-action:hover { background: var(--accent-2); color: #fff; } .error-toast-dismiss { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border: 0; border-radius: .5rem; background: transparent; color: var(--ink-3); font-size: .8rem; cursor: pointer; } .error-toast-dismiss:hover { background: var(--hover); color: var(--ink); } /* Boundary and error page: one panel, used by ErrorPanel and /Error. */ .error-page { display: grid; place-items: center; min-height: 100dvh; padding: 2.5rem 1.25rem; } .error-panel { max-width: 30rem; margin: 3rem auto; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-2); text-align: center; } .error-page .error-panel { margin: 0; } .error-panel-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 1rem; background: var(--warn-bg); color: var(--warn-ink); } .error-panel-icon svg { width: 1.5rem; height: 1.5rem; } .error-panel h1, .error-panel h2 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .error-panel p { margin: 0 0 1.35rem; font-size: .92rem; line-height: 1.6; color: var(--ink-3); } .error-panel-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; } .error-panel-ref { margin: 1.35rem 0 0; font-size: .75rem; color: var(--hint); } .error-panel-ref code { padding: .1rem .35rem; border-radius: .35rem; background: var(--line-soft); color: var(--ink-3); font-size: .95em; } @media (prefers-reduced-motion: reduce) { .error-toast { animation: none; } } /* Profile, saved products & chat management (M14) -------------- */ .pin-flag { color: var(--accent); font-size: .7rem; margin-right: .35rem; } .session-list { list-style: none; padding: 0; margin: .5rem 0; } .session-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); margin-bottom: .5rem; } .session-row.is-pinned { border-color: var(--accent-2); } .session-link { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-link:hover { color: var(--accent); } .session-meta { color: var(--ink-3); font-size: .78rem; flex-shrink: 0; } .session-actions { display: flex; gap: .35rem; flex-shrink: 0; } .session-rename { display: flex; gap: .4rem; flex: 1; } .saved-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .saved-actions { display: flex; align-items: center; gap: .5rem; } /* The owner's own picture on a saved card (plan 02 P2-M8). */ .saved-image-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .card-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .card-save { border: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: .38rem .85rem; border-radius: .65rem; font-size: .86rem; font-weight: 500; transition: all .18s ease; } .card-save:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); } .card-save:disabled { opacity: .6; cursor: default; } .card-notice { color: var(--ink-3); font-size: .82rem; margin: .2rem 0 .5rem; } .profile-head { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; } .avatar-lg { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; } .profile-name { margin: 0; font-size: 1.25rem; font-weight: 700; } .profile-since { margin: .1rem 0 0; font-size: .85rem; } /* Profile picture picker in the account dialog. */ .avatar-field { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } .avatar-field-title { margin: 0 0 .4rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); } .avatar-field-buttons { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .profile-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.1rem 1.25rem; margin: 1rem 0; } .profile-card h2 { font-size: 1.05rem; margin: 0 0 .75rem; } .field { display: block; margin-bottom: .85rem; } .field span { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; } .field small { display: block; margin-top: .2rem; } .profile-links { list-style: none; padding: 0; margin: 0 0 1rem; } .profile-links li { margin-bottom: .6rem; } .profile-links a { font-weight: 500; } .profile-links span { display: block; color: var(--ink-3); font-size: .82rem; } .profile-actions { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; } .check { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; font-size: .9rem; } .danger-zone { border-color: var(--danger-line); } .danger-zone h2 { color: var(--danger-ink); } /* ============================================================ Marketing landing (M16) The hero keeps the full viewport; everything below is the scroll-revealed marketing page (how it works, pricing, FAQ). ============================================================ */ .marketing { display: flex; flex-direction: column; min-height: 100dvh; } /* Top bar. Transparent over the hero; a blurred pane slides in behind it as soon as the page scrolls. Sticky inside the main column so it never covers a sidebar. Brand left, section links centred, controls right. */ .mk-nav { position: sticky; top: 0; z-index: 45; padding: .5rem clamp(1rem, 4vw, 2.5rem); /* Pull the hero up under the bar so no bare page colour shows above it. */ margin-bottom: -3.2rem; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .mk-nav.is-scrolled { background: var(--nav-glass); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border-bottom-color: var(--line); box-shadow: 0 16px 36px -32px rgba(22, 24, 29, .55); } .mk-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; } .mk-nav-links { display: flex; align-items: center; justify-content: center; gap: .1rem; min-width: 0; } .mk-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 0; } .mk-brand { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; flex-shrink: 0; white-space: nowrap; } .mk-brand-mark { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -8px var(--accent-glow); } .mk-link { position: relative; padding: .5rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .2s ease; } .mk-link::after { content: ""; position: absolute; left: 50%; bottom: .24rem; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: translateX(-50%); transition: width .3s cubic-bezier(.22, .8, .36, 1); } .mk-link:hover { color: var(--ink); } .mk-link.is-active { color: var(--ink); font-weight: 600; } .mk-link.is-active::after { width: 1.35rem; } .mk-cta { display: inline-flex; align-items: center; justify-content: center; height: 2.15rem; padding: 0 1.1rem; border: 0; border-radius: 999px; font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s ease, box-shadow .15s ease; } .mk-cta:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 8px 20px -8px var(--accent-glow); } /* Hero starts at the very top of the page and runs underneath the floating bar. The trailing padding is small so the headline sits a touch above centre. */ .marketing .landing { min-height: 100dvh; padding-top: 3.2rem; padding-bottom: 5rem; scroll-margin-top: 3.2rem; } /* Fade the hero into the first content band so the two screens read as separate layers instead of one continuous wash. */ .marketing .landing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11rem; background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none; } /* Marketing sections ---------------------------------------- */ .mk-section { position: relative; padding: clamp(5.5rem, 12vw, 9rem) clamp(1.25rem, 5vw, 2.5rem); scroll-margin-top: 4.5rem; overflow: hidden; } .mk-section > .mk-wrap { position: relative; z-index: 1; } /* Depth: the alternating bands lift off the page instead of sitting flush. */ .mk-section.alt, .mk-cta-band, .mk-footer { position: relative; z-index: 1; box-shadow: var(--shadow-band); } .mk-section.alt { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mk-wrap { width: 100%; max-width: 68rem; margin: 0 auto; } .mk-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3rem); } .mk-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; } .mk-h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: .6rem 0 .8rem; } .mk-lead { font-size: 1.02rem; line-height: 1.6; color: var(--ink-3); margin: 0; } /* Shared card grid (steps + trust) */ .mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.15rem; } .mk-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; } .mk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .mk-step-num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: .92rem; font-weight: 700; } .mk-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 1rem 0 .45rem; } .mk-card p { font-size: .92rem; line-height: 1.6; color: var(--ink-3); margin: 0; } .mk-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent-line); border-radius: .9rem; /* A soft top-left glow so the badge reads as a lit tile, not a flat chip. */ background: radial-gradient(120% 120% at 18% 12%, var(--accent-soft) 0%, transparent 72%), var(--surface); color: var(--accent); box-shadow: 0 10px 22px -16px var(--accent-glow); transition: transform .28s cubic-bezier(.22, .8, .36, 1), box-shadow .28s ease; } .mk-icon .icon { width: 1.45rem; height: 1.45rem; } /* The tile lifts and tips when its card is hovered, so the icons animate as a set. */ .mk-card:hover .mk-icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); box-shadow: 0 14px 26px -14px var(--accent-glow); } @media (prefers-reduced-motion: reduce) { .mk-card:hover .mk-icon { transform: none; } } /* Pricing ---------------------------------------------------- */ .mk-pricing { position: relative; } /* Billing period toggle. Pure CSS: the radios live as siblings of the plans, so :checked can swap the prices without any JavaScript (the page is static SSR). */ .billing-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .mk-billing { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: fit-content; margin: 0 auto clamp(1.9rem, 4vw, 2.6rem); padding: .28rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); } /* The sliding pill. Both labels are one grid column wide, so the thumb can move exactly one column (its own width) to land on the annual side. */ .mk-billing-thumb { position: absolute; top: .28rem; left: .28rem; width: calc(50% - .28rem); height: calc(100% - .56rem); border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -8px var(--accent-glow); transition: transform .34s cubic-bezier(.22, .8, .36, 1); } #billing-annual:checked ~ .mk-billing .mk-billing-thumb { transform: translateX(100%); } .mk-billing label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem 1.15rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink-3); cursor: pointer; user-select: none; white-space: nowrap; transition: color .34s ease; } .mk-billing label:hover { color: var(--ink); } .mk-billing-save { padding: .16rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 700; transition: background .34s ease, color .34s ease; } #billing-monthly:checked ~ .mk-billing label[for="billing-monthly"], #billing-annual:checked ~ .mk-billing label[for="billing-annual"] { color: #fff; } #billing-annual:checked ~ .mk-billing label[for="billing-annual"] .mk-billing-save { background: rgba(255, 255, 255, .24); color: #fff; } #billing-monthly:focus-visible ~ .mk-billing label[for="billing-monthly"], #billing-annual:focus-visible ~ .mk-billing label[for="billing-annual"] { outline: 2px solid var(--accent-2); outline-offset: 2px; } .price-year { display: none; } #billing-annual:checked ~ .mk-plans .price-month { display: none; } #billing-annual:checked ~ .mk-plans .price-year { display: block; } /* The price drops in when the period changes. */ @keyframes priceDrop { 0% { opacity: 0; transform: translateY(-.75rem); color: var(--accent); } 55% { color: var(--accent); } 100% { opacity: 1; transform: translateY(0); color: inherit; } } #billing-monthly:checked ~ .mk-plans .price-month, #billing-annual:checked ~ .mk-plans .price-year { animation: priceDrop .5s cubic-bezier(.22, .8, .36, 1) both; } .mk-plan-bill { margin: .55rem 0 0; min-height: 1.2rem; font-size: .78rem; color: var(--ink-3); } .mk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1.25rem; align-items: stretch; } .mk-plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: 2rem 1.5rem 1.5rem; box-shadow: var(--shadow-2); } .mk-plan.featured { border-color: var(--accent-2); box-shadow: var(--shadow-3); } .mk-plan-badge { position: absolute; top: -.72rem; left: 50%; transform: translateX(-50%); padding: .3rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); white-space: nowrap; } /* Fixed row heights keep the four columns on the same baseline, whatever the copy length or the badge. */ .mk-plan-name { font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0; min-height: 1.2rem; } .mk-price { display: flex; align-items: baseline; gap: .35rem; font-size: 2.05rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; min-height: 2.15rem; } .mk-price .per { font-size: .82rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; } .mk-plan-tag { font-size: .84rem; color: var(--ink-3); margin: .8rem 0 0; line-height: 1.55; min-height: 2.65rem; } /* The headline usage figure is the sales argument: an outlined "N× the Free plan" pill. */ .mk-plan-usage { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; } .mk-usage-x { display: inline-block; padding: .3rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: .84rem; font-weight: 600; white-space: nowrap; } /* A benefit that is not shipped yet is labelled, never sold as available. */ .benefit-soon { margin-left: .4rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2, var(--surface)); color: var(--hint); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } /* Usage metering is variable (a deep research costs more than a quick one), so the plan card counts are typical, not contractual. */ .mk-plan-note { max-width: 44rem; margin: 1.9rem auto 0; text-align: center; font-size: .8rem; line-height: 1.6; color: var(--ink-3); } .mk-plan ul { list-style: none; padding: 0; margin: 1.35rem 0 1.75rem; display: flex; flex-direction: column; gap: .65rem; } .mk-plan li { position: relative; padding-left: 1.5rem; font-size: .88rem; line-height: 1.45; color: var(--ink-2); } .mk-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .mk-plan-foot { margin-top: auto; } .mk-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.6rem; padding: 0 1.2rem; border: 1px solid transparent; border-radius: .8rem; font-family: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .mk-btn.primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .mk-btn.primary:hover { color: #fff; filter: brightness(1.06); } .mk-btn.ghost { border-color: var(--line); background: transparent; color: var(--ink-2); } .mk-btn.ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); } .mk-btn:disabled, .mk-btn.is-disabled { opacity: .55; cursor: default; } .mk-note { text-align: center; font-size: .85rem; color: var(--ink-3); margin: 1.75rem 0 0; } /* Store marquee ----------------------------------------------- */ .mk-marquee { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; } .mk-marquee-head { max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3rem); padding: 0 clamp(1.25rem, 5vw, 2.5rem); text-align: center; } .mk-marquee-head .mk-h2 { margin-bottom: 0; } .mk-marquee-viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .mk-marquee-track { display: flex; width: max-content; padding: .25rem 0; animation: marquee 55s linear infinite; } .mk-marquee-viewport:hover .mk-marquee-track { animation-play-state: paused; } /* Spacing lives on the item, not as a track `gap`: the track holds four identical copies and the animation travels exactly one copy (-25%), so every item has to carry the same trailing space - including the last one before the seam. */ @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } } .mk-store { display: inline-flex; align-items: center; gap: .5rem; margin-right: .7rem; padding: .42rem .95rem .42rem .42rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .85rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-1); } .mk-store-badge, .mk-store-logo { position: relative; display: inline-block; width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: .45rem; /* One colour for every shop: the mark is masked out of the accent. */ background: var(--accent); -webkit-mask-image: var(--brand); mask-image: var(--brand); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .mk-marquee-note { max-width: 40rem; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 2.5rem); text-align: center; font-size: .88rem; line-height: 1.6; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .mk-marquee-viewport { overflow-x: auto; } .mk-marquee-track { animation: none; } } /* FAQ --------------------------------------------------------- */ .mk-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; max-width: 64rem; margin: 0 auto; } .mk-faq { display: flex; flex-direction: column; gap: .6rem; } .mk-faq details { border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); padding: .95rem 1.15rem; box-shadow: var(--shadow-1); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } .mk-faq details:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); } .mk-faq details[open], .mk-faq details.is-open { border-color: var(--accent-line); } .mk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: .95rem; font-weight: 600; } .mk-faq summary::-webkit-details-marker { display: none; } .mk-faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.2rem; line-height: 1; font-weight: 700; color: var(--accent); transition: transform .35s cubic-bezier(.22, .8, .36, 1), color .35s ease; } .mk-faq details[open] summary::after, .mk-faq details.is-open summary::after { transform: rotate(45deg); } /* Animated body. Without JS the [open] rule shows it instantly; with JS the inline max-height set by ui.js takes over and slides. */ .faq-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .34s cubic-bezier(.22, .8, .36, 1), opacity .34s ease; } .mk-faq details[open] > .faq-body { max-height: none; opacity: 1; } .mk-faq .faq-body p { margin: .8rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-3); } .mk-faq-aside { position: sticky; top: 5rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: 1.7rem 1.5rem; text-align: center; box-shadow: var(--shadow-2); } .mk-faq-aside h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem; } .mk-faq-aside p { font-size: .9rem; line-height: 1.6; color: var(--ink-3); margin: 0 0 1.25rem; } .mk-faq-aside .mk-btn + .mk-btn { margin-top: .55rem; } @media (max-width: 900px) { .mk-faq-layout { grid-template-columns: 1fr; } .mk-faq-aside { position: static; } } @media (prefers-reduced-motion: reduce) { .faq-body { transition: none; } .mk-faq summary::after { transition: none; } } /* Footer ------------------------------------------------------ */ .mk-footer { border-top: 1px solid var(--line); background: var(--canvas); padding: 2.5rem clamp(1.25rem, 5vw, 2.5rem); } .mk-footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .mk-foot-brand { max-width: 22rem; } .mk-foot-brand p { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-3); line-height: 1.55; } .mk-foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; } .mk-foot-links a { font-size: .88rem; color: var(--ink-3); text-decoration: none; } .mk-foot-links a:hover { color: var(--ink); } .mk-disclosure { max-width: 34rem; margin: 1.5rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--ink-3); } .mk-copy { margin: 1.1rem 0 0; font-size: .78rem; color: var(--hint); } @media (max-width: 900px) { .mk-nav-links { display: none; } } @media (max-width: 600px) { .mk-nav .mk-brand span:last-child { display: none; } .mk-nav-actions .lang-picker { display: none; } .mk-signin { display: none; } } /* ============================================================ Motion + decoration (M16) Everything here degrades to a static, fully visible page: the reveal styles only bite once JS has marked the document, and every animation is disabled under prefers-reduced-motion. ============================================================ */ /* Reveal on scroll. The `js` class is set by the pre-paint script in App.razor, so a scriptless render never hides content. */ .js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22, .8, .36, 1), transform .8s cubic-bezier(.22, .8, .36, 1); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Blobs drift on independent paths so the hero never settles. */ .landing-blob.one { animation: fly1 22s ease-in-out infinite; } .landing-blob.two { animation: fly2 27s ease-in-out infinite; } .landing-blob.three { width: 300px; height: 300px; background: var(--accent); bottom: 6%; left: 18%; animation: fly3 31s ease-in-out infinite; } @keyframes fly1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 28% { transform: translate3d(13vw, 7vh, 0) scale(1.18); } 55% { transform: translate3d(5vw, 16vh, 0) scale(.92); } 78% { transform: translate3d(-9vw, 6vh, 0) scale(1.1); } } @keyframes fly2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-12vw, -8vh, 0) scale(1.12); } 60% { transform: translate3d(-4vw, -18vh, 0) scale(.9); } 82% { transform: translate3d(8vw, -7vh, 0) scale(1.06); } } @keyframes fly3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 35% { transform: translate3d(15vw, -10vh, 0) scale(1.22); } 65% { transform: translate3d(-6vw, -4vh, 0) scale(.88); } } /* The prompt box carries the typing placeholder; give it a blinking caret while the demo text types itself out. */ .landing-search textarea::placeholder { transition: color .3s ease; } .landing-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; color: var(--ink-2); margin: 3.2rem 0 1.5rem; } /* Gate denial: the prompt box would be a dead end, so it is replaced by the reason itself and a way to sign in. */ .landing-blocked { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; color: var(--ink-2); max-width: 34rem; margin: 3.2rem auto 0; } .landing-blocked-action { margin: 1.5rem 0 0; } /* Suggested searches: they float, and their icon leans on hover. */ .landing-options .chip { gap: .45rem; animation: chipBob 6s ease-in-out infinite; } .landing-options .chip .icon { width: 1rem; height: 1rem; color: var(--accent); transition: transform .3s cubic-bezier(.22, .8, .36, 1); } .landing-options .chip:hover .icon { transform: rotate(-14deg) scale(1.15); } .landing-options .chip:nth-child(1) { animation-delay: -0.2s; } .landing-options .chip:nth-child(2) { animation-delay: -1.7s; } .landing-options .chip:nth-child(3) { animation-delay: -3.1s; } .landing-options .chip:nth-child(4) { animation-delay: -4.4s; } @keyframes chipBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Scroll cue. Deliberately a solid control rather than a faint chevron: it has to read against the hero fade at a glance. */ .landing-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--surface); color: var(--accent); text-decoration: none; box-shadow: var(--shadow-2); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .landing-cue::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--accent); border-radius: inherit; opacity: 0; pointer-events: none; animation: cuePulse 2.6s cubic-bezier(.22, .8, .36, 1) infinite; } .landing-cue:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-3); } .landing-cue .icon { width: 1.4rem; height: 1.4rem; animation: cueBounce 1.9s ease-in-out infinite; } @keyframes cueBounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } } @keyframes cuePulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* Step and plan cards get a gradient edge that warms up on hover. */ .mk-card, .mk-plan { position: relative; } .mk-card::before, .mk-plan::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, var(--accent-soft), transparent 45%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .mk-card:hover::before, .mk-plan:hover::before { opacity: 1; } .mk-card > *, .mk-plan > * { position: relative; z-index: 1; } /* The badge still has to escape the card edge. */ .mk-plan > .mk-plan-badge { position: absolute; top: -.72rem; z-index: 2; } .mk-plan { transition: transform .3s cubic-bezier(.22, .8, .36, 1), border-color .3s ease; } .mk-plan:hover { transform: translateY(-5px); border-color: var(--accent-line); } .mk-plan.featured:hover { border-color: var(--accent-2); } /* The featured plan breathes. */ .mk-plan.featured { animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { box-shadow: var(--shadow-3); } 50% { box-shadow: var(--shadow-3), 0 0 0 4px var(--accent-soft); } } /* Closing call to action. */ .mk-cta-band { position: relative; padding: clamp(5rem, 12vw, 9rem) clamp(1.25rem, 5vw, 2.5rem); text-align: center; overflow: hidden; background: var(--canvas); border-top: 1px solid var(--line); } .mk-cta-band .mk-h2 { max-width: 34rem; margin-inline: auto; } .mk-cta-band .mk-lead { max-width: 34rem; margin: 0 auto 2rem; } .mk-cta-band .mk-cta { height: 3rem; padding: 0 1.9rem; font-size: 1rem; } /* Section headings rise as they arrive. */ .mk-head .mk-eyebrow { animation: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal].is-visible { opacity: 1; transform: none; transition: none; } .landing-blob, .landing-options .chip, .landing-cue .icon, .landing-cue::after, .mk-plan.featured, .mk-billing-thumb, .price-month, .price-year { animation: none !important; transition: none !important; } } /* Plan, usage and limits ------------------------------------------- */ /* The dead prompt box and the plan line: same wording everywhere, so the limit notice and the /chats strip are styled together. Deliberately not a boxed card: it replaces the prompt in place, so it reads as part of the page. */ .limit-card { max-width: 46rem; margin: 0 auto; padding: 1.35rem 1.6rem; text-align: center; } .limit-title { margin: 0 0 .35rem; color: var(--ink); font-weight: 600; } .limit-meta { margin: 0 0 1.1rem; color: var(--ink-3); font-size: .9rem; } .limit-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .btn-cta { display: inline-flex; align-items: center; justify-content: center; height: 2.4rem; padding: 0 1.25rem; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--solid-ink); font-family: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; } .btn-cta:hover { filter: brightness(1.06); color: var(--solid-ink); } .btn-cta.ghost { background: transparent; border-color: var(--line-soft); color: var(--ink); } .btn-cta.ghost:hover { background: var(--hover); color: var(--ink); } .usage-strip { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .6rem .95rem; border: 1px solid var(--line-soft); border-radius: .75rem; background: var(--surface); font-size: .88rem; color: var(--ink-2); } .usage-strip-label { font-weight: 600; color: var(--ink); } .usage-strip-cta { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; } .usage-strip-cta:hover { text-decoration: underline; } /* Percentage usage meter (P2-M6) ------------------------------------- */ /* The budget is internal provider cost, so a window renders as a share used and a reset time — never as money. Nested caps: monthly, then weekly/5-hour when enabled. */ .usage-meter { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .usage-meter-row { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; gap: .25rem .7rem; font-size: .84rem; color: var(--ink-2); } .usage-meter-track { display: block; height: .5rem; border-radius: 999px; background: var(--canvas); overflow: hidden; } .usage-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; } .usage-meter-percent { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .usage-meter-reset { grid-column: 2 / -1; color: var(--hint); font-size: .78rem; } .usage-meter-unlimited { margin: 0; color: var(--ink-2); font-weight: 600; } /* Admin budget grid -------------------------------------------------- */ .plan-usage-flags { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; } .plan-usage-flags label { display: flex; align-items: center; gap: .3rem; white-space: nowrap; } .plan-usage-actions { display: flex; gap: .35rem; } /* Delivery locations (M21) ----------------------------------- */ /* Add-location card + one card per saved location (same card language as memory). */ .location-compose { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.25rem; } .location-compose-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; } .location-compose-head h3 { margin: 0; font-size: .95rem; } .location-detect { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .3rem; border: 0; border-radius: .5rem; background: transparent; color: var(--accent); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s ease; } .location-detect:hover:not(:disabled) { background: var(--accent-soft); } .location-detect:disabled { opacity: .55; cursor: default; } .location-detect .icon { width: 1rem; height: 1rem; } .location-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; } .location-field { display: block; min-width: 0; } .location-field > span { display: block; margin-bottom: .2rem; font-size: .74rem; font-weight: 600; color: var(--ink-3); } .location-field-wide { grid-column: 1 / -1; } .location-cards { display: grid; gap: .75rem; } .location-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: .85rem 1rem; } .location-card.is-default { border-color: var(--accent-line); } .location-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; } .location-card-label { flex: 1; min-width: 10rem; font-weight: 600; } .location-card-actions { display: flex; gap: .35rem; margin-left: auto; } .location-empty { margin: .5rem 0 0; } .location-default-badge { background: var(--accent); color: var(--solid-ink); font-weight: 600; } /* Chat delivery-location picker (chat settings) */ .composer-settings { display: flex; align-items: center; gap: .5rem; max-width: 48rem; margin: 0 auto .4rem; padding: 0 .1rem; } .location-picker { position: relative; display: inline-flex; } .location-trigger { display: inline-flex; align-items: center; gap: .4rem; } .location-trigger strong { color: var(--ink); font-weight: 600; } .location-trigger .icon { width: 15px; height: 15px; } .location-panel { position: absolute; bottom: calc(100% + .5rem); left: 0; z-index: 40; width: min(23rem, 82vw); padding: .85rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-menu); } .location-panel-title { font-weight: 600; margin: 0 0 .1rem; } .location-panel .hint { color: var(--ink-3); font-size: .8rem; margin-bottom: .65rem; } .location-options { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; } .location-option { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .location-option:hover:not(:disabled) { background: var(--line-soft); } .location-option:disabled { opacity: .5; cursor: default; } .location-option.is-active { border-color: var(--accent); background: var(--accent-soft); } .location-option-label { font-weight: 600; color: var(--ink); } .location-option-city { font-size: .78rem; color: var(--ink-3); } .location-use-default, .location-add-toggle { border: none; background: transparent; color: var(--accent); font-size: .84rem; font-weight: 600; padding: .2rem 0; cursor: pointer; } .location-use-default:hover, .location-add-toggle:hover { text-decoration: underline; } .location-add-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .45rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); } .location-add-panel .form-control:first-child, .location-add-panel .form-control:nth-child(2) { grid-column: 1 / -1; } .location-add-actions { grid-column: 1 / -1; display: flex; gap: .4rem; } .location-error { color: var(--danger-ink); font-size: .82rem; margin: .4rem 0 0; } /* Wishlists & price alerts (plan 02) -------------------------- */ .wishlist-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.25rem; align-items: start; } @media (max-width: 820px) { .wishlist-layout { grid-template-columns: 1fr; } } /* Paste a product link; the assistant reads the page and files it (P2-M10). */ .wishlist-add-link { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.1rem; margin-bottom: 1.25rem; } .wishlist-add-link-label { margin: 0 0 .6rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); } .wishlist-add-link-fields { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: .5rem; align-items: start; } @media (max-width: 640px) { .wishlist-add-link-fields { grid-template-columns: 1fr; } } .wishlist-lists { display: flex; flex-direction: column; gap: .2rem; } .wishlist-list { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem 1.6rem .45rem .6rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .wishlist-list:hover { background: var(--line-soft); } .wishlist-list.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); } .wishlist-list-name { flex: 1; font-weight: 600; } .wishlist-list-count { color: var(--ink-3); font-size: .8rem; } /* A draggable category row: the grip hints at reordering, and the delete button only reveals itself while the row is hovered or focused. */ .wishlist-row { position: relative; display: flex; align-items: center; } .wishlist-row[draggable="true"] { cursor: grab; } .wishlist-row.is-dragging { opacity: .5; } .wishlist-list-remove { position: absolute; right: .2rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: .4rem; background: transparent; color: var(--ink-3); font-size: .8rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease; } .wishlist-row:hover .wishlist-list-remove, .wishlist-row:focus-within .wishlist-list-remove { opacity: 1; } .wishlist-list-remove:hover { color: var(--danger-ink); background: var(--hover); } .wishlist-new { display: flex; gap: .35rem; margin-top: .5rem; } .wishlist-add { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .45rem .6rem; border: 1px dashed var(--line); border-radius: .6rem; background: transparent; color: var(--ink-3); font-family: inherit; font-size: .85rem; text-align: left; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .wishlist-add:hover { border-color: var(--accent-line); color: var(--accent); } .wishlist-add span { font-size: .95rem; line-height: 1; } /* All-products view: one collapsible card per category. */ .wishlist-group { border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); margin-bottom: .75rem; overflow: hidden; } .wishlist-group > summary { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; cursor: pointer; font-weight: 600; list-style: none; } .wishlist-group > summary::-webkit-details-marker { display: none; } .wishlist-group > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); transition: transform .15s ease; } .wishlist-group:not([open]) > summary::after { transform: rotate(-90deg); } .wishlist-group-name { flex: 0 1 auto; } .wishlist-group > .text-muted, .wishlist-group > .saved-grid, .wishlist-group > .saved-rows { margin: .1rem .8rem .8rem; } .wishlist-item-tools { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; } /* Saved cards reuse the shortlist card, scaled down into tidy rows: photo left, one column of facts and a light footer of controls on the right, so a long list stays scannable. */ .saved-rows { display: flex; flex-direction: column; gap: .6rem; width: 100%; margin: .2rem 0 .5rem; } .saved-card .card-media { flex: 0 0 118px; width: 118px; min-height: 104px; } .saved-card .card-media img { padding: .4rem; } .saved-card .card-media-fallback { font-size: 1.6rem; } .saved-card .card-main { padding: .6rem .8rem; } .saved-card h3 { font-size: .92rem; margin: 0 0 .2rem; } .saved-card .price { font-size: .98rem; margin: 0; } .saved-card .shop-row { margin: 0; } .saved-card .shop-name { font-size: .8rem; } .saved-card .why { font-size: .8rem; margin: .3rem 0 .1rem; } /* A hairline footer keeps the controls out of the way of the product facts. */ .saved-card .card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .45rem .9rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line-soft); } .card-foot-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .9rem; } /* The list picker reads as one small inline control, not a stacked field. */ .saved-card .field-inline { flex-direction: row; align-items: center; gap: .35rem; font-size: .74rem; } .saved-card .field-inline .form-select { min-width: 6.5rem; } .saved-card .saved-actions { margin: 0; } .saved-card .card-cta { padding: .3rem .75rem; font-size: .82rem; } .saved-card .saved-image-tools { margin: 0; } /* One switch turns the drop alert on or off; no target price in this pass. */ .alert-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--ink-2); cursor: pointer; user-select: none; } .alert-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .alert-toggle-track { position: relative; flex: 0 0 auto; width: 2rem; height: 1.1rem; border-radius: 999px; background: var(--line); transition: background .15s ease; } .alert-toggle-track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; } .alert-toggle-input:checked + .alert-toggle-track { background: var(--accent); } .alert-toggle-input:checked + .alert-toggle-track::after { transform: translateX(.9rem); } .alert-toggle-input:focus-visible + .alert-toggle-track { outline: 2px solid var(--accent-line); outline-offset: 2px; } .alert-toggle-input:disabled + .alert-toggle-track { opacity: .45; } @media (max-width: 640px) { .saved-card .card-media { flex-basis: 120px; width: 100%; } } .field-inline { display: flex; flex-direction: column; gap: .15rem; margin: 0; font-size: .76rem; color: var(--ink-3); } .field-inline .form-control, .field-inline .form-select { min-width: 8rem; } .wishlist-picker { position: relative; display: inline-flex; } .wishlist-trigger { display: inline-flex; align-items: center; gap: .35rem; } .wishlist-trigger .icon { width: 15px; height: 15px; } .wishlist-panel { position: absolute; bottom: calc(100% + .4rem); right: 0; z-index: 40; width: min(16rem, 70vw); padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-menu); } .wishlist-panel-title { font-weight: 600; margin: 0 0 .4rem; font-size: .85rem; } .wishlist-option { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; padding: .35rem .5rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; } .wishlist-option:hover:not(:disabled) { background: var(--line-soft); } .wishlist-option:disabled { opacity: .5; cursor: default; } .wishlist-option.is-active { background: var(--accent-soft); border-color: var(--accent-line); } .wishlist-option-mark { font-weight: 700; color: var(--accent); } .price-moved { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: .5rem; background: var(--accent-soft); color: var(--accent); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* The estimated avoided overspend at pick time (plan 02 P2-M19). An estimate, so it is worded "under typical" and never styled like verified cash. */ .saving { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Admin catalog ----------------------------------------------- */ .catalog-search { display: flex; gap: .5rem; max-width: 42rem; margin: 1rem 0; } .catalog-attributes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; } .catalog-attribute { border: 1px solid var(--line); border-radius: .5rem; padding: .1rem .45rem; font-size: .78rem; background: var(--surface); } /* The card-media box is sized for a product grid, so neutralize it in the admin table. */ .catalog-image { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; } .catalog-image-thumb { flex: 0 0 auto; width: 140px; } .catalog-image-thumb .card-media { margin: 0; height: 100px; border: 1px solid var(--line); border-radius: .5rem; } .catalog-image-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; } .catalog-image-form .field { flex: 1 1 16rem; } .catalog-price-form { display: flex; gap: .35rem; align-items: center; } .catalog-price-form input { max-width: 7rem; } .catalog-history-title { font-weight: 600; margin: .6rem 0 .2rem; font-size: .85rem; } .catalog-history { margin: 0; padding-left: 1.1rem; color: var(--ink-3); font-size: .82rem; } /* Honorable mentions under the shortlist (plan 02 P2-M9). Names, not cards. */ .honorable-mentions { margin: .9rem 0 .2rem; padding: .85rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper); } .honorable-mentions h4 { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); } .honorable-mentions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .honorable-mentions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .88rem; } .mention-name { font-weight: 600; } .mention-price { color: var(--ink-2); } .mention-why { color: var(--ink-3); font-size: .83rem; } .mention-hint { margin: .6rem 0 0; color: var(--ink-3); font-size: .82rem; } /* The shortlist side by side: products as columns, parameters as rows (plan 02 P2-M9). */ .compare-table-wrap { margin: 1rem 0 .2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .compare-table-wrap > summary { cursor: pointer; padding: .6rem .95rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); } .compare-scroll { overflow-x: auto; } .compare-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .compare-table th, .compare-table td { border-top: 1px solid var(--line-soft); padding: .45rem .7rem; text-align: left; vertical-align: top; white-space: nowrap; } .compare-table thead th { font-size: .8rem; font-weight: 700; color: var(--ink); white-space: normal; min-width: 9rem; } .compare-table .compare-parameter { color: var(--ink-3); font-weight: 600; white-space: nowrap; } .compare-table .compare-conclusion td { font-weight: 600; color: var(--accent); } .compare-table .compare-conclusion th { color: var(--ink-3); } /* Saved comparisons (plan 02 P2-M10). The rail lists them on the left; a row opens the table. */ .rail-new { margin: .2rem 0 .6rem; } .comparison-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; margin-bottom: .3rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: var(--ink) !important; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .comparison-row:hover { border-color: var(--accent-line); background: var(--accent-soft); } .comparison-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; } .comparison-count { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--ink-3); background: var(--hover); border-radius: 999px; padding: .1rem .5rem; } /* The comparison table page. */ .compare-page { max-width: 72rem; margin: 0 auto; padding: 2rem 2rem 3rem; } .compare-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; } .compare-page-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .compare-page-title h1 { margin: 0; font-size: 1.4rem; } .compare-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .compare-product { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .compare-product .card-media { margin: 0; height: 150px; border-bottom: 1px solid var(--line-soft); border-radius: 0; } .compare-product-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .85rem .95rem; } .compare-product-body h3 { font-size: .95rem; margin: 0 0 .4rem; } .compare-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; } .compare-product-actions select { max-width: 12rem; } /* The comparisons index (/compare). One comparison per category, each opening the table. */ .comparisons-page { max-width: 52rem; } .comparisons-new { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 1rem; } .comparisons-new input { max-width: 22rem; } .comparisons-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .comparison-entry { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: .7rem .9rem; } .comparison-entry:hover { border-color: var(--accent-line); } .comparison-entry-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--ink) !important; text-decoration: none; } .comparison-entry-name { font-weight: 600; font-size: .95rem; } .comparison-entry-meta { color: var(--ink-3); font-size: .8rem; } /* ============================================================ Value dashboard (/dashboard) — KPIs, gauges and charts. Token-only: every colour is a theme or chart-palette variable, so light/dark and the accent presets all apply. ============================================================ */ .dash { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* ---------- Hero ---------- */ .dash-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; border-radius: var(--radius-xl); padding: 1.7rem 1.8rem; margin-bottom: 1.25rem; color: var(--solid-ink); background: radial-gradient(120% 180% at 0% 0%, var(--accent) 0%, transparent 58%), linear-gradient(135deg, var(--solid), var(--accent-2)); box-shadow: var(--shadow-2); } .dash-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 130% at 100% 0%, var(--accent-glow), transparent 60%); pointer-events: none; } .dash-hero-text { position: relative; z-index: 1; min-width: 0; } .dash-eyebrow { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .82; } .dash-hero h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.025em; } .dash-lede { margin: 0; max-width: 58ch; opacity: .92; } .dash-hero-panel { position: relative; z-index: 1; flex: 0 0 auto; width: min(290px, 36%); display: flex; flex-direction: column; gap: .05rem; padding: .85rem 1rem .6rem; border-radius: var(--radius-lg); background: var(--hero-panel); border: 1px solid var(--hero-panel-line); backdrop-filter: blur(4px); } .dash-hero-panel-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .dash-hero-panel-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dash-hero-panel-meta { font-size: .76rem; opacity: .82; } .dash-spark { width: 100%; height: 54px; display: block; margin-top: .45rem; } .dash-spark-area { fill: url(#dashSpark); } .dash-spark-stop-a { stop-color: var(--solid-ink); stop-opacity: .3; } .dash-spark-stop-b { stop-color: var(--solid-ink); stop-opacity: 0; } .dash-spark-line { fill: none; stroke: var(--solid-ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .92; transition: stroke-dashoffset 1.1s cubic-bezier(.25, .8, .3, 1) .35s; } /* ---------- KPI tiles ---------- */ .dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; margin-bottom: 1rem; } .dash-tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: .85rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.1rem; box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dash-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); } .dash-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-line); } .dash-tile-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; } .dash-tile-ico svg { width: 21px; height: 21px; } .tone-1 { background: color-mix(in srgb, var(--chart-1) 15%, var(--surface)); color: var(--chart-1); } .tone-2 { background: color-mix(in srgb, var(--chart-2) 15%, var(--surface)); color: var(--chart-2); } .tone-3 { background: color-mix(in srgb, var(--chart-3) 15%, var(--surface)); color: var(--chart-3); } .tone-4 { background: color-mix(in srgb, var(--chart-5) 15%, var(--surface)); color: var(--chart-5); } .dash-tile-body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; } .dash-tile-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .dash-tile-value { font-size: 1.95rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); font-variant-numeric: tabular-nums; } .dash-tile-hint { font-size: .78rem; color: var(--hint); } /* ---------- Layout grid ---------- */ .dash-masonry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } .dash-span-4 { grid-column: span 4; } .dash-span-5 { grid-column: span 5; } .dash-span-6 { grid-column: span 6; } .dash-span-7 { grid-column: span 7; } .dash-span-12 { grid-column: span 12; } .dash-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-1); } /* A stretched card keeps its header at the top; its chart/list body centres in the leftover space instead of hugging the top and leaving a gap below. */ .dash-card > .dash-donut, .dash-card > .dash-gauges, .dash-card > .dash-valuebar, .dash-card > .dash-area, .dash-card > .dash-columns, .dash-card > .dash-list, .dash-card > .dash-drops, .dash-card > .dash-estimated, .dash-card > p.text-muted { margin-top: auto; margin-bottom: auto; } .dash-card h2 { margin: 0 0 .15rem; font-size: 1.02rem; letter-spacing: -.01em; } .dash-card-hint { margin: 0 0 .9rem; font-size: .8rem; color: var(--hint); } .dash-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .dash-card-head .dash-card-hint { margin-bottom: .75rem; } .dash-card-saving { border-color: var(--accent-line); } .dash-card-estimated { border-color: var(--line); } .dash-badge-est { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .dash-estimated { display: flex; flex-direction: column; gap: .5rem; } .dash-estimated-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; } .dash-estimated-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .dash-estimated-note { margin: 0; font-size: .78rem; color: var(--hint); } /* ---------- Tracked value (stacked bar) ---------- */ .dash-valuebar-track { display: flex; height: 1.35rem; border-radius: 999px; overflow: hidden; background: var(--hover); border: 1px solid var(--line-soft); } .dash-valuebar-seg { height: 100%; min-width: 3px; transition: width .8s cubic-bezier(.25, .8, .3, 1); } .seg-1 { background: var(--chart-1); } .seg-2 { background: var(--chart-2); } .seg-3 { background: var(--chart-3); } .seg-4 { background: var(--chart-4); } .seg-5 { background: var(--chart-5); } .seg-6 { background: var(--chart-6); } .dash-legend { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .dash-legend-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: .6rem; font-size: .85rem; } .dash-legend-value { color: var(--ink-2); white-space: nowrap; font-size: .82rem; font-variant-numeric: tabular-nums; } .dash-legend-dot { width: .65rem; height: .65rem; border-radius: 50%; flex: none; } .dash-legend-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-legend-count { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } .dash-legend-share { color: var(--ink-3); min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Usage gauges ---------- */ .dash-gauges { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem 1.5rem; margin-top: .4rem; } .dash-gauge { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; } .dash-gauge-plot { position: relative; width: 118px; height: 118px; } .dash-gauge-plot svg { width: 100%; height: 100%; } .dash-gauge-track { stroke: var(--hover); } .dash-gauge-fill { stroke: var(--accent); transition: stroke-dasharray .9s cubic-bezier(.25, .8, .3, 1); } .dash-gauge-value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .dash-gauge-label { font-size: .78rem; color: var(--ink-3); text-align: center; } .dash-gauge-reset { display: block; font-size: .72rem; color: var(--hint); text-align: center; } .tone-high .dash-gauge-fill { stroke: var(--tier-upgrade); } .tone-full .dash-gauge-fill { stroke: var(--danger); } .dash-unlimited { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem; color: var(--accent); font-weight: 700; } .dash-unlimited-mark { font-size: 2.6rem; line-height: 1; } /* ---------- Area (trend) chart ---------- */ .dash-area { width: 100%; height: auto; display: block; margin-top: .3rem; } .dash-grid-line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 4 6; } .dash-area-fill { fill: url(#dashTrend); } .dash-area-stop-a { stop-color: var(--accent); stop-opacity: .36; } .dash-area-stop-b { stop-color: var(--accent); stop-opacity: .02; } .dash-area-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.25, .8, .3, 1) .25s; } .dash-area-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.4; } .dash-area-value { fill: var(--ink); font-size: 12px; font-weight: 700; } .dash-area-label { fill: var(--ink-3); font-size: 12px; } /* ---------- Doughnut ---------- */ .dash-donut { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .dash-donut-plot { position: relative; width: 200px; height: 200px; } .dash-donut-plot svg { width: 100%; height: 100%; } .dash-donut-track { stroke: var(--hover); } .dash-seg { transition: stroke-dasharray .9s cubic-bezier(.25, .8, .3, 1); } .dash-seg.seg-1 { stroke: var(--chart-1); } .dash-seg.seg-2 { stroke: var(--chart-2); } .dash-seg.seg-3 { stroke: var(--chart-3); } .dash-seg.seg-4 { stroke: var(--chart-4); } .dash-seg.seg-5 { stroke: var(--chart-5); } .dash-seg.seg-6 { stroke: var(--chart-6); } .dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; } .dash-donut-center strong { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .dash-donut-center span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .dash-donut .dash-legend { width: 100%; } /* ---------- Horizontal bars ---------- */ .dash-bar { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto; align-items: center; gap: .6rem; margin-bottom: .6rem; } .dash-bar:last-child { margin-bottom: 0; } .dash-bar-label { font-size: .85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-bar-track { height: .6rem; border-radius: 999px; background: var(--hover); overflow: hidden; } .dash-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s cubic-bezier(.25, .8, .3, 1); } .dash-bar-count { min-width: 1.4rem; text-align: right; font-size: .82rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* ---------- Column chart ---------- */ .dash-columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; align-items: end; margin-top: .5rem; } .dash-column { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; } .dash-column-value { height: 1rem; font-size: .75rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; } .dash-column-track { width: 100%; height: 118px; display: flex; align-items: flex-end; border-radius: 9px; background: var(--hover); overflow: hidden; } .dash-column-bar { width: 100%; min-height: 4px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); transition: height .8s cubic-bezier(.25, .8, .3, 1); } .dash-column-label { max-width: 100%; font-size: .72rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Spotlight ---------- */ .dash-spotlight { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border-color: var(--accent-line); } .dash-spotlight-body { display: flex; align-items: center; gap: .9rem; } .dash-spotlight-body .card-media { flex: 0 0 84px; width: 84px; height: 84px; margin: 0; border: 1px solid var(--line-soft); border-radius: 12px; } .dash-spotlight-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .dash-card-title { color: var(--ink) !important; font-weight: 600; text-decoration: none; } .dash-card-title:hover { color: var(--accent) !important; } .dash-spotlight-price { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dash-soft { color: var(--ink-3); font-size: .85rem; } /* ---------- Price drops ---------- */ .dash-drops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; } .dash-drop-row { display: flex; flex-direction: column; gap: .35rem; } .dash-drop-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .dash-drop { color: var(--ok); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .dash-drop-bars { position: relative; height: .55rem; border-radius: 999px; background: var(--hover); overflow: hidden; } .dash-drop-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; } .dash-drop-bar-was { background: var(--line); } .dash-drop-bar-now { background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s cubic-bezier(.25, .8, .3, 1); } .dash-drop-meta { display: flex; flex-wrap: wrap; gap: .85rem; font-size: .78rem; font-variant-numeric: tabular-nums; } .dash-was { color: var(--hint); } .dash-now { color: var(--ink); font-weight: 600; } /* ---------- Lists & badges ---------- */ .dash-badge { font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; } .dash-badge-ok { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .dash-row { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-soft); } .dash-row:last-child { border-bottom: none; padding-bottom: 0; } .dash-row-title { font-size: .9rem; font-weight: 600; color: var(--ink) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-row-title:hover { color: var(--accent) !important; } .dash-row-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; font-variant-numeric: tabular-nums; } /* ---------- Recently saved ---------- */ .dash-card-recent { grid-column: 1 / -1; } .dash-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; } .dash-recent-card { display: flex; flex-direction: column; gap: .25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; text-decoration: none; color: var(--ink) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dash-recent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-line); } .dash-recent-card .card-media { height: 116px; margin: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); } .dash-recent-title { padding: 0 .7rem; font-size: .85rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dash-recent-price { padding: 0 .7rem .7rem; font-size: .85rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* ---------- Empty state ---------- */ .dash-empty { max-width: 32rem; margin: 3rem auto; padding: 2rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-xl); background: var(--surface); } .dash-empty-title { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; } /* ---------- Entrance reveal ---------- The page is pre-rendered with every bar, gauge and line at zero; one render later the real values arrive and the CSS transitions draw them in. Cards and tiles also rise into place, staggered so the eye reads them top-left first. */ @keyframes dashRise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dashFade { from { opacity: 0; } to { opacity: 1; } } .dash-hero { animation: dashFade .6s cubic-bezier(.2, .7, .3, 1) backwards; } .dash-tiles > *, .dash-masonry > * { animation: dashRise .55s cubic-bezier(.2, .7, .3, 1) backwards; } .dash-tiles > *:nth-child(2) { animation-delay: .06s; } .dash-tiles > *:nth-child(3) { animation-delay: .12s; } .dash-tiles > *:nth-child(4) { animation-delay: .18s; } .dash-masonry > *:nth-child(1) { animation-delay: .05s; } .dash-masonry > *:nth-child(2) { animation-delay: .1s; } .dash-masonry > *:nth-child(3) { animation-delay: .15s; } .dash-masonry > *:nth-child(4) { animation-delay: .2s; } .dash-masonry > *:nth-child(5) { animation-delay: .25s; } .dash-masonry > *:nth-child(6) { animation-delay: .3s; } .dash-masonry > *:nth-child(7) { animation-delay: .35s; } .dash-masonry > *:nth-child(8) { animation-delay: .4s; } .dash-masonry > *:nth-child(9) { animation-delay: .45s; } @media (prefers-reduced-motion: reduce) { .dash-hero, .dash-tiles > *, .dash-masonry > * { animation: none; } .dash-area-line, .dash-spark-line { stroke-dasharray: none; transition: none; } .dash-gauge-fill, .dash-valuebar-seg, .dash-bar-fill, .dash-column-bar, .dash-drop-bar-now, .dash-seg { transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .dash-span-4, .dash-span-5, .dash-span-7 { grid-column: span 6; } } @media (max-width: 720px) { .dash { padding: 1rem .9rem 3rem; } .dash-hero { flex-direction: column; align-items: flex-start; padding: 1.3rem 1.2rem; } .dash-hero-panel { width: 100%; } .dash-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .dash-masonry { grid-template-columns: 1fr; } .dash-span-4, .dash-span-5, .dash-span-6, .dash-span-7, .dash-span-12 { grid-column: 1 / -1; } .dash-bar { grid-template-columns: minmax(0, 6.5rem) 1fr auto; } } /* Sidebar tools: search + the panel collapse control (plan 02 P2-M11). */ .sidebar-brand-tools { display: inline-flex; align-items: center; gap: .15rem; } .sidebar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: none; background: transparent; color: var(--ink-3); border-radius: .45rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .sidebar-icon-btn:hover { background: var(--hover); color: var(--ink); } .sidebar-icon-btn.is-on { background: var(--accent-soft); color: var(--accent); } .sidebar-icon-btn .icon { width: 1.05rem; height: 1.05rem; } .sidebar-search { margin: 0 0 .4rem; } .sidebar-search input { width: 100%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .sidebar-search input:focus { border-color: var(--accent-line); box-shadow: none; } .sidebar-empty { color: var(--ink-3); font-size: .85rem; margin: .2rem .75rem; } /* Purchases archive (plan 02 P2-M14): the bought cards and the shared bought/edit form. */ .purchases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-top: 1rem; } .purchase-card { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .purchase-card .card-media { height: 140px; border-radius: .6rem; overflow: hidden; } .purchase-body { display: flex; flex-direction: column; gap: .3rem; } .purchase-title { font-weight: 600; color: var(--ink); text-decoration: none; } .purchase-title:hover { color: var(--accent); } .purchase-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; font-size: .85rem; color: var(--ink-2); } .purchase-paid { font-weight: 600; color: var(--ink); } .purchase-estimate { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; color: var(--ink-3); } .purchase-delta { padding: .05rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; } .purchase-shop, .purchase-date { margin: 0; font-size: .8rem; color: var(--ink-3); } .purchase-note { margin: 0; font-size: .84rem; color: var(--ink-2); } .purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; } .purchase-edit { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; } .purchase-editor { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; } .purchase-editor .field { display: flex; flex-direction: column; gap: .15rem; margin: 0; font-size: .76rem; color: var(--ink-3); } .purchase-editor .field .form-control { min-width: 8rem; } .purchase-editor .field-wide { flex: 1 1 100%; } .purchase-editor .field-wide .form-control { min-width: 0; } .purchase-editor-actions { display: flex; gap: .4rem; } .purchase-editor-error { flex: 1 1 100%; margin: 0; color: var(--danger); }