/* ========================================================================== TRSET — design system. One stylesheet, no framework, no external fonts. Two themes driven by [data-theme] on : "dark" (default) and "light"; the preference is "system" unless the user picks otherwise. The accent is a violet→cyan pair. Depth comes from three stacked layers — an aurora gradient, a fine grid, and a noise film — rather than from heavy drop shadows, so panels stay crisp at any zoom level. Sections, in order: 1. Tokens 6. Buttons & forms 11. Landing: coding ranks 2. Reset & type 7. Tables 12. Landing: calculator 3. Background 8. Badges 13. Landing: FAQ & misc 4. Chrome 9. Model cards 14. Toasts 5. Layout 10. Landing: hero 15. Motion & print ========================================================================== */ /* ==================== 1. Tokens ==================== */ :root { /* Radii */ --radius-lg: 20px; --radius: 14px; --radius-sm: 9px; --radius-xs: 6px; /* Spacing scale */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; /* Type */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif; /* The neon pair, shared by both themes. */ --violet: #7c6cff; --cyan: #2dd4ff; --pink: #b58cff; --accent: var(--violet); --accent-2: var(--cyan); --accent-grad: linear-gradient(120deg, var(--violet), var(--cyan)); --accent-grad-soft: linear-gradient(120deg, color-mix(in srgb, var(--violet) 22%, transparent), color-mix(in srgb, var(--cyan) 22%, transparent)); /* Semantic */ --good: #38d39f; --warn: #f0b429; --bad: #ff6b6b; --cache: #38d39f; --gold: #f0b429; --silver: #a9b4cc; --bronze: #d08a4a; /* Easing */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ---------- Dark (default) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #06070c; --bg-soft: #0a0c14; --panel: #0f1220; --panel-2: #151a2b; --panel-3: #1b2136; --line: #232a44; --line-soft: #1a2033; --fg: #e9ecf7; --fg-dim: #9aa4be; --fg-faint: #69738c; --accent-soft: #221f4d; --glow-violet: rgba(124, 108, 255, .34); --glow-cyan: rgba(45, 212, 255, .24); --shadow-panel: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 44px rgba(0, 0, 0, .46); --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 60px rgba(0, 0, 0, .55); --hairline: rgba(255, 255, 255, .07); --btn-fg: #ffffff; --grid-line: rgba(148, 163, 214, .055); --noise-opacity: .022; --err-bg: #2a1618; --err-line: #57292f; --err-fg: #ffb3b3; --ok-bg: #14302a; --ok-line: #235c4b; --ok-fg: #b6f0da; --warn-bg: #302713; --warn-line: #5c4a20; --warn-fg: #ffdd9e; } /* ---------- Light ---------- */ [data-theme="light"] { color-scheme: light; --bg: #f4f6fc; --bg-soft: #eceff9; --panel: #ffffff; --panel-2: #f4f6fd; --panel-3: #eaeef9; --line: #dbe0f0; --line-soft: #e8ebf6; --fg: #141726; --fg-dim: #565e78; --fg-faint: #868da5; --accent-soft: #e7e4ff; --violet: #6553f0; --cyan: #0a9bce; --pink: #8b6cf0; --glow-violet: rgba(101, 83, 240, .2); --glow-cyan: rgba(10, 155, 206, .16); --shadow-panel: 0 1px 2px rgba(24, 30, 60, .05), 0 10px 34px rgba(24, 30, 60, .07); --shadow-lift: 0 2px 6px rgba(24, 30, 60, .07), 0 20px 50px rgba(24, 30, 60, .11); --hairline: rgba(20, 24, 48, .06); --btn-fg: #ffffff; --grid-line: rgba(60, 74, 130, .05); --noise-opacity: .016; --err-bg: #fdeeee; --err-line: #f0c4c4; --err-fg: #a8333a; --ok-bg: #e8f8f2; --ok-line: #bfe8d8; --ok-fg: #14795a; --warn-bg: #fdf6e3; --warn-line: #ecd9a0; --warn-fg: #85681a; } /* ==================== 2. Reset & typography ==================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .3s var(--ease), color .3s var(--ease); } /* Sticky footer: the content column stretches so short pages still pin the footer to the bottom of the viewport instead of floating mid-page. */ body { display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--accent); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: var(--accent-2); text-decoration: none; } a:not(.btn):not([data-link]):hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0 0 .55rem; font-weight: 680; letter-spacing: -.021em; line-height: 1.24; text-wrap: balance; } h1 { font-size: 1.75rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } h4 { font-size: .92rem; } p { margin: 0 0 .8rem; } p:last-child { margin-bottom: 0; } code, .mono { font-family: var(--mono); font-size: .92em; font-variant-ligatures: none; } /* Selection picks up the accent so it reads as part of the design. */ ::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--fg); } /* One focus ring for every interactive element. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: var(--radius-xs); } /* Scrollbars, dark-theme aware. */ * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: padding-box; } /* ==================== 3. Background ==================== */ /* * Three fixed layers, none of them interactive: * ::before — the aurora: four coloured blobs that drift very slowly * ::after — a 44px grid, masked to fade out down the page * .bg-noise (in the markup) — a film of SVG noise that kills gradient banding */ body::before { content: ""; position: fixed; inset: -20vmax; pointer-events: none; z-index: 0; background: radial-gradient(38vmax 30vmax at 12% -4%, var(--glow-violet), transparent 68%), radial-gradient(34vmax 26vmax at 88% 2%, var(--glow-cyan), transparent 68%), radial-gradient(30vmax 26vmax at 76% 62%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%), radial-gradient(28vmax 24vmax at 8% 78%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%); filter: blur(12px); animation: aurora 44s var(--ease) infinite alternate; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.6%, -1.4%, 0) scale(1.06); } 100% { transform: translate3d(-1.4%, 1.6%, 0) scale(1.02); } } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%); } .bg-noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--noise-opacity); mix-blend-mode: overlay; background-repeat: repeat; background-size: 180px 180px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Everything real sits above the backdrop. */ #topbar, main, #toasts, footer { position: relative; z-index: 1; } /* ==================== 4. Chrome (top bar) ==================== */ #topbar { display: flex; align-items: center; gap: .35rem; padding: .5rem clamp(.9rem, 3vw, 1.6rem); min-height: 60px; background: color-mix(in srgb, var(--bg-soft) 76%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; } /* A hairline of accent light along the bottom edge. */ #topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--glow-violet) 22%, var(--glow-cyan) 72%, transparent); opacity: .8; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; letter-spacing: .05em; color: var(--fg); margin-right: .7rem; } .brand:hover { color: var(--fg); text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--accent-grad); box-shadow: 0 0 0 1px var(--hairline), 0 0 16px var(--glow-violet), 0 0 30px var(--glow-cyan); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease); } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); box-shadow: 0 0 0 1px var(--hairline), 0 0 22px var(--glow-violet), 0 0 44px var(--glow-cyan); } .brand-mark svg { width: 18px; height: 18px; display: block; } .brand-name { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="light"] .brand-name { /* Gradient text washes out on white; deepen both stops. */ background: linear-gradient(120deg, #5643e6, #0782b4); -webkit-background-clip: text; background-clip: text; } #mainnav { display: flex; gap: .15rem; flex-wrap: wrap; } #mainnav a { padding: .4rem .68rem; border-radius: var(--radius-sm); color: var(--fg-dim); font-weight: 520; font-size: .9rem; white-space: nowrap; transition: color .15s var(--ease), background-color .15s var(--ease); } #mainnav a:hover { background: var(--panel-2); color: var(--fg); } #mainnav a.active { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); } .spacer { flex: 1; } #userbox { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: nowrap; } #userbox .who { color: var(--fg-dim); font-size: .88rem; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #userbox .who strong { color: var(--fg); font-weight: 620; } .chrome-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; box-sizing: border-box; background: var(--panel-2); color: var(--fg-dim); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .55rem; font: inherit; font-size: .8rem; font-weight: 640; line-height: 1; cursor: pointer; white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease); } .chrome-btn:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 14px var(--glow-violet); } /* Balance pill. */ .chip { display: inline-flex; align-items: center; justify-content: center; height: 32px; box-sizing: border-box; font-family: var(--mono); font-size: .84rem; font-weight: 600; line-height: 1; background: var(--panel); border: 1px solid var(--line); padding: 0 .75rem; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--hairline); } .chip.low { border-color: var(--err-line); color: var(--err-fg); background: var(--err-bg); } /* ==================== 5. Layout ==================== */ main { flex: 1 0 auto; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(1.1rem, 3vw, 2rem) clamp(.9rem, 3vw, 1.6rem) 5rem; } .center-wrap { max-width: 430px; margin: 6vh auto 0; } .panel { position: relative; background: color-mix(in srgb, var(--panel) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-bottom: 1.15rem; box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-panel); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .panel:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); } .panel > h1:first-child, .panel > h2:first-child { margin-top: 0; } .grid .panel { margin-bottom: 0; } .panel-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; } .panel-head h2 { margin: 0; } .panel-head .hint { color: var(--fg-faint); font-size: .84rem; } /* * Explicit column counts, not auto-fit. auto-fit packs as many tracks as will * fit, which left a six-card section as 4 + 2 on a wide screen; a fixed count * per breakpoint always divides the card counts we actually use (2, 3, 4, 6). */ .grid { display: grid; gap: 1.15rem; margin-bottom: 1.15rem; } .grid > * { min-width: 0; } .grid > * > .tablewrap { max-width: 100%; } /* * A grid is a block-level sibling of panels, so it needs the same bottom * margin panels carry — without it the section after a card grid sat flush * against it. Nested grids (inside a panel, or inside another grid) get their * spacing from the parent's padding/gap instead, so reset there. */ .panel .grid:last-child, .grid .grid { margin-bottom: 0; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1120px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); } } .row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .row > * { min-width: 0; } .row.gap { gap: 1rem; align-items: center; } .row:has(label.field), .row.align-end { align-items: flex-end; } .row > label.field { margin-bottom: 0; } .muted { color: var(--fg-dim); } .faint { color: var(--fg-faint); } .small { font-size: .86rem; } .right { text-align: right; } .nowrap { white-space: nowrap; } .good { color: var(--good); } /* Divider with a soft accent centre. */ .rule { height: 1px; border: none; margin: var(--sp-6) 0; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); } /* ==================== 5b. Stat cards ==================== */ .stat { position: relative; overflow: hidden; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-panel); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out); } .stat:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-lift); } .stat .label { color: var(--fg-faint); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .075em; margin-bottom: .4rem; } .stat .value { font-family: var(--mono); font-size: 1.55rem; font-weight: 640; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; } .stat .sub { color: var(--fg-dim); font-size: .82rem; margin-top: .3rem; overflow-wrap: anywhere; } .stat .value.good { color: var(--good); } .stat .value.bad { color: var(--bad); } /* The headline card — the one number the page is really about. */ .stat.hero { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%), color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: inset 0 1px 0 var(--hairline), 0 0 30px var(--glow-violet), var(--shadow-panel); } .stat.hero .label { color: color-mix(in srgb, var(--accent) 70%, var(--fg-dim)); } .stat.hero .value { font-size: 2.15rem; background: linear-gradient(120deg, var(--fg) 34%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat.hero .value.bad { background: none; -webkit-text-fill-color: var(--bad); color: var(--bad); } /* ==================== 6. Buttons & forms ==================== */ label.field { display: block; margin-bottom: .8rem; } label.field > span { display: block; color: var(--fg-dim); font-size: .82rem; font-weight: 520; margin-bottom: .28rem; } label.field > span.faint { margin-top: .25rem; margin-bottom: 0; font-weight: 400; } input, select, textarea { width: 100%; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .68rem; font: inherit; font-size: .92rem; line-height: 1.35; box-sizing: border-box; transition: border-color .15s var(--ease), box-shadow .2s var(--ease), background-color .15s var(--ease); } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px var(--glow-violet); } input::placeholder, textarea::placeholder { color: var(--fg-faint); } input[type="checkbox"] { width: auto; accent-color: var(--accent); } input[type="number"] { font-family: var(--mono); } textarea { resize: vertical; min-height: 74px; } select[multiple] { min-height: 124px; padding: .3rem; } select[multiple] option { padding: .22rem .4rem; border-radius: var(--radius-xs); } .inline-field { flex: 1 1 160px; } .inline-field.narrow { flex: 0 1 130px; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--accent-grad); color: var(--btn-fg); border: 1px solid transparent; border-radius: var(--radius-sm); padding: .55rem 1rem; min-height: 38px; line-height: 1.35; box-sizing: border-box; font: inherit; font-weight: 640; font-size: .92rem; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 18px var(--glow-violet); transition: filter .15s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease); } /* A highlight sheen along the top edge, so the fill reads as a surface. */ .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 52%); pointer-events: none; } .btn:hover { filter: brightness(1.09) saturate(1.05); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 0 26px var(--glow-violet), 0 0 40px var(--glow-cyan); transform: translateY(-1px); } .btn:active { transform: translateY(1px); filter: brightness(.97); } .btn:disabled { opacity: .48; cursor: not-allowed; filter: none; box-shadow: none; transform: none; } .btn:disabled::before { display: none; } .btn:hover { color: var(--btn-fg); } .btn-ghost { background: color-mix(in srgb, var(--panel-2) 70%, transparent); color: var(--fg-dim); border-color: var(--line); box-shadow: none; } .btn-ghost::before { display: none; } .btn-ghost:hover { color: var(--fg); background: var(--panel-3); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); filter: none; box-shadow: 0 0 16px var(--glow-violet); } .btn-danger { background: transparent; color: var(--err-fg); border-color: var(--err-line); box-shadow: none; } .btn-danger::before { display: none; } .btn-danger:hover { background: var(--err-bg); color: var(--err-fg); filter: none; box-shadow: none; } .btn-small { padding: .28rem .7rem; font-size: .82rem; font-weight: 560; min-height: 32px; line-height: 1; box-sizing: border-box; } .btn-primary { background: var(--accent-grad); color: #ffffff; font-weight: 650; border-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .22), 0 0 22px var(--glow-violet), 0 0 36px var(--glow-cyan); } .btn-primary:hover { filter: brightness(1.12) saturate(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 28px var(--glow-violet), 0 0 48px var(--glow-cyan); transform: translateY(-1px); } .btn-primary:active { transform: translateY(1px); } /* Oversized call to action, used in the hero. */ .btn-hero { font-size: 1.02rem; padding: .75rem 1.65rem; min-height: 48px; border-radius: var(--radius); box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 0 26px var(--glow-violet), 0 0 52px var(--glow-cyan); } .btn-hero:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .24), 0 0 34px var(--glow-violet), 0 0 70px var(--glow-cyan); } .hero .cta .btn { font-size: 1.02rem; padding: .75rem 1.65rem; min-height: 48px; border-radius: var(--radius); box-sizing: border-box; } .formerr, .formok { border-radius: var(--radius-sm); padding: .58rem .8rem; margin-bottom: .85rem; font-size: .9rem; border: 1px solid; } .formerr { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-line); } .formok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-line); } /* ==================== 7. Tables ==================== */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 55%, transparent); } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; } th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line-soft); } th { background: color-mix(in srgb, var(--panel-2) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--fg-dim); font-weight: 640; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; position: sticky; top: 0; z-index: 2; border-bottom-color: var(--line); } tbody tr { transition: background-color .12s var(--ease); } tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; } td.mono { font-family: var(--mono); font-size: .85rem; } tr.detail-row > td { background: var(--bg-soft); padding: .85rem 1rem; } tr.clickable { cursor: pointer; } tr.clickable:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* The active supplier inside an expanded pool. */ tr.chosen-pool { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); } tr.chosen-pool td { border-bottom-color: var(--line-soft); } .empty { padding: 2.4rem 1rem; text-align: center; color: var(--fg-faint); font-size: .9rem; } .pager { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .75rem; } .tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; } .tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg-dim); padding: .5rem .85rem; font: inherit; font-weight: 560; cursor: pointer; transition: color .15s var(--ease); } .tabs button:hover { color: var(--fg); } .tabs button.active { color: var(--fg); border-bottom-color: var(--accent); } details.raw summary { cursor: pointer; color: var(--fg-dim); font-size: .86rem; font-weight: 540; padding: .3rem 0; transition: color .15s var(--ease); } details.raw summary:hover { color: var(--accent); } details.raw[open] summary { margin-bottom: .45rem; } /* Key/value line used by the request detail rows. The value side holds long monospace ids and must wrap rather than push the label around. */ .kv { display: flex; gap: .5rem; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line-soft); padding: .3rem 0; } .kv:last-child { border-bottom: none; } .kv > span:first-child { flex: 0 0 auto; } .kv > span:last-child { min-width: 0; flex: 1 1 auto; text-align: right; overflow-wrap: anywhere; word-break: break-word; } /* ==================== 8. Badges ==================== */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .14rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 640; letter-spacing: .01em; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--fg-dim); white-space: nowrap; } .badge.ok { color: var(--ok-fg); border-color: var(--ok-line); background: var(--ok-bg); } .badge.err { color: var(--err-fg); border-color: var(--err-line); background: var(--err-bg); } .badge.warn { color: var(--warn-fg); border-color: var(--warn-line); background: var(--warn-bg); } .badge.info { color: color-mix(in srgb, var(--accent) 78%, var(--fg)); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: var(--accent-soft); } .badge.mut { color: var(--fg-faint); } /* ==================== 8b. Token bars, legend, sparkline ==================== */ .tokbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--panel-3); min-width: 90px; box-shadow: inset 0 0 0 1px var(--hairline); } .tokbar span { display: block; height: 100%; } .tokbar .t-in { background: var(--violet); } .tokbar .t-out { background: var(--pink); } .tokbar .t-cr { background: var(--cache); } .tokbar .t-cw { background: var(--warn); } .legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--fg-dim); margin-bottom: .7rem; } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .35rem; } .legend .t-in { background: var(--violet); } .legend .t-out { background: var(--pink); } .legend .t-cr { background: var(--cache); } .legend .t-cw { background: var(--warn); } .spark { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 68px; } .spark .bar { flex: 1; min-width: 3px; background: linear-gradient(180deg, var(--cyan), var(--violet)); border-radius: 3px 3px 1px 1px; min-height: 2px; transition: filter .12s var(--ease); } .spark .bar:hover { filter: brightness(1.4); } .spark-tip { position: absolute; left: 0; top: -4px; transform: translate(-50%, -100%); pointer-events: none; background: color-mix(in srgb, var(--panel-2) 94%, transparent); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .55rem; font-size: .8rem; color: var(--fg); box-shadow: var(--shadow-lift); white-space: nowrap; z-index: 5; } /* ==================== 8c. Copy box & code ==================== */ .copybox { display: flex; gap: .5rem; align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .5rem .45rem .75rem; margin: .55rem 0; } .copybox-value { flex: 1; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: .86rem; scrollbar-width: none; } .copybox-value::-webkit-scrollbar { display: none; } .copybox-btn { flex: 0 0 auto; } pre.code { background: color-mix(in srgb, var(--bg) 90%, transparent); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.6; color: var(--fg-dim); margin: .55rem 0 0; box-shadow: inset 0 1px 0 var(--hairline); } /* ==================== 14. Toasts ==================== */ #toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; max-width: min(420px, calc(100vw - 2rem)); } .toast { background: color-mix(in srgb, var(--panel-2) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: .65rem .85rem; box-shadow: var(--shadow-lift); font-size: .89rem; animation: toast-in .28s var(--ease-out); } .toast.ok { border-left-color: var(--good); } .toast.err { border-left-color: var(--bad); } @keyframes toast-in { from { opacity: 0; transform: translateX(14px) scale(.98); } to { opacity: 1; transform: none; } } /* ==================== 9. Model cards ==================== */ .modelcard { position: relative; overflow: hidden; background: color-mix(in srgb, var(--panel) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-panel); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out); } .modelcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-lift), 0 0 26px var(--glow-violet); } .modelcard.featured { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: inset 0 1px 0 var(--hairline), 0 0 22px var(--glow-violet), var(--shadow-panel); } /* Featured cards get an accent bar along the top edge. */ .modelcard.featured::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-grad); } .modelcard .mc-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .modelcard .mc-name { font-weight: 660; font-size: 1rem; letter-spacing: -.01em; } .modelcard .mc-id { font-family: var(--mono); font-size: .76rem; color: var(--fg-faint); overflow-wrap: anywhere; margin-top: -.3rem; } .modelcard .mc-desc { color: var(--fg-dim); font-size: .855rem; margin: 0; } .modelcard .mc-ctx { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .45rem 0 0; font-size: .855rem; } /* Coefficient list — the price tag. Dotted leaders tie label to figure. */ .modelcard .mc-coeffs { display: grid; grid-template-columns: 1fr auto; gap: .16rem .7rem; font-size: .855rem; margin: .2rem 0 0; padding-top: .65rem; border-top: 1px solid var(--line-soft); } .modelcard .mc-coeffs dt { color: var(--fg-dim); } .modelcard .mc-coeffs dd { margin: 0; font-family: var(--mono); font-weight: 620; text-align: right; } .modelcard .mc-coeffs dd.cache { color: var(--cache); } .mc-strengths { display: flex; flex-wrap: wrap; gap: .32rem; } .strength { font-size: .745rem; font-weight: 620; padding: .15rem .5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cache) 38%, var(--line)); color: var(--cache); background: color-mix(in srgb, var(--cache) 9%, transparent); } /* ==================== 10. Landing: hero ==================== */ .hero { position: relative; text-align: center; padding: clamp(3rem, 8vw, 5.5rem) 1rem clamp(2rem, 4vw, 3rem); } /* Small pill above the headline: what this is, in three words. */ .hero-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .55rem; margin-bottom: 1.3rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--fg-dim); font-size: .82rem; font-weight: 560; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .hero-eyebrow strong { color: var(--fg); font-weight: 660; } .hero h1 { font-size: clamp(2rem, 5.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.032em; margin: 0 auto .9rem; max-width: 18ch; background: linear-gradient(118deg, var(--fg) 26%, var(--accent) 68%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { color: var(--fg-dim); font-size: clamp(.98rem, 1.6vw, 1.14rem); line-height: 1.6; max-width: 60ch; margin: 0 auto 1.8rem; text-wrap: pretty; } .hero .cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; } /* Trust strip under the buttons: the three facts that answer "is it real?" */ .hero-facts { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 2.6rem); flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.7rem; border-top: 1px solid var(--line); } .hero-fact { text-align: center; min-width: 96px; } .hero-fact .hf-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 680; letter-spacing: -.03em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-fact .hf-label { color: var(--fg-faint); font-size: .76rem; font-weight: 560; text-transform: uppercase; letter-spacing: .07em; margin-top: .15rem; } /* ==================== 10b. Landing: section headings ==================== */ .section-title { font-size: clamp(1.35rem, 2.8vw, 1.85rem); letter-spacing: -.026em; margin: clamp(2.6rem, 6vw, 3.8rem) 0 .5rem; text-align: center; background: linear-gradient(118deg, var(--fg) 38%, var(--accent) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-subtitle { text-align: center; color: var(--fg-dim); font-size: .95rem; max-width: 62ch; margin: 0 auto 1.6rem; text-wrap: pretty; } /* ==================== 10c. Landing: advantages & use cases ==================== */ .advantage, .use-case { display: flex; flex-direction: column; gap: .5rem; position: relative; overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out); } .advantage:hover, .use-case:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-lift); } .advantage h3, .use-case h3 { margin: 0; font-size: 1rem; } .advantage p, .use-case p { margin: 0; } /* Icon in a soft tinted tile rather than bare emoji. */ .advantage-icon, .use-case-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; font-size: 1.25rem; line-height: 1; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); background: var(--accent-grad-soft); box-shadow: inset 0 1px 0 var(--hairline); } .use-case-icon { border-color: color-mix(in srgb, var(--cyan) 26%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 20%, transparent), color-mix(in srgb, var(--violet) 16%, transparent)); } /* ==================== 11. Landing: ranked coding picks ==================== */ /* * The ranked picks are the page's centrepiece, so they get their own grid: * four across on a desktop, two on a tablet, one on a phone. Never a stray * single card on a row of its own. */ .coding-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: .8rem; } @media (max-width: 1180px) { .coding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .coding-grid { grid-template-columns: minmax(0, 1fr); } } .coding-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-panel); transition: transform .28s var(--ease-out), border-color .28s var(--ease), box-shadow .28s var(--ease); } .coding-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-lift); } /* Tone drives the top rule and the glow, so rank reads at a glance. */ .coding-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: var(--tone-grad, var(--accent-grad)); } .coding-card.tone-gold { --tone: var(--gold); --tone-grad: linear-gradient(90deg, #f6c14b, #ffe9a8, #f6c14b); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); box-shadow: inset 0 1px 0 var(--hairline), 0 0 28px color-mix(in srgb, var(--gold) 16%, transparent), var(--shadow-panel); } .coding-card.tone-gold:hover { box-shadow: inset 0 1px 0 var(--hairline), 0 0 40px color-mix(in srgb, var(--gold) 22%, transparent), var(--shadow-lift); } .coding-card.tone-value { --tone: var(--good); --tone-grad: linear-gradient(90deg, var(--good), var(--cyan)); border-color: color-mix(in srgb, var(--good) 34%, var(--line)); } .coding-card.tone-silver { --tone: var(--silver); --tone-grad: linear-gradient(90deg, #9aa4bd, #d6dcea, #9aa4bd); } .coding-card.tone-bronze { --tone: var(--bronze); --tone-grad: linear-gradient(90deg, #c1743a, #e6a874, #c1743a); } .rank-badge { position: absolute; top: -.72rem; left: 1.05rem; display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; height: 1.5rem; padding: 0 .48rem; border-radius: 999px; font-family: var(--mono); font-size: .8rem; font-weight: 720; letter-spacing: -.02em; color: var(--btn-fg); background: var(--tone-grad, var(--accent-grad)); border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 55%, transparent); box-shadow: 0 3px 12px color-mix(in srgb, var(--tone, var(--accent)) 34%, transparent); } .rank-badge.rank-1 { color: #241a02; } .rank-badge.rank-3, .rank-badge.rank-4 { color: #12151f; } .coding-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .15rem; } .coding-title { margin: 0; font-size: 1.06rem; letter-spacing: -.015em; } .coding-tagline { font-size: .82rem; font-weight: 640; color: var(--tone, var(--accent)); text-transform: uppercase; letter-spacing: .045em; } .coding-why { margin: 0; color: var(--fg-dim); font-size: .875rem; line-height: 1.55; } .coding-use-cases { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; } .use-label { width: 100%; font-size: .74rem; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); margin-bottom: .1rem; } .use-tag { font-size: .745rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-dim); } .coding-coeffs { display: grid; grid-template-columns: 1fr auto; gap: .16rem .7rem; font-size: .855rem; margin: auto 0 0; padding-top: .7rem; border-top: 1px solid var(--line-soft); } .coding-coeffs dt { color: var(--fg-dim); } .coding-coeffs dd { margin: 0; font-family: var(--mono); font-weight: 640; text-align: right; } .coding-coeffs dd.cache { color: var(--cache); } .coding-id { font-size: .74rem; color: var(--fg-faint); overflow-wrap: anywhere; } /* ==================== 12. Landing: token calculator ==================== */ .calc-panel { position: relative; overflow: hidden; } .calc-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 12% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 70%), radial-gradient(50% 70% at 92% 100%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 70%); pointer-events: none; } .calc-panel > * { position: relative; } .calc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; } @media (max-width: 820px) { .calc-body { grid-template-columns: minmax(0, 1fr); } } .calc-left, .calc-right { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .calc-right { padding-left: 1.4rem; border-left: 1px solid var(--line); } @media (max-width: 820px) { .calc-right { padding-left: 0; padding-top: 1.2rem; border-left: 0; border-top: 1px solid var(--line); } } .calc-label { text-transform: uppercase; letter-spacing: .075em; font-weight: 620; font-size: .72rem; } .calc-rub { font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; } /* Quick-pick buttons for the amounts that actually unlock tiers. */ .calc-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .2rem; } .calc-preset { font-family: var(--mono); font-size: .78rem; font-weight: 620; padding: .26rem .58rem; border-radius: 999px; cursor: pointer; color: var(--fg-dim); background: var(--panel-2); border: 1px solid var(--line); transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .calc-preset:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .calc-preset.active { color: var(--btn-fg); background: var(--accent-grad); border-color: transparent; } /* Range input, restyled in both engines. */ .calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: .3rem 0 0; background: transparent; cursor: pointer; } .calc-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--cyan)) 0 / var(--fill, 40%) 100% no-repeat, var(--panel-3); border: 1px solid var(--line); } .calc-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); } .calc-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--cyan)); } .calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent); transition: transform .15s var(--ease-out); } .calc-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent); } .calc-slider:hover::-webkit-slider-thumb { transform: scale(1.12); } .calc-slider:focus-visible { outline: none; } .calc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); } .calc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); } .calc-range { display: flex; justify-content: space-between; font-family: var(--mono); } /* ---- Discount ladder ---- */ .calc-tiers { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); } .calc-tier { display: flex; flex-direction: column; align-items: center; gap: .05rem; flex: 1 1 auto; min-width: 62px; padding: .32rem .3rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 70%, transparent); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease-out); } .calc-tier .ct-rub { font-family: var(--mono); font-size: .74rem; color: var(--fg-faint); } .calc-tier .ct-pct { font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--fg-dim); } /* Tiers already unlocked by the current amount. */ .calc-tier.reached { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); background: color-mix(in srgb, var(--good) 9%, transparent); } .calc-tier.reached .ct-pct { color: var(--good); } /* The tier in force right now. */ .calc-tier.active { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 58%, transparent); background: var(--accent-grad-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px var(--glow-violet); } .calc-tier.active .ct-pct { color: var(--accent); } .calc-tier.active .ct-rub { color: var(--fg-dim); } .calc-tokens { font-family: var(--mono); font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.1; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .calc-tokens-sub { margin-top: -.15rem; } /* Discount headline + breakdown on the results side. */ .calc-discount { display: inline-flex; align-items: baseline; gap: .4rem; align-self: flex-start; margin: .5rem 0 .1rem; padding: .26rem .6rem; border-radius: 999px; font-weight: 660; font-size: .82rem; color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 11%, transparent); } .calc-discount .cd-pct { font-family: var(--mono); font-size: .95rem; font-weight: 740; } .calc-discount.none { color: var(--fg-faint); border-color: var(--line); background: var(--panel-2); } .calc-discount:empty, .calc-discount.none:empty { display: none !important; } .calc-breakdown { display: grid; grid-template-columns: 1fr auto; gap: .18rem .8rem; margin: .5rem 0 0; font-size: .855rem; } .calc-breakdown dt { color: var(--fg-dim); } .calc-breakdown dd { margin: 0; font-family: var(--mono); font-weight: 620; text-align: right; } .calc-breakdown dd.bonus { color: var(--good); } .calc-next { margin-top: .6rem; padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--fg-dim); font-size: .82rem; line-height: 1.45; } .calc-next strong { color: var(--accent); font-weight: 660; } .calc-next.maxed { border-style: solid; border-color: color-mix(in srgb, var(--gold) 44%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, transparent); } .calc-next.maxed strong { color: var(--gold); } .calc-examples { display: flex; flex-direction: column; gap: .28rem; } .calc-example { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .3rem .55rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 72%, transparent); border: 1px solid var(--line-soft); } .calc-footnote { margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line-soft); } .calc-toggle { margin: .2rem 0 1rem; } /* ==================== 13. Landing: cache explainer, spotlight, FAQ ==================== */ .cache-explainer { position: relative; overflow: hidden; } .cache-explainer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--cache) 11%, transparent), transparent 68%); pointer-events: none; } .cache-explainer > * { position: relative; } .cache-explainer p { margin: 0 0 .6rem; line-height: 1.6; } .cache-demo { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 78%, transparent); } .cache-demo-row { display: grid; grid-template-columns: 8.5rem 1fr 3.2rem; gap: .6rem; align-items: center; } @media (max-width: 560px) { .cache-demo-row { grid-template-columns: 6rem 1fr 3rem; } } .cache-demo-bar { height: 12px; border-radius: 999px; min-width: 8px; /* Bars animate out from the left so the 10x gap lands as a visual beat. */ transform-origin: left center; animation: bar-grow .8s var(--ease-out) both; } .cache-demo-bar.t-in { background: linear-gradient(90deg, var(--violet), var(--pink)); } .cache-demo-bar.t-cr { background: linear-gradient(90deg, var(--cache), color-mix(in srgb, var(--cache) 55%, var(--cyan))); } @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .cache-demo-row .mono { text-align: right; } .cache-demo-note { margin-top: .2rem; } /* Spotlight cards reuse .modelcard and add the role heading. */ .spotlight-role { margin: .3rem 0 0; font-size: .95rem; letter-spacing: -.012em; color: var(--accent); } .spotlight.tone-gold .spotlight-role { color: var(--gold); } .spotlight.tone-silver .spotlight-role { color: var(--silver); } .spotlight.tone-bronze .spotlight-role { color: var(--bronze); } .spotlight.tone-gold { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); } .spotlight.tone-gold::before { background: linear-gradient(90deg, #f6c14b, #ffe9a8, #f6c14b); } .spotlight.tone-silver::before { background: linear-gradient(90deg, #9aa4bd, #d6dcea, #9aa4bd); } .spotlight.tone-bronze::before { background: linear-gradient(90deg, #c1743a, #e6a874, #c1743a); } .all-models-grid { margin-top: .2rem; } /* ---- FAQ accordion ---- */ .faq-item { border-bottom: 1px solid var(--line-soft); } .faq-item:last-child { border-bottom: 0; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .95rem .2rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--fg); font: inherit; font-size: .98rem; font-weight: 580; transition: color .18s var(--ease); } .faq-q:hover { color: var(--accent); } .faq-q.open { color: var(--accent); } .faq-chevron { flex: 0 0 auto; color: var(--fg-faint); transition: transform .24s var(--ease-out), color .18s var(--ease); } .faq-q.open .faq-chevron { transform: rotate(180deg); color: var(--accent); } .faq-body { padding: 0 2rem .95rem .2rem; animation: faq-in .25s var(--ease-out) both; } .faq-body p { margin: 0; line-height: 1.62; } @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ==================== 15. Motion, accessibility, print ==================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .modelcard:hover, .coding-card:hover, .advantage:hover, .use-case:hover { transform: none; } } @media print { body::before, body::after, .bg-noise, #topbar, #toasts { display: none !important; } body { background: #fff; color: #000; } .panel, .modelcard, .coding-card { break-inside: avoid; box-shadow: none; border-color: #ccc; } a[data-link] { text-decoration: underline; } } /* ==================== 16. Dashboard chrome ==================== */ .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 1.1rem; } .dash-greet h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.05rem); letter-spacing: -.03em; background: linear-gradient(118deg, var(--fg) 34%, var(--accent) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dash-greet p { margin: .2rem 0 0; font-size: .9rem; } .dash-actions { display: flex; gap: .4rem; flex-wrap: wrap; } /* Balance warning: loud enough to act on, quiet enough not to shout twice. */ .balance-warn { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.1rem; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, transparent); } .balance-warn strong { color: var(--warn); } .balance-warn.empty { border-color: color-mix(in srgb, var(--bad) 46%, var(--line)); background: color-mix(in srgb, var(--bad) 10%, transparent); } .balance-warn.empty strong { color: var(--bad); } .balance-warn .bw-icon { font-size: 1.15rem; line-height: 1.3; flex: 0 0 auto; } /* Top-up ladder, one card per rung. */ .topup-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0; } @media (max-width: 1080px) { .topup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .topup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .topup-card { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .75rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 76%, transparent); text-align: center; cursor: pointer; user-select: none; transition: transform .22s var(--ease-out), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); } .topup-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); box-shadow: 0 8px 22px var(--glow-violet); } .topup-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); box-shadow: 0 0 16px var(--glow-violet); transform: translateY(-2px); } .topup-card .tc-rub { font-size: 1.02rem; font-weight: 680; letter-spacing: -.02em; } .topup-card .tc-pct { font-family: var(--mono); font-size: .86rem; font-weight: 720; color: var(--good); } .topup-card .tc-tokens { color: var(--fg-dim); } /* Top-up calculator section inside dashboard */ .topup-calc { background: color-mix(in srgb, var(--panel-2) 65%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1rem; } .topup-calc-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); } .topup-calc-side { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .topup-calc-side.to { text-align: right; align-items: flex-end; } .topup-calc-divider { font-size: 1.6rem; font-weight: 300; color: var(--fg-faint); user-select: none; } @media (max-width: 680px) { .topup-calc-summary { flex-direction: column; align-items: flex-start; gap: .8rem; } .topup-calc-divider { display: none; } .topup-calc-side.to { text-align: left; align-items: flex-start; } } .topup-tokens-row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .topup-slider-wrap { margin-top: 1rem; } .topup-actions { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .topup-buttons { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } .topup-note { display: inline-flex; align-items: center; gap: .4rem; color: var(--fg-dim); font-size: .84rem; } .topup-note-icon { color: var(--gold); } /* ==================== Docs / installers ==================== */ .docs-h2 { margin: 2.2rem 0 .6rem; font-size: 1.25rem; letter-spacing: -.01em; } .docs-faq { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; } .docs-faq li { color: var(--fg-dim); } .docs-faq strong { color: var(--fg); } .panel .copybox { margin-top: .35rem; } /* ==================== Footer ==================== */ #site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 1.6rem clamp(.9rem, 3vw, 1.6rem) 1.2rem; } .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: .7rem; } .footer-brand .brand-mark { width: 34px; height: 34px; } .footer-name { font-weight: 800; letter-spacing: .04em; } .footer-tagline { font-size: .8rem; color: var(--fg-dim); } .footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; } .footer-nav a { color: var(--fg-dim); font-size: .92rem; text-decoration: none; transition: color .2s var(--ease); } .footer-nav a:hover { color: var(--accent); } .footer-copy { max-width: 1280px; margin: 1rem auto 0; font-size: .78rem; color: var(--fg-faint); } .footer-copy a { color: var(--fg-dim); text-decoration: none; } .footer-copy a:hover { color: var(--accent); } /* ==================== Legal pages ==================== */ .legal { max-width: 780px; } .legal-head { margin-bottom: 1.6rem; } .legal-head h1 { margin: 0 0 .3rem; } .legal-lang-note { margin-top: .5rem; font-size: .85rem; color: var(--fg-faint); font-style: italic; } .legal-lead { color: var(--fg-dim); } .legal-section { margin: 0 0 1.5rem; } .legal-section h2 { font-size: 1.06rem; letter-spacing: -.01em; margin: 0 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); } .legal-section p { color: var(--fg-dim); line-height: 1.62; margin: .45rem 0; } .legal-list { margin: .5rem 0; padding-left: 1.15rem; display: grid; gap: .4rem; color: var(--fg-dim); } .legal-contacts a { color: var(--accent); } .legal-contacts li { line-height: 1.5; } /* ==================== Support / tickets ==================== */ .support-hero { margin-bottom: 1.4rem; } .support-hero h1 { margin: 0 0 .35rem; } .support-cards { margin-bottom: 1.4rem; } .support-cards .panel { display: flex; flex-direction: column; } .support-cards .panel > p.muted { flex: 1; } .support-cards .panel .btn { margin-top: auto; align-self: flex-start; } .support-auth-row { display: flex; gap: .6rem; margin-top: .8rem; } .support-form .field { margin-bottom: .8rem; } .support-form textarea.input { width: 100%; resize: vertical; font-family: inherit; padding: .6rem .75rem; border-radius: var(--radius); } .ticket-table { width: 100%; border-collapse: collapse; } .ticket-row { cursor: pointer; transition: background .15s var(--ease); } .ticket-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .ticket-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); padding: .45rem .6rem; border-bottom: 1px solid var(--line); } .ticket-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); } .ticket-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .ticket-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: .9rem 0 1rem; } .ticket-detail-subj { margin: 0 0 .25rem; font-size: 1.08rem; } .ticket-thread { display: grid; gap: .7rem; margin: .8rem 0 1.1rem; max-height: 30rem; overflow-y: auto; padding: .2rem .2rem .4rem; } .ticket-msg { max-width: 88%; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: color-mix(in srgb, var(--panel) 88%, transparent); } .ticket-msg.from-admin { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); } .ticket-msg.from-user { margin-left: auto; } .ticket-msg-meta { margin-bottom: .3rem; font-size: .82rem; } .ticket-msg-meta strong { letter-spacing: .01em; } .ticket-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--fg-dim); } .ticket-actions { display: flex; gap: .6rem; } .ticket-reply-form { margin-top: .4rem; } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; } .ticket-msg { max-width: 100%; } } /* ==== Model health badge (dashboard model cards) ==== */ .health-badge { display: inline-flex; align-items: center; gap: .38rem; padding: .13rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 620; letter-spacing: .03em; line-height: 1.5; border: 1px solid; user-select: none; white-space: nowrap; } .health-badge .dot { width: .48rem; height: .48rem; border-radius: 50%; position: relative; flex: none; } .health-badge .txt { opacity: .92; } .health-badge.online { color: #34d399; border-color: rgba(52, 211, 153, .32); background: rgba(52, 211, 153, .09); } .health-badge.online .dot { background: #34d399; box-shadow: 0 0 7px rgba(52, 211, 153, .85); animation: hb-pulse 2.4s ease-in-out infinite; } .health-badge.offline { color: #f87171; border-color: rgba(248, 113, 113, .34); background: rgba(248, 113, 113, .09); } .health-badge.offline .dot { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, .75); } .health-badge.offline .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(248, 113, 113, .55); animation: hb-ring 1.9s ease-out infinite; } @keyframes hb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes hb-ring { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.65); opacity: 0; } } .modelcard.offline { opacity: .6; } .modelcard.offline .mc-coeffs { opacity: .65; } /* ==================== 17. Catalog Filter & UI Polish ==================== */ /* Copyable model slug */ .mc-id-copyable { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; width: fit-content; border-radius: var(--radius-xs); padding: .1rem .35rem; margin-left: -.35rem; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .mc-id-copyable:hover { background: var(--panel-2); color: var(--accent-2); transform: translateX(2px); } .mc-id-copyable.copied { color: var(--good) !important; background: color-mix(in srgb, var(--good) 14%, transparent); } /* Responsive top navigation on mobile */ @media (max-width: 820px) { #topbar { padding: .45rem .8rem .35rem; gap: .4rem .6rem; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand spacer user" "nav nav nav"; min-height: auto; } .brand { grid-area: brand; margin-right: 0; } .spacer { grid-area: spacer; display: none; } #balance-chip { grid-area: spacer; display: inline-flex; align-items: center; justify-self: end; margin-right: .3rem; } #userbox { grid-area: user; justify-content: flex-end; gap: .3rem; flex-wrap: nowrap; } #mainnav { grid-area: nav; overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .2rem 0 .15rem; margin: 0 -.4rem; padding-left: .4rem; } #mainnav::-webkit-scrollbar { display: none; } }