action row was a flex line with a
`flex: 1` spacer pushing the right-side buttons (Sign in to clone,
♡ Favorite) past the 390px viewport. The "Sign in to clone" button
ended up clipped to "Sign in to". Collapse the spacer on phones so
items pack from the left and wrap naturally. */
.loadout-action-row .loadout-action-spacer { display: none; }
.loadout-action-row { row-gap: 8px; }
/* Sidebar — at phone widths the filter rail steals the entire viewport
height before the grid renders, so a mobile visitor sees only filters
until they scroll past the whole sidebar. CSFloat hides the sidebar
and exposes a "Filters" drawer on mobile; we don't have a drawer yet,
so the simpler fix is to hide the sidebar on phones — search bar +
category subnav + sort dropdown still reach every listing without it. */
.layout > .sidebar { display: none; }
/* The .layout has a CSS grid via :has(.sidebar) earlier — when sidebar
is hidden, collapse the grid to a single feed column. */
.layout:has(.sidebar) { grid-template-columns: 1fr !important; }
/* Listing / stall / trade list: become card-style rows */
.listing-table thead { display: none; }
.listing-table, .listing-table tbody, .listing-table tr, .listing-table td { display: block; width: 100%; }
.listing-table tbody tr {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
cursor: pointer;
}
.listing-table tbody td { padding: 0; border: 0; }
/* Trade/stall rows */
.trade-list > div, .trade-main,
.recent-sales-row {
grid-template-columns: 48px 1fr auto;
gap: 10px; padding: 12px 14px;
}
/* Offer / auction rows */
.offer-row { grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 14px; }
.offer-row > *:nth-child(3), .offer-row > *:nth-child(4) {
grid-column: 1 / -1;
}
.auction-history > div { grid-template-columns: 28px 1fr auto; font-size: 12px; }
.auction-history-kind { display: none; }
/* Admin */
.admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
.admin-activity-row { grid-template-columns: 72px 1fr; }
.admin-activity-row > *:nth-child(3) { grid-column: 1 / -1; }
/* Footer — extra bottom padding so the floating back-to-top button
(42×42 at right:24 / bottom:24) doesn't clip the last copyright
line on mobile. */
.site-footer { padding: 40px 16px 96px; }
.site-footer-inner { grid-template-columns: 1fr; gap: 28px; }
.site-footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding-top: 16px; }
/* Modals — full width minus gutter */
.modal, .info-modal, .presignin-modal, .cart-confirm-panel, .shortcuts-card, .trade-confirm-modal, .review-modal, .wallet-modal { width: 100%; }
.modal-backdrop, .cart-confirm-backdrop, .shortcuts-backdrop { padding: 2vh 10px; }
.modal-body { padding: 18px; }
.modal-header { padding: 14px 18px; }
.modal-actions, .cart-confirm-actions, .trade-confirm-actions { padding: 14px 18px; gap: 8px; }
.modal-actions .btn-accent, .modal-actions .btn-ghost,
.cart-confirm-actions .btn-accent, .cart-confirm-actions .btn-ghost { flex: 1; }
.shortcuts-grid { grid-template-columns: 1fr; }
/* User menu / notif-dropdown — full width sheet */
.user-menu, .notif-dropdown { right: 10px; left: 10px; width: auto; min-width: 0; }
/* Announce banner */
.announce-banner { padding: 10px 12px; font-size: 12px; gap: 8px; flex-wrap: wrap; }
/* Section headers */
.px-section-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px; margin: 32px auto 14px; }
.top-sellers-head, .px-container { padding: 0 16px; }
/* Tabs scrollable */
.profile-tabs, .mystall-tabs, .wallet-tabs, .offer-tabs, .hero-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.profile-tabs button, .mystall-tabs button, .wallet-tabs button, .offer-tab { padding: 10px 12px; font-size: 12.5px; white-space: nowrap; }
.hero-tab-cta { padding: 8px 12px; font-size: 12px; }
/* Buttons.
Boss QA cycle 11/12 — bumped from 40 to 44 (Apple HIG). Two-line copy
buttons like /market 'Save search' were 36×103 inline + min-height 40
after the @media; 44 finally clears the audit cleanly. */
.btn-accent, .btn-primary, .btn-ghost, .btn-primary-outline { height: 44px; padding: 0 16px; font-size: 13px; }
.px-btn, .px-btn-primary, .px-btn-ghost, .px-btn-lg { height: 44px; padding: 0 20px; font-size: 13.5px; }
/* Settings */
.settings-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
/* Legal */
.legal-doc { padding: 20px 16px; font-size: 14.5px; }
.legal-doc h1 { font-size: 28px; }
.legal-doc h2 { font-size: 18px; margin-top: 28px; }
/* Changelog */
.changelog-entry { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
/* Chart */
.chart { height: 220px; padding: 10px; }
}
/* ─── SMALL PHONE ─── */
@media (max-width: 820px) {
.hero { padding: 48px 14px 44px; }
.cat-tiles { grid-template-columns: repeat(2, 1fr); }
.market-stats-strip, .homepage-trust, .px-feature-strip { grid-template-columns: 1fr; }
.market-stats-strip > div, .homepage-trust > *, .px-feature-strip > * { padding: 14px 16px; }
.wallet-spend-strip, .wallet-7d-summary, .mystall-sold-summary, .admin-stats-grid { grid-template-columns: 1fr; }
.profile-stats { grid-template-columns: 1fr; }
.wallet-hero-balance { font-size: 40px; }
/* Grids - keep 2-up but tighter */
.listing-grid { gap: 8px; }
.grid-body { padding: 8px 10px 10px; }
.grid-name { font-size: 12.5px; }
.grid-price { font-size: 14px; }
.grid-steam-price { font-size: 9.5px; }
/* Typography */
.px-h1, .hero h1 { font-size: clamp(32px, 9vw, 48px); line-height: 1; }
.px-h2, .px-section-header h2 { font-size: 22px; }
.px-lede, .hero p { font-size: 14.5px; }
/* Nav — smaller */
:root { --nav-h: 50px; }
.nav-logo-text { font-size: 14px; }
.nav-icon-btn svg { width: 17px; height: 17px; }
}
/* ─── TINY PHONE ─── */
@media (max-width: 420px) {
nav.nav { padding: 0 10px !important; gap: 6px !important; }
.nav-logo { gap: 6px; margin-right: 4px; }
.nav-logo-icon { width: 26px; height: 26px; }
.nav-logo-text { font-size: 13.5px; }
.wallet-btn-label { display: none; }
.wallet-btn { padding: 0 8px 0 4px; }
.hero-tabs { width: 100%; overflow-x: auto; }
.cat-tiles { grid-template-columns: repeat(2, 1fr); padding: 0 12px; gap: 8px; }
.listing-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.profile-avatar, .stall-avatar { width: 64px; height: 64px; font-size: 28px; }
/* M2m: H1 was overflowing right edge for long usernames
("StoneColdKillerXX-2026's Stall"). clamp + word-break makes it
scale and wrap cleanly on any owner name length. */
.profile-name, .stall-name {
font-size: clamp(20px, 6vw, 30px);
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
max-width: 100%;
}
.wallet-hero-balance { font-size: 28px; }
.cart-total-val { font-size: 22px; }
.modal-name, .modal-header h2, .modal-header h3 { font-size: 18px; }
/* Hero actions stack */
.hero-actions, .px-hero-actions { flex-direction: column; align-items: stretch; width: 100%; padding: 0 8px; }
.hero-actions .btn-accent, .hero-actions .btn-ghost,
.px-hero-actions .px-btn, .px-hero-actions .px-btn-primary { width: 100%; }
}
/* ─── TOUCH DEVICES — no-hover fallbacks ─── */
@media (hover: none) {
.card-actions { opacity: 1; transform: translateY(0); }
.inventory-item:hover, .card:hover, .grid-card:hover,
.listing-grid > *:hover { transform: none; }
}
/* ─── PRINT ─── */
@media print {
.nav, .subnav, .pulse, .site-footer, .tweaks-panel, .modal-backdrop, .announce-banner { display: none !important; }
body::before { display: none; }
body { background: #fff; color: #000; }
}
/* ─────────────────────────────────────────────────────────────
28. GLOBAL POLISH — scrollbar, selection, focus
───────────────────────────────────────────────────────────── */
/* Q4 (cycle 5): bump global :focus-visible from a dim ink-4 ring to the
accent color so keyboard users can clearly see the focused element on
any surface. Specific rules for buttons/inputs/anchors below mirror
the same accent + offset so widget-specific overrides stay consistent. */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
*::selection { background: color-mix(in oklab, var(--ink) 18%, transparent); color: var(--ink); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.pulse-track, .ticker-track, .pulse-led, .live-dot,
.status-dot.ok, .auction-countdown-dot, .wallet-pending-dot,
.footer-sync-dot { animation: none !important; }
}
/* Make sure the grid overlay (body::before) stays beneath all content.
Note: overlays (modal, toast, dropdown) keep their own `position`
declarations from their main rule — this block ONLY lifts them above
the body::before grid texture via z-index. Never force position here. */
/* `nav` is intentionally NOT in this list — `.nav` declares `position: sticky`
above (line 141), and overriding it to `relative` here makes the top bar
scroll off-screen on full-page-mode routes. Its own sticky declaration
already creates a positioning context, so z-index still works. */
.app, .layout, .main, footer, .site-footer, .cf-feebar { position: relative; z-index: 1; }
.modal-backdrop, .cart-confirm-backdrop, .shortcuts-backdrop { position: fixed; z-index: 200; }
.user-menu, .notif-dropdown, .tweaks-panel { z-index: 120; }
nav.nav { z-index: 50; }
/* Batch 1073 — editorial polish
Three visual bugs caught on /market and the home catalog.
1. `.results-meta` used justify-content: space-between on a flex container
whose children were `41` + text node ` listings found`.
space-between flung them to opposite ends of the row, so the phrase
read as "41 ........... listings found". Should sit inline left.
2. `.price-cell` was designed for the item-detail modal price chart
(pill with bg/border/radius). It's also reused in the market table
as the PRICE td, where its pill chrome reads as a second button
next to the real action button in the next cell. Flatten it when
it's inside a .
3. `.grid-price` renders the price inline with a Steam-market-link
SVG tucked flush right. With no gap, "$1.47" and the Steam glyph
glue into one illegible token. Add breathing room. */
.results-meta { justify-content: flex-start; }
td > .price-cell {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.grid-price .steam-market-link.compact { margin-left: 6px; }
/* Wallet modal: on a short viewport the modal's max-height:92vh + overflow:hidden
+ flex-column shell squeezes every direct child. `.wallet-hero` then compresses
to its min-content and its own overflow:hidden clips the big $balance and
@user line. Let the modal scroll internally instead of chopping. */
.wallet-modal { overflow-y: auto; }
.wallet-modal > * { flex-shrink: 0; }
/* Profile stats: the 4-column grid gets a 5th "Net" tile that wraps onto a
new row, leaving 3 empty bordered cells beside it. Span any 5th+ tile so
it reads as a full-width summary bar instead of an orphan next to voids. */
.profile-stats > .profile-stat:nth-child(n+5) { grid-column: 1 / -1; }
/* Item-detail modal: the preview + stats panels live inside `.modal-header`,
which is a centered flex row. The preview has `aspect-ratio: 4/3` but no
flex basis, so it shrinks to ~165px and leaves a cavernous empty column
beside the tall stats panel. Promote the header to a 2-column grid with
stretch sizing so the preview fills its half. */
.modal-header:has(> .modal-preview) {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
padding: 22px;
}
.modal-header > .modal-preview { width: 100%; height: auto; }
/* Fraud severity dot — replaces the 🔴/🟡/⚪ emojis inline with the HIGH/MED/LOW
label. Uses the same palette as the existing `.fraud-sev.high/.med` rules:
down-red for HIGH, warm amber for MED, neutral ink-3 for LOW. */
.sev-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-3);
vertical-align: baseline;
transform: translateY(1px);
}
.sev-dot.sev-high { background: var(--down); }
.sev-dot.sev-med { background: #e8b960; }
.sev-dot.sev-low { background: var(--ink-3); }
/* Admin stat tile: compound values like "0 · $0.00" wrap at the middot when
the column is narrow, stacking onto two lines and ragging the grid. Keep
the value on a single line — if it truly overflows, mono ellipsis reads
cleaner than a mid-word break. */
.admin-stat-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─────────────────────────────────────────────────────────────
DESIGN POLISH PASS — premium upgrades layered on top of the
editorial adapter. Targets visual flatness on /market hero,
feature strip, "How it works" steps, sidebar filters, and
listing-grid hover state.
───────────────────────────────────────────────────────────── */
/* px-card — give it actual elevation. Was: bare bg fill. Now: hairline +
1px drop shadow at rest, lift + accent-tint border on hover. */
.px-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
background 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.px-card-interactive:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
background: var(--bg-2);
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
/* Feature-strip cells — they bypass .px-card chrome via the 1px-grid trick.
Add the same elevation language so they don't read as flat dividers. */
.px-feature-strip > *,
.homepage-trust > * {
position: relative;
padding: 28px 28px;
transition: background 180ms ease, transform 180ms ease;
}
.px-feature-strip > *:hover,
.homepage-trust > *:hover {
background: var(--bg-2);
}
/* Top accent rule — hairline gradient anchored on the active hover, blue
spice without painting the whole card. */
.px-feature-strip > *::before,
.homepage-trust > *::before {
content: "";
position: absolute; top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--cta) 60%, transparent) 50%,
transparent 100%);
opacity: 0;
transition: opacity 200ms ease;
}
.px-feature-strip > *:hover::before,
.homepage-trust > *:hover::before { opacity: 1; }
/* Feature icon — lifted to a real ring with accent glow on hover. Was a
bare 32×32 dim square. Now a 44×44 tile with subtle accent tint. */
.px-feature-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 14%, var(--bg-2)) 0%,
var(--bg-2) 100%);
border: 1px solid color-mix(in oklab, var(--cta) 22%, var(--line));
color: color-mix(in oklab, var(--cta) 60%, var(--ink));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
transition: transform 200ms ease, color 200ms ease,
border-color 200ms ease, box-shadow 200ms ease;
}
.px-feature-strip > *:hover .px-feature-icon,
.homepage-trust > *:hover .px-feature-icon,
.px-card-interactive:hover .px-feature-icon {
color: color-mix(in oklab, var(--cta) 92%, var(--ink));
border-color: color-mix(in oklab, var(--cta) 45%, var(--line));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 6px 18px color-mix(in oklab, var(--cta) 28%, transparent);
}
/* Feature card body type — pump the title weight, lift body color one step. */
.px-feature-strip > * h3,
.homepage-trust > * h3,
.px-card-interactive h3 {
font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
color: var(--ink); margin: 0 0 6px;
}
.px-feature-strip > * p,
.homepage-trust > * p,
.px-card-interactive p {
font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
margin: 0;
}
/* ─── "How it works" steps — editorial timeline, not flat boxes ─── */
.steps-grid,
.px-section-sm > .px-container > div[style*="grid-template-columns"] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
gap: 14px;
}
.step-card {
position: relative;
padding: 24px 22px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
display: flex; flex-direction: column;
overflow: hidden;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease,
box-shadow 200ms ease,
background 200ms ease;
}
.step-card:hover {
transform: translateY(-3px);
background: var(--bg-2);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.step-card .step-num {
font-family: var(--mono);
font-size: 38px; font-weight: 500;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 60%, var(--ink)) 0%,
color-mix(in oklab, var(--cta) 30%, var(--ink-3)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
}
.step-card .step-rule {
margin: 14px 0 14px;
height: 1px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 50%, transparent) 0%,
var(--line) 60%,
transparent 100%);
}
.step-card .step-title {
font-size: 15px; font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 6px;
}
.step-card .step-body {
font-size: 13px; line-height: 1.55;
color: var(--ink-2);
margin: 0;
}
/* Sidebar filter contrast — labels were ink-3/13px (washed out on dark bg). */
.filter-option {
color: var(--ink-2);
font-size: 13.5px; font-weight: 500;
padding: 8px 10px;
}
.filter-option:hover {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 8%, var(--bg-2));
}
.filter-option.selected {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-2));
}
.filter-option.selected::before {
background: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 60%, transparent);
}
.filter-title {
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.18em;
margin-bottom: 12px;
}
/* Market grid card hover — stronger accent border tint on hover, deeper lift. */
.grid-card:hover {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--cta) 40%, var(--line-2));
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55),
0 0 0 1px color-mix(in oklab, var(--cta) 18%, transparent) inset;
}
/* Boss QA cycle 11 — pressed-state depress on grid cards. Cycle 11 prompt:
"pressed state should depress (translateY +1px + shadow tighter)" so the
tap is acknowledged before navigation. Settles back to the base shadow. */
.grid-card:active {
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45),
0 0 0 1px color-mix(in oklab, var(--cta) 25%, transparent) inset;
transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
/* Image fade-in is already wired via .item-img.loading/loaded — soften the
transition curve so the lazy-load reveal feels intentional, not janky. */
.item-img { transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.item-img.loading { opacity: 0; }
.item-img.loaded { opacity: 1; }
/* Empty-thumb fallback — when a Steam image URL returns 404 the ![]() sits
at width=0 and the diagonal stripe pattern shows alone. Soften that with
a generic skin silhouette so empty thumbs don't read as broken. */
.grid-thumb::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 40% at 50% 50%,
color-mix(in oklab, var(--ink) 6%, transparent),
transparent 70%);
pointer-events: none;
z-index: 0;
}
.grid-thumb img { position: relative; z-index: 1; }
/* Pulse ticker — bump readability one notch, the live tape was almost
invisible against the dark nav. */
.pulse {
background: color-mix(in oklab, var(--bg-1) 96%, var(--cta));
border-bottom: 1px solid color-mix(in oklab, var(--cta) 12%, var(--line));
}
/* ─── Section header — stop stretching eyebrow/h2/lede across 3 columns.
Stack centered above the grid. The original 3-col layout reads as broken
alignment when the lede is short. */
.px-section-sm .px-section-header,
.px-section-header.px-section-header-center {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
margin: 56px auto 24px;
max-width: 760px;
}
.px-section-sm .px-section-header .px-lede,
.px-section-header.px-section-header-center .px-lede {
margin: 0;
}
/* ─── Cat-tile body must sit ON TOP of the hero image. Image has z-index:1
so without an explicit stacking context the bottom of the image bleeds
over the category label. */
.cat-tile-body {
position: relative;
z-index: 2;
}
/* ─── Empty cat-tile (the "All" tile) — was a barely-visible 56×56 grid.
Bump to a clean centered glyph with the brand mark. */
.cat-tile:not(.has-hero) .cat-tile-hero::after {
width: 72px; height: 72px;
opacity: 0.55;
border-radius: 14px;
background:
linear-gradient(135deg,
color-mix(in oklab, var(--cta) 18%, transparent) 0%,
transparent 65%),
linear-gradient(90deg, color-mix(in oklab, var(--ink) 35%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
linear-gradient(0deg, color-mix(in oklab, var(--ink) 35%, transparent) 1px, transparent 1px) 0 0 / 16px 16px;
border: 1px solid color-mix(in oklab, var(--cta) 18%, var(--line-2));
box-shadow: inset 0 0 24px color-mix(in oklab, var(--cta) 12%, transparent);
}
.cat-tile.active:not(.has-hero) .cat-tile-hero::after {
opacity: 0.85;
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
box-shadow: inset 0 0 32px color-mix(in oklab, var(--cta) 28%, transparent);
}
/* ─── Footer — bumped readability + breathing room.
Was: 12px body, 10px titles, 11px bottom — too small to read on 1440.
Boss QA G3 — section headings now read as actual section markers,
not gray-on-gray noise. 24px gap below title before first link
so the columns breathe. */
.site-footer {
padding: 64px 32px 32px;
font-size: 13px;
}
.site-footer-inner {
gap: 56px 36px;
}
.site-footer-title {
font-size: 11.5px;
color: var(--ink-2);
font-weight: 700;
letter-spacing: 0.22em;
margin-bottom: 24px;
}
.site-footer-col { gap: 12px; }
.site-footer-col a {
font-size: 13.5px;
color: var(--ink-2);
}
.site-footer-meta {
font-size: 12.5px;
color: var(--ink-3);
}
.site-footer-bottom {
margin: 48px auto 0;
padding-top: 24px;
font-size: 11.5px;
}
/* ─── Item-detail modal action bar — bottom button row was reading as
tacked-on. Tighten chrome + lift primary CTA. */
.item-modal-actions,
.item-modal .modal-actions,
.item-detail-actions {
border-top: 1px solid var(--line);
background: linear-gradient(180deg,
transparent 0%,
color-mix(in oklab, var(--bg-1) 60%, transparent) 100%);
padding: 14px 18px;
}
/* ─── Loadout card — was a plain bordered card. Add elevation + accent
border on hover for consistency with grid-card / recently-viewed-card. */
.loadout-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease, box-shadow 200ms ease;
}
.loadout-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
0 0 0 1px color-mix(in oklab, var(--cta) 18%, transparent) inset;
}
.loadout-card-share {
background: linear-gradient(180deg,
transparent 0%,
color-mix(in oklab, var(--cta) 4%, var(--bg)) 100%);
}
/* ─── Tab-badge (count beside tab labels) — when its parent tab is
active, badge flips to blue accent (was --blue). Match the rest of
the system's count badges. */
.tab-badge {
font-weight: 600;
}
.tabs button.active .tab-badge {
background: var(--cta);
color: white;
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* ─── Iconbtn primitive (template's nav icon button) — was bare with
plain hover. Match the system's nav-icon-btn focus + dot styling. */
.iconbtn {
transition: color 160ms ease, background 160ms ease;
}
.iconbtn:focus-visible {
outline: none;
background: var(--bg-1);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
.iconbtn .dot {
background: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent),
0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* ─── Wallet-pill primitive (template wallet chip in nav, balance display). */
.wallet-pill {
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 60%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border-color: var(--line-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wallet-pill:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
}
.wallet-pill .plus {
width: 24px; height: 24px;
background: var(--cta);
color: white;
border-radius: 6px;
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* ─── Stall hero (seller storefront top block) — was a plain card.
Add subtle gradient + border accent + lift the title. */
.stall-hero {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 5%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
padding: 28px;
}
.stall-avatar {
border-color: color-mix(in oklab, var(--cta) 22%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ─── Generic .tabs row (CSFloat-style segmented) — active border was
already accent. Bump to 2px + glow for visibility. */
.tabs button.active {
border-bottom-color: var(--cta);
border-bottom-width: 2px;
font-weight: 600;
}
.tabs button:focus-visible {
outline: none;
color: var(--ink);
box-shadow: 0 -2px 0 0 var(--cta) inset,
0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* ─── Type-toggle (Buy Now / Auction segmented switch) — active "tab"
was bg-2 ink with shadow-1. Switch active to blue-tinted bg + blue
text so it matches the rest of the system's segmented control language. */
.type-toggle {
background: var(--bg-1);
border-color: var(--line-2);
}
.type-toggle-btn {
padding: 8px 14px;
font-weight: 600;
letter-spacing: -0.005em;
transition: color 160ms ease, background 160ms ease,
box-shadow 160ms ease;
}
.type-toggle-btn:hover {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 6%, transparent);
}
.type-toggle-btn.active {
color: color-mix(in oklab, var(--cta) 80%, white);
background: color-mix(in oklab, var(--cta) 14%, var(--bg));
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Boss QA cycle 12 — toolbar / view-btns / type-toggle / deals-chip /
refresh group bumped to ≥44px on mobile. Pre-fix the All / Buy Now /
Auction pills, Grid/Table view toggle, % Deals + New chips, and
refresh icon-button rendered at 33-36px high on touch — boss prompt
explicitly named "sort-toggle" + view chips as must-clear targets. */
@media (max-width: 760px) {
.type-toggle-btn { padding: 10px 16px; }
.deals-chip { min-height: 44px; }
.view-btns button { min-height: 44px; min-width: 44px; }
.toolbar-refresh { min-height: 44px; min-width: 44px; }
}
/* ─── Horizontal scroll rails (top-sellers / recently-viewed / top-deals
etc.) — add a soft scroll-fade mask so the trailing card fades into
the bg instead of getting hard-clipped at the edge. */
.top-sellers-track,
.top-sells-track,
.recently-viewed-rail,
.top-deals-track,
.just-listed-track,
.auctions-ending-soon-rail {
mask-image: linear-gradient(90deg,
transparent 0,
#000 24px,
#000 calc(100% - 32px),
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
#000 24px,
#000 calc(100% - 32px),
transparent 100%);
}
/* ─── ::selection color — was browser default (heavy bright blue text
selection on dark bg looks loud). Tint to brand blue at low opacity. */
::selection {
background: color-mix(in oklab, var(--cta) 35%, transparent);
color: var(--ink);
text-shadow: none;
}
/* ─── Custom scrollbars — picked up subtle brand accent on hover so the
scrollbar feels intentional, not raw browser chrome. */
::-webkit-scrollbar-thumb {
background: var(--bg-3);
border-radius: 8px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: color-mix(in oklab, var(--cta) 30%, var(--line-2));
}
::-webkit-scrollbar-track {
background: transparent;
}
* {
scrollbar-color: var(--bg-3) transparent;
}
/* ─── HR / horizontal rule — was browser default. Treat as a hairline
accent fade rule (matches the hero ::after light-bar). */
hr {
border: 0;
height: 1px;
margin: 24px 0;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--cta) 35%, var(--line-2)) 50%,
transparent 100%);
}
/* ─── Toggle switch — was ink-on-bg (white pill). Now: dim track at rest,
blue track when on (matches every other interactive). */
.toggle-switch {
width: 40px; height: 24px;
transition: background 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease, box-shadow 200ms ease;
}
.toggle-switch::after {
width: 18px; height: 18px;
background: var(--ink-2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.toggle-switch.on {
background: var(--cta);
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 14%, transparent),
0 4px 12px color-mix(in oklab, var(--cta) 25%, transparent);
}
.toggle-switch.on::after {
transform: translateX(16px);
background: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.toggle-switch:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 30%, transparent);
}
/* ─── Native checkbox — switched accent-color to blue (was browser
default ink). Used in cookie banner, settings, etc. */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--cta);
}
/* ─── Staff banner — was a flat red wash. Add a left rail + "STAFF MODE"
pill chrome so the warning reads as a status bar, not a notification. */
.staff-banner {
padding: 8px 28px;
border-left: 3px solid var(--down);
background: linear-gradient(90deg,
color-mix(in oklab, var(--down) 18%, var(--bg-1)) 0%,
color-mix(in oklab, var(--down) 8%, var(--bg-1)) 100%);
border-bottom-color: color-mix(in oklab, var(--down) 35%, var(--line));
font-weight: 600;
text-shadow: 0 0 8px color-mix(in oklab, var(--down) 30%, transparent);
}
/* ─── Pending-trade nudge — small toast-like banner that wants to read
as actionable. Add accent rail + lift it visually. */
.pending-trade-nudge {
padding: 12px 16px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 70%);
border-color: color-mix(in oklab, var(--cta) 22%, var(--line-2));
border-left: 3px solid var(--cta);
border-radius: 0 var(--r-md) var(--r-md) 0;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--cta) 8%, transparent),
0 4px 12px rgba(0, 0, 0, 0.25);
font-weight: 500;
}
/* ─── Sale-toast positioning container — toasts need a fixed viewport
anchor. Pin top-right for desktop, top-center for mobile. */
.sale-toasts,
.toasts-container,
.toast-stack {
position: fixed;
top: calc(var(--nav-h) + 16px);
right: 24px;
z-index: 250;
display: flex; flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: 380px;
}
.sale-toasts > *,
.toasts-container > *,
.toast-stack > * {
pointer-events: auto;
}
@media (max-width: 720px) {
.sale-toasts,
.toasts-container,
.toast-stack {
top: calc(var(--nav-h) + 8px);
right: 12px;
left: 12px;
max-width: none;
}
}
/* ─── User menu (avatar dropdown) — picked up the system blue accent
for consistency with notif dropdown / cmdK. */
.user-menu {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
box-shadow: var(--shadow-2),
0 0 0 1px color-mix(in oklab, var(--cta) 6%, transparent);
}
.user-menu-item {
position: relative;
padding: 10px 12px;
}
.user-menu-item:hover {
background: color-mix(in oklab, var(--cta) 8%, var(--bg-2));
color: var(--ink);
}
.user-menu-item:hover svg {
color: color-mix(in oklab, var(--cta) 70%, var(--ink-2));
}
.user-menu-item:focus-visible {
outline: none;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 30%, transparent);
}
/* ─── Steam sign-in button — was a flat ghost. Add a subtle gradient +
blue-tinted accent on hover so the primary auth CTA reads as "go". */
.steam-btn {
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 60%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border-color: var(--line-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
}
.steam-btn:hover {
background: var(--bg-2);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 12px rgba(0, 0, 0, 0.35),
0 0 0 3px color-mix(in oklab, var(--cta) 8%, transparent);
}
.steam-btn:focus-visible {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 25%, transparent);
}
/* ─── User chip (avatar + name in nav after login) — match wallet button
gradient + hover treatment. */
.user-chip {
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 60%, var(--bg-1)) 0%,
var(--bg-1) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
}
.user-chip:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 12px rgba(0, 0, 0, 0.35);
}
/* ─── Nav logo brand mark — currently the SkinBox cube icon at 28px.
Bump to 30px and add a subtle blue glow so the brand carries the spice. */
.nav-logo-icon {
width: 30px; height: 30px;
filter: drop-shadow(0 0 10px color-mix(in oklab, var(--cta) 35%, transparent))
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
/* Smooth the glow intensity change on hover instead of snapping to it. */
transition: filter 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-logo:hover .nav-logo-icon {
transform: scale(1.06);
}
.nav-logo-text {
font-size: 15px;
}
.nav-logo-badge {
color: color-mix(in oklab, var(--cta) 70%, var(--ink-3));
}
.nav-logo:hover .nav-logo-icon {
filter: drop-shadow(0 0 14px color-mix(in oklab, var(--cta) 55%, transparent))
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}
/* ─── Announce banner — default variant was bg-1 ink-2, indistinguishable
from chrome. Add a left rail accent so banners read as alerts. */
.announce-banner {
padding: 12px 28px;
border-left: 3px solid var(--cta);
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 60%);
}
.announce-banner.sev-warn {
border-left-color: #e8b960;
}
.announce-banner.sev-error {
border-left-color: var(--down);
}
.announce-banner-close {
width: 30px; height: 30px;
transition: color 160ms ease, background 160ms ease,
box-shadow 160ms ease;
}
.announce-banner-close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
/* ─── Main nav-link active underline — was a thin 1px ink-2 hairline.
Bump to 2px blue accent + glow, matching subnav active. */
.nav-link.active::after {
height: 2px;
background: linear-gradient(90deg,
var(--cta) 0%,
color-mix(in oklab, var(--cta) 80%, white) 50%,
var(--cta) 100%);
box-shadow: 0 0 14px color-mix(in oklab, var(--cta) 60%, transparent);
border-radius: 1px;
}
.nav-link.active { font-weight: 600; }
.nav-link:focus-visible {
outline: none;
background: var(--bg-1);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
.nav-link-badge {
background: color-mix(in oklab, var(--cta) 20%, var(--bg-2));
color: color-mix(in oklab, var(--cta) 80%, white);
border: 1px solid color-mix(in oklab, var(--cta) 30%, var(--line));
font-weight: 600;
}
/* ─── Search-suggest dropdown — already styled, but rows lacked accent on
keyboard-selected (.sel) state. Match cmdK row pattern. */
.search-suggest {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
box-shadow: var(--shadow-2),
0 0 0 1px color-mix(in oklab, var(--cta) 6%, transparent);
}
.search-suggest-row {
position: relative;
padding: 10px 12px;
/* Boss QA cycle 11 micro-polish — added a 120ms bg fade so arrow-key
navigation through the typeahead reads as a smooth slide rather
than a snap-flicker. Matches the .nav-link / .filter-chip
transition cadence elsewhere on the site. */
transition: background 120ms ease, color 120ms ease;
}
.search-suggest-row:hover, .search-suggest-row.sel {
background: color-mix(in oklab, var(--cta) 10%, var(--bg-2));
color: var(--ink);
}
.search-suggest-row.sel::before {
content: "";
position: absolute; left: 0; top: 6px; bottom: 6px;
width: 2px; border-radius: 2px;
background: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 60%, transparent);
}
/* ─── Search-clear "×" — was bare text. Make it a small chrome button.
Boss QA cycle 11 — desktop keeps the 24×24 chrome target; mobile
widens to 44×44 (Apple HIG) so a thumb-tap actually lands. The icon
itself stays compact via a flex-centered child glyph. */
.search-clear {
width: 24px; height: 24px;
border-radius: 50%;
display: grid; place-items: center;
transition: color 160ms ease, background 160ms ease;
}
.search-clear:hover {
color: var(--ink);
background: var(--bg-2);
}
.search-clear:active { transform: scale(0.92); }
@media (max-width: 760px) {
.search-clear { width: 44px; height: 44px; }
}
/* ─── Recently-viewed card hover — pick up the same accent border tint
as grid-card hover for consistency across surfaces. */
.recently-viewed-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease, box-shadow 200ms ease;
}
.recently-viewed-card:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
0 0 0 1px color-mix(in oklab, var(--cta) 18%, transparent) inset;
}
/* ─── Modal listing rows (Active Listings on item modal) — were dim
bottom-bordered rows. Add hover state + accent rail like the db table. */
.modal-listing-row {
position: relative;
padding: 12px 4px;
transition: background 160ms ease, padding-left 160ms ease;
border-radius: var(--r-sm);
}
.modal-listing-row:hover {
background: color-mix(in oklab, var(--cta) 6%, var(--bg-2));
padding-left: 12px;
}
.modal-listing-row:hover::before {
content: "";
position: absolute; left: 0; top: 8px; bottom: 8px;
width: 2px; border-radius: 2px;
background: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* Boss QA cycle 22 — :active deepens the row slightly so a click on a
listing row gets a tap-echo before the navigation fires. */
.modal-listing-row:active {
background: color-mix(in oklab, var(--cta) 12%, var(--bg-2));
transition: background 80ms ease-out;
}
.modal-listing-rarity-bar {
height: 4px;
border: 1px solid var(--line);
}
.modal-listing-rarity-bar::after {
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 60%, var(--ink)) 0%,
var(--cta) 100%);
box-shadow: 0 0 6px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* ─── Sparkline tooltip — used on price-history hover. Add the system's
blue accent border for consistency. */
.sparkline-tooltip {
border-color: color-mix(in oklab, var(--cta) 28%, var(--line-2));
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 6%, var(--bg-1)) 0%,
var(--bg-1) 100%);
box-shadow: var(--shadow-2),
0 0 0 1px color-mix(in oklab, var(--cta) 12%, transparent);
}
/* ─── Chart range pills (7D / 1M / 3M / 1Y / ALL) — active state was bg-2
ink. Match the system's blue accent active language. */
.chart-range button.on {
color: color-mix(in oklab, var(--cta) 80%, white);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
border-color: var(--cta);
}
/* ─── Top-seller avatar rail — same accent ring + lift on hover as the
verified seller treatment. */
.top-seller-avatar {
width: 40px; height: 40px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 180ms ease, box-shadow 180ms ease;
}
.top-seller-avatar:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent),
0 6px 14px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* ─── Spinner — was white-on-line. Switch to blue accent so loading
states match the rest of the system's brand spice. */
.spinner {
width: 20px; height: 20px;
border: 2px solid color-mix(in oklab, var(--cta) 14%, var(--line));
border-top-color: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 25%, transparent);
}
/* ─── Skeleton shimmer — add a subtle blue cast on the wave so loading
blocks pick up the brand accent without being loud. */
.skeleton-card, .skeleton-thumb, .skeleton-line, .skeleton-body {
background: linear-gradient(90deg,
var(--bg-1) 0%,
color-mix(in oklab, var(--cta) 4%, var(--bg-2)) 50%,
var(--bg-1) 100%);
background-size: 200% 100%;
}
/* ─── Discount badge (-N% on cards) — was solid white pill, jarring.
Switch to green tint by default (a discount is good news). */
.grid-discount {
background: color-mix(in oklab, var(--up) 18%, var(--bg));
color: color-mix(in oklab, var(--up) 80%, white);
border: 1px solid color-mix(in oklab, var(--up) 35%, var(--line));
font-weight: 600;
text-shadow: 0 0 6px color-mix(in oklab, var(--up) 30%, transparent);
}
/* ─── Seller strip / avatar — was a flat circle. Add subtle accent ring
for verified sellers + bigger touch target. */
.modal-seller-av, .seller-avatar {
width: 40px; height: 40px;
border-radius: 50%;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
font-size: 14px;
}
.modal-seller-info:has(.seller-verified) .modal-seller-av,
.modal-seller-info:has(.seller-verified) .seller-avatar {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent),
0 4px 12px color-mix(in oklab, var(--cta) 18%, transparent);
}
.modal-seller-name, .seller-name {
font-size: 14px;
font-weight: 600;
}
.seller-verified {
color: color-mix(in oklab, var(--cta) 80%, white);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-2));
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
font-weight: 700;
}
/* ─── Listing-table responsive — at <720px the 8-column table doesn't
fit. Hide low-priority columns (steam disc, trend, listed) so the
essentials (item, seller, price, action) survive. Already partially
handled in main grid breakpoint, but reinforce here. */
@media (max-width: 720px) {
.listing-table thead th:nth-child(3),
.listing-table tbody td:nth-child(3),
.listing-table thead th:nth-child(4),
.listing-table tbody td:nth-child(4),
.listing-table thead th:nth-child(6),
.listing-table tbody td:nth-child(6) {
display: none;
}
.listing-table thead th:nth-child(1),
.listing-table tbody td:nth-child(1) { width: 50%; }
.listing-table thead th:nth-child(5),
.listing-table tbody td:nth-child(5) { width: 28%; }
.listing-table thead th:nth-child(7),
.listing-table tbody td:nth-child(7) { width: 22%; }
.listing-table tbody td { padding: 12px 10px; }
}
/* ─── Notification dropdown — header in serif but text was tight, no
accent on header rule. Add the system blue gradient hairline + a
sticky header with subtle gradient bg. */
.notif-dropdown {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
box-shadow: var(--shadow-2),
0 0 0 1px color-mix(in oklab, var(--cta) 6%, transparent);
}
.notif-header {
position: relative;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 6%, var(--bg-1)) 0%,
var(--bg-1) 100%);
font-size: 18px;
padding: 16px 20px;
}
.notif-header::after {
content: "";
position: absolute; left: 20px; right: 20px; bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 35%, transparent) 0%,
transparent 60%);
}
/* ─── Watchlist alert bar — was a plain card. The "alert" intent should
read as urgent/important, so accent the bar with a left rail + tinted bg. */
.watchlist-alert-bar {
padding: 12px 18px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 60%);
border-color: color-mix(in oklab, var(--cta) 22%, var(--line-2));
border-left: 3px solid var(--cta);
border-radius: 0 var(--r-md) var(--r-md) 0;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--cta) 8%, transparent),
0 4px 12px rgba(0, 0, 0, 0.25);
}
.watchlist-alert-hit {
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
color: color-mix(in oklab, var(--cta) 80%, white);
}
/* ─── Callout — used on legal pages + inline help. Default callout was
indistinguishable from a card. Add a left accent rail variant via
the leading svg pattern, plus a `.callout.warn` / `.callout.danger`
variant for the legal-page red box. */
.callout {
position: relative;
padding: 16px 18px;
border-radius: var(--r-md);
border-left: 3px solid color-mix(in oklab, var(--cta) 50%, var(--line-2));
}
.callout:has(> svg) {
border-left-color: var(--cta);
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 60%);
}
.callout:has(> svg) svg {
color: color-mix(in oklab, var(--cta) 80%, var(--ink-2));
}
.callout.warn {
border-left-color: #e8b960;
background: color-mix(in oklab, #e8b960 6%, var(--bg-1));
}
.callout.danger {
border-left-color: var(--down);
background: color-mix(in oklab, var(--down) 6%, var(--bg-1));
}
/* ─── Danger button (.btn-danger-ghost) — focus state was using outline;
match the rest of the system with box-shadow ring. */
.btn-danger-ghost:focus-visible {
outline: none;
border-color: var(--down);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--down) 22%, transparent);
}
/* ─── Star picker (stall review modal) — was monochrome ink. Switch to
warm amber for the on-state since stars are a universal warmth cue. */
.stall-review-stars-picker button {
font-size: 22px;
transition: color 140ms ease, transform 140ms ease;
}
.stall-review-stars-picker button:hover {
color: color-mix(in oklab, #e8b960 60%, var(--ink-3));
transform: translateY(-1px);
}
.stall-review-stars-picker button.on {
color: #e8b960;
text-shadow: 0 0 10px color-mix(in oklab, #e8b960 50%, transparent);
}
/* Read-only star strip too. */
.stall-review-stars { color: #e8b960; }
/* ─── Trade-confirm modal — title scale up, key/value alignment, CTA row
gets the system gradient bg + accent. */
.trade-confirm-modal {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
}
.trade-confirm-title {
font-size: 28px;
padding: 24px 28px 8px;
}
.trade-confirm-sub {
padding: 0 28px 18px;
font-size: 13.5px;
}
.trade-confirm-row {
padding: 10px 0;
}
.trade-confirm-detail { padding: 18px 28px; }
.trade-confirm-actions {
padding: 18px 28px;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in oklab, var(--cta) 4%, var(--bg)) 100%);
}
/* ─── Cart-confirm panel — match trade-confirm typography scale. */
.cart-confirm-panel {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
}
.cart-confirm-title {
font-size: 22px;
}
.cart-confirm-head {
padding: 22px 24px;
}
/* ─── Review modal — chrome with hairline accent bottom on title rule. */
.review-modal {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
padding: 32px 28px;
gap: 18px;
}
/* ─── Pre-sign-in modal — input + submit weren't picking up the system's
blue accent treatment. Bring them in line. */
.presignin-modal {
padding: 40px 36px;
}
.presignin-input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent);
}
.presignin-submit {
border-radius: 999px;
height: 38px;
font-size: 13px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.presignin-submit:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.presignin-submit:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 35%, transparent),
0 1px 2px rgba(0, 0, 0, 0.3);
}
.presignin-check input { accent-color: var(--cta); }
/* ─── Shortcuts modal (?-key help) — already a card; ensure kbd pills
inside are styled like the cmdK ones for consistency. */
.shortcuts-card kbd,
.shortcuts-card .kbd {
font-family: var(--mono); font-size: 11px;
color: var(--ink-2);
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 2px 8px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
/* ─── Marketplace stats strip — Active Listings / 24H Volume / etc.
Was a 4-cell flat band. Add hover lift + accent rule on the value. */
.market-stats-strip {
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 4%, var(--line)) 0%,
var(--line) 50%,
color-mix(in oklab, var(--cta) 4%, var(--line)) 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.market-stats-strip > div {
position: relative;
padding: 22px 28px;
transition: background 180ms ease;
}
.market-stats-strip > div:hover {
background: color-mix(in oklab, var(--cta) 4%, var(--bg-2));
}
.market-stats-strip > div::after {
content: "";
position: absolute;
left: 26px; right: 26px; top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--cta) 50%, transparent) 50%,
transparent 100%);
opacity: 0;
transition: opacity 180ms ease;
}
.market-stats-strip > div:hover::after { opacity: 1; }
.market-stats-strip .v {
font-size: 28px;
}
/* ─── Item-modal price tiles (FLOOR PRICE / STEAM PRICE / 30D CHANGE / SUPPLY)
were flat bg-2 boxes. Lift to a stat-card pattern with hover and a
subtle gradient on the most-important tile (FLOOR PRICE). */
.modal-stat-box {
padding: 16px 18px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 60%, var(--bg-1)) 0%,
var(--bg-1) 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
transition: border-color 160ms ease, background 160ms ease;
}
.modal-stat-box:hover {
border-color: color-mix(in oklab, var(--cta) 28%, var(--line-2));
}
.modal-stat-box:first-child {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-2)) 0%,
var(--bg-1) 100%);
border-color: color-mix(in oklab, var(--cta) 22%, var(--line-2));
}
.modal-stat-box:first-child .modal-stat-val {
color: var(--ink);
font-size: 22px;
}
.modal-stat-val { font-size: 18px; }
/* ─── Item-stats inline row (alt small variant) — unify with modal-stat. */
.item-stats > div {
padding: 14px 18px;
transition: background 160ms ease;
}
.item-stats > div:hover {
background: color-mix(in oklab, var(--cta) 5%, var(--bg-1));
}
.item-stats .v { font-size: 18px; }
/* ─── Fee-calc bottom bar (cf-feebar) — was bare backdrop. Lift the input
field, blue accent on the receive value, scale up the CTA. */
.cf-feebar {
background: color-mix(in oklab, var(--bg) 92%, transparent);
border-top: 1px solid color-mix(in oklab, var(--cta) 12%, var(--line));
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
.cf-feebar-field {
padding: 4px 12px;
background: var(--bg-1);
border-color: var(--line-2);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cf-feebar-field:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent);
}
.cf-feebar-split b.accent {
color: color-mix(in oklab, var(--cta) 90%, white);
text-shadow: 0 0 12px color-mix(in oklab, var(--cta) 30%, transparent);
}
.cf-feebar-cta {
height: 38px;
padding: 0 22px;
border-radius: 999px;
font-size: 13.5px;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--cta) 50%, transparent),
0 6px 18px color-mix(in oklab, var(--cta) 25%, transparent);
}
.cf-feebar-cta:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* ─── Quick-filter chips (% Deals / New / Under $5 / etc.) — active state
was ink-on-ink, blended with hover. Switch active to blue accent. */
.deals-chip:focus-visible {
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 20%, transparent);
}
.deals-chip.active {
color: color-mix(in oklab, var(--cta) 80%, white);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
border-color: var(--cta);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px color-mix(in oklab, var(--cta) 35%, transparent);
}
.deals-chip.active:hover {
background: color-mix(in oklab, var(--cta) 20%, var(--bg-1));
}
/* ─── View toggle (grid/list/dense) — active state matches the chip. */
.view-btns button.active {
color: color-mix(in oklab, var(--cta) 80%, white);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
position: relative;
}
.view-btns button.active::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
box-shadow: inset 0 -2px 0 var(--cta);
}
/* ─── Rarity bar — was a flat dim ink-3 fill. Switch to blue accent
gradient so the rarity visualization carries the brand spice. */
.rarity-bar-outer {
height: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
}
.rarity-bar-inner {
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 60%, var(--ink)) 0%,
var(--cta) 100%);
box-shadow: 0 0 6px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* ─── Sort-select chevron — bump weight + tint when focused. The dim
chevron blended into the bg. */
.sort-select, .discount-select, .toolbar-select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ─── Active filter chip (under toolbar when filter is set) — accent-tint
the whole chip so the user sees their applied filter at a glance. */
.filter-chip {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 10%, var(--bg-2));
border-color: color-mix(in oklab, var(--cta) 28%, var(--line));
height: 30px;
font-size: 12px;
font-weight: 600;
}
.filter-chip:hover {
background: color-mix(in oklab, var(--cta) 16%, var(--bg-2));
border-color: color-mix(in oklab, var(--cta) 40%, var(--line));
}
/* ─── Toolbar search input — bigger touch target + add a "/" kbd hint
pinned right inside the input. The placeholder hint was inline text
which got truncated on narrow screens. Now it lives as a visible kbd. */
.search-wrap {
position: relative;
border-radius: 8px;
transition: box-shadow 160ms ease;
}
.search-wrap:focus-within {
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 22%, transparent);
}
.search-wrap .search-input {
height: 40px;
padding: 0 56px 0 36px;
font-size: 14px;
}
.search-wrap:focus-within .search-input {
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
}
.search-wrap .search-icon {
position: absolute;
left: 12px; top: 50%; transform: translateY(-50%);
color: var(--ink-3);
pointer-events: none;
display: grid; place-items: center;
z-index: 1;
}
.search-wrap::after {
content: "/";
position: absolute;
right: 12px; top: 50%; transform: translateY(-50%);
font-family: var(--mono);
font-size: 11px; font-weight: 600;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px 8px;
pointer-events: none;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
letter-spacing: 0;
z-index: 1;
}
.search-wrap:focus-within::after {
color: color-mix(in oklab, var(--cta) 80%, var(--ink));
border-color: color-mix(in oklab, var(--cta) 35%, var(--line));
background: color-mix(in oklab, var(--cta) 10%, var(--bg-2));
}
/* ─── Command palette (Cmd+K) — selected item gets blue rail + tinted bg.
The plain bg-2 highlight was too subtle for keyboard navigation. */
.cmdk {
border-color: color-mix(in oklab, var(--cta) 14%, var(--line-2));
box-shadow: var(--shadow-2),
0 0 0 1px color-mix(in oklab, var(--cta) 8%, transparent);
}
.cmdk-input {
font-size: 18px;
padding: 18px 22px;
}
.cmdk-input::placeholder { color: var(--ink-3); }
.cmdk-item {
position: relative;
}
.cmdk-item.sel,
.cmdk-item:hover {
background: color-mix(in oklab, var(--cta) 10%, var(--bg-2));
color: var(--ink);
}
.cmdk-item.sel::before {
content: "";
position: absolute; left: 0; top: 6px; bottom: 6px;
width: 2px; border-radius: 2px;
background: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 60%, transparent);
}
.cmdk-item .shortcut {
font-size: 11px;
color: var(--ink-3);
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 4px;
padding: 2px 6px;
}
/* ─── Listing-table thead — bg-2 was bland, lift to a subtle gradient
so the header reads as a deliberate band, not a faded row. */
.listing-table thead th {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 4%, var(--bg-2)) 0%,
var(--bg-2) 100%);
color: var(--ink-3);
font-size: 10.5px;
letter-spacing: 0.16em;
}
/* ─── Notification dot — was white. Switch to blue accent so unread items
read as "fresh" instead of "neutral". */
.notif-feed-dot {
background: var(--cta);
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 60%, transparent);
animation: live-pulse 2.4s ease-in-out infinite;
}
/* ─── Sale toast container — was just typography rules with no card
chrome. Define the actual toast wrapper so server-pushed sale alerts
read as proper notifications. */
.sale-toast {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
min-width: 280px; max-width: 380px;
animation: toast-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
border-left: 3px solid var(--cta);
}
.sale-toast.warn { border-left-color: #e8b960; }
.sale-toast.err { border-left-color: var(--down); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(-8px); }
}
/* ─── Pulse ticker — was 11px ink-3 mono, almost invisible against the
dim nav. Bump font, bump label color, give the LED a real glow. */
.pulse {
height: 36px;
font-size: 11.5px;
color: var(--ink-2);
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 4%, var(--bg-1)) 0%,
var(--bg) 100%);
border-bottom: 1px solid color-mix(in oklab, var(--cta) 14%, var(--line));
}
.pulse-led {
width: 8px; height: 8px;
}
.pulse-item b {
color: var(--ink);
font-weight: 600;
}
.pulse-item .dot {
width: 5px; height: 5px;
background: color-mix(in oklab, var(--cta) 35%, var(--ink-4));
}
/* ─── Subnav active link — already has a 2px accent underline, but the
color shift was subtle. Brighten the active link text + add weight. */
.subnav a.active {
color: var(--ink);
font-weight: 600;
}
.subnav a.active::after {
height: 2px;
background: linear-gradient(90deg,
var(--cta) 0%,
color-mix(in oklab, var(--cta) 80%, white) 50%,
var(--cta) 100%);
box-shadow: 0 0 14px color-mix(in oklab, var(--cta) 60%, transparent);
}
/* ─── Rarity badge variants — F4 (cycle 7): boss flagged that every card
carrying a Standard tag in the same lockup made rarity reads visually
useless. Strategy: dial Standard down to a near-invisible muted token,
and pump Limited (blue) + Off-Market/Scarce (gold) into solid filled
pills with a 3px left rail so the eye is pulled to the non-Standard
rows from across the grid. Same three data tokens as before, much
stronger visual hierarchy. */
.rarity-badge {
font-weight: 700;
letter-spacing: 0.06em;
border-left-width: 1px;
position: relative;
}
.rarity-badge.rarity-Standard {
color: var(--ink-3);
background: transparent;
border-color: var(--line);
opacity: 0.78;
}
.rarity-badge.rarity-Off-Market {
color: oklch(0.18 0.02 90);
background: linear-gradient(180deg,
color-mix(in oklab, #e8b960 88%, white) 0%,
#e8b960 100%);
border-color: color-mix(in oklab, #e8b960 60%, var(--line));
border-left: 3px solid color-mix(in oklab, #e8b960 80%, black);
padding-left: 8px !important;
text-shadow: 0 1px 0 color-mix(in oklab, #fff 30%, transparent);
box-shadow: 0 1px 4px -1px color-mix(in oklab, #e8b960 35%, transparent);
}
.rarity-badge.rarity-Limited {
color: oklch(0.99 0 0);
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 84%, white) 0%,
var(--cta) 100%);
border-color: color-mix(in oklab, var(--cta) 60%, var(--line));
border-left: 3px solid color-mix(in oklab, var(--cta) 80%, black);
padding-left: 8px !important;
text-shadow: 0 1px 0 color-mix(in oklab, #000 18%, transparent);
box-shadow: 0 1px 4px -1px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* ─── Listing-table row chrome — bump hover divider to accent + add a
2px accent rail at the start of hovered row for editorial weight. */
.listing-table tbody tr {
transition: background 160ms ease;
}
.listing-table tbody tr:hover td {
background: color-mix(in oklab, var(--cta) 6%, var(--bg-2));
border-bottom-color: color-mix(in oklab, var(--cta) 20%, var(--line));
}
.listing-table tbody tr:hover td:first-child {
position: relative;
}
.listing-table tbody tr:hover td:first-child::before {
content: "";
position: absolute; left: 0; top: 6px; bottom: 6px;
width: 2px;
background: var(--cta);
border-radius: 2px;
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* ─── Nav icon badges (cart count, notification count) — switch from
white-on-dark to blue accent so unread counts pop. */
.nav-icon-badge {
background: var(--cta);
color: white;
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* When the count is 0, mute it so the user isn't drawn to a non-event. */
.nav-icon-badge[data-count="0"],
.nav-icon-badge:empty {
background: var(--ink-4);
color: var(--bg);
box-shadow: none;
}
/* ─── Nav icon button focus state — match the rest of the system's blue
focus ring, not a hairline outline. */
.nav-icon-btn:focus-visible {
outline: none;
background: var(--bg-1);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
/* ─── Wallet button — give it real chrome instead of bare hairline. */
.wallet-btn {
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 60%, var(--bg-1)) 0%,
var(--bg-1) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.25);
transition: border-color 160ms ease, box-shadow 160ms ease,
transform 160ms ease;
}
.wallet-btn:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 4px 12px rgba(0, 0, 0, 0.35),
0 0 0 3px color-mix(in oklab, var(--cta) 8%, transparent);
}
/* ─── Hero CTAs — lift the primary action with a real pill + blue glow.
Was: matched the small-size .btn-accent. Now: bigger, rounder, and on
hover the primary picks up a soft blue-tinted halo to anchor the eye. */
.hero-actions .btn-accent,
.hero-actions .btn-primary,
.px-hero-actions .btn-accent,
.px-hero-actions .btn-primary {
height: 46px;
padding: 0 28px;
border-radius: 999px;
font-size: 14px;
letter-spacing: -0.005em;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms ease, filter 160ms ease;
}
.hero-actions .btn-accent:hover,
.hero-actions .btn-primary:hover,
.px-hero-actions .btn-accent:hover,
.px-hero-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5),
0 0 0 6px color-mix(in oklab, var(--cta) 12%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero-actions .btn-ghost,
.hero-actions .btn-primary-outline,
.px-hero-actions .btn-ghost,
.px-hero-actions .btn-primary-outline {
height: 46px;
padding: 0 28px;
border-radius: 999px;
font-size: 14px;
background: color-mix(in oklab, var(--bg-1) 50%, transparent);
backdrop-filter: blur(12px);
border-color: var(--line-2);
}
.hero-actions .btn-ghost:hover,
.hero-actions .btn-primary-outline:hover,
.px-hero-actions .btn-ghost:hover,
.px-hero-actions .btn-primary-outline:hover {
transform: translateY(-2px);
background: color-mix(in oklab, var(--bg-2) 70%, transparent);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
/* ─── Item poster fallback (failed image / no imageUrl) — was a dim 28px
geometric glyph that read as an accident. Bump to a larger glyph in an
accent-tinted ring so the empty card looks intentional. */
.item-poster {
font-size: 40px;
color: color-mix(in oklab, var(--cta) 25%, var(--ink-3));
filter: drop-shadow(0 4px 12px color-mix(in oklab, var(--cta) 18%, transparent));
}
.item-poster[data-variant="thumb"] { font-size: 22px; }
.item-poster[data-variant="hero"] {
font-size: 96px;
color: color-mix(in oklab, var(--cta) 30%, var(--ink-3));
}
/* Around the glyph, a soft accent ellipse so it doesn't float in a void. */
.grid-thumb:has(.item-poster)::before {
content: "";
position: absolute;
inset: 30% 25%;
border-radius: 50%;
background: radial-gradient(closest-side,
color-mix(in oklab, var(--cta) 14%, transparent) 0%,
transparent 70%);
z-index: 0;
}
.grid-thumb .item-poster { position: relative; z-index: 1; }
/* ─── Primary buttons — add subtle elevation so they pop off cards.
Was: pure flat fill. Now: 1px hairline drop shadow + accent focus ring. */
.btn-accent, .btn-primary {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn-accent:hover, .btn-primary:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-accent:focus-visible, .btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 35%, transparent),
0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ─── Ghost buttons — match primary focus ring treatment for consistency. */
.btn-ghost:focus-visible, .btn-primary-outline:focus-visible {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 25%, transparent);
}
/* ─── Form input focus state — was a barely-visible ink-2 border bump.
Use blue accent so the focused field is unambiguous. */
.search-input:focus,
.price-input:focus,
.fee-calc-input:focus,
.chat-input:focus {
border-color: var(--cta);
background: var(--bg-2);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent);
}
.sort-select:focus-visible,
.discount-select:focus-visible,
.toolbar-select:focus-visible {
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
/* ─── Wallet step circles — 24px ink-on-bg circles were too small + dim.
Bump to 28px with blue active state, keep mono numerals. */
.wallet-step-num {
width: 28px; height: 28px;
font-size: 12px;
}
.wallet-step-num.active {
background: var(--cta);
color: white;
border-color: var(--cta);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--cta) 18%, transparent),
0 4px 12px color-mix(in oklab, var(--cta) 30%, transparent);
}
.wallet-step-num.done {
background: color-mix(in oklab, var(--cta) 20%, var(--bg-2));
color: color-mix(in oklab, var(--cta) 90%, var(--ink));
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
}
.wallet-step-line.done {
background: color-mix(in oklab, var(--cta) 50%, var(--ink-3));
}
/* ─── Wallet preset amount pills ($25 / $50 / etc.) — were 12px dim mono on
bg-2. Bump to 13px ink-2, add subtle accent border on hover, blue tint
when active. */
.wallet-preset-row { gap: 8px; }
.wallet-preset-row button {
padding: 8px 14px;
font-size: 13px;
color: var(--ink-2);
background: var(--bg-1);
border: 1px solid var(--line-2);
transition: color 160ms ease, background 160ms ease,
border-color 160ms ease, transform 160ms ease;
}
.wallet-preset-row button:hover {
color: var(--ink);
background: var(--bg-2);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
transform: translateY(-1px);
}
.wallet-preset-row button.active {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 12%, transparent);
}
/* ─── Auth-required / inline empty state — the "—" placeholder + plain text
was visually empty. Wrap the icon in an accent-tinted tile + size up the
heading + add proper vertical rhythm. Targets:
`.empty-state` (full-page block), `.empty-icon` (in-modal inline). */
.empty-state-icon, .empty-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 18%, var(--bg-2)) 0%,
var(--bg-2) 100%);
border: 1px solid color-mix(in oklab, var(--cta) 28%, var(--line));
color: color-mix(in oklab, var(--cta) 75%, var(--ink));
font-size: 22px;
font-family: var(--mono);
display: grid; place-items: center;
margin: 0 auto 18px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 6px 18px color-mix(in oklab, var(--cta) 18%, transparent);
}
.empty-inline {
padding: 36px 24px 28px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* Sign-in CTA inside an in-modal empty-state.
Was forced to pill (border-radius 999px) which made it look like a
different control class from any sibling ghost button. Now matches the
site's default button shape so action-pairs in empty states (e.g.
"Open Steam privacy settings" + "Re-sync now") line up at the same
height + corner radius. Inline styles on individual buttons can still
override these via greater specificity. */
.empty-inline .btn-accent {
margin-top: 8px;
font-weight: 600;
}
/* ─── Modal close button — was 32×32 dim ink-3, blended into the modal.
Bump size, give it a hairline ring + accent on hover, so it reads as a
real interactive control instead of a faint glyph.
Boss QA cycle 11 — desktop chrome stays compact at 36×36; mobile
widens to 44×44 (Apple HIG) so a thumb-tap on the close-X works
without over-aim. */
.modal-close {
width: 36px; height: 36px;
border: 1px solid var(--line);
background: var(--bg-1);
color: var(--ink-2);
font-size: 14px; font-weight: 500;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: color 160ms ease, background 160ms ease,
border-color 160ms ease, transform 160ms ease,
box-shadow 160ms ease;
}
@media (max-width: 760px) {
.modal-close { width: 44px; height: 44px; font-size: 15px; }
}
.modal-close:hover {
color: var(--ink);
background: var(--bg-2);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 3px color-mix(in oklab, var(--cta) 12%, transparent);
}
.modal-close:active { transform: scale(0.96); }
.modal-close:focus-visible {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 25%, transparent);
}
/* ─── info-modal header — "Database · 80 indexed" was a thin 22px serif.
Bump scale + add a hairline accent rule under the divider for editorial
hierarchy. The middot-separated pair reads much better with mono numerals. */
.info-modal-header {
padding: 22px 28px;
font-size: 28px;
position: relative;
}
.info-modal-header::after {
content: "";
position: absolute; left: 28px; right: 28px; bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 35%, transparent) 0%,
transparent 60%);
}
/* ─── Database table row contrast — dim values were hard to scan.
Bump category/status text one ink step + give thead a clear divider. */
.listing-table thead th {
color: var(--ink-3);
border-bottom: 1px solid var(--line-2);
}
.listing-table tbody td {
color: var(--ink-2);
}
.listing-table tbody tr:hover td {
background: color-mix(in oklab, var(--cta) 5%, var(--bg-2));
}
/* END DESIGN POLISH PASS */
/* ─── Inline discount chip next to the price (CSFloat pattern: $X [-90%]).
Was a standalone tile inside grid-thumb; now sits inline with the price. */
.grid-price {
display: inline-flex; align-items: center; gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
.grid-price .grid-discount {
display: inline-flex; align-items: center;
padding: 3px 8px;
border-radius: 5px;
background: color-mix(in oklab, var(--up) 18%, var(--bg));
color: color-mix(in oklab, var(--up) 80%, white);
border: 1px solid color-mix(in oklab, var(--up) 35%, var(--line));
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
text-shadow: 0 0 6px color-mix(in oklab, var(--up) 30%, transparent);
}
/* ─── Payment-method tile (Credit/Debit Card) — selected state was a
bare ink ring. Switch to blue accent + tinted bg + 2px border for the
chosen payment method. */
.wallet-method-card {
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease, box-shadow 200ms ease,
background 200ms ease;
}
.wallet-method-card:hover {
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
background: color-mix(in oklab, var(--cta) 4%, var(--bg-2));
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.wallet-method-card.selected {
border-color: var(--cta);
background: color-mix(in oklab, var(--cta) 8%, var(--bg-1));
box-shadow: 0 0 0 1px var(--cta) inset,
0 0 0 4px color-mix(in oklab, var(--cta) 12%, transparent),
0 8px 20px rgba(0, 0, 0, 0.45);
}
.wallet-method-icon {
width: 40px; height: 40px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 14%, var(--bg-2)) 0%,
var(--bg-2) 100%);
border-color: color-mix(in oklab, var(--cta) 22%, var(--line));
color: color-mix(in oklab, var(--cta) 70%, var(--ink-2));
}
.wallet-method-card.selected .wallet-method-icon {
border-color: var(--cta);
color: white;
background: var(--cta);
box-shadow: 0 0 12px color-mix(in oklab, var(--cta) 50%, transparent);
}
.wallet-method-title { font-size: 15px; }
/* ─── Deposit submit button — make it the visual primary of the deposit
flow, big and blue with the system gradient + glow. */
.wallet-deposit-btn,
.wallet-step-body .btn-accent[data-deposit],
.wallet-step-body .btn-accent {
width: 100%;
height: 48px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
box-shadow: 0 4px 14px color-mix(in oklab, var(--cta) 30%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.wallet-deposit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in oklab, var(--cta) 42%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* ─── Wallet hero — was eating ~1/3 of the viewport. Tighten the padding
so the deposit form lives above the fold. CSFloat's deposit modals are
compact balance hero + tabs + active form. */
.wallet-hero {
padding: 22px 28px 18px;
}
.wallet-hero-balance {
font-size: 40px;
letter-spacing: -0.02em;
}
.wallet-hero-label {
font-size: 10px;
}
.wallet-hero-user { font-size: 12px; }
/* Wallet step circles inactive state — was too dim. Bump to ink-2 ring
so the upcoming step still reads as a step, not an artifact. */
.wallet-step-num {
background: var(--bg-1);
color: var(--ink-3);
border-color: var(--line-2);
font-weight: 600;
}
/* Step head padding tighter. */
.wallet-step-head {
padding: 14px 22px 12px;
}
.wallet-step-title { font-size: 18px; }
.wallet-step-subtitle { font-size: 12.5px; margin-top: 2px; }
/* Wallet amount input — bigger for CSFloat-style deposit prominence. */
.wallet-amount-wrap input,
.wallet-amount-wrap .price-input {
height: 52px;
font-size: 22px;
font-family: var(--mono);
font-weight: 600;
letter-spacing: -0.01em;
}
/* ─── Cart modal needs to be wider than the default 520px info-modal so
the 2-column grid actually has room. */
.info-modal:has(.cart-grid) {
width: min(96vw, 920px);
}
.info-modal:has(.cart-grid) .info-modal-body {
padding: 22px 28px 28px;
}
/* ─── Tighten cart-row for narrow 2-column cart layout. Drop the per-row
"Save" button (redundant with summary's bulk "Move to watchlist") and
compress the grid to thumb / name+meta / price / × close. */
.cart-grid .cart-list .cart-row {
grid-template-columns: 56px minmax(0, 1fr) auto auto;
gap: 12px;
padding: 12px 14px;
}
.cart-grid .cart-list .cart-thumb {
width: 56px; height: 56px;
}
.cart-grid .cart-list .cart-row > .btn-ghost:nth-of-type(1) {
display: none; /* hide per-row Save — bulk action lives in summary */
}
/* ─── CSFloat-style cart layout — items left, order summary right.
Mirrors the operator's skinbox template CartPage at pages_rest.jsx. */
.cart-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 22px;
align-items: start;
}
@media (max-width: 760px) {
.cart-grid { grid-template-columns: 1fr; }
}
.cart-list {
display: flex; flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-1);
overflow: hidden;
}
.cart-list .cart-row {
border-bottom: 1px solid var(--line);
}
.cart-list .cart-row:last-child { border-bottom: 0; }
/* Order-summary card — right side, sticky on tall lists. */
.cart-summary {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 5%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border: 1px solid color-mix(in oklab, var(--cta) 14%, var(--line-2));
border-radius: var(--r-md);
padding: 22px 22px 18px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
position: sticky;
top: 84px;
display: flex; flex-direction: column;
}
.cart-summary-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.cart-summary-row {
display: flex; align-items: baseline; justify-content: space-between;
padding: 8px 0;
font-size: 13px;
color: var(--ink-2);
}
.cart-summary-row .mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--ink);
}
.cart-summary-savings .mono { color: var(--up); }
.cart-summary-total {
margin-top: 8px;
padding: 12px 0 8px;
border-top: 1px solid var(--line);
font-size: 14px; font-weight: 600;
color: var(--ink);
}
.cart-summary-total .mono {
font-size: 18px;
font-weight: 700;
color: color-mix(in oklab, var(--cta) 80%, white);
text-shadow: 0 0 14px color-mix(in oklab, var(--cta) 30%, transparent);
}
.cart-summary-actions {
display: flex; flex-direction: column; gap: 8px;
margin-top: 14px;
}
.cart-summary-actions .btn {
width: 100%;
justify-content: center;
height: 44px;
}
.cart-summary-actions .btn-accent {
font-size: 14px;
font-weight: 600;
}
/* ─── CSFloat-style grid-card layout — name TOP, image MIDDLE, price BOTTOM.
Mirrors csfloat.com's per-card structure. .grid-head (name + condition)
sits above .grid-thumb (image). */
.grid-head {
padding: 12px 14px 10px;
display: flex; flex-direction: column; gap: 2px;
}
.grid-head .grid-name {
font-size: 14px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-head .grid-sub {
font-size: 12px; font-weight: 500;
color: var(--ink-3);
letter-spacing: 0;
text-transform: none;
line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* Inside .grid-card, the thumb keeps its square aspect but loses the top
border (the head sits above with its own divider). */
.grid-card .grid-thumb {
border-radius: 0;
border-top: 1px solid var(--line);
}
.grid-card .grid-body {
padding: 12px 14px 14px;
}
/* (2026-04-29) Was: a `display:none` rule here hid `.grid-body .grid-name`
and `.grid-body .grid-cat` because an earlier in-flight diff had moved
the title to a `.grid-head` block above the image, leaving the body
ones as duplicates. That `.grid-head` was reverted and the body
blocks are now the only place names render — leaving the hide rule
in place wiped every card title and category in the grid. */
/* ─── Listing freshness chip on grid card — CSFloat-style "Just listed"
indicator for fresh BUY_NOW listings. Sits in the grid-footer next to
the supply line. */
.grid-fresh {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-4);
display: inline-flex; align-items: center; gap: 5px;
margin-top: 2px;
white-space: nowrap;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.grid-fresh.is-new {
color: color-mix(in oklab, var(--cta) 80%, white);
font-weight: 600;
}
.grid-fresh-dot {
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent),
0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
animation: live-pulse 2s ease-in-out infinite;
}
/* ─── Filter sidebar accordion — JSX migrated .filter-section to
so each section is collapsible. The still uses .filter-title,
so we just need to remove the default disclosure marker and add a
styled chevron instead. */
.filter-section[open] > .filter-title::-webkit-details-marker,
.filter-section > .filter-title::-webkit-details-marker {
display: none;
}
.filter-section > .filter-title {
list-style: none;
cursor: pointer;
user-select: none;
position: relative;
padding-right: 18px;
transition: color 160ms ease;
}
.filter-section > .filter-title::-marker { display: none; }
.filter-section > .filter-title:hover {
color: var(--ink-2);
}
.filter-section > .filter-title::after {
content: "";
position: absolute;
right: 2px; top: 50%;
transform: translateY(-50%) rotate(0deg);
width: 8px; height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform-origin: 60% 60%;
transform: translateY(-65%) rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 160ms ease;
}
.filter-section:not([open]) > .filter-title::after {
transform: translateY(-50%) rotate(-45deg);
}
.filter-section > .filter-title:hover::after {
border-color: var(--cta);
}
.filter-section[open] > .filter-title {
color: var(--ink-2);
}
/* ─── Per-card quick-action buttons (heart + cart-add) — CSFloat-style
icon stack at top-right of the thumbnail. Visible at all times so
touch users can use them; lift to opacity 1 on card hover for stronger
visual affordance. */
.grid-thumb { position: relative; }
.grid-cart-btn,
.grid-star {
position: absolute;
right: 8px;
width: 30px; height: 30px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg) 75%, transparent);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
cursor: pointer;
font-size: 15px; font-weight: 600;
font-family: inherit;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 4;
opacity: 0.6;
transition: opacity 160ms ease, color 160ms ease,
background 160ms ease, border-color 160ms ease,
transform 160ms ease;
}
/* Boss QA cycle 11 — mobile widens the grid-card overlay buttons to 44×44
per Apple HIG. Desktop keeps the editorial 30×30 because the overlay
reads as chrome at the larger size. */
@media (max-width: 760px) {
.grid-cart-btn, .grid-star { width: 44px; height: 44px; font-size: 18px; }
}
.grid-star { top: 8px; }
.grid-cart-btn { top: 44px; line-height: 1; }
/* Boss QA cycle 29 — :active scale-down on per-card overlay buttons so
star + cart tap-add gestures get a tactile echo before the .on / .in
class flips. Same scale(0.94) the worker shipped on .star-btn /
.btn-wishlist — applied here on the rendered .grid-* class names. */
.grid-star:active,
.grid-cart-btn:active { transform: scale(0.94); transition: transform 80ms ease-out, opacity 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease; }
/* Boss QA cycle 12 — bump per-card overlay buttons to Apple HIG 44×44 on
mobile. Pre-fix the watchlist + cart buttons rendered at 30×30 (32×32
incl. border) on every grid card — boss prompt explicitly named
"watch-star" and "cart-plus" as must-clear tap-targets. Stack offset
updated so the cart sits below the now-taller star with the same gap. */
@media (max-width: 760px) {
.grid-cart-btn,
.grid-star {
width: 44px; height: 44px;
border-radius: 10px;
/* Always fully visible on touch — no hover state on touch devices */
opacity: 1;
}
.grid-star { top: 8px; }
.grid-cart-btn { top: 60px; }
}
.grid-card:hover .grid-cart-btn,
.grid-card:hover .grid-star {
opacity: 1;
}
.grid-cart-btn:hover,
.grid-star:hover {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-1));
border-color: var(--cta);
transform: translateY(-1px);
}
.grid-cart-btn.in {
color: color-mix(in oklab, var(--up) 80%, white);
background: color-mix(in oklab, var(--up) 14%, var(--bg-1));
border-color: color-mix(in oklab, var(--up) 35%, var(--line-2));
cursor: default;
}
.grid-star.on {
color: color-mix(in oklab, var(--down) 80%, white);
background: color-mix(in oklab, var(--down) 14%, var(--bg-1));
border-color: color-mix(in oklab, var(--down) 35%, var(--line-2));
}
.grid-cart-btn:focus-visible,
.grid-star:focus-visible {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
/* ─── Toolbar refresh button — CSFloat parity. Click re-fetches listings.
Same chrome as view-btns / sort-select for consistency. */
.toolbar-refresh {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
transition: color 160ms ease, background 160ms ease,
border-color 160ms ease, transform 220ms ease;
}
.toolbar-refresh:hover {
color: var(--ink);
background: var(--bg-2);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
}
.toolbar-refresh:active {
transform: rotate(180deg);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-2));
color: color-mix(in oklab, var(--cta) 80%, white);
}
.toolbar-refresh:focus-visible {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 22%, transparent);
}
/* Codex 17:28Z polish — `busy` class spins the refresh icon while the
load() promise is in-flight. Without it, a fast refresh would render
the skeleton for ~50ms and the user couldn't tell if the click took.
Spinner runs at a consistent 800ms cadence so it reads as
"actually loading" rather than UI glitch. */
.toolbar-refresh.busy {
cursor: wait;
pointer-events: none;
color: var(--cta);
border-color: color-mix(in oklab, var(--cta) 50%, var(--line));
}
.toolbar-refresh.busy svg,
.toolbar-refresh[aria-busy="true"] svg {
animation: toolbar-refresh-spin 800ms linear infinite;
}
@keyframes toolbar-refresh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.toolbar-refresh:disabled {
opacity: 0.65;
}
/* ─── Card rarity rail — moved 2026-05-02 from BOTTOM to LEFT EDGE for
csfloat parity. 3px vertical bar with vertical gradient, color-coded
per rarity via :has(). Replaces the horizontal bottom stripe; the
bottom of the card is now reserved for the listed-time row. */
.grid-card::after {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 60%, transparent) 0%,
var(--cta) 100%);
opacity: 0.85;
pointer-events: none;
border-radius: 8px 0 0 8px;
}
.grid-card:has(.rarity-Off-Market)::after {
background: linear-gradient(180deg,
color-mix(in oklab, #e8b960 60%, transparent) 0%,
#e8b960 100%);
}
.grid-card:has(.rarity-Limited)::after {
background: linear-gradient(180deg,
color-mix(in oklab, var(--down) 60%, transparent) 0%,
var(--down) 100%);
}
/* ═══════════════════════════════════════════════════════════════════════
CSFLOAT 1:1 PIVOT — operator directive: "If website doesn't look like
1 TO 1 AS CS FLOAT YOU KEEP WORKIN".
Strip ALL editorial chrome (serif, italic, gradient-clipped, pill CTAs)
and conform to csfloat.com's exact visual language. This block is the
LAST in the file so its rules win.
═══════════════════════════════════════════════════════════════════════ */
/* Typography: sans-serif EVERYWHERE. No Fraunces, no serif on any surface. */
.px-h1, .hero h1,
.px-h2, .px-section-header h2,
.modal-name, .modal-header h2, .modal-header h3,
.info-modal-header,
.info-modal-header > div:not(.modal-close):not(button),
.info-modal-header > h1, .info-modal-header > h2, .info-modal-header > h3,
.cart-confirm-title, .trade-confirm-title, .wallet-step-title,
.notif-header, .presignin-title, .stall-name,
.loadout-card-name, .empty-state-title,
.wallet-hero-balance,
.help-step-title {
font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-variation-settings: normal !important;
letter-spacing: -0.015em !important;
}
/* Hero headline specifically: short, bold, left-aligned, no fluid 6vw scale. */
.px-h1, .hero h1 {
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
max-width: 24ch !important;
text-wrap: balance !important;
}
/* Accent word: no italic, no gradient-clip, no serif — just bold blue text. */
.px-accent-word, .hero h1 em, .px-h1 em {
font-family: inherit !important;
font-style: normal !important;
font-weight: 700 !important;
background: none !important;
-webkit-text-fill-color: var(--cta) !important;
color: var(--cta) !important;
}
/* Hero lede: shorter, tighter. */
.px-lede, .hero p {
font-size: 14px !important;
color: var(--ink-2) !important;
max-width: 50ch !important;
line-height: 1.5 !important;
}
/* Hero layout: LEFT-aligned like csfloat.com, tighter padding.
A single soft blue accent glow on the right half fills the visual
weight that csfloat solves with a product-card stack. Subtle,
on-brand ("blue as spice") — not a texture, not a pattern. */
.px-hero, .hero {
padding: 64px 24px 48px !important;
position: relative;
overflow: hidden;
}
.px-hero::before, .hero::before {
content: "" !important;
position: absolute !important;
inset: auto !important;
top: 50% !important; right: -8% !important;
left: auto !important; bottom: auto !important;
transform: translateY(-50%) !important;
width: 720px !important; height: 720px !important;
max-width: 55% !important;
background: radial-gradient(circle at center,
color-mix(in oklab, var(--cta) 40%, transparent) 0%,
color-mix(in oklab, var(--cta) 14%, transparent) 30%,
transparent 65%) !important;
filter: blur(8px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.px-hero > *, .hero > * {
position: relative;
z-index: 1;
}
.px-hero-inner, .hero-inner {
align-items: flex-start !important;
text-align: left !important;
gap: 14px !important;
}
.px-hero-text, .hero-text {
align-items: flex-start !important;
text-align: left !important;
}
.hero-actions, .px-hero-actions {
justify-content: flex-start !important;
margin-top: 8px !important;
gap: 10px !important;
}
/* Editorial eyebrow above the h1 — CSFloat doesn't use this. Hide. */
.hero .px-eyebrow, .px-hero .px-eyebrow {
display: none !important;
}
/* Radial vignette bg is CSFloat-style, keep subtly. */
/* Buttons: SQUARE with 6px radius. Kill pill 999px. */
.btn, .btn-accent, .btn-primary, .btn-ghost, .btn-primary-outline, .btn-clear,
.px-btn, .px-btn-primary, .px-btn-secondary, .px-btn-lg, .px-btn-sm,
.hero-actions .btn-accent, .hero-actions .btn-primary,
.hero-actions .btn-ghost, .hero-actions .btn-primary-outline,
.px-hero-actions .btn-accent, .px-hero-actions .btn-primary,
.px-hero-actions .btn-ghost, .px-hero-actions .btn-primary-outline,
.hero-actions .px-btn, .hero-actions .px-btn-primary,
.px-hero-actions .px-btn, .px-hero-actions .px-btn-primary,
.steam-btn,
.presignin-submit,
.cf-feebar-cta {
border-radius: 6px !important;
}
/* px-btn-primary: the real class used by "Explore Market" — force blue. */
.px-btn-primary, .hero-actions .px-btn-primary, .px-hero-actions .px-btn-primary {
background: var(--cta) !important;
color: white !important;
border-color: var(--cta) !important;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 600 !important;
height: 36px !important;
padding: 0 16px !important;
font-size: 13px !important;
box-shadow: 0 2px 8px color-mix(in oklab, var(--cta) 30%, transparent) !important;
}
.px-btn-primary:hover {
background: color-mix(in oklab, var(--cta) 90%, white) !important;
border-color: color-mix(in oklab, var(--cta) 90%, white) !important;
color: white !important;
}
/* px-btn ghost variant: outlined blue. */
.px-btn:not(.px-btn-primary) {
background: transparent !important;
border: 1px solid var(--cta) !important;
color: color-mix(in oklab, var(--cta) 90%, white) !important;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 600 !important;
height: 36px !important;
padding: 0 16px !important;
font-size: 13px !important;
}
.px-btn:not(.px-btn-primary):hover {
background: color-mix(in oklab, var(--cta) 12%, transparent) !important;
color: white !important;
}
/* Primary CTA: solid blue filled (not white/ink).
Boss QA cycle 12 A4 — was var(--cta) (#3b82f6), white text gave only
~3.8:1 contrast (axe-flagged on every route). Switched to #1d4ed8
(Tailwind blue-700) for ~6.8:1 white-text contrast. Border tracks
the bg so the focus ring still sits on a solid color. */
.btn-accent, .btn-primary {
background: #1d4ed8 !important;
color: white !important;
border-color: #1d4ed8 !important;
font-weight: 600 !important;
}
.btn-accent:hover, .btn-primary:hover {
background: #1e40af !important;
border-color: #1e40af !important;
color: white !important;
filter: none !important;
}
/* Hero primary CTA: bigger, blue-filled, square.
Boss QA cycle 12 A4 — bg darkened to #1d4ed8 to clear 4.5:1 vs white. */
.hero-actions .btn-accent, .hero-actions .btn-primary,
.px-hero-actions .btn-accent, .px-hero-actions .btn-primary {
height: 38px !important;
padding: 0 18px !important;
font-size: 13px !important;
background: #1d4ed8 !important;
color: white !important;
border-color: #1d4ed8 !important;
box-shadow: 0 2px 8px color-mix(in oklab, #1d4ed8 30%, transparent) !important;
}
/* Hero ghost CTA: blue outlined, square. */
.hero-actions .btn-ghost, .hero-actions .btn-primary-outline,
.px-hero-actions .btn-ghost, .px-hero-actions .btn-primary-outline {
height: 38px !important;
padding: 0 18px !important;
font-size: 13px !important;
background: transparent !important;
border: 1px solid var(--cta) !important;
color: color-mix(in oklab, var(--cta) 90%, white) !important;
backdrop-filter: none !important;
}
/* Sign in through Steam button (top-right nav) — blue-filled.
Boss QA cycle 12 A4 — was var(--cta) (#3b82f6) ~3.8:1 against the
white .steam-btn-text. Bumped to #1d4ed8 for ~6.8:1. */
.steam-btn {
background: #1d4ed8 !important;
color: white !important;
border-color: #1d4ed8 !important;
font-weight: 600 !important;
}
.steam-btn:hover {
background: #1e40af !important;
border-color: #1e40af !important;
color: white !important;
}
/* Section header: left-align (CSFloat doesn't center). */
.px-section-sm .px-section-header,
.px-section-header.px-section-header-center,
.px-section-header {
align-items: flex-start !important;
text-align: left !important;
flex-direction: row !important;
justify-content: space-between !important;
gap: 16px !important;
margin: 36px auto 16px !important;
max-width: min(96vw, 1440px) !important;
}
.px-section-sm h2, .px-h2 {
font-size: clamp(20px, 2.4vw, 26px) !important;
}
/* Cards: 6px radius (CSFloat), subtle border, no 10px editorial radius. */
.grid-card, .recently-viewed-card, .loadout-card {
border-radius: 6px !important;
}
.grid-card .grid-thumb { border-radius: 0 !important; }
/* Card name: sans bold, not editorial. */
.grid-head .grid-name, .grid-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
font-size: 14px !important;
}
.grid-head .grid-sub, .grid-cat {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 12px !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--ink-3) !important;
}
/* Price on cards: bold sans mono for numerics. */
.grid-price {
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
}
/* Filter sidebar: tighter. */
.filter-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ink) !important;
}
/* Subnav / nav-link: drop editorial serif fallback, ensure sans. */
.nav-link, .subnav a {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 500 !important;
}
.nav-link.active { font-weight: 700 !important; }
/* Feature strip cards (Live auctions / Fair-price offers / No Steam hold) — tighten. */
.px-feature-strip > * h3,
.homepage-trust > * h3,
.px-card-interactive h3 {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: -0.01em !important;
}
/* Step cards (Escrow in 5 steps) — sans-serif bold titles. */
.step-card .step-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
}
.step-card .step-num {
font-family: 'Geist Mono', 'JetBrains Mono', monospace !important;
}
/* Modal title: sans bold. */
.info-modal-header {
font-size: 18px !important;
}
/* Cart summary title: sans bold (matches rest). */
.cart-summary-title {
font-size: 15px !important;
}
/* Wallet hero balance: sans bold. */
.wallet-hero-balance {
font-size: 28px !important;
}
/* Drop italic on stall review stars text. */
blockquote { font-style: normal !important; }
/* Help Center / FAQ section headings — drop Fraunces serif. */
.help-section-title,
.help-faq-q, .faq-q,
.stall-name, .stall-avatar,
.changelog-title, .changelog h1, .changelog h2 {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-variation-settings: normal !important;
letter-spacing: -0.015em !important;
}
/* Empty-state / system-wide h2-h3 bolt-cleanup. */
.empty-state-title,
.wallet-step-title, .wallet-hero-balance, .wallet-hero-label,
.notif-header, .notif-feed-title,
.presignin-title,
.trade-confirm-title,
.cart-confirm-title,
.review-modal h2, .review-modal h3,
.loadout-card-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-style: normal !important;
font-variation-settings: normal !important;
}
/* Legal / changelog / static page: ensure sans-serif too. */
body h1, body h2, body h3, body h4 {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-variation-settings: normal !important;
}
/* END CSFLOAT 1:1 PIVOT */
/* ─── FULL-PAGE MODE — CSFloat-1:1 rule 0.
For routes like /wallet, /profile, /help, /watchlist, /cart, etc., the
app sets a global `.full-page-mode` class on .site-root. In that state
the shared info-modal shell must render as a real in-flow page region,
NOT a centered overlay with an X close button. CSFloat's /wallet,
/profile, /trades, /stalls, etc. are ALL full pages — never modals. */
.full-page-mode .modal-backdrop {
position: static !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
animation: none !important;
z-index: auto !important;
}
/* Use `visible` (not `auto`) so the document element / html remains the
scroll container — `overflow: auto` on body promotes body to the scroll
root, which breaks `window.scrollY`, browser scroll-restoration, ctrl+f
anchor jumps, and full-page screenshot tools. Real overlays still get
their own scroll-lock via `.cart-confirm-backdrop` / `.shortcuts-backdrop`. */
body:has(.full-page-mode) { overflow: visible !important; }
.full-page-mode .modal,
.full-page-mode .info-modal {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
max-height: none !important;
margin: 0 auto !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
animation: none !important;
overflow: visible !important;
padding: 28px 24px 64px !important;
}
.full-page-mode .info-modal.wide,
.full-page-mode .info-modal:has(.db-table),
.full-page-mode .info-modal:has(.db-controls),
.full-page-mode .info-modal:has(.stall-hero),
.full-page-mode .info-modal:has(.loadout-grid),
.full-page-mode .info-modal:has(.wallet-tabs),
.full-page-mode .info-modal:has(.profile-tabs),
.full-page-mode .info-modal:has(.mystall-tabs),
.full-page-mode .info-modal:has(.admin-shell),
.full-page-mode .info-modal:has(.csr-shell),
.full-page-mode .info-modal:has(.cart-grid) {
width: min(100%, 1600px) !important;
max-width: 1600px !important;
}
/* Hide the X close button — a full page doesn't need one; the nav handles
navigation back out. Also kill the backdrop-absolute positioning it had. */
.full-page-mode .modal-close { display: none !important; }
/* Info-modal header gets a page-title treatment */
.full-page-mode .info-modal-header {
font-size: 28px !important;
letter-spacing: -0.02em !important;
padding: 0 0 20px 0 !important;
border-bottom: 1px solid var(--line) !important;
margin-bottom: 24px !important;
}
.full-page-mode .info-modal-body {
padding: 0 !important;
}
/* END FULL-PAGE MODE */
/* ─── CSFloat-1:1 HERO — two-column layout, LEFT text / RIGHT angled
product-card stack. Mirrors csfloat.com's / homepage hero shape. */
.csfloat-hero {
/* Bottom padding was 96px which left a 100px+ dark gap before the
Top Deals band. CSFloat tightens hero→band to ~40px. */
padding: 72px 48px 56px !important;
min-height: 420px !important;
overflow: visible !important;
position: relative !important;
}
/* CSFloat-1:1: subtle blue `+` cross marks scattered as decoration in the
hero background — one of csfloat.com's signature visual touches. SVG
data-URI keeps the asset inline (no extra HTTP request) and the
background-position scatter places three marks at varying sizes so it
reads as casual decoration, not a regular grid. */
/* `.hero::after` (line ~3270) is a 1px hairline pinned to the hero's
bottom — its `height: 1px; width: min(560px, 70%)` survives our
`inset: 0` and clamps the element to 1px tall. Explicitly override
width/height/left/transform so our cross-mark layer fills the hero. */
.csfloat-hero::after {
content: "" !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
pointer-events: none;
z-index: 0;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-position: 50% 22%, 90% 78%, 42% 70% !important;
background-size: 56px 56px, 40px 40px, 44px 44px !important;
opacity: 0.85;
}
/* Make sure the inner column content sits ABOVE the decorative marks. */
.csfloat-hero > * { position: relative; z-index: 1; }
.csfloat-hero-inner {
display: grid !important;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
gap: 64px !important;
align-items: center !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
/* Override the stock px-hero-text: display-contents for the csfloat hero.
We want the left column to be a single flex-column so title+lede+CTAs
stack tightly instead of spreading across the grid. */
.csfloat-hero-inner .px-hero-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
}
/* Kill the blue halo behind the card stack — the stack IS the visual now. */
.csfloat-hero::before { display: none !important; }
.csfloat-hero .px-h1 {
font-size: clamp(28px, 3.4vw, 44px) !important;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
color: var(--ink) !important;
}
.csfloat-hero .px-h1 .px-accent-word {
font-family: inherit !important;
font-style: normal !important;
font-weight: 700 !important;
color: var(--cta) !important;
background: none !important;
-webkit-text-fill-color: initial !important;
}
.csfloat-hero .px-lede {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--ink-3) !important;
max-width: 44ch !important;
margin-top: 18px !important;
}
.csfloat-hero-actions {
display: flex !important;
gap: 12px !important;
margin-top: 28px !important;
}
.csfloat-hero-cta,
.csfloat-hero-cta-ghost {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 36px !important;
padding: 0 16px !important;
border-radius: 6px !important;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background 160ms ease, border-color 160ms ease;
}
/* Use a 2-class selector to beat the existing `.hero-actions .px-btn-primary`
specificity. Without this, the px-btn-primary !important box-shadow wins
and the lift/shadow we want here never applies. */
.hero-actions .csfloat-hero-cta,
.csfloat-hero-cta {
background: var(--cta) !important;
color: #fff !important;
border: 1px solid var(--cta) !important;
transition: background 160ms ease, border-color 160ms ease,
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms ease !important;
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 28%, transparent) !important;
}
.hero-actions .csfloat-hero-cta:hover,
.csfloat-hero-cta:hover {
background: color-mix(in oklab, var(--cta) 92%, white) !important;
border-color: color-mix(in oklab, var(--cta) 92%, white) !important;
transform: translateY(-1px) !important;
box-shadow: 0 12px 28px color-mix(in oklab, var(--cta) 40%, transparent) !important;
}
.csfloat-hero-cta-ghost {
background: transparent !important;
color: var(--ink-2) !important;
border: 1px solid var(--line-2) !important;
}
/* Same specificity bump as `.csfloat-hero-cta` — without doubling the
selector to 2-class, `.hero-actions .px-btn-primary` !important wins
and the lift never applies to the ghost variant either. */
.hero-actions .csfloat-hero-cta-ghost,
.csfloat-hero-cta-ghost {
transition: background 160ms ease, border-color 160ms ease,
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.hero-actions .csfloat-hero-cta-ghost:hover,
.csfloat-hero-cta-ghost:hover {
background: var(--bg-2) !important;
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2)) !important;
color: var(--ink) !important;
transform: translateY(-1px) !important;
}
/* Product-card stack on the hero right — csfloat shape: ONE prominent
foreground card with 2 small shadow cards fanning behind it to the
right. Not three equal cards. */
.csfloat-hero-stack {
position: relative;
height: 360px;
min-width: 0;
perspective: 1200px;
perspective-origin: 50% 40%;
}
.csfloat-hero-stack-card {
position: absolute;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 14px 16px;
box-shadow: 0 18px 56px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
display: flex; flex-direction: column;
text-decoration: none;
color: var(--ink);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 240ms ease;
overflow: hidden;
}
/* pos-0 = foreground, center-ish */
.csfloat-hero-stack-card.pos-0 {
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 260px; height: 320px;
z-index: 3;
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
}
/* H2 Boss QA — parallax fan: rotated, depth-blurred shadow cards with
real perspective so the stack reads as a premium 3-card spread
instead of one card with two faded ghosts. */
/* Boss QA cycle 2 N3 — bumped pos-1 / pos-2 opacity (was 0.70 / 0.50,
which read as invisible smudges on dark bg). New: 0.85 / 0.65 with
no blur on pos-1, lighter blur on pos-2, stronger angle so the fan
reads like a real 3-card spread. */
/* P1.2 (cycle 5): boss reported back cards reading as invisible smudges
at 0.88/0.66 with no blur. Re-tune to "deliberate parallax depth" —
lower opacity but real blur so they're clearly out-of-focus background
layers, not failed clones. 0.55 / 0.32 + blur(1.4px) / blur(2.4px). */
.csfloat-hero-stack-card.pos-1 {
top: 50%; left: 50%;
transform: translate(calc(-50% + 80px), calc(-50% - 24px)) rotate(-5deg);
width: 250px; height: 300px;
z-index: 2;
opacity: 0.55;
filter: brightness(0.92) blur(1.4px);
border-color: color-mix(in oklab, var(--cta) 22%, var(--line-2));
}
.csfloat-hero-stack-card.pos-2 {
top: 50%; left: 50%;
transform: translate(calc(-50% + 150px), calc(-50% - 48px)) rotate(-9deg);
width: 240px; height: 280px;
z-index: 1;
opacity: 0.32;
filter: brightness(0.82) blur(2.4px);
border-color: color-mix(in oklab, var(--cta) 16%, var(--line-2));
}
.csfloat-hero-stack-card.pos-0:hover {
/* Bumped scale 1.02 -> 1.04 + accent border + brighter shadow on hover so
the prominent card actively reads as interactive (was almost too subtle). */
transform: translate(-50%, -53%) scale(1.04);
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
box-shadow: 0 24px 64px rgba(0,0,0,0.8),
0 4px 12px color-mix(in oklab, var(--cta) 20%, transparent);
}
.csfloat-hero-stack-head {
display: flex; flex-direction: column; gap: 2px;
}
.csfloat-hero-stack-name {
/* CSFloat uses italic for the item name on the hero card — looks like
a magazine pull-quote, sets the editorial tone. Fraunces italic if
loaded, otherwise system italic. */
font-family: 'Fraunces', 'Geist', 'Inter', system-ui, sans-serif;
font-style: italic;
font-size: 15px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csfloat-hero-stack-sub {
font-size: 11px; color: var(--ink-4);
}
.csfloat-hero-stack-img {
flex: 1; min-height: 0;
margin: 12px 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 8%, var(--bg)) 0%,
var(--bg) 100%);
border-radius: 6px;
overflow: hidden;
position: relative;
}
/* CSFloat-1:1: prominent foreground card has the iconic vivid violet/pink
gradient backdrop on the image area (their AK-47 Case Hardened image
sits on this magenta-violet wash). Plus a horizontal pink bar at the
bottom of the image for the rarity stripe. */
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-img {
background: linear-gradient(180deg,
oklch(0.42 0.18 320) 0%,
oklch(0.32 0.16 325) 60%,
oklch(0.24 0.13 330) 100%) !important;
}
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-img::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
.csfloat-hero-stack-img img,
.csfloat-hero-stack-img .item-image,
.csfloat-hero-stack-img .item-poster {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
.csfloat-hero-stack-foot {
display: flex; align-items: center; gap: 8px;
}
.csfloat-hero-stack-price {
font-family: var(--mono);
font-size: 18px; font-weight: 700;
color: var(--ink);
font-feature-settings: 'tnum' 1;
}
.csfloat-hero-stack-disc {
font-family: var(--mono);
font-size: 11px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
}
/* CSFloat's small green `$` USD-marker chip that sits between the price
and the % discount. Pure visual cue. */
.csfloat-hero-stack-currency {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
font-family: var(--mono);
font-size: 11px; font-weight: 800;
line-height: 1;
}
/* csfloat-style action row mock on the prominent hero card. */
.csfloat-hero-stack-actions {
display: flex; gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-hero-stack-btn {
flex: 1;
text-align: center;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px; font-weight: 600;
letter-spacing: 0;
}
.csfloat-hero-stack-btn.primary {
background: var(--cta);
color: #fff;
}
.csfloat-hero-stack-btn.ghost {
background: transparent;
/* CSFloat-1:1: Bargain button text is in the blue accent (matches csfloat
where the secondary action picks up the brand blue). Was muted ink. */
color: color-mix(in oklab, var(--cta) 90%, white);
border: 1px solid var(--line-2);
}
/* csfloat's 3rd action button is an icon-only square slot for the cart.
Drop the flex:1 so it stays compact and centers the icon. */
.csfloat-hero-stack-btn.cart {
flex: 0 0 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
height: 28px;
}
/* Rarity-tinted image frames — csfloat's violet/purple gradient behind the
rare AK is the signature visual. We key off the listing's rarity so Limited
reads purple-ish, Off-Market reads amber, Standard stays neutral. */
.csfloat-hero-stack-card.rarity-limited .csfloat-hero-stack-img {
background: linear-gradient(180deg,
color-mix(in oklab, oklch(0.55 0.22 300) 28%, var(--bg)) 0%,
color-mix(in oklab, oklch(0.35 0.14 300) 50%, var(--bg)) 100%);
}
.csfloat-hero-stack-card.rarity-offmarket .csfloat-hero-stack-img {
background: linear-gradient(180deg,
color-mix(in oklab, oklch(0.70 0.18 60) 24%, var(--bg)) 0%,
color-mix(in oklab, oklch(0.45 0.10 60) 50%, var(--bg)) 100%);
}
/* On narrower viewports collapse the stack under the text. */
@media (max-width: 960px) {
.csfloat-hero-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.csfloat-hero-stack { height: 340px; margin-top: 16px; }
.csfloat-hero-stack-card.pos-0 { width: 230px; height: 290px; }
.csfloat-hero-stack-card.pos-1 { width: 220px; height: 280px; }
.csfloat-hero-stack-card.pos-2 { width: 210px; height: 270px; }
.csfloat-hero-actions { flex-wrap: wrap !important; }
.csfloat-hero-cta,
.csfloat-hero-cta-ghost {
flex: 1 1 auto;
min-width: 140px;
}
.csfloat-hero { padding: 40px 20px 48px !important; }
}
/* END CSFloat-1:1 HERO */
/* ─── CSFloat-1:1 SECOND BAND — Top Deals / Newest / Unique tabs +
horizontal product row. Sits between hero and the main filter+grid. */
.csfloat-band {
padding: 24px 48px 16px;
max-width: 1400px;
margin: 0 auto;
}
.csfloat-band-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
padding-bottom: 0;
}
/* H3 Boss QA — segmented-control: pill background, 8px radius, active
solid white-on-charcoal, hover bg lift. Matches the segmented pattern
the boss called out (used elsewhere on /faq). */
.csfloat-band-tabs {
display: inline-flex;
padding: 4px;
gap: 2px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-band-tab {
background: transparent;
border: 0;
padding: 8px 14px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px; font-weight: 600;
color: var(--ink-3);
cursor: pointer;
border-radius: 8px;
transition: background 140ms ease, color 140ms ease;
letter-spacing: -0.005em;
}
.csfloat-band-tab:hover {
color: var(--ink);
background: color-mix(in oklab, var(--ink) 6%, transparent);
}
.csfloat-band-tab.active {
color: var(--bg);
background: var(--ink);
}
.csfloat-band-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px; font-weight: 600;
color: var(--cta);
text-decoration: none;
border: 1px solid color-mix(in oklab, var(--cta) 60%, var(--line-2));
border-radius: 8px;
/* Match the rest of the site's CTA hover idiom — lift + brighten,
not just bg fill. */
transition: background 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms ease;
}
.csfloat-band-link:hover {
background: color-mix(in oklab, var(--cta) 14%, transparent);
border-color: var(--cta);
transform: translateY(-1px);
}
/* Horizontal scroll row */
.csfloat-band-row-wrap {
position: relative;
}
.csfloat-band-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-1);
border: 1px solid var(--line-2);
color: var(--ink-2);
display: grid; place-items: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
/* CSFloat-1:1: scroll arrows hide by default and only fade in when the
user hovers the row. Was always-visible which competed with the cards. */
opacity: 0;
pointer-events: none;
transition: background 140ms ease, color 140ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms ease, opacity 200ms ease;
}
.csfloat-band-row-wrap:hover .csfloat-band-arrow {
opacity: 1;
pointer-events: auto;
}
.csfloat-band-arrow:hover {
background: var(--bg-2);
color: var(--ink);
/* Subtle scale on hover for consistency with the card hover lift -
was a static color-only swap, felt unresponsive. */
transform: translateY(-50%) scale(1.08);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
}
.csfloat-band-arrow.left { left: -8px; }
.csfloat-band-arrow.right { right: -8px; }
.csfloat-band-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(200px, 1fr);
gap: 14px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 8px;
/* Was 'mandatory' which fights wheel/trackpad scrolls — proximity
still snaps to card edges when you release but lets you scroll
between cards naturally. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
}
.csfloat-band-row::-webkit-scrollbar { height: 6px; }
.csfloat-band-row::-webkit-scrollbar-thumb {
background: var(--line-2); border-radius: 3px;
}
.csfloat-band-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
display: flex; flex-direction: column;
text-decoration: none;
color: var(--ink);
scroll-snap-align: start;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
height: 240px;
position: relative;
overflow: hidden;
/* Resting elevation matches the grid cards below (`.grid-card`) so
the page reads as one unified card system instead of "Top Deals
are flat, grid below is raised". */
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* CSFloat-1:1: each card in Top Deals has a faint tinted backdrop on the
image area + a thin pink/violet hairline at the bottom. Mimics the
per-rarity color stripe csfloat shows below each card image. */
.csfloat-band-card-img {
background: linear-gradient(180deg,
color-mix(in oklab, oklch(0.42 0.18 320) 45%, var(--bg)) 0%,
color-mix(in oklab, oklch(0.32 0.16 325) 35%, var(--bg)) 100%);
border-radius: 6px;
position: relative;
}
.csfloat-band-card-img::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
.csfloat-band-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--cta) 40%, var(--line-2));
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.csfloat-band-card-head {
margin-bottom: 8px;
}
.csfloat-band-card-name {
font-size: 13px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csfloat-band-card-sub {
font-size: 11px; color: var(--ink-4);
margin-top: 2px;
}
.csfloat-band-card-img {
flex: 1; min-height: 0;
background: var(--bg);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative;
}
/* csfloat-style view count overlay (eye icon + number) on featured cards. */
.csfloat-band-card-views {
position: absolute;
top: 6px; right: 6px;
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 5px;
background: color-mix(in oklab, var(--bg) 70%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
pointer-events: none;
z-index: 2;
}
.csfloat-band-card-views .material-symbols-rounded {
font-variation-settings: "opsz" 24 !important;
font-size: 11px !important;
opacity: 0.7;
}
.csfloat-band-card-img img,
.csfloat-band-card-img .item-image,
.csfloat-band-card-img .item-poster {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
.csfloat-band-card-foot {
display: flex; align-items: center; gap: 8px;
margin-top: 10px;
}
.csfloat-band-card-price {
font-family: var(--mono);
font-size: 14px; font-weight: 700;
color: var(--ink);
font-feature-settings: 'tnum' 1;
}
.csfloat-band-card-disc {
font-family: var(--mono);
font-size: 11px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
}
@media (max-width: 800px) {
.csfloat-band { padding: 16px; }
.csfloat-band-row { grid-auto-columns: minmax(170px, 1fr); }
/* On touch devices users swipe horizontally, so the floating chevron
arrows just overlap card content without adding affordance. */
.csfloat-band-arrow { display: none !important; }
}
/* END CSFloat-1:1 SECOND BAND */
/* ─── CSFloat-1:1 grid card — view count overlay (top right).
Restrained: gray text + eye icon, no chip background. */
.grid-thumb { position: relative; }
.grid-views {
position: absolute;
top: 8px; right: 8px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 6px;
background: color-mix(in oklab, var(--bg) 70%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
pointer-events: none;
z-index: 2;
}
.grid-views svg { opacity: 0.7; }
/* When both star (top-right) and views coexist, stack them vertically. */
.grid-thumb .grid-star + .grid-views {
top: 36px;
}
/* END grid card view count */
/* ─── CSFloat-1:1 category subnav — horizontal tab strip above the grid.
Mirrors csfloat.com's "Rifles / Pistols / SMGs / ..." second nav bar. */
.csfloat-subnav {
position: sticky;
top: var(--nav-h);
z-index: 49;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: color-mix(in oklab, var(--bg) 96%, transparent);
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
}
/* On mobile the nav wraps to two rows — the category subnav can't stick to
--nav-h (=50px) or it hides behind the wrapped nav. Drop sticky below
960px; let the subnav scroll away so the nav + toolbar can sit alone. */
@media (max-width: 960px) {
.csfloat-subnav { position: static; }
}
.csfloat-subnav-inner {
max-width: 2100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-subnav-inner::-webkit-scrollbar { display: none; }
.csfloat-subnav-tab {
flex: 0 0 auto;
padding: 10px 16px;
background: transparent;
border: 0;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px; font-weight: 600;
color: var(--ink-3);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
transition: color 140ms ease, border-color 140ms ease;
letter-spacing: -0.005em;
}
.csfloat-subnav-tab:hover { color: var(--ink-2); }
.csfloat-subnav-tab.active {
color: var(--ink);
border-bottom-color: var(--cta);
}
/* Hide the old Category section in the sidebar — moved to the subnav. */
.sidebar .filter-section[aria-label="Category filter"] {
display: none !important;
}
/* Also hide the filter-divider that follows it. */
.sidebar .filter-section[aria-label="Category filter"] + .filter-divider {
display: none !important;
}
/* END CSFloat-1:1 category subnav */
/* ─── Footer social icon cluster — mirrors csfloat.com's Discord / X /
GitHub icon row in the bottom bar. Gray-on-hover-ink. */
.site-footer-socials {
display: inline-flex; gap: 6px;
margin: 0 16px;
}
.site-footer-social {
/* Bumped from 28x28 to 32x32 + larger gap so icons read on the bottom
strip instead of getting lost next to the meta text. */
display: inline-grid; place-items: center;
width: 32px; height: 32px;
border-radius: 6px;
color: var(--ink-3);
text-decoration: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
transition: color 140ms ease, background 140ms ease;
}
.site-footer-social:hover { color: var(--ink); background: var(--bg-2); }
.site-footer-social:disabled,
.site-footer-social[disabled] {
cursor: not-allowed;
opacity: 0.45;
}
.site-footer-social:disabled:hover,
.site-footer-social[disabled]:hover {
color: var(--ink-3);
background: transparent;
}
/* END footer social cluster */
/* ─── csfloat-style "/" keyboard hint chip in search input right edge. */
.search-wrap { position: relative; }
.search-kbd {
position: absolute;
right: 10px; top: 50%;
transform: translateY(-50%);
padding: 2px 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 4px;
pointer-events: none;
user-select: none;
}
.search-input:focus ~ .search-kbd,
.search-wrap:focus-within .search-kbd { display: none; }
/* END search-kbd */
/* ─── Currency chip in nav right — static, matches csfloat's USD label. */
.nav-currency {
display: inline-flex; align-items: center;
padding: 4px 10px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
color: var(--ink-3);
border: 1px solid var(--line);
border-radius: 6px;
user-select: none;
}
/* END currency chip */
/* ─── CSFloat-1:1 hero card — magnifier zoom button (bottom-right of image).
CSFloat shows a small circular zoom-icon button so the image area reads
as inspectable. Pure visual cue — the card itself is clickable. */
.csfloat-hero-stack-img { position: relative; }
.csfloat-hero-stack-zoom {
position: absolute;
right: 8px; bottom: 8px;
width: 26px; height: 26px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg) 60%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
color: color-mix(in oklab, var(--ink) 70%, transparent);
pointer-events: none;
z-index: 3;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.csfloat-hero-stack-zoom .material-symbols-rounded {
font-variation-settings: "opsz" 24, "wght" 500 !important;
font-size: 14px !important;
}
/* END hero zoom button */
/* ─── CSFloat-1:1 hero card — wear/condition subtitle in orange.
Mirrors csfloat's `StatTrak™ Factory New` line below the item name. */
.csfloat-hero-stack-wear {
font-style: italic;
font-weight: 600;
color: oklch(0.78 0.16 55); /* csfloat's StatTrak orange */
font-family: 'Fraunces', 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
}
.csfloat-hero-stack-cat {
color: var(--ink-3);
font-style: normal;
}
/* END hero wear subtitle */
/* ─── CSFloat-1:1 hero card — float-value gradient bar.
Iconic csfloat element: red → orange → yellow → green → red gradient
showing where a skin's float lands on the wear spectrum. We don't have
floats but the colored slider with a position-thumb is the signature
visual. Sits above the online status row. */
.csfloat-hero-stack-floatbar {
display: flex; align-items: center; gap: 6px;
margin-top: 8px;
}
.csfloat-hero-stack-floatbar-track {
position: relative;
flex: 1;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg,
oklch(0.65 0.20 28) 0%, /* battle-scarred red */
oklch(0.78 0.18 55) 18%, /* well-worn orange */
oklch(0.86 0.18 95) 38%, /* field-tested yellow */
oklch(0.78 0.18 145) 62%, /* minimal-wear green */
oklch(0.78 0.18 28) 100%); /* factory-new red endpoint */
overflow: visible;
}
.csfloat-hero-stack-floatbar-thumb {
position: absolute;
top: 50%;
width: 2px; height: 12px;
background: var(--ink);
transform: translate(-50%, -50%);
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.csfloat-hero-stack-floatbar-pct {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: -0.01em;
}
/* END hero float bar */
/* ─── CSFloat-1:1 hero card — online status / verified / keys row.
Mirrors csfloat's `● Online ✓ 🔑 672` sub-row that telegraphs seller
trust signals: presence dot, verified-account blue check, and the
yellow trade-key icon with seller listings count. */
.csfloat-hero-stack-online {
display: flex; align-items: center; gap: 6px;
margin-top: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
color: var(--ink-3);
}
.csfloat-hero-stack-online-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: oklch(0.78 0.18 145); /* online green */
box-shadow: 0 0 6px color-mix(in oklab, oklch(0.78 0.18 145) 60%, transparent);
}
.csfloat-hero-stack-online-text {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-hero-stack-verified {
display: inline-grid; place-items: center;
color: var(--cta);
margin-left: 2px;
}
.csfloat-hero-stack-verified .material-symbols-rounded {
font-variation-settings: "opsz" 24, "FILL" 1 !important;
font-size: 13px !important;
}
.csfloat-hero-stack-keys {
display: inline-flex; align-items: center; gap: 3px;
margin-left: auto;
color: oklch(0.82 0.16 90); /* csfloat key amber */
}
.csfloat-hero-stack-keys .material-symbols-rounded {
font-variation-settings: "opsz" 24, "FILL" 1 !important;
font-size: 13px !important;
}
.csfloat-hero-stack-keys-num {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
}
/* END hero online status row */
/* ─── CSFloat-1:1 Top Deals band card — magnifier zoom button + green $ chip
to match the hero card's affordances. Smaller than hero (cards are denser). */
.csfloat-band-card-zoom {
position: absolute;
right: 6px; bottom: 6px;
width: 22px; height: 22px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg) 60%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
color: color-mix(in oklab, var(--ink) 65%, transparent);
pointer-events: none;
z-index: 3;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.csfloat-band-card-zoom .material-symbols-rounded {
font-variation-settings: "opsz" 24, "wght" 500 !important;
font-size: 12px !important;
}
.csfloat-band-card-currency {
display: inline-grid; place-items: center;
width: 16px; height: 16px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
font-family: var(--mono);
font-size: 10px; font-weight: 800;
}
/* END band card extras */
/* ─── CSFloat-1:1 grid card — green `$` USD chip next to price.
Same visual cue as hero stack and Top Deals band cards. */
.grid-currency {
display: inline-grid; place-items: center;
width: 16px; height: 16px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
font-family: var(--mono);
font-size: 10px; font-weight: 800;
margin-left: 6px;
vertical-align: 1px;
}
/* END grid currency chip */
/* ─── CSFloat-1:1 grid card — magnifier zoom button (bottom-right of image). */
.grid-thumb { position: relative; }
.grid-zoom {
position: absolute;
right: 8px; bottom: 8px;
width: 24px; height: 24px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg) 60%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
color: color-mix(in oklab, var(--ink) 60%, transparent);
pointer-events: none;
z-index: 3;
font-family: 'Geist', system-ui, sans-serif;
font-size: 14px;
line-height: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* END grid zoom */
/* ─── CSFloat-1:1 grid card — float-value gradient bar (signature element).
Sits between the image and the price row. The thumb position is seeded
per-listing-id so it stays stable across renders. */
.grid-floatbar {
display: block;
margin: 8px 12px 6px;
position: relative;
}
.grid-floatbar-track {
position: relative;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg,
oklch(0.65 0.20 28) 0%, /* battle-scarred red */
oklch(0.78 0.18 55) 18%, /* well-worn orange */
oklch(0.86 0.18 95) 38%, /* field-tested yellow */
oklch(0.78 0.18 145) 62%, /* minimal-wear green */
oklch(0.78 0.18 28) 100%); /* factory-new red endpoint */
}
.grid-floatbar-thumb {
position: absolute;
top: 50%;
width: 2px; height: 8px;
background: var(--ink);
transform: translate(-50%, -50%);
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
/* END grid floatbar */
/* ─── CSFloat-1:1 ItemModal preview — magnifier + float bar overlays.
Mirrors the per-card affordances on the modal's main image. */
.modal-preview { position: relative; }
.modal-preview-zoom {
position: absolute;
right: 12px; bottom: 12px;
width: 32px; height: 32px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg) 65%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
color: color-mix(in oklab, var(--ink) 70%, transparent);
pointer-events: none;
z-index: 3;
font-family: 'Geist', system-ui, sans-serif;
font-size: 18px;
line-height: 1;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
/* Boss QA cycle 2 H1/I1 — modal-preview-floatbar removed (CS-only chrome,
not relevant to s&box). Both the JSX node in modals.js and the CSS
classes are gone. */
/* END modal preview overlays */
/* ─── CSFloat-1:1 cart row — per-row float bar + green $ chip on price.
Mirrors the grid-card affordances so the cart speaks the same visual
language as the marketplace it pulls from. */
.cart-floatbar {
margin-top: 6px;
width: 100%; max-width: 200px;
position: relative;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg,
oklch(0.65 0.20 28) 0%,
oklch(0.78 0.18 55) 18%,
oklch(0.86 0.18 95) 38%,
oklch(0.78 0.18 145) 62%,
oklch(0.78 0.18 28) 100%);
}
.cart-floatbar-thumb {
position: absolute;
top: 50%;
width: 2px; height: 8px;
background: var(--ink);
transform: translate(-50%, -50%);
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.cart-currency {
display: inline-grid; place-items: center;
width: 16px; height: 16px;
border-radius: 4px;
background: color-mix(in oklab, oklch(0.62 0.18 145) 30%, transparent);
color: oklch(0.85 0.18 145);
font-family: var(--mono);
font-size: 10px; font-weight: 800;
margin-left: 8px;
vertical-align: 2px;
}
/* END cart polish */
/* ─── CSFloat-1:1 nav currency / language chips — `▾` caret. */
.nav-currency-caret {
margin-left: 4px;
font-size: 9px;
color: var(--ink-4);
vertical-align: 1px;
}
.nav-currency + .nav-currency { margin-left: 4px; }
/* CSFloat-1:1: nav currency/lang chips have a subtle interactive hover so
they read as dropdowns (single-currency / single-language for now, but
visually behave like csfloat's USD ▾ chip). */
.nav-currency {
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* ── NavPicker (currency + language) — added 2026-05-02 ────────────────── */
.nav-picker {
position: relative;
display: inline-flex;
margin-left: 4px;
}
.nav-picker-chip {
/* Boss QA — picker chip was 27px tall while nav-icon-btn next door is
36px. The 9px height delta made the right-cluster visually drift, the
pickers sat above the bell + cart icons on a different baseline. Now
a fixed 36px height matches the rest of the row exactly so the whole
locale → icons → wallet → user-chip strip lines up on one baseline. */
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 10px 0 12px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-3);
user-select: none;
transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.nav-picker-chip:hover,
.nav-picker.open .nav-picker-chip {
border-color: var(--line-2);
color: var(--ink);
background: color-mix(in oklab, var(--ink) 4%, transparent);
}
.nav-picker-chip:active { transform: translateY(1px); }
/* Boss QA cycle 14 — mobile bump to Apple HIG 44px. Pre-fix the currency
+ language chips rendered ~26px tall on every viewport. Boss prompt
explicitly named "currency dropdown" + "language dropdown" as
must-clear-44 mobile tap-targets. Desktop chrome density preserved. */
@media (max-width: 760px) {
.nav-picker-chip {
min-height: 44px;
padding: 0 14px 0 14px;
font-size: 12px;
}
}
.nav-picker-caret {
font-size: 9px;
margin-top: 1px;
color: var(--ink-3);
transition: transform 200ms ease;
}
.nav-picker.open .nav-picker-caret {
transform: rotate(180deg);
color: var(--ink-2);
}
.nav-picker-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 50;
min-width: 220px;
padding: 6px;
background: color-mix(in oklab, var(--bg-1) 95%, transparent);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow:
0 20px 40px -16px rgba(0,0,0,0.65),
0 0 0 1px color-mix(in oklab, var(--ink) 4%, transparent);
display: flex;
flex-direction: column;
gap: 1px;
animation: nav-picker-pop 160ms ease-out;
transform-origin: top right;
}
@keyframes nav-picker-pop {
from { opacity: 0; transform: translateY(-4px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-picker-row {
display: grid;
grid-template-columns: 22px 36px 1fr auto;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 7px;
cursor: pointer;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
text-align: left;
transition: background 120ms ease, color 120ms ease;
}
.nav-picker-row:hover:not(.soon) {
background: color-mix(in oklab, var(--cta) 12%, transparent);
color: var(--ink);
}
.nav-picker-row.active {
color: var(--ink);
}
.nav-picker-row.soon {
cursor: not-allowed;
opacity: 0.55;
}
.nav-picker-flag {
font-size: 14px;
text-align: center;
line-height: 1;
}
.nav-picker-code {
font-family: var(--mono), 'Geist Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink);
}
.nav-picker-name {
font-size: 12px;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-picker-soon {
display: inline-flex;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
}
.nav-picker-row.active .material-icon {
color: color-mix(in oklab, var(--cta) 90%, white);
}
/* ── SortPicker — /market toolbar custom dropdown (replaces native select) */
.sort-picker {
position: relative;
display: inline-flex;
}
.sort-picker-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 10px 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
min-width: 200px;
}
.sort-picker-chip:hover,
.sort-picker.open .sort-picker-chip {
border-color: var(--line-2);
color: var(--ink);
background: color-mix(in oklab, var(--ink) 4%, var(--bg-1));
}
.sort-picker-label {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sort-picker-caret {
font-size: 9px;
color: var(--ink-3);
transition: transform 200ms ease;
}
.sort-picker.open .sort-picker-caret { transform: rotate(180deg); color: var(--ink-2); }
.sort-picker-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 50;
min-width: 240px;
padding: 6px;
background: color-mix(in oklab, var(--bg-1) 95%, transparent);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow:
0 20px 40px -16px rgba(0,0,0,0.65),
0 0 0 1px color-mix(in oklab, var(--ink) 4%, transparent);
display: flex;
flex-direction: column;
gap: 1px;
animation: nav-picker-pop 160ms ease-out;
transform-origin: top left;
}
.sort-picker-row {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 7px;
cursor: pointer;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
text-align: left;
transition: background 120ms ease, color 120ms ease;
}
.sort-picker-row:hover {
background: color-mix(in oklab, var(--cta) 12%, transparent);
color: var(--ink);
}
.sort-picker-row.active {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
.sort-picker-row.active .material-icon:last-child {
color: color-mix(in oklab, var(--cta) 90%, white);
}
.sort-picker-row-label { white-space: nowrap; }
/* ── Item image lightbox — clickable magnifier opens this overlay ──────── */
.item-lightbox {
position: fixed;
inset: 0;
z-index: 100;
background: color-mix(in oklab, var(--bg) 92%, black);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: grid;
place-items: center;
padding: 64px 32px 80px;
animation: lightbox-fade-in 200ms ease-out;
cursor: zoom-out;
}
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
.item-lightbox-frame {
position: relative;
max-width: min(92vw, 1100px);
max-height: calc(100vh - 160px);
display: grid;
place-items: center;
cursor: default;
}
.item-lightbox-frame img,
.item-lightbox-frame .item-image,
.item-lightbox-frame .item-image img {
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: contain;
border-radius: 14px;
box-shadow: 0 32px 64px -32px rgba(0,0,0,0.85);
filter: drop-shadow(0 14px 24px rgba(0,0,0,0.45));
}
.item-lightbox-close {
position: fixed;
top: 24px; right: 28px;
width: 40px; height: 40px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--bg-1) 80%, transparent);
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--ink);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
backdrop-filter: blur(6px);
}
.item-lightbox-close:hover {
background: color-mix(in oklab, var(--cta) 15%, var(--bg-1));
border-color: color-mix(in oklab, var(--cta) 35%, var(--line));
transform: scale(1.06);
}
.item-lightbox-cap {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink-2);
padding: 6px 14px;
background: color-mix(in oklab, var(--bg-1) 75%, transparent);
border: 1px solid var(--line);
border-radius: 999px;
backdrop-filter: blur(6px);
}
/* Hover: when not active, preview shows zoom-in cursor + faint scale */
.modal.item-page .modal-preview { transition: transform 220ms ease; }
.modal.item-page .modal-preview:hover .modal-preview-zoom {
opacity: 1;
transform: scale(1.05);
}
.modal.item-page .modal-preview-zoom {
cursor: zoom-in;
transition: opacity 160ms ease, transform 160ms ease;
}
/* View Transition API — smooth FLIP-style reorder when sort changes. Cards
carry `view-transition-name: card-{id}` (cards.js); the browser captures
pre-state, animates each named element from old box to new box, ~280ms.
Tune duration + easing here. Reduced-motion users get a snap. */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 280ms;
animation-timing-function: cubic-bezier(0.22, 0.96, 0.36, 1);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 0.001ms;
}
}
/* === Mobile filters bottom-sheet drawer (2026-05-02 ship) ============== */
.mobile-filters-fab {
position: fixed;
right: 16px;
bottom: 20px;
z-index: 60;
display: none;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--cta);
color: #fff;
border: none;
border-radius: 999px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow:
0 14px 28px -8px color-mix(in oklab, var(--cta) 60%, transparent),
0 0 0 1px color-mix(in oklab, var(--cta) 30%, transparent);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.mobile-filters-fab:hover { transform: translateY(-1px); }
.mobile-filters-fab:active { transform: translateY(0); }
.mobile-filters-fab .material-icon { color: #fff; }
.mobile-filters-backdrop {
position: fixed;
inset: 0;
z-index: 55;
background: color-mix(in oklab, var(--bg) 65%, black);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
animation: lightbox-fade-in 200ms ease-out;
}
@media (max-width: 768px) {
.mobile-filters-fab { display: inline-flex; }
body.mobile-filters-open .mobile-filters-backdrop { display: block; }
.layout > .sidebar.mobile-drawer-open {
display: block !important;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 56;
max-height: 80vh;
overflow-y: auto;
background: var(--bg-1);
border-top: 1px solid var(--line-2);
border-radius: 18px 18px 0 0;
padding: 16px 16px 28px;
box-shadow: 0 -20px 40px -12px rgba(0,0,0,0.7);
animation: mobile-drawer-up 260ms cubic-bezier(0.22, 0.96, 0.36, 1);
}
.layout > .sidebar.mobile-drawer-open::before {
content: "";
display: block;
width: 36px;
height: 4px;
margin: 0 auto 14px;
border-radius: 999px;
background: var(--line-2);
}
}
@keyframes mobile-drawer-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Empty-cart trending rail — fills the dead space when cartCount==0 */
.csfloat-empty-cart-rail {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.csfloat-empty-cart-rail-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.csfloat-empty-cart-rail-title {
margin: 0;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.csfloat-empty-cart-rail-link {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
transition: color 140ms ease;
}
.csfloat-empty-cart-rail-link:hover { color: color-mix(in oklab, var(--cta) 90%, white); }
.csfloat-empty-cart-rail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.csfloat-empty-cart-rail-card {
position: relative;
display: flex;
flex-direction: column;
padding: 14px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.csfloat-empty-cart-rail-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--cta) 35%, var(--line));
box-shadow: 0 14px 28px -14px rgba(0,0,0,0.6),
0 0 0 1px color-mix(in oklab, var(--cta) 20%, transparent);
}
.csfloat-empty-cart-rail-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: 12px 0 0 12px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--ink-3) 60%, transparent),
var(--ink-2));
}
.csfloat-empty-cart-rail-card.rarity-Limited::before {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 60%, transparent), var(--cta));
}
.csfloat-empty-cart-rail-card.rarity-OffMarket::before {
background: linear-gradient(180deg,
color-mix(in oklab, #e8b960 60%, transparent), #e8b960);
}
.csfloat-empty-cart-rail-card-img {
display: grid;
place-items: center;
height: 130px;
margin-bottom: 10px;
background: radial-gradient(ellipse at 50% 35%,
color-mix(in oklab, var(--cta) 6%, transparent) 0%,
transparent 65%);
border-radius: 8px;
transition: transform 220ms ease;
}
.csfloat-empty-cart-rail-card:hover .csfloat-empty-cart-rail-card-img { transform: scale(1.04); }
.csfloat-empty-cart-rail-card-img img,
.csfloat-empty-cart-rail-card-img .item-image {
width: 88%; height: 88%; object-fit: contain;
}
.csfloat-empty-cart-rail-card-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.csfloat-empty-cart-rail-card-price {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono), 'Geist Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.csfloat-empty-cart-rail-card-usd {
display: inline-grid;
place-items: center;
width: 14px; height: 14px;
background: color-mix(in oklab, oklch(0.78 0.18 145) 22%, transparent);
color: oklch(0.78 0.18 145);
border-radius: 3px;
font-size: 9px;
font-weight: 700;
}
.nav-currency:hover {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--ink-2);
}
/* END nav currency caret */
/* ─── CSFloat-1:1 grid card subtitle — match csfloat's PLAIN gray subtitle.
On csfloat the grid/band card subtitle reads "Factory New" in plain
sans-serif gray (the orange italic StatTrak™ treatment is reserved for
the prominent HERO card only). Subdued here to match. */
.grid-wear {
font-style: normal;
font-weight: 500;
color: var(--ink-3);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
}
.grid-cat {
color: var(--ink-4);
font-style: normal;
font-size: 0.92em;
}
/* END grid wear chip */
/* ─── CSFloat-1:1 grid card — float-value + rank row + online status row.
Mirrors csfloat's "0.178627893329 236" float row + "● Online" row that
sit below the gradient float bar on every card. */
.grid-floatmeta {
display: flex; justify-content: space-between; align-items: center;
gap: 6px;
margin: 0 12px 4px;
font-family: var(--mono);
font-size: 9.5px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.grid-floatmeta-num {
font-weight: 500;
color: var(--ink-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1;
}
.grid-floatmeta-rank {
font-weight: 600;
color: var(--ink-3);
flex-shrink: 0;
}
.grid-onlinerow {
display: flex; align-items: center; gap: 5px;
margin: 0 12px 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 10px;
color: var(--ink-3);
}
.grid-online-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: oklch(0.78 0.18 145); /* online green */
box-shadow: 0 0 4px color-mix(in oklab, oklch(0.78 0.18 145) 60%, transparent);
}
.grid-online-dot.offline {
background: var(--ink-4);
box-shadow: none;
}
.grid-online-text {
font-weight: 500;
}
/* END grid floatmeta + online */
/* ─── CSFloat-1:1 grid card — separator above the listed-time row.
CSFloat puts a hairline + muted countdown ("Expires in 03:05:46:04"
in soft gray, blue ONLY when ending soon) at the bottom of every card.
Default state: muted ink-3 gray. The `.is-new` accent (defined elsewhere)
keeps the blue treatment for genuinely fresh listings. */
.grid-fresh {
border-top: 1px solid var(--line);
margin: 8px 12px 0 !important;
padding-top: 8px;
padding-bottom: 4px;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
letter-spacing: 0 !important;
color: var(--ink-3);
font-weight: 500;
display: flex; align-items: center;
gap: 6px;
justify-content: flex-end;
}
/* END grid card listed-time stripe */
/* CSFloat-1:1: filled orange ★ on the right of the online-status row when
the item is in the viewer's watchlist. Mirrors csfloat's favorite cue. */
.grid-favstar {
margin-left: auto;
color: oklch(0.78 0.16 55); /* csfloat's wear-orange */
font-size: 13px;
line-height: 1;
}
/* END grid favstar */
/* CSFloat-1:1: ★ prefix on grid card title for Limited-rarity items
(csfloat shows ★ on knives + gloves). Subtle warm-yellow tint. */
.grid-name-star {
color: oklch(0.82 0.16 90);
margin-right: 2px;
}
/* END grid name star */
/* CSFloat-1:1: breadcrumb on /item page header — "Market › Category › Item Name".
Sits above the item title in the right rail of the modal-header. Mono+small. */
.modal-breadcrumb {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11.5px;
letter-spacing: 0;
color: var(--ink-3);
margin-bottom: 6px;
}
.modal-breadcrumb-link {
color: var(--ink-3);
text-decoration: none;
transition: color 140ms ease;
}
.modal-breadcrumb-link:hover { color: var(--cta); }
.modal-breadcrumb-sep { color: var(--ink-4); }
.modal-breadcrumb-cur {
color: var(--ink);
font-weight: 600;
}
/* END breadcrumb */
/* CSFloat-1:1: in full-page mode, the modal-actions sticky bottom action
bar should stay pinned to the viewport bottom (csfloat keeps the buy
button visible even when scrolling the long item-detail page). */
.full-page-mode .modal-actions {
position: sticky !important;
bottom: 0 !important;
background: color-mix(in oklab, var(--bg) 92%, transparent) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
z-index: 5;
margin-top: 32px;
border-top: 1px solid var(--line) !important;
}
/* Bug fix 2026-04-30: the sticky `.modal-actions` was overlapping the
"You might also like" similar-items rail at the bottom of /item, since
the modal-body had no bottom padding for the sticky overlay. Small
reserve so the rail's last row clears the panel during scroll. */
.full-page-mode .modal-body {
padding-bottom: 24px !important;
}
/* Boss QA cycle 3 C3-3 — on <=600px the sticky modal-actions stack
vertically and grow to ~180px tall, hiding the price stat boxes
underneath. Reserve enough bottom padding on the modal so content
isn't covered, and shrink button padding so the stacked bar takes
less vertical space. */
@media (max-width: 600px) {
.full-page-mode .modal-body { padding-bottom: 220px !important; }
.full-page-mode .modal-actions {
padding: 10px 14px !important;
gap: 8px !important;
}
.full-page-mode .modal-actions > button,
.full-page-mode .modal-actions > a {
padding: 10px 10px !important;
font-size: 12px !important;
min-height: 36px !important;
}
}
/* END sticky modal-actions */
/* === /item page sticky right rail (2026-05-02 ship) ====================
With , we promote .modal.item-page to a
2-col grid and use `display: contents` on the .modal-header inside it
so its children (`.modal-preview`, `.modal-header > div:nth-child(2)`)
become direct grid items. The right rail (rail = the 2nd child) then
spans both grid rows and can pin its position-sticky to the page-tall
parent. Below 1100px the grid collapses to single column. */
.modal.item-page {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
grid-template-rows: auto 1fr;
gap: 24px;
align-items: start;
padding: 22px;
position: relative;
}
.modal.item-page > .modal-header {
display: contents;
}
.modal.item-page > .modal-header > .modal-preview {
grid-column: 1;
grid-row: 1;
width: 100%;
}
.modal.item-page > .modal-header > div:nth-child(2) {
grid-column: 2;
grid-row: 1 / span 99;
position: sticky;
top: 80px;
align-self: start;
max-height: calc(100vh - 100px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
padding-right: 4px;
}
.modal.item-page > .modal-header > div:nth-child(2)::-webkit-scrollbar { width: 6px; }
.modal.item-page > .modal-header > div:nth-child(2)::-webkit-scrollbar-thumb {
background: var(--line-2); border-radius: 3px;
}
.modal.item-page > .modal-body {
grid-column: 1;
grid-row: 2 / span 99;
padding-bottom: 64px;
}
/* I7/I8 Boss QA — explicitly place .modal-actions into col 1 spanning
full width so the sticky action bar doesn't get clipped by the right
rail's overflow. Buttons wrap onto a second row when they can't all
fit inline (Watchlist + Sign-in-to-make-offer + Place buy order +
Steam Market + ♥ no longer crammed into 340px). */
.modal.item-page > .modal-actions {
grid-column: 1 / -1;
grid-row: 200;
align-self: end;
margin-top: 16px;
}
@media (max-width: 1100px) {
/* M1m fix: minmax(0, 1fr) so the single grid track can SHRINK below
min-content. Pre-fix the rail's h1 + chips were ~1040px wide (the
intrinsic size of "Listing price" + "Steam reference" labels + the
trend pill). 1fr resolves to minmax(auto, 1fr) which preserves that
1040px minimum, so the column physically didn't fit a 390px
viewport — modal-stats was rendering off-screen to the right.
minmax(0, 1fr) lets the track collapse to viewport width. */
.modal.item-page {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
}
.modal.item-page > .modal-header > .modal-preview { grid-column: 1; grid-row: 1; min-width: 0; }
.modal.item-page > .modal-header > div:nth-child(2) {
grid-column: 1; grid-row: 2;
position: static;
max-height: none;
overflow: visible;
min-width: 0;
}
.modal.item-page > .modal-body { grid-column: 1; grid-row: 3; min-width: 0; }
}
/* CSFloat-1:1: in full-page mode, section titles get bigger sans-serif
(matches csfloat where Active Listings is a real h2 not a tiny eyebrow). */
.full-page-mode .modal-section-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 18px !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: var(--ink) !important;
font-weight: 600 !important;
margin: 32px 0 14px !important;
/* Force left-align — original .modal-section-title used space-between
for a section-title-dot ornament + text + optional right-side toggle.
In full-page mode we want the text on the LEFT like csfloat. */
justify-content: flex-start !important;
gap: 8px;
}
.full-page-mode .modal-section-title .section-title-dot {
display: none !important;
}
/* END section title polish */
/* CSFloat-1:1: in full-page mode, the listing-row buy button uses the
accent blue fill (csfloat's primary action color) instead of a muted
ghost. Mirrors the prominent "Buy now" button csfloat shows per row. */
.full-page-mode .modal-listing-row .btn,
.full-page-mode .modal-listing-row .btn-primary,
.full-page-mode .modal-listing-row .btn-accent {
background: var(--cta) !important;
color: white !important;
border-color: var(--cta) !important;
font-weight: 600 !important;
transition: background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease !important;
}
.full-page-mode .modal-listing-row .btn:hover,
.full-page-mode .modal-listing-row .btn-primary:hover,
.full-page-mode .modal-listing-row .btn-accent:hover {
background: color-mix(in oklab, var(--cta) 90%, white) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 30%, transparent) !important;
}
/* END listing-row buy button polish */
/* CSFloat-1:1: band card float decimal mirroring grid card. */
.csfloat-band-card-floatmeta {
margin-top: 4px;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
letter-spacing: -0.005em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* END band floatmeta */
/* CSFloat-1:1: bump grid-card magnifier zoom button up to 28px so the
cue is more visible without competing with the image. */
.grid-zoom {
width: 28px !important;
height: 28px !important;
font-size: 15px !important;
opacity: 0.85;
transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}
.grid-card:hover .grid-zoom {
opacity: 1;
color: var(--ink);
background: color-mix(in oklab, var(--bg) 80%, transparent);
}
/* END grid zoom polish */
/* CSFloat-1:1: hero stack action buttons (Buy now / Bargain / cart) get
subtle hover lift + glow matching the rest of the system. */
.csfloat-hero-stack-btn {
cursor: pointer;
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 140ms ease;
}
.csfloat-hero-stack-btn.primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px color-mix(in oklab, var(--cta) 35%, transparent);
}
.csfloat-hero-stack-btn.ghost:hover {
background: color-mix(in oklab, var(--cta) 10%, transparent);
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
transform: translateY(-1px);
}
.csfloat-hero-stack-btn.cart:hover {
background: color-mix(in oklab, var(--cta) 14%, transparent);
border-color: color-mix(in oklab, var(--cta) 60%, var(--line-2));
transform: translateY(-1px);
}
/* END hero stack btn hover */
/* CSFloat-1:1: Visit Marketplace → CTA gets a subtle glow on hover. */
.csfloat-band-link:hover {
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 25%, transparent);
}
/* END band-link glow */
/* CSFloat-1:1: inline Buy Now action group at the top of the right rail
on /item full-page. Mirrors csfloat's prominent buy/cart placement next
to the price stats. Sticky bottom action bar stays below for scroll. */
.item-rail-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin-bottom: 12px;
}
.item-rail-actions-buy {
background: var(--cta);
color: white;
border: 1px solid var(--cta);
border-radius: 6px;
padding: 8px 14px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
text-align: center;
font-feature-settings: 'tnum' 1;
}
.item-rail-actions-buy:hover:not(:disabled) {
background: color-mix(in oklab, var(--cta) 90%, white);
transform: translateY(-1px);
box-shadow: 0 8px 20px color-mix(in oklab, var(--cta) 38%, transparent);
}
.item-rail-actions-buy:disabled {
opacity: 0.55; cursor: not-allowed;
}
.item-rail-actions-cart {
background: transparent;
color: var(--ink-2);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 8px 12px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms ease;
}
.item-rail-actions-cart:hover:not(:disabled) {
background: color-mix(in oklab, var(--cta) 8%, transparent);
color: var(--ink);
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
transform: translateY(-1px);
}
.item-rail-actions-cart:disabled {
opacity: 0.6; cursor: not-allowed;
}
/* END item-rail inline actions */
/* CSFloat-1:1: rarity chip next to item title on /item page header.
Matches csfloat's "StatTrak™" italic orange marker next to the title. */
.modal-name-rarity {
font-style: italic;
font-weight: 600;
color: oklch(0.78 0.16 55);
font-family: 'Fraunces', 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
font-size: 14px;
text-decoration: none;
transition: color 140ms ease, opacity 140ms ease;
}
.modal-name-rarity:hover {
color: oklch(0.85 0.18 55);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: oklch(0.78 0.16 55);
}
/* END modal-name-rarity */
/* CSFloat-1:1: Bargain ghost button underneath Buy / Cart in /item right rail. */
.item-rail-actions-bargain {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%;
background: transparent;
color: color-mix(in oklab, var(--cta) 90%, white);
border: 1px solid color-mix(in oklab, var(--cta) 30%, var(--line-2));
border-radius: 6px;
padding: 8px 14px;
margin-bottom: 10px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.item-rail-actions-bargain:hover {
background: color-mix(in oklab, var(--cta) 12%, transparent);
border-color: var(--cta);
transform: translateY(-1px);
}
/* END bargain row */
/* Mobile: stack inline rail actions in column. */
@media (max-width: 800px) {
.item-rail-actions {
grid-template-columns: 1fr;
}
.item-rail-actions-cart {
justify-content: center;
}
.modal-name-rarity { font-size: 12px; }
}
/* END mobile rail */
/* CSFloat-1:1: in full-page mode, the bottom modal-actions sticky bar
only needs to show truly secondary actions (Steam / Heart) since the
right-rail inline group is now the primary path. Keep the bar but make
it noticeably more compact. */
.full-page-mode .modal-actions {
padding: 10px 16px !important;
}
.full-page-mode .modal-actions > button,
.full-page-mode .modal-actions > a {
height: 32px !important;
font-size: 12px !important;
}
/* END compact bottom bar */
/* CSFloat-1:1: in full-page mode, the Floor Price stat (first stat box)
gets a bigger price value to mirror csfloat where the price is the
most prominent thing on the right rail. */
.full-page-mode .modal-stat-box:first-child .modal-stat-val {
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
}
.full-page-mode .modal-stat-box {
padding: 14px 16px !important;
}
/* END floor price prominence */
/* CSFloat-1:1: stat box label readability — slightly bigger, less mono. */
.full-page-mode .modal-stat-label {
font-size: 11px !important;
letter-spacing: 0.10em !important;
color: var(--ink-3) !important;
font-weight: 500 !important;
}
/* END stat label */
/* CSFloat-1:1: grid card title shifts to accent on card hover (csfloat
adds subtle text-shift to indicate the card is interactive). */
.grid-card .grid-name {
transition: color 200ms ease;
}
.grid-card:hover .grid-name {
color: color-mix(in oklab, var(--cta) 80%, white);
}
/* END grid title hover */
/* CSFloat-1:1: csfloat-band-card (Top Deals) title hover state too. */
.csfloat-band-card .csfloat-band-card-name {
transition: color 200ms ease;
}
.csfloat-band-card:hover .csfloat-band-card-name {
color: color-mix(in oklab, var(--cta) 80%, white);
}
/* END band title hover */
/* CSFloat-1:1: hero stack name hover is shifted to accent-2 — but only
on pos-0 since that's the clickable card. */
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-name {
transition: color 200ms ease;
}
.csfloat-hero-stack-card.pos-0:hover .csfloat-hero-stack-name {
color: color-mix(in oklab, var(--cta) 75%, white);
}
/* END hero name hover */
/* CSFloat-1:1: explicit pointer cursor on the prominent hero card so it
reads as clickable. Was inheriting default. */
.csfloat-hero-stack-card.pos-0 {
cursor: pointer;
}
/* END hero card cursor */
/* CSFloat-1:1: pulse (LIVE TAPE) row gets refined polish — slightly taller,
stronger LED glow, items have a subtle hover. Was visually invisible. */
.pulse {
height: 36px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg) 96%, transparent) 0%,
var(--bg) 100%);
}
.pulse-led {
width: 8px; height: 8px;
box-shadow: 0 0 0 3px var(--blue-soft),
0 0 14px color-mix(in oklab, var(--blue) 70%, transparent);
}
.pulse-item {
transition: color 140ms ease;
}
.pulse-item:hover { color: var(--ink); }
.pulse-item:hover b { color: var(--ink); }
/* END pulse polish */
/* CSFloat-1:1: floor price stat box gets a subtle pulse on first render
to draw the eye to the most important number on /item. */
@keyframes floor-pulse {
0%, 100% { box-shadow: 0 0 0 0 transparent, inset 0 1px 0 rgba(255,255,255,0.03); }
50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--cta) 8%, transparent), inset 0 1px 0 rgba(255,255,255,0.03); }
}
.full-page-mode .modal-stat-box:first-child {
animation: floor-pulse 1.6s ease-in-out 1;
}
/* END floor pulse */
/* CSFloat-1:1: breadcrumb separator gets slight breathing room. */
.modal-breadcrumb-sep {
margin: 0 1px;
font-size: 14px;
line-height: 1;
}
/* END breadcrumb sep */
/* CSFloat-1:1: bottom action bar's heart button gets a polished hover. */
.full-page-mode .modal-actions > button:last-child:not(:disabled):hover {
color: oklch(0.78 0.16 25);
background: color-mix(in oklab, oklch(0.78 0.16 25) 8%, transparent);
}
/* END heart hover */
/* CSFloat-1:1: chart-range tabs slight polish — bigger tap target. */
.chart-range button {
padding: 6px 12px !important;
font-size: 11px !important;
}
.chart-range button.active,
.chart-range button.on {
/* Boss QA cycle 11 — bg darkened from --cta to --cta-d so white text
clears WCAG AA 4.5:1 (was 3.67:1, axe-flagged on /item/1). */
background: var(--cta-d) !important;
color: white !important;
}
/* END chart-range polish */
/* CSFloat-1:1: nav-link hover state more pronounced (slight bg + scale). */
.nav-link {
transition: color 140ms ease, background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-link:hover {
color: var(--ink);
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END nav-link polish */
/* CSFloat-1:1: header `Database`/`Loadout`/etc icons get subtle accent
transition on parent-link hover so the whole link feels interactive. */
.nav-link.active {
color: var(--ink) !important;
background: color-mix(in oklab, var(--cta) 5%, transparent);
}
/* END nav active bg */
/* CSFloat-1:1: Sticky bottom action bar bg — slightly less opaque so the
page content underneath is faintly visible. Was solid bg. */
.full-page-mode .modal-actions {
background: color-mix(in oklab, var(--bg) 88%, transparent) !important;
backdrop-filter: blur(12px) saturate(140%) !important;
-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
/* END action-bar transparency */
/* CSFloat-1:1: grid card image rarity color stripe at top — animate on
hover with slight color brighten so the card feels alive. */
.grid-thumb::before {
transition: opacity 200ms ease, height 200ms ease;
}
.grid-card:hover .grid-thumb::before {
height: 4px;
opacity: 1;
}
/* END grid stripe hover */
/* CSFloat-1:1: hover state on every magnifier zoom button (grid + band +
hero stack + modal preview) — fade up brightness. */
.csfloat-band-card:hover .csfloat-band-card-zoom,
.csfloat-hero-stack-card.pos-0:hover .csfloat-hero-stack-zoom {
color: var(--ink);
opacity: 1;
}
.csfloat-band-card-zoom,
.csfloat-hero-stack-zoom {
transition: color 140ms ease, opacity 140ms ease;
opacity: 0.85;
}
/* END zoom button hover */
/* CSFloat-1:1: subtle hover on /database table rows for clickability cue. */
.listing-table tbody tr {
transition: background 140ms ease;
cursor: pointer;
}
/* END db row hover */
/* CSFloat-1:1: cookie banner subtle scale-in on first appearance. */
@keyframes cookie-in {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
[role="region"][aria-label="Cookie consent"] {
animation: cookie-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
/* END cookie animation */
/* CSFloat-1:1: subnav category-strip pills get bigger tap area + active
state with subtle blue-tint background + bold weight (was just underline). */
.csfloat-subnav-tab {
padding: 8px 14px !important;
transition: color 140ms ease, background 140ms ease, font-weight 0ms;
border-radius: 6px;
}
.csfloat-subnav-tab:hover {
background: color-mix(in oklab, var(--cta) 6%, transparent);
color: var(--ink);
}
.csfloat-subnav-tab.active {
font-weight: 700 !important;
color: var(--ink) !important;
}
/* END subnav polish */
/* CSFloat-1:1: grid card heart toggle gets a subtle hover pop. */
.grid-star {
transition: color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
}
.grid-star:hover {
transform: scale(1.15);
color: oklch(0.78 0.16 25);
background: color-mix(in oklab, oklch(0.78 0.16 25) 12%, transparent);
}
.grid-star.on {
color: oklch(0.78 0.16 25);
}
/* END heart hover polish */
/* CSFloat-1:1: modal-listing-row gets a subtle hover bg + transition. */
.modal-listing-row {
transition: background 140ms ease;
border-radius: 6px;
margin: 0 -8px;
padding-left: 8px !important;
padding-right: 8px !important;
}
.modal-listing-row:hover {
background: color-mix(in oklab, var(--cta) 4%, transparent);
}
/* END listing-row hover */
/* CSFloat-1:1: modal share button hover state. */
.modal-header button.btn-ghost {
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-header button.btn-ghost:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
color: var(--ink);
transform: translateY(-1px);
}
/* END share btn hover */
/* CSFloat-1:1: improve cookies banner button visibility — Reject is OK as
ghost, Accept gets stronger hover lift. */
[role="region"][aria-label="Cookie consent"] .btn-accent {
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
[role="region"][aria-label="Cookie consent"] .btn-accent:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px color-mix(in oklab, var(--cta) 30%, transparent);
}
[role="region"][aria-label="Cookie consent"] .btn-ghost {
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
[role="region"][aria-label="Cookie consent"] .btn-ghost:hover {
background: var(--bg-2);
color: var(--ink);
border-color: var(--line-2);
}
/* END cookie buttons polish */
/* CSFloat-1:1: site footer link hover state. */
.site-footer a {
transition: color 140ms ease;
}
.site-footer a:hover {
color: var(--ink);
}
/* END footer link hover */
/* CSFloat-1:1: footer social icons get accent on hover. */
.site-footer-social:hover {
color: var(--cta) !important;
background: color-mix(in oklab, var(--cta) 10%, transparent) !important;
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
}
/* END social hover */
/* CSFloat-1:1: filter pills (All / Buy Now / Auction / % Deals / Any
discount / New) get prominent hover state matching csfloat. */
.filter-pill, .px-pill, .px-chip {
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.filter-pill:hover, .px-pill:hover, .px-chip:hover {
border-color: color-mix(in oklab, var(--cta) 40%, var(--line-2));
color: var(--ink);
}
/* END filter pill hover */
/* CSFloat-1:1: subnav active tab gets blue underline + bold weight. */
.csfloat-subnav-tab.active::after {
background: var(--cta) !important;
height: 2px !important;
}
/* END subnav active stripe */
/* CSFloat-1:1: hero stack pos-1 + pos-2 get rounded corners more pronounced. */
.csfloat-hero-stack-card {
border-radius: 12px;
}
/* END hero card rounded */
/* CSFloat-1:1: cart badge "pop" animation when count goes up. */
@keyframes badge-pop {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.nav-icon-badge {
animation: badge-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END badge pop */
/* CSFloat-1:1: nav-link active state gets a brighter underline. */
.nav-link.active::after {
background: var(--cta) !important;
box-shadow: 0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
}
/* END nav active glow */
/* CSFloat-1:1: SkinBox brand logo subtle accent on hover. */
.nav-logo {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-logo:hover {
transform: scale(1.04);
}
.nav-logo:hover .nav-logo-text {
color: color-mix(in oklab, var(--cta) 60%, white);
transition: color 200ms ease;
}
/* END logo hover */
/* CSFloat-1:1: subtle background gradient on hero image area for depth. */
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-img {
position: relative;
overflow: hidden;
}
/* END hero img depth */
/* CSFloat-1:1: improve the CTA on the Top Deals "Visit Marketplace" link
with chevron animation on hover. */
.csfloat-band-link svg {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-band-link:hover svg {
transform: translateX(4px);
}
/* END visit-marketplace chevron */
/* CSFloat-1:1: avatar hover ring accent. */
.modal-seller-av:hover, .seller-avatar:hover {
border-color: color-mix(in oklab, var(--cta) 50%, var(--line-2));
transition: border-color 140ms ease;
}
/* END avatar hover */
/* CSFloat-1:1: scroll-to-top FAB hover animation. */
.scroll-up-fab:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px color-mix(in oklab, var(--cta) 30%, transparent) !important;
}
.scroll-up-fab {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, background 140ms ease !important;
}
/* END scroll-fab hover */
/* CSFloat-1:1: rarity-badge slight dim to match csfloat's restraint. */
.rarity-badge {
font-size: 9px !important;
letter-spacing: 0.06em !important;
padding: 3px 8px !important;
border-radius: 3px !important;
}
/* END rarity-badge polish */
/* CSFloat-1:1: grid card view-count eye chip — tabular num + tiny icon. */
.grid-views {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END view chip num */
/* CSFloat-1:1: tooltip-like title attribute fallback — improve text-shadow
on hovered card view chip. */
.grid-card:hover .grid-views {
color: var(--ink-2);
background: color-mix(in oklab, var(--bg) 80%, transparent);
}
/* END view chip hover */
/* CSFloat-1:1: empty-state icon tile gets a subtle accent on hover. */
.empty-state-icon, .px-empty-icon {
transition: background 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.empty-state-icon:hover, .px-empty-icon:hover {
transform: scale(1.05);
background: color-mix(in oklab, var(--cta) 14%, var(--bg-2)) !important;
}
/* END empty state hover */
/* CSFloat-1:1: search dropdown suggestion items get cleaner hover. */
.search-suggest-item:hover {
background: color-mix(in oklab, var(--cta) 12%, transparent);
color: var(--ink);
}
/* END suggest hover */
/* CSFloat-1:1: improved focus-visible ring on all interactive elements. */
button:focus-visible, a:focus-visible {
outline: 2px solid color-mix(in oklab, var(--cta) 60%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
/* END focus ring */
/* CSFloat-1:1: bigger tap target on the toolbar refresh icon. */
.toolbar-refresh {
width: 38px !important;
height: 38px !important;
}
/* END toolbar refresh size */
/* CSFloat-1:1: subtle hover lift on stall hero share button. */
.stall-hero-share:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
/* END stall share hover */
/* CSFloat-1:1: db page item-link row hover state with accent border. */
.db-row:hover, .listing-table tbody tr:hover {
background: color-mix(in oklab, var(--cta) 6%, transparent) !important;
}
/* END db row accent */
/* CSFloat-1:1: nav-icon-badge slight glow when count > 0. */
.nav-icon-badge:not(:empty):not([data-count="0"]) {
background: var(--cta) !important;
box-shadow: 0 0 0 2px var(--bg), 0 0 12px color-mix(in oklab, var(--cta) 50%, transparent) !important;
}
/* END nav badge glow */
/* CSFloat-1:1: cart icon when items exist gets accent fill. */
.nav-icon-btn:has(.nav-icon-badge:not(:empty)) {
color: var(--cta) !important;
}
/* END cart icon when full */
/* CSFloat-1:1: grid-price slightly bigger on card hover. */
.grid-card .grid-price {
transition: color 200ms ease;
}
.grid-card:hover .grid-price {
color: var(--ink);
}
/* END grid price hover */
/* CSFloat-1:1: footer copyright row gets subtle hover state on hidden hovered links. */
.site-footer-meta {
transition: opacity 200ms ease;
}
/* END footer meta */
/* CSFloat-1:1: site-root subtle background grain texture for depth. */
.site-root::before {
content: '';
position: fixed; inset: 0;
background: radial-gradient(ellipse at 50% -10%,
color-mix(in oklab, var(--cta) 8%, transparent) 0%,
transparent 40%);
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
/* END site bg grain */
/* CSFloat-1:1: brand logo SVG/PNG container has subtle glow on hover. */
.nav-logo-icon {
transition: filter 200ms ease;
}
.nav-logo:hover .nav-logo-icon {
filter: drop-shadow(0 0 12px color-mix(in oklab, var(--cta) 60%, transparent));
}
/* END logo icon glow */
/* CSFloat-1:1: rarity dot in availability filter sidebar gets bigger glow. */
.filter-rarity-dot {
width: 12px !important;
height: 12px !important;
box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 18%, transparent);
}
/* END filter rarity dot */
/* CSFloat-1:1: price-range mini pill chips on sidebar get hover state. */
.price-range-chip {
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.price-range-chip:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
transform: translateY(-1px);
}
/* END price chip hover */
/* CSFloat-1:1: clear filters link more prominent. */
.filter-clear {
font-weight: 500;
transition: color 140ms ease;
}
.filter-clear:hover { color: var(--cta); }
/* END clear filters */
/* CSFloat-1:1: select / dropdown arrows polish. */
select {
transition: border-color 140ms ease, background 140ms ease;
}
select:hover {
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
}
select:focus {
border-color: var(--cta);
outline: none;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END select polish */
/* CSFloat-1:1: input number/date hover/focus state. */
input[type="number"]:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus {
border-color: var(--cta);
outline: none;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* END input focus */
/* CSFloat-1:1: kbd hint chip gets subtle hover state for affordance. */
.search-kbd, kbd {
transition: background 140ms ease, color 140ms ease;
}
/* END kbd polish */
/* CSFloat-1:1: sticky bottom action bar has subtle shadow above so it
visually separates from page content as user scrolls past it. */
.full-page-mode .modal-actions {
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
}
/* END action-bar shadow */
/* CSFloat-1:1: refresh icon spin on click. */
.toolbar-refresh:active svg,
.toolbar-refresh:active .material-symbols-rounded {
animation: refresh-spin 600ms ease;
}
@keyframes refresh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* END refresh spin */
/* CSFloat-1:1: improve auto-fill grid spacing so cards breathe more. */
.listing-grid {
gap: 16px;
}
@media (min-width: 1400px) {
.listing-grid { gap: 18px; }
}
/* END grid gap */
/* CSFloat-1:1: footer copyright text more subtle. */
.site-footer-meta-copy {
color: var(--ink-4);
font-size: 11px;
}
/* END footer copy */
/* CSFloat-1:1: site root focus management - spacing improvements. */
.site-root {
position: relative;
}
/* END site root */
/* CSFloat-1:1: subnav category tabs gap normalization. */
.csfloat-subnav-inner {
gap: 4px;
}
/* END subnav gap */
/* CSFloat-1:1: bigger tap target for nav-icon-btn on touch devices. */
@media (hover: none) {
.nav-icon-btn { width: 40px !important; height: 40px !important; }
}
/* END nav-icon touch */
/* CSFloat-1:1: cookies banner Accept button gets prominent accent. */
[role="region"][aria-label="Cookie consent"] .btn-accent {
background: var(--cta) !important;
border-color: var(--cta) !important;
}
/* END cookie accept */
/* CSFloat-1:1: subtle border-radius unification across the system. */
.btn, button.btn, .btn-accent, .btn-ghost, .btn-primary {
border-radius: 6px;
}
/* END button radius */
/* CSFloat-1:1: card image fade-in animation when loaded. */
@keyframes card-image-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.grid-card .item-image,
.csfloat-band-card .item-image,
.csfloat-hero-stack-img .item-image {
animation: card-image-fade-in 280ms ease-out 1;
}
/* END card image fade */
/* CSFloat-1:1: fade-in animation for the entire site-root on first paint. */
@keyframes site-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.site-root {
animation: site-fade-in 200ms ease-out 1;
}
/* END site fade */
/* CSFloat-1:1: smooth-scroll for in-page anchors. */
html { scroll-behavior: smooth; }
/* END smooth scroll */
/* CSFloat-1:1: strict no-text-decoration on all buttons. */
button, .btn, button.btn { text-decoration: none !important; }
/* END button decoration */
/* CSFloat-1:1: rarity color stripe slight pulse on hover. */
.grid-thumb::before {
background-size: 200% 100%;
background-position: 0 0;
}
.grid-card:hover .grid-thumb::before {
background-position: 100% 0;
transition: background-position 600ms ease, height 200ms ease;
}
/* END stripe pulse */
/* CSFloat-1:1: navigation links hover background darker / accent tint. */
.nav-link:hover { color: var(--ink) !important; }
.nav-link.active { color: var(--ink); }
/* END nav link refinement */
/* CSFloat-1:1: USD/EN dropdown chip more polished. */
.nav-currency { letter-spacing: 0.04em; }
/* END nav currency tracking */
/* CSFloat-1:1: hero CTA button icon brighter. */
.hero-actions .px-btn-primary svg,
.hero-actions .px-btn-primary .material-symbols-rounded {
filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
}
/* END hero CTA icon */
/* CSFloat-1:1: improved sparkline-card styling — gradient bg. */
.sparkline-bg {
background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--up) 6%, transparent) 100%);
}
/* END sparkline bg */
/* CSFloat-1:1: cleaner table heading style on /database. */
.listing-table thead th {
text-transform: uppercase;
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.12em;
color: var(--ink-3);
}
/* END table heading */
/* CSFloat-1:1: improved modal-stat-box hover state. */
.full-page-mode .modal-stat-box {
transition: border-color 200ms ease, background 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.full-page-mode .modal-stat-box:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2)) !important;
background: color-mix(in oklab, var(--cta) 5%, var(--bg-1)) !important;
}
/* END stat hover */
/* CSFloat-1:1: strict z-index for cookies banner.
* Match the canonical value at the bottom of the file — kept BELOW the
* modal backdrop (z=200) so an open dialog visually covers the banner. */
[role="region"][aria-label="Cookie consent"] { z-index: 150 !important; }
/* END cookie z */
/* CSFloat-1:1: subtle 1px hairline on subnav strip bottom. */
.csfloat-subnav { border-bottom: 1px solid var(--line); }
/* END subnav hairline */
/* CSFloat-1:1: Sort dropdown chevron icon styling. */
.toolbar select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
/* END sort chevron */
/* CSFloat-1:1: tighter spacing on /watchlist filter pills. */
.watchlist-filter-pills {
gap: 6px;
}
/* END watchlist pills gap */
/* Boss QA cycle 11 — db-row watchlist star tap target. Desktop 36×36
for editorial density; mobile widens to 44×44 (Apple HIG). Active
press depresses ~6% so the toggle reads physical. */
.db-row-star {
width: 36px; height: 36px;
}
.db-row-star:active { transform: scale(0.94); }
@media (max-width: 760px) {
.db-row-star { width: 44px; height: 44px; }
}
/* END db-row-star tap target */
/* CSFloat-1:1: Loadout Lab card hover lift. */
.loadout-card {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, border-color 140ms ease, background 140ms ease;
}
.loadout-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
/* END loadout hover */
/* CSFloat-1:1: notification bell shake on new notification. */
@keyframes bell-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-12deg); }
50% { transform: rotate(12deg); }
75% { transform: rotate(-8deg); }
}
.nav-icon-btn:has(.nav-icon-badge:not(:empty):not([data-count="0"])) .material-symbols-rounded {
animation: bell-shake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}
/* END bell shake */
/* CSFloat-1:1: improve scroll-to-top FAB position to not overlap action bar. */
@media (min-width: 901px) {
.scroll-up-fab {
right: 16px !important;
bottom: 80px !important;
}
}
/* END scroll-fab pos */
/* CSFloat-1:1: subtle accent border on hover for the watchlist heart. */
.grid-card:hover .grid-star {
border-color: color-mix(in oklab, oklch(0.78 0.16 25) 40%, var(--line-2));
}
/* END heart border hover */
/* CSFloat-1:1: improve hover on csfloat-band-tab. */
.csfloat-band-tab {
transition: color 140ms ease, background 140ms ease;
border-radius: 6px;
padding: 6px 12px;
}
.csfloat-band-tab:hover { color: var(--ink); }
.csfloat-band-tab.active {
background: color-mix(in oklab, var(--cta) 12%, transparent);
color: var(--ink);
font-weight: 600;
}
/* END band tab polish */
/* CSFloat-1:1: minor — kbd / shortcut chip inline. */
.search-kbd {
font-size: 10px;
padding: 2px 6px;
}
/* END kbd small */
/* CSFloat-1:1: avatar fallback monogram letterspacing. */
.modal-seller-av, .seller-avatar {
letter-spacing: -0.01em;
text-transform: uppercase;
font-weight: 700;
}
/* END avatar letter */
/* CSFloat-1:1: improve cart row image bg subtle. */
.cart-thumb {
background: var(--bg-2);
border-radius: 6px;
border: 1px solid var(--line);
transition: border-color 140ms ease;
}
.cart-row:hover .cart-thumb {
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2));
}
/* END cart thumb */
/* CSFloat-1:1: cart price text larger + tabular nums. */
.cart-price {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END cart price */
/* CSFloat-1:1: subtle accent stripe on cart row hover. */
.cart-row {
transition: background 140ms ease;
border-radius: 6px;
padding: 8px;
}
.cart-row:hover {
background: color-mix(in oklab, var(--cta) 4%, transparent);
}
/* END cart row hover */
/* CSFloat-1:1: filter sidebar Availability list items hover lift. */
.filter-rarity-row {
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
border-radius: 6px;
}
.filter-rarity-row:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END filter row hover */
/* CSFloat-1:1: search input width breathing room. */
.search-wrap {
flex: 1 1 320px !important;
min-width: 280px !important;
max-width: 420px !important;
}
/* END search wrap width */
/* CSFloat-1:1: refresh icon stronger color. */
.toolbar-refresh {
color: var(--ink-2);
}
.toolbar-refresh:hover {
color: var(--cta);
}
/* END refresh color */
/* CSFloat-1:1: LIVE TAPE pulse pauses on hover so user can read items. */
.pulse:hover .pulse-track {
animation-play-state: paused;
}
/* END pulse pause */
/* CSFloat-1:1: better focus indicator for keyboard nav. */
.grid-card:focus-visible {
outline: 2px solid var(--cta) !important;
outline-offset: 4px;
}
/* END card focus */
/* CSFloat-1:1: hover state on bell + cart with very subtle accent ring. */
.nav-icon-btn:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END nav icon hover ring */
/* CSFloat-1:1: improved offscreen content reveal as user scrolls. */
.csfloat-band-row {
scroll-padding-left: 16px;
scroll-padding-right: 16px;
}
/* END band scroll padding */
/* CSFloat-1:1: typography refinement on /item title. */
.full-page-mode .modal-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
}
/* END item title */
/* CSFloat-1:1: keyboard shortcut chips on /help bigger. */
.kbd-chip {
padding: 4px 8px !important;
font-size: 11px !important;
font-family: var(--mono) !important;
background: var(--bg-2) !important;
border: 1px solid var(--line-2) !important;
border-radius: 4px !important;
}
/* END kbd chip */
/* CSFloat-1:1: improve modal-listing-row condition text. */
.modal-listing-condition {
font-feature-settings: 'tnum' 1;
}
/* END condition num */
/* CSFloat-1:1: cart subtotal / total emphasis. */
.cart-summary-row span:last-child {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END cart summary num */
/* CSFloat-1:1: hero h1 sans-serif weight + tighter letter-spacing. */
.hero h1, .px-h1 {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
}
/* END hero h1 */
/* CSFloat-1:1: hero lede subtle improvement. */
.hero p, .px-hero-text p {
color: var(--ink-3);
line-height: 1.55;
}
/* END hero lede */
/* CSFloat-1:1: nav-links font-weight slightly bumped on active. */
.nav-link.active {
font-weight: 700 !important;
}
/* END nav active weight */
/* CSFloat-1:1: cleaner "All prices in USD" footer text. */
.site-footer-meta-copy {
color: var(--ink-4);
}
/* END footer meta */
/* CSFloat-1:1: smaller line-height for grid card subtitle. */
.grid-sub {
line-height: 1.3;
margin-top: 2px;
}
/* END grid sub line */
/* CSFloat-1:1: improved Steam Market link inline icon size. */
.steam-market-link.compact {
width: 16px;
height: 16px;
margin-left: 4px;
}
/* END steam link size */
/* CSFloat-1:1: improve database table row clickability cue with cursor. */
.db-row, .listing-table tbody tr {
cursor: pointer;
transition: background 140ms ease;
}
/* END db row cursor */
/* CSFloat-1:1: improved auction-countdown styling. */
.auction-countdown {
font-family: var(--mono);
font-feature-settings: 'tnum' 1;
color: var(--cta);
font-weight: 600;
}
/* END auction-countdown polish */
/* CSFloat-1:1: bigger watchlist heart icon in nav. */
.nav-link-badge {
background: var(--cta);
color: white;
border-radius: 999px;
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
margin-left: 4px;
}
/* END watchlist count */
/* CSFloat-1:1: subtle scrollbar styling for webkit browsers. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--ink-4) 40%, transparent);
border-radius: 5px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: color-mix(in oklab, var(--cta) 60%, var(--ink-4));
}
/* END scrollbar */
/* CSFloat-1:1: improved selection color. */
::selection {
background: color-mix(in oklab, var(--cta) 35%, transparent);
color: var(--ink);
}
/* END selection */
/* CSFloat-1:1: improved tab strip on /watchlist /profile etc. */
.tab-strip {
border-bottom: 1px solid var(--line);
display: flex;
gap: 4px;
}
.tab-strip-tab {
padding: 10px 14px;
color: var(--ink-3);
font-weight: 500;
font-size: 13px;
border: 0;
background: transparent;
cursor: pointer;
transition: color 140ms ease, background 140ms ease;
border-radius: 6px 6px 0 0;
}
.tab-strip-tab:hover { color: var(--ink); background: color-mix(in oklab, var(--cta) 6%, transparent); }
.tab-strip-tab.active {
color: var(--ink);
font-weight: 700;
border-bottom: 2px solid var(--cta);
margin-bottom: -1px;
}
/* END tab strip */
/* CSFloat-1:1: subtle accent border on focused container. */
.toolbar:focus-within {
/* Not directly possible without JS, but at least the children focus is nice. */
}
/* END toolbar focus */
/* CSFloat-1:1: improve modal action shadow on bottom. */
.modal-actions {
position: relative;
}
/* END modal-actions positioning */
/* CSFloat-1:1: nav-icon-btn icon scale-in on first paint. */
@keyframes icon-fade-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.nav-icon-btn .material-symbols-rounded,
.nav-icon-btn svg {
animation: icon-fade-in 280ms ease-out 1;
}
/* END icon fade */
/* CSFloat-1:1: faster transitions on grid card body interactions. */
.grid-card .grid-body * {
transition: color 200ms ease;
}
/* END grid body transitions */
/* CSFloat-1:1: improved focus state on filter pills. */
.filter-pill:focus-visible,
.px-pill:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* END filter pill focus */
/* CSFloat-1:1: nav has a subtle bottom shadow on scroll (when sticky). */
.nav {
transition: box-shadow 200ms ease;
}
.nav.is-scrolled {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* END nav scroll shadow */
/* CSFloat-1:1: cleaner grid-supply (X listings) text. */
.grid-supply {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
font-feature-settings: 'tnum' 1;
}
/* END grid supply */
/* CSFloat-1:1: improved spacing on price chart x-axis labels. */
.chart-axis-label {
font-size: 10px;
color: var(--ink-4);
font-family: var(--mono);
}
/* END chart axis */
/* CSFloat-1:1: cleaner alert button styles. */
.btn-alert, .btn-amber {
background: oklch(0.78 0.16 70) !important;
color: oklch(0.18 0.04 70) !important;
}
/* END alert btn */
/* CSFloat-1:1: improve search-suggest dropdown bg + shadow. */
.search-suggest {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
/* END suggest dropdown */
/* CSFloat-1:1: notification dropdown styling improvements. */
.notif-dropdown {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
max-height: 400px;
overflow-y: auto;
}
/* END notif dropdown */
/* CSFloat-1:1: improve user-menu dropdown when signed in. */
.user-menu-dropdown {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
padding: 6px;
min-width: 220px;
}
.user-menu-item {
padding: 8px 12px;
border-radius: 6px;
display: flex; align-items: center; gap: 10px;
color: var(--ink-2);
text-decoration: none;
font-size: 13px;
transition: background 140ms ease, color 140ms ease;
}
.user-menu-item:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
color: var(--ink);
}
/* END user-menu */
/* CSFloat-1:1: grid card hover state improvements – stronger lift. */
.grid-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 14px 36px rgba(0,0,0,0.5) !important;
}
/* END grid card stronger hover */
/* CSFloat-1:1: skeleton loading shimmer. */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton, .skeleton-card {
background: linear-gradient(90deg,
var(--bg-1) 0%,
var(--bg-2) 50%,
var(--bg-1) 100%);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
border-radius: 6px;
}
/* END shimmer */
/* CSFloat-1:1: better disabled button styles. */
button:disabled {
opacity: 0.6;
cursor: not-allowed !important;
}
/* END disabled */
/* CSFloat-1:1: add subtle bg gradient to hero h1 for depth. */
.hero h1 {
background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 88%, var(--ink-3)) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero h1 .px-accent-word {
background: none;
-webkit-background-clip: unset;
background-clip: unset;
color: var(--cta);
}
/* END hero gradient title */
/* CSFloat-1:1: improve marketplace pulse track gap. */
.pulse-track { gap: 36px; }
/* END pulse track gap */
/* CSFloat-1:1: improve hero stack card transition smoothness. */
.csfloat-hero-stack-card {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 280ms ease,
filter 280ms ease,
box-shadow 280ms ease,
border-color 140ms ease !important;
}
/* END hero stack transitions */
/* CSFloat-1:1: better cart row remove button. */
.cart-row .btn-ghost {
width: 32px;
height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 !important;
}
/* END cart remove btn */
/* CSFloat-1:1: improve sticky-bottom action bar transition. */
.full-page-mode .modal-actions {
transition: backdrop-filter 200ms ease, background 200ms ease;
}
/* END action-bar transition */
/* CSFloat-1:1: improve item-rail-actions-buy text contrast. */
.item-rail-actions-buy {
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* END buy text shadow */
/* CSFloat-1:1: rarity chip in modal title hover bigger letter-spacing. */
.modal-name-rarity:hover {
letter-spacing: 0;
}
/* END rarity hover spacing */
/* CSFloat-1:1: better border-radius on inner action buttons. */
.item-rail-actions-buy,
.item-rail-actions-cart,
.item-rail-actions-bargain {
border-radius: 8px;
}
/* END button radius unify */
/* CSFloat-1:1: site-root background gradient subtle. */
.site-root {
background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 95%, var(--bg-1)) 100%);
}
/* END site bg gradient */
/* CSFloat-1:1: improved Sticky bottom bar visibility on small viewports. */
@media (max-width: 800px) {
.full-page-mode .modal-actions {
flex-wrap: nowrap;
overflow-x: auto;
}
.full-page-mode .modal-actions > button,
.full-page-mode .modal-actions > a {
flex-shrink: 0;
}
}
/* END mobile action bar */
/* CSFloat-1:1: Listings list lazy-load fade-in. */
@keyframes list-row-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-listing-row {
animation: list-row-in 240ms ease-out 1;
}
/* END list row in */
/* CSFloat-1:1: improve floor price box subtitle visibility. */
.full-page-mode .modal-stat-box:first-child .modal-stat-label {
color: var(--cta) !important;
font-weight: 700 !important;
}
/* END floor label */
/* CSFloat-1:1: improve grid card body padding consistency. */
.grid-card .grid-body { padding-top: 12px; }
/* END grid body padding consistency */
/* CSFloat-1:1: subtle accent ring on focus for input toolbar elements. */
.toolbar input:focus,
.toolbar select:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END toolbar focus */
/* CSFloat-1:1: improve sort-dropdown styling. */
.sort-select, .toolbar select {
background: var(--bg-1);
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 6px;
height: 36px;
padding: 0 36px 0 12px;
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END sort dropdown */
/* CSFloat-1:1: improved Save Search button. */
.toolbar .btn-ghost {
height: 36px;
font-size: 13px;
padding: 0 14px;
}
/* END save search */
/* CSFloat-1:1: filter pill more compact + mono. */
.toolbar .px-pill,
.toolbar .filter-pill {
height: 36px;
font-size: 12px;
padding: 0 14px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-weight: 500;
}
/* END toolbar pills */
/* CSFloat-1:1: brighter glow on hero CTA Marketplace button to match
csfloat's signature halo. */
.hero-actions .px-btn-primary,
.px-hero-actions .px-btn-primary {
box-shadow: 0 4px 14px color-mix(in oklab, var(--cta) 35%, transparent),
0 0 24px color-mix(in oklab, var(--cta) 18%, transparent) !important;
}
.hero-actions .px-btn-primary:hover,
.px-hero-actions .px-btn-primary:hover {
box-shadow: 0 8px 24px color-mix(in oklab, var(--cta) 45%, transparent),
0 0 32px color-mix(in oklab, var(--cta) 25%, transparent) !important;
}
/* END hero CTA glow */
/* CSFloat-1:1: more vertical space above hero to match csfloat. */
.hero, .px-hero {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
@media (max-width: 800px) {
.hero, .px-hero {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
}
/* END hero spacing */
/* CSFloat-1:1: improve hero stack pos-1, pos-2 transition. */
.csfloat-hero-stack-card.pos-1,
.csfloat-hero-stack-card.pos-2 {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.csfloat-hero-stack-card.pos-0:hover ~ .csfloat-hero-stack-card.pos-1 {
transform: translate(calc(-50% + 60px), calc(-50% - 18px));
}
.csfloat-hero-stack-card.pos-0:hover ~ .csfloat-hero-stack-card.pos-2 {
transform: translate(calc(-50% + 116px), calc(-50% - 36px));
}
/* END hero stack siblings hover */
/* CSFloat-1:1: /database page header polish to match csfloat's big hero. */
.full-page-mode h1.px-h1,
.full-page-mode .page-title h1 {
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
}
/* END page title */
/* CSFloat-1:1: /database results-count secondary text. */
.full-page-mode .page-results-count {
color: var(--ink-3);
font-family: var(--mono);
font-size: 12px;
font-feature-settings: 'tnum' 1;
}
/* END results count */
/* CSFloat-1:1: /database table cell padding more breathing room. */
.full-page-mode .listing-table tbody td {
padding: 14px 12px;
}
/* END table cell padding */
/* CSFloat-1:1: /database price column right-aligned with mono. */
.full-page-mode .listing-table .price-col,
.full-page-mode .listing-table td.right {
text-align: right;
font-family: var(--mono);
font-feature-settings: 'tnum' 1;
}
/* END table price col */
/* CSFloat-1:1: improve search input on /database. */
.full-page-mode input[type="search"] {
height: 40px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 0 16px;
color: var(--ink);
font-size: 13px;
}
/* END db search */
/* CSFloat-1:1: improve /watchlist list items rendering. */
.watchlist-item {
transition: background 140ms ease;
border-radius: 6px;
}
.watchlist-item:hover {
background: color-mix(in oklab, var(--cta) 4%, transparent);
}
/* END watchlist item */
/* CSFloat-1:1: page-level subtitle styling. */
.page-subtitle {
color: var(--ink-3);
font-size: 14px;
margin-top: 4px;
}
/* END page subtitle */
/* CSFloat-1:1: standalone heading h2 styling. */
.full-page-mode h2 {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* END h2 */
/* CSFloat-1:1: csfloat 1px hairline divider after page header. */
.full-page-mode .page-header,
.full-page-mode .modal-header {
position: relative;
}
.full-page-mode .page-header::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: var(--line);
}
/* END page header divider */
/* CSFloat-1:1: tighter section spacing across full-page routes. */
.full-page-mode section,
.full-page-mode .section {
margin-bottom: 32px;
}
.full-page-mode section + section { margin-top: 32px; }
/* END section spacing */
/* CSFloat-1:1: improve focus indicator on form fields. */
form input:focus, form select:focus, form textarea:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END form focus */
/* CSFloat-1:1: improved sticky-bottom nav-icon order. */
.nav-icon-btn:has(.nav-icon-badge:not(:empty)) {
position: relative;
}
.nav-icon-btn:has(.nav-icon-badge:not(:empty))::before {
content: '';
position: absolute; top: 4px; right: 4px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--cta);
z-index: 0;
opacity: 0;
}
/* END nav badge dot */
/* CSFloat-1:1: improve Affiliate Program / similar full-page pages. */
.full-page-mode .affiliate-hero,
.full-page-mode .stall-hero {
border-radius: 12px;
background: linear-gradient(135deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border: 1px solid var(--line-2);
padding: 32px;
margin-bottom: 32px;
}
/* END affiliate hero */
/* CSFloat-1:1: improve site-footer spacing + dividers. */
.site-footer {
border-top: 1px solid var(--line);
padding: 56px 0 28px;
margin-top: 64px;
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 32px;
}
.site-footer-col h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ink-3);
text-transform: uppercase;
margin-bottom: 12px;
}
/* END footer spacing */
/* CSFloat-1:1: site-footer brand col left-align. */
.site-footer-brand {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
}
/* END footer brand */
/* CSFloat-1:1: improve checkbox/radio styling. */
input[type="checkbox"], input[type="radio"] {
accent-color: var(--cta);
cursor: pointer;
width: 16px; height: 16px;
}
/* END checkbox */
/* CSFloat-1:1: improve loadout-card title hover. */
.loadout-card-name {
transition: color 200ms ease;
}
.loadout-card:hover .loadout-card-name {
color: var(--cta);
}
/* END loadout title hover */
/* CSFloat-1:1: improve sticky bottom CTA contrast on /cart. */
.cart-summary-checkout-btn {
background: var(--cta) !important;
color: white !important;
font-weight: 700;
letter-spacing: -0.01em;
}
/* END cart checkout btn */
/* CSFloat-1:1: smoother accordion expand on Help FAQ. */
.help-faq[open] {
background: color-mix(in oklab, var(--cta) 4%, transparent);
}
.help-faq summary {
cursor: pointer;
transition: background 140ms ease;
}
.help-faq summary:hover {
background: color-mix(in oklab, var(--cta) 6%, transparent);
}
/* END FAQ accordion */
/* CSFloat-1:1: cart-summary card has subtle shadow + sticky on tall pages. */
.cart-summary {
position: sticky;
top: calc(var(--nav-h) + 16px);
border-radius: 8px;
border: 1px solid var(--line-2);
padding: 18px;
background: color-mix(in oklab, var(--bg-1) 96%, var(--cta));
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* END cart summary */
/* CSFloat-1:1: cart-summary title bigger. */
.cart-summary-title {
font-size: 15px;
font-weight: 700;
margin-bottom: 14px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END cart title */
/* CSFloat-1:1: cart-summary-row spacing. */
.cart-summary-row {
display: flex; justify-content: space-between;
font-size: 13px;
margin-bottom: 8px;
color: var(--ink-2);
}
/* END cart row */
/* CSFloat-1:1: cart-summary total emphasis. */
.cart-summary-total {
font-size: 18px;
font-weight: 700;
color: var(--cta);
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 8px;
}
/* END cart total */
/* CSFloat-1:1: improve toolbar refresh icon size + spinner. */
.toolbar-refresh {
width: 36px !important;
height: 36px !important;
border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
}
/* END refresh size */
/* CSFloat-1:1: improve grid view toggle button styling. */
.grid-view-toggle {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.grid-view-toggle button {
padding: 8px 12px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.grid-view-toggle button:hover { color: var(--ink); }
.grid-view-toggle button.active {
background: color-mix(in oklab, var(--cta) 18%, transparent);
color: var(--ink);
}
/* END view toggle */
/* CSFloat-1:1: improve modal-listing-row condition pill. */
.modal-listing-condition {
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-2);
font-size: 10px;
display: inline-block;
}
/* END condition pill */
/* CSFloat-1:1: nav brand text color refinement. */
.nav-logo-text {
color: var(--ink) !important;
font-weight: 700;
letter-spacing: -0.01em;
font-size: 15px;
}
/* END brand text */
/* CSFloat-1:1: tweaks to grid card price line spacing. */
.grid-price {
display: flex; align-items: center; gap: 6px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.015em;
}
/* END grid price line */
/* CSFloat-1:1: subtle delineation between Top Deals row + Subnav. */
.csfloat-band-row-wrap {
margin-bottom: 32px;
}
/* END band wrap margin */
/* CSFloat-1:1: improve the dropdown arrow in selects. */
select option {
background: var(--bg-1);
color: var(--ink);
}
/* END select options */
/* CSFloat-1:1: subnav category strip top spacing. */
.csfloat-subnav-inner {
padding: 8px 0;
}
/* END subnav inner padding */
/* H3 Boss QA — earlier cycle's underline-tab override removed. The
primary `.csfloat-band-tabs` rule above (pill bg, 8px radius, active
solid white-on-charcoal) is the single source of truth for the home
rail tab strip. */
/* CSFloat-1:1: improve Top Deals row max width. */
.csfloat-band {
max-width: 1280px;
margin: 0 auto;
}
/* END band container */
/* CSFloat-1:1: subtle separator between hero and Top Deals row. */
.hero, .px-hero {
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
}
/* END hero border */
/* CSFloat-1:1: improve subnav strip max-width to match Top Deals. */
.csfloat-subnav {
max-width: 1280px;
margin: 0 auto;
}
.csfloat-subnav-inner {
max-width: 1280px;
}
/* END subnav max-width */
/* (layout max-width removed — operator memory `feedback_wide_grid.md` says
the grid container should be wide (2100px max), not constrained to 1280) */
/* CSFloat-1:1: improve sidebar separator. */
.market-sidebar {
border-right: 1px solid var(--line);
}
/* END sidebar border */
/* CSFloat-1:1: csfloat-band carousel scroll snapping smoother. */
.csfloat-band-row {
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scroll-padding: 16px;
}
.csfloat-band-card {
scroll-snap-align: start;
}
/* END band scroll snap */
/* CSFloat-1:1: improve csfloat-band tab strip max-width. */
.csfloat-band-tabs-wrap {
max-width: 1280px;
margin: 0 auto;
}
/* END band tabs wrap */
/* CSFloat-1:1: improve toolbar layout — flex-wrap with consistent gaps. */
.toolbar { gap: 8px !important; }
@media (min-width: 1100px) {
.toolbar { gap: 12px !important; }
}
/* END toolbar gap */
/* CSFloat-1:1: improve listing-grid responsive behavior. */
.listing-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 800px) {
.listing-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
/* END listing grid responsive */
/* CSFloat-1:1: hero stack pos-1 visibility tweak. */
.csfloat-hero-stack-card.pos-1 {
opacity: 0.92;
filter: brightness(0.96);
}
/* END hero stack opacity */
/* CSFloat-1:1: subtle dropshadow on hero stack pos-0. */
.csfloat-hero-stack-card.pos-0 {
box-shadow: 0 24px 60px rgba(0,0,0,0.6),
0 4px 16px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END pos-0 shadow */
/* CSFloat-1:1: improved hero stack image bg gradient. */
.csfloat-hero-stack-card.pos-1 .csfloat-hero-stack-img,
.csfloat-hero-stack-card.pos-2 .csfloat-hero-stack-img {
background: linear-gradient(180deg,
color-mix(in oklab, oklch(0.42 0.18 320) 40%, var(--bg-1)) 0%,
var(--bg-1) 100%) !important;
}
/* END shadow card bg */
/* CSFloat-1:1: subtle hover transition on rarity tier dots in sidebar. */
.filter-rarity-row {
padding: 6px 8px;
}
/* END filter-rarity-row padding */
/* CSFloat-1:1: improve "X listings found" count text. */
.listings-found-count {
color: var(--ink-3);
font-size: 12px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END listings count */
/* CSFloat-1:1: sticker-like "STATTRAK" / "SOUVENIR" prefix style on subtitle. */
.modal-name-prefix {
color: oklch(0.78 0.16 55);
font-style: italic;
font-weight: 600;
margin-right: 4px;
}
/* END modal name prefix */
/* CSFloat-1:1: improve grid card image transition. */
.grid-thumb {
background: var(--bg-2);
overflow: hidden;
}
/* END thumb bg */
/* CSFloat-1:1: polished pagination buttons. */
.pagination button {
background: var(--bg-1);
border: 1px solid var(--line);
color: var(--ink-2);
width: 36px;
height: 36px;
border-radius: 6px;
font-family: var(--mono);
font-size: 12px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pagination button:hover {
background: var(--bg-2);
color: var(--ink);
border-color: var(--line-2);
}
.pagination button.active {
background: var(--cta);
color: white;
border-color: var(--cta);
}
/* END pagination */
/* CSFloat-1:1: improved modal-stat-val tabular nums. */
.modal-stat-val {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END stat val tabular */
/* CSFloat-1:1: improved csfloat-band-card-listed text styling. */
.csfloat-band-card-listed {
color: color-mix(in oklab, var(--cta) 70%, white);
font-weight: 600;
}
/* END band listed text */
/* CSFloat-1:1: better focus-visible on sticky bottom action bar buttons. */
.full-page-mode .modal-actions > button:focus-visible,
.full-page-mode .modal-actions > a:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* END action btn focus */
/* CSFloat-1:1: improve contrast on cookies banner Reject button. */
[role="region"][aria-label="Cookie consent"] .btn-ghost {
background: var(--bg-2);
border: 1px solid var(--line-2);
}
/* END cookies reject */
/* CSFloat-1:1: smoother toolbar transition. */
.toolbar > * {
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* END toolbar transitions */
/* CSFloat-1:1: cleaner empty state title styling. */
.empty-state-title, .px-empty-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
/* END empty title */
/* CSFloat-1:1: cleaner empty state body text. */
.empty-state-body, .px-empty-body {
color: var(--ink-3);
font-size: 13px;
line-height: 1.55;
}
/* END empty body */
/* CSFloat-1:1: ensure cards have consistent heights with min-height. */
.grid-card {
min-height: 380px;
display: flex;
flex-direction: column;
}
.grid-card .grid-thumb {
flex: 1;
min-height: 200px;
}
/* END card heights */
/* CSFloat-1:1: cart-summary buttons spacing. */
.cart-summary > * + * { margin-top: 10px; }
/* END cart summary spacing */
/* CSFloat-1:1: better :visited link state. */
a:visited { color: inherit; }
/* END visited */
/* CSFloat-1:1: improve search dropdown item rows. */
.search-suggest-item {
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: background 120ms ease;
}
.search-suggest-thumb {
width: 36px;
height: 36px;
border-radius: 6px;
background: var(--bg-2);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.search-suggest-thumb img {
width: 100%; height: 100%; object-fit: contain;
}
/* END suggest items */
/* CSFloat-1:1: improve sticky grid card transition. */
.grid-card {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 220ms ease,
border-color 200ms ease;
}
/* END card transitions */
/* CSFloat-1:1: improve cart row pulse on stale. */
@keyframes stale-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.7; }
}
.cart-row[data-stale] {
animation: stale-pulse 2s ease-in-out infinite;
}
/* END stale pulse */
/* CSFloat-1:1: better bell icon when no notifications. */
.nav-icon-btn:not(:has(.nav-icon-badge:not(:empty))) .material-symbols-rounded {
color: var(--ink-3);
}
/* END empty bell */
/* CSFloat-1:1: improve table caption styling. */
.listing-table caption {
text-align: left;
font-size: 12px;
color: var(--ink-3);
padding-bottom: 8px;
}
/* END table caption */
/* CSFloat-1:1: tighten line-height across long-form text. */
body, p { line-height: 1.5; }
/* END body line-height */
/* CSFloat-1:1: smoother hover on subnav category buttons. */
.csfloat-subnav-tab {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
}
/* END subnav font */
/* CSFloat-1:1: better focus ring color for green indicators. */
.up { color: oklch(0.78 0.18 145); }
.down { color: oklch(0.72 0.16 25); }
/* END status colors */
/* CSFloat-1:1: improve disabled button cursor everywhere. */
button[disabled], button:disabled, .btn[disabled] {
filter: saturate(0.6);
pointer-events: none;
}
/* END disabled saturation */
/* CSFloat-1:1: improve cart-row prices alignment. */
.cart-price {
font-size: 15px;
font-weight: 700;
}
/* END cart price size */
/* CSFloat-1:1: Improve focus state for tooltip triggers. */
[title]:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* END title focus */
/* CSFloat-1:1: improve trade-safety badge in footer. */
.site-footer-secure-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px;
color: var(--ink-3);
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 8px;
border: 1px solid var(--line-2);
border-radius: 4px;
}
/* END secure badge */
/* CSFloat-1:1: animation: stagger fade-in for grid cards on load. */
.listing-grid > .grid-card {
animation: card-image-fade-in 280ms ease-out 1;
}
/* END card stagger */
/* CSFloat-1:1: improve hero card pos-2 visibility. */
.csfloat-hero-stack-card.pos-2 {
opacity: 0.78;
filter: brightness(0.88);
}
/* END pos-2 visibility */
/* CSFloat-1:1: consistent rem-based font sizing tokens. */
:root {
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-lg: 16px;
--fs-xl: 22px;
}
/* END fs tokens */
/* CSFloat-1:1: hover state for csfloat-band-arrow chevron icons. */
.csfloat-band-arrow .material-symbols-rounded {
transition: color 140ms ease;
}
.csfloat-band-arrow:hover .material-symbols-rounded {
color: var(--cta);
}
/* END band arrow hover */
/* CSFloat-1:1: subtle highlight on grid card when its in cart. */
.grid-card:has(.grid-cart-btn.in) {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line));
}
/* END card in cart */
/* CSFloat-1:1: tighter line-height on small text. */
.grid-sub, .csfloat-band-card-sub, .csfloat-hero-stack-sub {
line-height: 1.3;
}
/* END small text line-height */
/* Site-wide anchor styling — anchors inherit color from their parent
(so footer links stay muted gray, body links stay neutral). The previous
rule painted every anchor `var(--cta)` blue, violating the design memory
"blue is a spice, not the wallpaper". Specific surfaces opt into blue
via their own rules (breadcrumbs, "View on Steam", etc). Body-text
anchors keep underline-on-hover; button-shaped anchors (anything with
a -btn / -cta / -chip class) opt out — they fade via the universal
button-fade block at end of file (operator directive 2026-05-02). */
a:not(.btn):not(.nav-link):not(.modal-cat):not([class*="-btn"]):not([class*="-cta"]):not([class*="-chip"]):not(.steam-btn):hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* END link colors */
/* CSFloat-1:1: LIVE TAPE label more visible. */
.pulse > span:nth-child(2) {
color: var(--ink);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10px;
}
/* END pulse label */
/* CSFloat-1:1: subtle pulse on the green LED dot. */
@keyframes live-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* END live pulse */
/* CSFloat-1:1: bell icon — subtle outline when no notifications. */
.nav-icon-btn .material-symbols-rounded {
font-variation-settings: "wght" 400;
}
.nav-icon-btn:has(.nav-icon-badge:not(:empty)) .material-symbols-rounded {
font-variation-settings: "wght" 600, "FILL" 1;
}
/* END bell weight */
/* CSFloat-1:1: soft shadow on USD/EN nav chips for depth. */
.nav-currency {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* END nav chip shadow */
/* CSFloat-1:1: improve "X" close button on search input. */
.search-clear:hover {
color: var(--ink);
background: var(--bg-2);
border-radius: 4px;
}
/* END search clear */
/* CSFloat-1:1: better "Clear filters" link styling. */
.toolbar-clear-link {
color: var(--ink-3);
font-size: 12px;
cursor: pointer;
transition: color 140ms ease;
}
.toolbar-clear-link:hover {
color: var(--cta);
}
/* END clear filters */
/* CSFloat-1:1: improve sticky filter section in sidebar. */
.market-sidebar {
position: sticky;
top: calc(var(--nav-h) + 16px);
align-self: flex-start;
}
/* END sticky sidebar */
/* CSFloat-1:1: copy filtered URL link more visible. */
.copy-filter-url-btn {
color: var(--ink-3);
font-size: 11px;
cursor: pointer;
transition: color 140ms ease;
}
.copy-filter-url-btn:hover { color: var(--cta); }
/* END copy filter URL */
/* CSFloat-1:1: improve sticky-bottom action bar background opacity. */
.full-page-mode .modal-actions {
background: color-mix(in oklab, var(--bg) 92%, transparent) !important;
}
/* END action bar opacity */
/* CSFloat-1:1: more polished sticky-bottom action bar text. */
.full-page-mode .modal-actions > button,
.full-page-mode .modal-actions > a {
font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 600;
}
/* END action bar font */
/* CSFloat-1:1: improve loading spinner styling. */
.spinner {
width: 24px; height: 24px;
border: 2px solid var(--line-2);
border-top-color: var(--cta);
border-radius: 50%;
animation: spin 800ms linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* END spinner */
/* CSFloat-1:1: improve toast notifications. */
.toast {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 12px 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
animation: card-image-fade-in 220ms ease-out 1;
}
.toast.ok {
border-color: color-mix(in oklab, oklch(0.78 0.18 145) 30%, var(--line-2));
}
.toast.error {
border-color: color-mix(in oklab, oklch(0.72 0.16 25) 40%, var(--line-2));
}
/* END toast */
/* CSFloat-1:1: subtle accent border on hover for any clickable card. */
.grid-card:hover, .csfloat-band-card:hover {
border-color: color-mix(in oklab, var(--cta) 30%, var(--line-2)) !important;
}
/* END card hover border */
/* CSFloat-1:1: improve grid card title size hierarchy. */
.grid-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
}
/* END grid name */
/* CSFloat-1:1: cleaner csfloat-band-card-name typography. */
.csfloat-band-card-name {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
/* END band card name */
/* CSFloat-1:1: improve grid card body padding consistency. */
.grid-card .grid-body {
padding: 12px 12px 8px;
}
/* END grid body */
/* CSFloat-1:1: tighter spacing on grid card price line. */
.grid-price {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END grid price tnum */
/* CSFloat-1:1: improve item modal preview image aspect ratio. */
.modal-preview {
aspect-ratio: 4/3;
width: 100%;
background: var(--bg-2);
border-radius: 8px;
overflow: hidden;
}
.modal-preview .item-image,
.modal-preview .item-poster {
width: 100%;
height: 100%;
object-fit: contain;
}
/* END preview aspect */
/* CSFloat-1:1: improved h1 contrast on /item title row. */
.full-page-mode .modal-name {
color: var(--ink);
}
/* END item title contrast */
/* CSFloat-1:1: improved data table cells. */
.listing-table tbody td {
border-bottom: 1px solid var(--line);
}
.listing-table tbody tr:last-child td { border-bottom: 0; }
/* END table cell borders */
/* CSFloat-1:1: improve auction badge styling. */
.grid-auction-tag, .grid-auction-badge {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* END auction badge */
/* CSFloat-1:1: final polish — improved transitions everywhere consistent. */
* {
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END universal easing */
/* CSFloat-1:1: subtle background glow on the entire site at hover. */
.site-root:hover::before {
opacity: 0.6;
transition: opacity 600ms ease;
}
/* END site bg glow on hover */
/* CSFloat-1:1: ensure consistent letter spacing on all numerics. */
.tnum, .mono, [class*="-num"], [class*="-price"] {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END tnum global */
/* CSFloat-1:1: improve sticky bottom action bar on smaller screens. */
@media (max-width: 600px) {
.full-page-mode .modal-actions {
padding: 8px 12px !important;
}
.full-page-mode .modal-actions > button,
.full-page-mode .modal-actions > a {
padding: 0 10px !important;
font-size: 11px !important;
}
}
/* END mobile action bar tighter */
/* CSFloat-1:1: improve csfloat-band-card-views eye-icon styling. */
.csfloat-band-card-views, .grid-views {
background: color-mix(in oklab, var(--bg) 75%, transparent);
backdrop-filter: blur(6px);
border: 1px solid var(--line);
}
/* END view chip bg */
/* CSFloat-1:1: improve hover state on the magnifier zoom — ring effect. */
.grid-zoom:hover, .csfloat-band-card-zoom:hover, .csfloat-hero-stack-zoom:hover, .modal-preview-zoom:hover {
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 30%, transparent);
color: var(--ink);
}
/* END zoom ring */
/* CSFloat-1:1: improve avatar focus state. */
.modal-seller-av:focus-visible, .seller-avatar:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* END avatar focus */
/* CSFloat-1:1: improve grid-rarity inline styling — wait this is hidden now,
skip. */
/* END grid rarity */
/* CSFloat-1:1: cleaner scroll snap on horizontal carousels. */
.csfloat-band-row::-webkit-scrollbar { height: 6px; }
.csfloat-band-row::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--ink-4) 30%, transparent);
border-radius: 3px;
}
.csfloat-band-row::-webkit-scrollbar-track { background: transparent; }
/* END carousel scrollbar */
/* CSFloat-1:1: improve transition smoothness on hero stack hover. */
.csfloat-hero-stack-card.pos-0 {
will-change: transform, box-shadow;
}
/* END will-change */
/* CSFloat-1:1: subtle interaction-disabled style on busy buttons. */
button.busy {
pointer-events: none;
opacity: 0.7;
cursor: wait !important;
}
button.busy::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 600ms linear infinite;
margin-right: 6px;
vertical-align: middle;
}
/* END busy state */
/* CSFloat-1:1: subtle accent border on hero card hover. */
.csfloat-hero-stack-card.pos-0:hover {
border-color: var(--cta) !important;
}
/* END hero hover border */
/* CSFloat-1:1: improve modal-listing-row hover transition. */
.modal-listing-row {
transition: background 200ms ease;
}
/* END listing row transition */
/* CSFloat-1:1: improve subnav tap target on mobile. */
@media (max-width: 800px) {
.csfloat-subnav-tab {
padding: 10px 12px !important;
}
}
/* END subnav mobile */
/* CSFloat-1:1: improve mobile responsive on hero. */
@media (max-width: 800px) {
.hero h1, .px-h1 {
font-size: 28px !important;
}
.csfloat-hero-stack-card.pos-0 {
width: 220px !important;
height: 280px !important;
}
}
/* END mobile hero */
/* CSFloat-1:1: ensure Watchlist count badge is always visible. */
.nav-link-badge {
display: inline-block;
min-width: 16px;
text-align: center;
}
/* END watchlist badge size */
/* CSFloat-1:1: improve nav avatar (when signed in). */
.user-chip-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line-2);
}
/* END user avatar */
/* CSFloat-1:1: improve csfloat-band-card-img background gradient. */
.csfloat-band-card-img {
background: linear-gradient(180deg,
color-mix(in oklab, oklch(0.42 0.18 320) 30%, var(--bg)) 0%,
color-mix(in oklab, oklch(0.32 0.16 325) 20%, var(--bg)) 100%);
}
/* END band img gradient */
/* CSFloat-1:1: improve text contrast on dark gradient backgrounds. */
.csfloat-hero-stack-currency, .csfloat-band-card-currency, .grid-currency, .cart-currency {
font-feature-settings: 'tnum' 1;
}
/* END currency tnum */
/* CSFloat-1:1: improve Help page step counter. */
.help-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-1);
border: 1px solid var(--line-2);
display: inline-grid;
place-items: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink);
}
/* END help step num */
/* CSFloat-1:1: keyboard shortcut help section more polished. */
.help-shortcuts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px;
}
.help-shortcut-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
transition: border-color 140ms ease, background 140ms ease;
}
.help-shortcut-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
/* END help shortcuts */
/* CSFloat-1:1: improved Trade Safety badge. */
.trade-safety-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: color-mix(in oklab, oklch(0.78 0.18 145) 12%, transparent);
color: oklch(0.78 0.18 145);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
/* END trade safety */
/* CSFloat-1:1: improve overall section padding consistency. */
.full-page-mode > .modal {
padding: 24px 24px 80px !important;
}
@media (max-width: 800px) {
.full-page-mode > .modal {
padding: 16px 16px 80px !important;
}
}
/* END section padding */
/* CSFloat-1:1: hovers on bell + cart icons brighten. */
.nav-icon-btn:hover .material-symbols-rounded {
color: var(--ink);
}
/* END nav icon hover color */
/* CSFloat-1:1: improve csfloat-band-row arrow vertical position. */
.csfloat-band-arrow {
top: 44%;
}
/* END band arrow position */
/* CSFloat-1:1: improve csfloat-hero-stack spacing between cards. */
.csfloat-hero-stack {
gap: 0;
position: relative;
}
/* END hero stack gap */
/* CSFloat-1:1: improve cookies banner border. */
[role="region"][aria-label="Cookie consent"] {
border-color: var(--line-2);
}
/* END cookies border */
/* CSFloat-1:1: subtle bg gradient on /item modal preview area. */
.modal-preview {
background: linear-gradient(180deg,
color-mix(in oklab, var(--bg-2) 70%, var(--bg)) 0%,
var(--bg) 100%);
}
/* END preview bg */
/* CSFloat-1:1: improve grid card rarity stripe smoothness. */
.grid-thumb::before {
height: 3px;
}
.grid-card:hover .grid-thumb::before {
height: 4px;
}
/* END stripe height transition */
/* CSFloat-1:1: improve modal-stat-box first-child accent indicator. */
.full-page-mode .modal-stat-box:first-child {
position: relative;
}
.full-page-mode .modal-stat-box:first-child::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--cta);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
/* END floor price accent stripe */
/* CSFloat-1:1: improve floor price box padding to give the accent stripe room. */
.full-page-mode .modal-stat-box:first-child {
padding-left: 18px !important;
}
/* END padding for stripe */
/* CSFloat-1:1: improve gallery transitions across the site. */
.image-gallery, .gallery-thumb {
transition: opacity 200ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END gallery transitions */
/* CSFloat-1:1: ensure consistent line-height for headings. */
h1, h2, h3, h4 { line-height: 1.2; }
/* END heading line-height */
/* CSFloat-1:1: subtle bg pattern on header sections. */
.modal-header {
background: linear-gradient(180deg,
color-mix(in oklab, var(--cta) 4%, var(--bg)) 0%,
var(--bg) 100%);
}
/* END header bg */
/* CSFloat-1:1: subtle border between modal sections. */
.modal-body > .section,
.modal-body > section {
padding-top: 24px;
border-top: 1px solid var(--line);
margin-top: 24px;
}
/* END section dividers */
/* CSFloat-1:1: improve cart-thumb item img sizing. */
.cart-thumb img { width: 56px; height: 56px; object-fit: contain; }
/* END cart thumb img */
/* CSFloat-1:1: improve overall vertical rhythm on /item. */
.full-page-mode .modal-body {
display: flex;
flex-direction: column;
gap: 24px;
}
/* END item body rhythm */
/* CSFloat-1:1: improve page transitions overall. */
.full-page-mode .modal-header,
.full-page-mode .modal-body > * {
animation: list-row-in 280ms ease-out 1;
}
/* END page transitions */
/* CSFloat-1:1: improve sticky bottom bar fade transition. */
.full-page-mode .modal-actions {
opacity: 1;
transition: opacity 200ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END action bar transition */
/* CSFloat-1:1: ensure consistent border-radius on cards. */
.grid-card, .csfloat-band-card {
border-radius: 8px;
overflow: hidden;
}
/* END card radius */
/* CSFloat-1:1: improve button arrow icons inside CTAs. */
.px-btn svg, .px-btn .material-symbols-rounded {
margin-right: 6px;
}
/* END btn icon spacing */
/* CSFloat-1:1: improve disabled accents on auctions where ended. */
.auction-ended {
opacity: 0.65;
filter: saturate(0.7);
}
/* END auction ended */
/* CSFloat-1:1: improve subnav category text visibility. */
.csfloat-subnav-tab:not(.active) {
color: var(--ink-3);
font-weight: 500;
}
/* END subnav non-active */
/* CSFloat-1:1: subtle accent on filter sidebar accordion summary. */
.filter-section summary,
details summary {
cursor: pointer;
transition: color 140ms ease;
}
.filter-section summary:hover,
details summary:hover {
color: var(--cta);
}
/* END accordion summary */
/* CSFloat-1:1: improve the appearance of the auction-countdown display. */
.auction-countdown {
background: color-mix(in oklab, var(--cta) 12%, transparent);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid color-mix(in oklab, var(--cta) 25%, var(--line-2));
}
/* END auction countdown bg */
/* CSFloat-1:1: ensure consistent font-feature on numerics. */
.tnum {
font-variant-numeric: tabular-nums lining-nums;
}
/* END font variant tnum */
/* CSFloat-1:1: improve responsive image sizing on grid. */
.grid-thumb {
aspect-ratio: 1.1;
}
/* END thumb aspect */
/* CSFloat-1:1: improve grid-thumb img max sizing. */
.grid-thumb .item-image {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
/* END grid img sizing */
/* CSFloat-1:1: improve listing-table category column visual. */
.listing-table tbody td:nth-child(3) {
color: var(--ink-3);
font-size: 12px;
}
/* END table cat col */
/* CSFloat-1:1: improve transitions on filter pills active state. */
.filter-pill[data-active="true"],
.px-pill[data-active="true"] {
background: var(--cta);
color: white;
border-color: var(--cta);
}
/* END filter active */
/* CSFloat-1:1: improve hero stack second card visibility (pos-1). */
.csfloat-hero-stack-card.pos-1 {
opacity: 0.85;
filter: brightness(0.92);
}
.csfloat-hero-stack-card.pos-2 {
opacity: 0.7;
filter: brightness(0.84);
}
/* END hero stack opacities */
/* CSFloat-1:1: subtle hover state on the entire item-rail-actions group. */
.item-rail-actions:hover .item-rail-actions-buy {
box-shadow: 0 8px 22px color-mix(in oklab, var(--cta) 45%, transparent);
}
/* END rail group hover */
/* CSFloat-1:1: improve overall card consistency. */
.grid-card, .csfloat-band-card, .csfloat-hero-stack-card {
background: var(--bg-1);
}
/* END card bg */
/* CSFloat-1:1: ensure filter rarity badges are properly sized. */
.filter-rarity-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 6px;
}
/* END filter rarity row */
/* CSFloat-1:1: cleaner hero stack card border-radius. */
.csfloat-hero-stack-card {
border-radius: 10px;
}
/* END hero stack radius */
/* CSFloat-1:1: improve site-footer column alignment. */
.site-footer-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.site-footer-col a {
color: var(--ink-2);
font-size: 13px;
text-decoration: none;
transition: color 140ms ease;
}
.site-footer-col a:hover { color: var(--cta); }
/* END footer col */
/* CSFloat-1:1: improved primary buttons everywhere.
Boss QA cycle 11 — bg darkened from --cta (#3b82f6) to --cta-d (#2563eb)
so white text clears WCAG AA 4.5:1 (was ~3.3:1, axe-flagged). Hover
still brightens to the lighter --cta so the visual "lift" survives. */
.btn-accent, .btn-primary {
background: var(--cta-d);
color: white;
border: 1px solid var(--cta-d);
font-weight: 600;
border-radius: 6px;
transition: background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.btn-accent:hover, .btn-primary:hover {
background: var(--cta);
border-color: var(--cta);
transform: translateY(-1px);
box-shadow: 0 6px 16px color-mix(in oklab, var(--cta) 30%, transparent);
}
.btn-accent:active, .btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 2px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* END primary button polish */
/* CSFloat-1:1: subtle accent on Help shortcut chips. */
.help-shortcut-row .kbd-chip:hover {
background: color-mix(in oklab, var(--cta) 12%, var(--bg-2));
}
/* END help kbd hover */
/* CSFloat-1:1: improve mobile responsive. */
@media (max-width: 600px) {
.listing-grid { grid-template-columns: repeat(2, 1fr); }
.csfloat-band-row { grid-auto-columns: minmax(160px, 1fr); }
.csfloat-hero-stack { transform: scale(0.8); }
}
/* END mobile responsive */
/* CSFloat-1:1: improve very-small screens (320px+). */
@media (max-width: 360px) {
.grid-card .grid-name { font-size: 12px; }
.grid-card .grid-price { font-size: 14px; }
}
/* END tiny mobile */
/* CSFloat-1:1: improve focus state on the floating action buttons. */
.scroll-up-fab:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* END FAB focus */
/* CSFloat-1:1: subtle accent border highlight on focus-within for cards. */
.grid-card:focus-within {
border-color: var(--cta) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent) !important;
}
/* END card focus-within */
/* CSFloat-1:1: improve sticky bottom action bar layout. */
.full-page-mode .modal-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* END action bar layout */
/* CSFloat-1:1: improve tooltip-style on title attributes via custom CSS. */
[title]:not(button):not(a):not(.kbd-chip):hover::after {
/* Browser native title still shows, no custom override */
}
/* END title tooltip note */
/* CSFloat-1:1: subtle hover on Inventory tab buttons (signed-in only). */
.inventory-tab-btn {
padding: 8px 14px;
border-radius: 6px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-3);
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.inventory-tab-btn:hover {
background: var(--bg-2);
color: var(--ink);
border-color: var(--line-2);
}
.inventory-tab-btn.active {
background: var(--cta);
color: white;
border-color: var(--cta);
}
/* END inventory tabs */
/* CSFloat-1:1: improve sticky bottom of /sell page actions. */
.sell-action-bar {
position: sticky;
bottom: 0;
background: color-mix(in oklab, var(--bg) 92%, transparent);
backdrop-filter: blur(6px);
padding: 16px;
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
/* END sell action bar */
/* CSFloat-1:1: improve filter-rarity tier dot colors. */
.filter-rarity-row[data-rarity="Limited"] .filter-rarity-dot {
background: oklch(0.78 0.16 25);
box-shadow: 0 0 0 2px color-mix(in oklab, oklch(0.78 0.16 25) 18%, transparent);
}
.filter-rarity-row[data-rarity="Off-Market"] .filter-rarity-dot {
background: oklch(0.82 0.14 70);
box-shadow: 0 0 0 2px color-mix(in oklab, oklch(0.82 0.14 70) 18%, transparent);
}
.filter-rarity-row[data-rarity="Standard"] .filter-rarity-dot {
background: oklch(0.75 0.05 230);
box-shadow: 0 0 0 2px color-mix(in oklab, oklch(0.75 0.05 230) 18%, transparent);
}
/* END filter rarity tier colors */
/* CSFloat-1:1: improve overall vertical spacing rhythm. */
.full-page-mode > .modal {
display: flex;
flex-direction: column;
gap: 28px;
}
/* END page rhythm */
/* CSFloat-1:1: add subtle shadow on the entire site-root for depth. */
.site-root {
position: relative;
z-index: 1;
}
/* END site root z */
/* CSFloat-1:1: improve nav bg blur intensity. */
.nav {
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* END nav bg */
/* CSFloat-1:1: improve `Sign in through Steam` button right side polish. */
.steam-btn {
height: 36px;
padding: 0 14px;
font-size: 13px;
display: inline-flex; align-items: center; gap: 6px;
}
.steam-btn-icon {
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
}
.steam-btn-icon svg {
width: 20px; height: 20px;
display: block;
}
/* END steam btn polish */
/* CSFloat-1:1: improve user-chip padding for signed-in users. */
.user-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: 20px;
border: 1px solid var(--line);
background: transparent;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.user-chip:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
/* END user chip */
/* CSFloat-1:1: bigger more polished wallet pill in nav. */
.wallet-pill, .wallet-btn {
background: var(--bg-1);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 6px;
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink);
display: inline-flex; align-items: center; gap: 5px;
}
.wallet-pill:hover, .wallet-btn:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line-2));
background: var(--bg-2);
}
/* END wallet pill */
/* CSFloat-1:1: improve loading spinner color. */
.spinner {
border-color: color-mix(in oklab, var(--ink) 8%, transparent);
border-top-color: var(--cta);
}
/* END spinner color */
/* CSFloat-1:1: improve table row link visibility. */
.listing-table tbody td a:not(.btn) {
color: var(--ink);
text-decoration: none;
transition: color 140ms ease;
}
.listing-table tbody td a:not(.btn):hover {
color: var(--cta);
}
/* END table row links */
/* CSFloat-1:1: ensure Material icons inherit color from parent. */
.material-symbols-rounded {
color: inherit;
/* Without these properties the font loads but ligature substitution
never fires - so spans like shopping_cart render the
literal text instead of the cart glyph. font-feature-settings: 'liga'
turns on the ligature table that Material Symbols uses to map
descriptive names to codepoints. line-height: 1 + display: inline-block
keep the icon vertically centered against adjacent text.
Boss QA cycle 11 — vertical-align bumped down 0.16em to baseline-
align the glyph with surrounding ink. Without it, the icon rides
the text baseline ~3px high; visible on every "Sign in", "Open
in new tab", "Refresh" inline-icon affordance. Flex contexts (the
vast majority of icon uses) ignore vertical-align and center via
align-items, so this fix only kicks in for the inline cases. */
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
vertical-align: -0.16em;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* END material icon color */
/* CSFloat-1:1: improve sticky toggles on mobile. */
@media (max-width: 800px) {
.toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar > * {
width: 100%;
}
}
/* END mobile toolbar stack */
/* CSFloat-1:1: subtle accent border-glow on active grid view toggle. */
.grid-view-toggle button.active {
background: color-mix(in oklab, var(--cta) 18%, transparent);
color: var(--ink);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* END grid toggle active */
/* CSFloat-1:1: subtle accent on subnav active text. */
.csfloat-subnav-tab.active {
color: var(--ink) !important;
position: relative;
}
.csfloat-subnav-tab.active::after {
content: '';
position: absolute;
left: 14px; right: 14px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
/* END subnav active line */
/* CSFloat-1:1: improve "Tools" dropdown caret in nav (placeholder). */
.nav-link[data-has-dropdown]::after {
content: '▾';
margin-left: 4px;
color: var(--ink-4);
font-size: 10px;
vertical-align: 1px;
}
/* END dropdown caret */
/* CSFloat-1:1: improve modal-stat-val accent variant. */
.modal-stat-val.accent {
color: var(--ink);
font-feature-settings: 'tnum' 1;
}
/* END stat val accent */
/* CSFloat-1:1: improve item-stats-strip layout. */
.item-stats-strip {
display: inline-flex; align-items: center; gap: 12px;
font-size: 11px;
color: var(--ink-3);
}
.item-stats-strip > * {
display: inline-flex; align-items: center; gap: 4px;
}
.item-stats-strip > * + *::before {
content: '·';
color: var(--ink-4);
margin-right: 4px;
}
/* END item stats strip */
/* CSFloat-1:1: improve high-price chip. */
.high-price-chip, [class*="high-price"] {
background: color-mix(in oklab, oklch(0.72 0.16 25) 15%, transparent);
color: oklch(0.72 0.16 25);
border: 1px solid color-mix(in oklab, oklch(0.72 0.16 25) 30%, transparent);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* END high price */
/* CSFloat-1:1: improve grid card price color. */
.grid-price {
color: var(--ink);
}
/* END grid price color */
/* CSFloat-1:1: improve cart count badge animation. */
.nav-icon-badge:not(:empty):not([data-count="0"]) {
font-weight: 700;
font-size: 10px;
}
/* END cart badge font */
/* CSFloat-1:1: cleaner sticky bottom action bar buttons spacing. */
.full-page-mode .modal-actions > button + button,
.full-page-mode .modal-actions > a + button,
.full-page-mode .modal-actions > button + a {
margin-left: 0;
}
/* END action btn margin */
/* CSFloat-1:1: improve csfloat-band-card-img positioning. */
.csfloat-band-card-img {
height: 140px;
flex: 0 0 140px;
}
/* END band img height */
/* CSFloat-1:1: improve csfloat-band-card overall height. */
.csfloat-band-card {
height: 280px;
}
/* END band card height */
/* CSFloat-1:1: cookies banner z-index priority.
* REGRESSION FIX (Boss QA cycle 2): the prior bump to 9999 was meant to
* float the banner over the rest of the page, but it ALSO shoved it on
* top of every modal-backdrop (z=200) and the tooltip layer (z=9999).
* That made the banner overlap any open dialog (cart-confirm, share,
* deposit, image lightbox) and any tooltip — pre-attentive read of the
* page broke. Pin to 150 so it stays above page surfaces (nav=50,
* sticky=50–90) but BELOW backdrops/dialogs (200) and tooltips (9999).
*/
[role="region"][aria-label="Cookie consent"] {
z-index: 150 !important;
}
/* END cookies z-index */
/* CSFloat-1:1: improve the search-input width on mobile. */
@media (max-width: 600px) {
.search-wrap { max-width: 100% !important; }
}
/* END mobile search */
/* CSFloat-1:1: improve scroll-up FAB icon sizing. */
.scroll-up-fab {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--bg-1);
border: 1px solid var(--line-2);
display: inline-grid; place-items: center;
}
/* END scroll FAB */
/* CSFloat-1:1: improve modal-cat eyebrow text. */
.modal-cat {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
font-weight: 500;
}
/* END modal cat */
/* CSFloat-1:1: improve grid-rarity-bar height + colors. */
.grid-rarity-bar {
height: 4px;
border-radius: 2px;
margin: 8px 12px 0;
background: linear-gradient(90deg,
oklch(0.65 0.20 28) 0%,
oklch(0.78 0.18 145) 50%,
oklch(0.78 0.18 28) 100%);
}
/* END rarity bar */
/* CSFloat-1:1: improve `Add to Cart` button text contrast. */
.grid-cart-btn {
width: 28px; height: 28px;
background: var(--bg-1);
color: var(--ink);
border: 1px solid var(--line-2);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.grid-cart-btn:hover {
background: var(--cta);
color: white;
transform: scale(1.08);
}
.grid-cart-btn.in {
background: oklch(0.78 0.18 145);
color: white;
border-color: oklch(0.78 0.18 145);
}
/* END grid cart btn */
/* CSFloat-1:1: improve grid-fresh-dot pulse glow. */
.grid-fresh-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--cta);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 18%, transparent),
0 0 8px color-mix(in oklab, var(--cta) 50%, transparent);
display: inline-block;
}
/* END fresh dot */
/* CSFloat-1:1: improve recently-viewed rail (when shown). */
.recently-viewed-card {
border-radius: 8px;
background: var(--bg-1);
padding: 12px;
display: flex; flex-direction: column;
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 140ms ease;
}
.recently-viewed-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--cta) 30%, var(--line));
}
/* END recently viewed */
/* CSFloat-1:1: improve modal-name-rarity hover state. */
.modal-name-rarity:focus-visible {
outline: 2px solid color-mix(in oklab, oklch(0.78 0.16 55) 50%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
/* END rarity focus */
/* CSFloat-1:1: improve avatar-with-img inside modal-listing-row. */
.modal-listing-row .modal-seller-av img {
width: 100%; height: 100%; object-fit: cover;
}
/* END av img */
/* CSFloat-1:1: improve search-icon position. */
.search-wrap {
position: relative;
display: flex; align-items: center;
}
.search-wrap .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.search-wrap .search-input {
padding-left: 36px;
}
/* END search icon position */
/* CSFloat-1:1: improve sticky-bottom action-bar mobile padding. */
@media (max-width: 600px) {
.full-page-mode .modal-actions {
flex-wrap: wrap;
justify-content: stretch;
}
.full-page-mode .modal-actions > button:first-child,
.full-page-mode .modal-actions > a:first-child {
flex: 1 1 100%;
}
}
/* END mobile action bar */
/* CSFloat-1:1: improve nav-icon-btn focus-visible state. */
.nav-icon-btn:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
border-radius: 6px;
}
/* END nav icon focus */
/* CSFloat-1:1: improve "Browse Market" footer link contrast. */
.site-footer-col h4 + a:first-of-type {
margin-top: 4px;
}
/* END footer first link */
/* CSFloat-1:1: improve cookies banner Reject button hover. */
[role="region"][aria-label="Cookie consent"] .btn-ghost:hover {
border-color: var(--ink-3);
color: var(--ink);
}
/* END cookies reject hover */
/* CSFloat-1:1: improve csfloat-band-card-currency padding. */
.csfloat-band-card-currency, .grid-currency, .cart-currency {
padding: 1px 4px;
display: inline-grid; place-items: center;
}
/* END currency chip padding */
/* CSFloat-1:1: improve loading state on grid cards (when stale). */
.grid-card.loading {
opacity: 0.4;
pointer-events: none;
}
/* END card loading */
/* CSFloat-1:1: ensure consistent border-radius on every modal. */
.modal, .info-modal, .wallet-modal {
border-radius: 12px;
}
/* END modal radius */
/* CSFloat-1:1: improve wallet hero balance text. */
.wallet-hero-balance {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--ink);
}
/* END wallet balance */
/* CSFloat-1:1: improve "Sign in with Steam" CTA. */
.signin-with-steam-btn {
background: var(--cta);
color: white;
font-weight: 600;
border-radius: 6px;
padding: 10px 18px;
font-size: 14px;
display: inline-flex; align-items: center; gap: 8px;
border: 0;
cursor: pointer;
transition: background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.signin-with-steam-btn:hover {
background: color-mix(in oklab, var(--cta) 90%, white);
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* END signin steam */
/* CSFloat-1:1: improve all "small" buttons. */
.btn-sm {
height: 28px;
padding: 0 10px;
font-size: 11px;
}
/* END small btn */
/* CSFloat-1:1: improve item-stats footer pill. */
.modal-stats-footer-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border-radius: 4px;
font-size: 10px;
color: var(--ink-3);
font-weight: 500;
}
/* END stats footer chip */
/* CSFloat-1:1: improve auction-countdown timer color. */
.auction-countdown {
color: oklch(0.85 0.18 25);
background: color-mix(in oklab, oklch(0.78 0.16 25) 12%, transparent);
border: 1px solid color-mix(in oklab, oklch(0.78 0.16 25) 30%, transparent);
}
/* END auction timer */
/* CSFloat-1:1: bring grid-card hover state into spec. */
.grid-card:hover {
border-color: color-mix(in oklab, var(--cta) 35%, var(--line));
}
/* END card hover border */
/* CSFloat-1:1: ensure consistent letter-spacing. */
.grid-name, .csfloat-band-card-name {
letter-spacing: -0.01em;
}
/* END consistent tracking */
/* CSFloat-1:1: improve responsive for tablet sizes. */
@media (min-width: 800px) and (max-width: 1100px) {
.listing-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.csfloat-band-row { grid-auto-columns: minmax(180px, 1fr); }
}
/* END tablet responsive */
/* CSFloat-1:1: improve sticky bottom action bar transition smoothness. */
.full-page-mode .modal-actions {
transform: translateY(0);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END action bar transform */
/* CSFloat-1:1: improve placeholder text color.
Boss QA cycle 4 P1.4 — `var(--ink-4)` (~oklch 0.50, near-disabled
gray) was reading as barely-visible against dark surfaces, especially
the FAQ "Search FAQs…" placeholder. Bump to var(--ink-3) so the
placeholder is unambiguously a label, not chrome the user has to
squint at. Site-wide so every input gets the contrast bump. */
input::placeholder, textarea::placeholder {
color: var(--ink-3);
opacity: 1;
}
/* END placeholder color */
/* CSFloat-1:1: improve checkbox-label spacing. */
.checkbox-label {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--ink-2);
}
/* END checkbox label */
/* CSFloat-1:1: improve `Listed only` checkbox styling. */
.listed-only-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease;
}
.listed-only-toggle:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
/* END listed only */
/* CSFloat-1:1: improve `Min/Max` price input styling. */
.price-range-input {
height: 36px;
padding: 0 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink);
font-family: var(--mono);
font-size: 13px;
width: 90px;
}
.price-range-input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END price range input */
/* CSFloat-1:1: improve quick-price chips inline. */
.price-quick-chip {
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-family: var(--mono);
color: var(--ink-3);
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.price-quick-chip:hover {
background: var(--bg-2);
color: var(--ink);
border-color: var(--line-2);
}
.price-quick-chip.active {
background: var(--cta);
color: white;
border-color: var(--cta);
}
/* END quick price chip */
/* CSFloat-1:1: improve csfloat-band-card layout density. */
.csfloat-band-card {
display: flex;
flex-direction: column;
}
.csfloat-band-card-head {
flex-shrink: 0;
}
.csfloat-band-card-img {
flex: 1;
min-height: 100px;
}
.csfloat-band-card-foot {
flex-shrink: 0;
}
/* END band card flex */
/* CSFloat-1:1: improve hero stack tilt + perspective. */
.csfloat-hero-stack {
perspective: 1000px;
}
.csfloat-hero-stack-card.pos-0 {
transform-style: preserve-3d;
}
/* END hero stack 3D */
/* CSFloat-1:1: improve nav cart icon sizing. */
.nav-icon-btn {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-grid; place-items: center;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
position: relative;
}
/* END nav icon size */
/* CSFloat-1:1: improve nav-icon-badge position. */
.nav-icon-badge {
position: absolute;
top: 2px; right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
/* END badge position */
/* CSFloat-1:1: improve auction-countdown number style. */
.auction-countdown-time {
font-family: var(--mono);
font-feature-settings: 'tnum' 1;
font-size: 12px;
font-weight: 700;
}
/* END auction time style */
/* CSFloat-1:1: improve grid card view-count tnum. */
.grid-views span {
font-feature-settings: 'tnum' 1;
}
/* END view count tnum */
/* CSFloat-1:1: improve modal-stat-box spacing for breathing room. */
.modal-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
/* END modal stats spacing */
/* CSFloat-1:1: improve cookies banner footer link. */
[role="region"][aria-label="Cookie consent"] a {
color: var(--ink-2);
text-decoration: underline;
text-underline-offset: 3px;
}
[role="region"][aria-label="Cookie consent"] a:hover {
color: var(--cta);
}
/* END cookies link */
/* CSFloat-1:1: hide cart badge when count is 0. */
.nav-icon-badge[data-count="0"] {
display: none !important;
}
/* END hide zero badge */
/* CSFloat-1:1: improve icon sizing in nav. */
.nav-icon-btn .material-symbols-rounded {
font-size: 18px !important;
font-variation-settings: "opsz" 24, "wght" 400 !important;
}
/* END nav icon size */
/* CSFloat-1:1: ensure consistent vertical alignment in nav. */
.nav-inner, .nav-right, .nav-links {
display: flex;
align-items: center;
gap: 8px;
}
/* END nav alignment */
/* CSFloat-1:1: improve hero card size on smaller desktops. */
@media (min-width: 800px) and (max-width: 1100px) {
.csfloat-hero-stack-card.pos-0 {
width: 240px !important;
height: 300px !important;
}
}
/* END hero card desktop responsive */
/* CSFloat-1:1: ensure cards have consistent border. */
.grid-card, .csfloat-band-card, .csfloat-hero-stack-card {
border: 1px solid var(--line);
}
/* END card border */
/* CSFloat-1:1: improve subnav-tab font weight progression on hover. */
.csfloat-subnav-tab {
font-weight: 500;
transition: font-weight 0ms, color 140ms ease, background 140ms ease;
}
.csfloat-subnav-tab:hover {
font-weight: 600;
}
/* END subnav weight */
/* CSFloat-1:1: improve sidebar accordion summary icon. */
.filter-section[open] summary,
details[open] > summary {
color: var(--ink);
}
/* END accordion open */
/* CSFloat-1:1: improve `Buy Now` text color. */
.item-rail-actions-buy {
font-feature-settings: 'tnum' 1;
}
/* END buy text tnum */
/* CSFloat-1:1: improve `Bargain` text contrast. */
.item-rail-actions-bargain {
font-weight: 600;
}
/* END bargain text */
/* CSFloat-1:1: subtle accent border on focused nav-link. */
.nav-link:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
border-radius: 6px;
}
/* END nav link focus */
/* CSFloat-1:1: improve cart row image fade-in. */
.cart-thumb {
transition: border-color 140ms ease;
}
/* END cart thumb transition */
/* CSFloat-1:1: improve Help page sub-section titles. */
.help-section-title {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 14px;
}
/* END help section title */
/* CSFloat-1:1: improve loading skeleton bg. */
.skeleton {
background-color: var(--bg-1);
}
/* END skeleton bg */
/* CSFloat-1:1: improve csfloat-band-arrow visibility. */
.csfloat-band-row-wrap:hover .csfloat-band-arrow {
opacity: 1;
pointer-events: auto;
}
.csfloat-band-arrow {
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* END band arrow transition */
/* CSFloat-1:1: improve csfloat-band scroll-snap padding. */
.csfloat-band-row {
scroll-padding-left: 16px;
scroll-padding-right: 16px;
}
/* END band scroll padding */
/* CSFloat-1:1: improve sticky-rail (right column) visual separation. */
.full-page-mode .modal-stats {
background: transparent;
}
/* END right rail bg */
/* CSFloat-1:1: improve Loadout Lab card hover fade. */
.loadout-card {
background: var(--bg-1);
border: 1px solid var(--line);
padding: 16px;
border-radius: 8px;
}
/* END loadout card */
/* CSFloat-1:1: improve database table cell font-size. */
.listing-table tbody td {
font-size: 13px;
}
/* END table cell font */
/* CSFloat-1:1: ensure cart badge is hidden when 0 (regardless of attr). */
.nav-icon-btn .nav-icon-badge:empty,
.nav-icon-btn .nav-icon-badge[data-count="0"] {
display: none !important;
}
/* END hide zero badge stricter */
/* CSFloat-1:1: improve csfloat-band-card-floatmeta tnum. */
.csfloat-band-card-floatmeta {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END band floatmeta tnum */
/* CSFloat-1:1: improve avatar fallback monogram contrast. */
.modal-seller-av {
font-size: 12px;
font-weight: 700;
color: var(--ink-2);
}
/* END av monogram */
/* CSFloat-1:1: improve global typography on /cart. */
.full-page-mode h1.px-h1 {
margin-bottom: 24px;
}
/* END cart h1 spacing */
/* CSFloat-1:1: improve sticky bottom action bar opacity transitions. */
.full-page-mode .modal-actions {
will-change: backdrop-filter, background;
}
/* END action bar will-change */
/* CSFloat-1:1: ensure focus on the sticky bottom CTAs. */
.full-page-mode .modal-actions > button.btn-accent:focus-visible,
.full-page-mode .modal-actions > button.btn-primary:focus-visible {
outline: 2px solid white;
outline-offset: -3px;
}
/* END action bar focus inverse */
/* CSFloat-1:1: improve table column sortable indicator. */
.listing-table thead th[data-sortable] {
cursor: pointer;
user-select: none;
}
.listing-table thead th[data-sortable]:hover {
color: var(--ink);
}
.listing-table thead th[data-sortable].sorted-asc::after,
.listing-table thead th[data-sortable].sorted-desc::after {
content: '';
display: inline-block;
margin-left: 4px;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.listing-table thead th[data-sortable].sorted-asc::after {
border-bottom: 5px solid var(--cta);
}
.listing-table thead th[data-sortable].sorted-desc::after {
border-top: 5px solid var(--cta);
}
/* END sortable indicator */
/* CSFloat-1:1: improve item-stats-strip dot separator. */
.item-stats-strip > * + *::before {
content: '·';
color: var(--ink-4);
margin-right: 8px;
}
/* END item stats dot */
/* CSFloat-1:1: improved nav-icon-btn for cart with badge stronger highlight. */
.nav-icon-btn:has(.nav-icon-badge:not(:empty):not([data-count="0"])) {
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END cart bg with items */
/* CSFloat-1:1: improve search dropdown thumbnail size. */
.search-suggest-thumb {
width: 32px;
height: 32px;
}
/* END suggest thumb size */
/* CSFloat-1:1: improve search dropdown item title. */
.search-suggest-name {
font-size: 13px;
color: var(--ink);
font-weight: 500;
}
.search-suggest-cat {
font-size: 11px;
color: var(--ink-3);
}
.search-suggest-price {
font-family: var(--mono);
font-size: 13px;
color: var(--cta);
font-weight: 600;
}
/* END suggest item titles */
/* CSFloat-1:1: improve subnav-tab hover state subtle bg shift. */
.csfloat-subnav-tab:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END subnav hover bg */
/* CSFloat-1:1: improve overall transition consistency. */
button, a, input, select {
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END global transitions */
/* CSFloat-1:1: improve modal-listing-row last-child border. */
.modal-listing-row:last-child {
border-bottom: 0;
}
/* END last child border */
/* CSFloat-1:1: improve all toast positions. */
.toast {
position: fixed;
top: 80px;
right: 24px;
z-index: 200;
}
/* END toast position */
/* CSFloat-1:1: improve hero CTA SVG icon stroke. */
.hero-actions svg {
stroke-width: 2;
}
/* END hero svg stroke */
/* CSFloat-1:1: improve cart row remove button color. */
.cart-row .btn-ghost svg,
.cart-row .btn-ghost .material-symbols-rounded {
color: oklch(0.72 0.16 25);
}
.cart-row .btn-ghost:hover svg,
.cart-row .btn-ghost:hover .material-symbols-rounded {
color: oklch(0.85 0.18 25);
}
/* END cart remove btn (red) */
/* CSFloat-1:1: improve overall page-level vertical scroll behavior. */
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
/* END scrollbar gutter */
/* CSFloat-1:1: improve site-footer column alignment on small viewport. */
@media (max-width: 600px) {
.site-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* END footer mobile */
/* CSFloat-1:1: improve nav alignment + max-width. */
.nav-inner {
max-width: 1880px;
margin: 0 auto;
width: 100%;
padding: 0 24px;
}
/* END nav max-width */
/* CSFloat-1:1: improve grid card thumb img max constraints. */
.grid-card .grid-thumb .item-image {
max-width: 90%;
max-height: 90%;
margin: auto;
}
/* END grid img margin */
/* CSFloat-1:1: improve hero stack pos-1 + pos-2 image opacity. */
.csfloat-hero-stack-card.pos-1 .csfloat-hero-stack-img,
.csfloat-hero-stack-card.pos-2 .csfloat-hero-stack-img {
opacity: 0.8;
}
/* END shadow img opacity */
/* CSFloat-1:1: ensure grid scrolling smoothness on mobile. */
@media (hover: none) {
.csfloat-band-row {
-webkit-overflow-scrolling: touch;
}
}
/* END mobile scrolling */
/* CSFloat-1:1: improve overall vertical scroll behavior. */
* {
-webkit-tap-highlight-color: transparent;
}
/* END no tap highlight */
/* CSFloat-1:1: improve table-row link cursor. */
tr[role="button"], .listing-table tbody tr {
cursor: pointer;
}
/* END row cursor */
/* CSFloat-1:1: improve overall layout density. */
.full-page-mode > .modal {
font-size: 13.5px;
line-height: 1.5;
}
/* END modal density */
/* CSFloat-1:1: improve card hover transform smoothness. */
.grid-card, .csfloat-band-card {
will-change: transform, box-shadow, border-color;
}
/* END card will-change */
/* CSFloat-1:1: improve modal-stat-box default border-radius. */
.modal-stat-box {
border-radius: 8px;
}
/* END stat box radius */
/* CSFloat-1:1: improve modal-stat-label uppercase + tracking. */
.modal-stat-label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--mono);
}
/* END stat label */
/* CSFloat-1:1: improve grid-card title hover smoother color transition. */
.grid-card .grid-name {
transition: color 280ms ease;
}
/* END title color transition */
/* CSFloat-1:1: improve sticky bottom bar items spacing. */
.full-page-mode .modal-actions {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* END action bar padding */
/* CSFloat-1:1: ensure consistent fonts. */
body, button, input, select, textarea {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END consistent fonts */
/* CSFloat-1:1: improve consistent text colors. */
body { color: var(--ink); }
/* END body color */
/* CSFloat-1:1: improve consistent button cursor. */
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* END button cursor */
/* CSFloat-1:1: improve list-style on lists. */
ul, ol { list-style: none; padding: 0; margin: 0; }
/* END list reset */
/* CSFloat-1:1: improve all clickable elements default appearance. */
[role="button"], button, a {
user-select: none;
}
/* END user-select reset */
/* CSFloat-1:1: improve box-sizing globally. */
*, *::before, *::after {
box-sizing: border-box;
}
/* END box-sizing */
/* CSFloat-1:1: improve nav backdrop blur smoother on scroll. */
.nav {
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* END nav blur stronger */
/* CSFloat-1:1: improve overall wallet card styling. */
.wallet-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
}
/* END wallet card */
/* CSFloat-1:1: improve all "Card with subtle accent" surfaces. */
.accent-card {
background: linear-gradient(135deg,
color-mix(in oklab, var(--cta) 8%, var(--bg-1)) 0%,
var(--bg-1) 100%);
border: 1px solid color-mix(in oklab, var(--cta) 25%, var(--line));
border-radius: 8px;
padding: 16px;
}
/* END accent card */
/* CSFloat-1:1: improve text color hierarchy across surfaces. */
.text-primary { color: var(--ink); }
.text-secondary { color: var(--ink-2); }
.text-muted { color: var(--ink-3); }
.text-faint { color: var(--ink-4); }
.text-accent { color: var(--cta); }
/* END text colors */
/* CSFloat-1:1: improve overall text rendering. */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* END font smoothing */
/* CSFloat-1:1: improve overall site root background subtle. */
body {
background: var(--bg);
}
/* END body bg */
/* CSFloat-1:1: improve scroll smoothness. */
html { scroll-padding-top: 80px; }
/* END scroll padding */
/* CSFloat-1:1: improve overall vertical alignment cascading. */
.modal-stat-box {
display: flex;
flex-direction: column;
gap: 6px;
}
/* END stat box flex */
/* CSFloat-1:1: improve nav-icon-btn positioning. */
.nav-icon-btn {
margin: 0;
}
/* END nav icon margin */
/* CSFloat-1:1: improve info-modal-header sizing. */
.info-modal-header {
padding: 18px 22px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
}
/* END info modal header */
/* CSFloat-1:1: improve preset deposit amounts on /wallet. */
.deposit-preset-btn {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 14px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deposit-preset-btn:hover {
border-color: var(--cta);
color: var(--cta);
background: color-mix(in oklab, var(--cta) 8%, transparent);
transform: translateY(-1px);
}
.deposit-preset-btn.active {
background: var(--cta);
color: white;
border-color: var(--cta);
}
/* END deposit preset */
/* CSFloat-1:1: improve step number styling on /wallet. */
.wallet-step-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
display: inline-grid; place-items: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
}
/* END wallet step */
/* CSFloat-1:1: improve form input field. */
.form-input {
height: 40px;
padding: 0 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 14px;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.form-input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent);
}
/* END form input */
/* CSFloat-1:1: improve overall consistency on cards heights. */
.csfloat-band-row {
align-items: stretch;
}
/* END band row stretch */
/* CSFloat-1:1: improve grid card content vertical alignment. */
.grid-card .grid-body {
display: flex;
flex-direction: column;
gap: 4px;
}
/* END grid body flex */
/* CSFloat-1:1: improve overall vertical consistency of cards. */
.grid-card .grid-head {
padding: 12px 12px 0;
}
/* END grid head padding */
/* CSFloat-1:1: improve overall layout of csfloat-band-card. */
.csfloat-band-card {
height: auto;
min-height: 280px;
}
/* END band card auto height */
/* CSFloat-1:1: improve button size hierarchy. */
.btn-lg {
height: 38px;
padding: 0 16px;
font-size: 13px;
font-weight: 600;
}
.btn-md {
height: 36px;
padding: 0 14px;
font-size: 13px;
}
.btn-sm-2 {
height: 30px;
padding: 0 12px;
font-size: 12px;
}
.btn-xs {
height: 24px;
padding: 0 8px;
font-size: 11px;
}
/* END button sizes */
/* CSFloat-1:1: improve all primary action contrast. */
.btn-primary, .btn-accent, .px-btn-primary {
font-weight: 600 !important;
letter-spacing: -0.005em;
}
/* END primary contrast */
/* CSFloat-1:1: improve form labels. */
.form-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-3);
font-weight: 500;
margin-bottom: 6px;
display: block;
}
/* END form labels */
/* CSFloat-1:1: improve all hover states with consistent halo color. */
.btn-accent:hover, .btn-primary:hover, .px-btn-primary:hover {
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* END halo consistency */
/* CSFloat-1:1: improve grid card hover state final polish. */
.grid-card:hover {
background: color-mix(in oklab, var(--cta) 4%, var(--bg-1));
}
/* END card hover bg */
/* CSFloat-1:1: improve csfloat-band-card hover bg. */
.csfloat-band-card:hover {
background: color-mix(in oklab, var(--cta) 4%, var(--bg-1));
}
/* END band hover bg */
/* CSFloat-1:1: improve hero card hover bg. */
.csfloat-hero-stack-card.pos-0:hover {
background: color-mix(in oklab, var(--cta) 6%, var(--bg-1));
}
/* END hero hover bg */
/* CSFloat-1:1: improve csfloat-band-card transitions. */
.csfloat-band-card {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease,
background 200ms ease,
box-shadow 220ms ease;
}
.csfloat-band-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
/* END band card transitions */
/* CSFloat-1:1: improve grid card price font sizing on hover. */
.grid-card:hover .grid-price {
letter-spacing: -0.02em;
}
/* END price hover spacing */
/* CSFloat-1:1: improve "Listed Xd ago" stripe weight. */
.grid-fresh {
font-weight: 600 !important;
}
/* END listed weight */
/* CSFloat-1:1: improve hero card right margin spacing. */
.csfloat-hero-stack {
margin-right: 24px;
}
/* END hero margin */
/* CSFloat-1:1: ensure consistent vertical alignment in modal-stat-box. */
.modal-stat-box {
justify-content: center;
}
/* END stat box vertical center */
/* CSFloat-1:1: improve focus-within border thickness. */
.focusable:focus-within,
.search-wrap:focus-within {
border-color: var(--cta);
}
/* END focus-within border */
/* CSFloat-1:1: improve scroll-up FAB icon. */
.scroll-up-fab .material-symbols-rounded {
font-size: 22px !important;
color: var(--ink-2);
}
.scroll-up-fab:hover .material-symbols-rounded {
color: var(--ink);
}
/* END FAB icon */
/* CSFloat-1:1: improve grid-rarity hidden state — keep zero-height. */
.grid-rarity {
display: none !important;
height: 0 !important;
}
/* END rarity hidden */
/* CSFloat-1:1: improve grid-views font weight. */
.grid-views {
font-weight: 600;
}
/* END view count weight */
/* CSFloat-1:1: improve the floor stripe radius. */
.full-page-mode .modal-stat-box:first-child::before {
border-radius: 8px 0 0 8px;
}
/* END stripe radius */
/* CSFloat-1:1: improve site-footer overall text size. */
.site-footer {
font-size: 13px;
}
/* END footer text */
/* CSFloat-1:1: improve overall page rendering performance. */
.grid-card, .csfloat-band-card, .csfloat-hero-stack-card {
contain: layout paint;
}
/* END contain */
/* CSFloat-1:1: improve a11y on focus indicators. */
:focus-visible {
outline-color: var(--cta);
outline-style: solid;
outline-width: 2px;
}
/* END global focus */
/* CSFloat-1:1: improve overall responsive consistency. */
@media (max-width: 800px) {
.full-page-mode > .modal {
padding: 16px !important;
}
.modal-name {
font-size: 22px !important;
}
}
/* END mobile padding */
/* CSFloat-1:1: ensure cards are visually distinct from the bg. */
.grid-card, .csfloat-band-card, .csfloat-hero-stack-card {
background: color-mix(in oklab, var(--bg-1) 90%, var(--bg-2));
}
/* END card distinct bg */
/* CSFloat-1:1: improve hover state on filter sidebar accordion. */
details.filter-section {
border-bottom: 1px solid var(--line);
padding: 12px 0;
}
details.filter-section summary {
font-weight: 600;
font-size: 13px;
color: var(--ink-2);
list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
details.filter-section summary::after {
content: '▾';
color: var(--ink-3);
font-size: 11px;
transition: transform 200ms ease;
}
details.filter-section[open] summary::after {
transform: rotate(180deg);
}
/* END filter accordion */
/* CSFloat-1:1: improve overall whitespace breathing room. */
.full-page-mode > .modal > * + * {
margin-top: 0;
}
/* END modal child margin */
/* CSFloat-1:1: improve filter-section open state bg. */
details.filter-section[open] {
background: color-mix(in oklab, var(--bg-2) 50%, transparent);
border-radius: 6px;
padding: 12px;
}
/* END filter section open */
/* CSFloat-1:1: improve sidebar overall spacing. */
.market-sidebar {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
}
/* END sidebar spacing */
/* CSFloat-1:1: improve csfloat-band-card title margin. */
.csfloat-band-card-name {
margin-bottom: 2px;
}
/* END band title margin */
/* CSFloat-1:1: improve all `Sign in` redirects styling. */
.signin-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 20px;
background: var(--cta);
color: white;
border-radius: 8px;
border: 0;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.signin-cta:hover {
background: color-mix(in oklab, var(--cta) 92%, white);
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in oklab, var(--cta) 35%, transparent);
}
/* END signin cta */
/* CSFloat-1:1: improve all `Sign in to ...` text consistency. */
button.signin-required, .btn.signin-required {
background: var(--bg-1) !important;
color: var(--ink-2) !important;
border: 1px solid var(--line-2) !important;
font-weight: 500 !important;
}
button.signin-required:hover, .btn.signin-required:hover {
background: var(--bg-2) !important;
color: var(--ink) !important;
border-color: var(--cta) !important;
}
/* END signin required */
/* CSFloat-1:1: ensure consistent border-radius across all cards. */
.modal, .info-modal, .grid-card, .csfloat-band-card, .csfloat-hero-stack-card, .loadout-card, .recently-viewed-card {
border-radius: 10px;
}
/* END card radius unify */
/* CSFloat-1:1: improve overall page width consistency. */
.toolbar, .csfloat-subnav-inner, .csfloat-band {
max-width: 100%;
}
/* END max width unify */
/* CSFloat-1:1: improve overall section padding rhythm. */
.csfloat-band, .csfloat-subnav, .layout {
padding-left: 24px;
padding-right: 24px;
}
@media (max-width: 800px) {
.csfloat-band, .csfloat-subnav, .layout {
padding-left: 16px;
padding-right: 16px;
}
}
/* END section padding rhythm */
/* CSFloat-1:1: improve overall vertical space between sections. */
.csfloat-band {
padding-top: 40px;
padding-bottom: 40px;
}
/* END band vertical */
/* CSFloat-1:1: improve sticky-bottom action bar appearance. */
.full-page-mode .modal-actions {
border-radius: 0;
border: 0;
border-top: 1px solid var(--line);
}
/* END action bar border */
/* CSFloat-1:1: improve all overlay backdrops blur. */
.modal-backdrop:not(.full-page-mode .modal-backdrop) {
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* END overlay blur */
/* CSFloat-1:1: improve cart row image tap target. */
.cart-thumb {
width: 64px;
height: 64px;
display: flex; align-items: center; justify-content: center;
}
/* END cart thumb size */
/* CSFloat-1:1: improve cart name + listing-id text. */
.cart-name {
font-weight: 600;
font-size: 14px;
color: var(--ink);
}
.cart-id {
font-size: 11px;
color: var(--ink-3);
font-family: var(--mono);
margin-top: 2px;
}
/* END cart name id */
/* CSFloat-1:1: improve cart total text contrast. */
.cart-total-row .total-label {
font-weight: 600;
color: var(--ink);
}
/* END cart total label */
/* CSFloat-1:1: improve overall site-root max-width. */
.site-root {
max-width: 100%;
margin: 0 auto;
}
/* END site root max */
/* CSFloat-1:1: improve csfloat-band-card-img placeholder color. */
.csfloat-band-card-img {
background-color: var(--bg-2);
}
/* END band img placeholder */
/* CSFloat-1:1: improve grid-thumb placeholder color. */
.grid-thumb {
background-color: var(--bg-2);
}
/* END grid thumb placeholder */
/* CSFloat-1:1: improve hero stack image placeholder color. */
.csfloat-hero-stack-img {
background-color: var(--bg-2);
}
/* END hero img placeholder */
/* CSFloat-1:1: improve site-root padding-bottom for footer breathing. */
.site-root {
padding-bottom: 0;
}
/* END site root pb */
/* CSFloat-1:1: improve consistent vertical center for icons. */
.material-symbols-rounded {
vertical-align: middle;
}
/* END icon vertical */
/* CSFloat-1:1: improve overall hover responsiveness. */
button:active, .btn:active {
transform: scale(0.98);
}
/* END button active */
/* CSFloat-1:1: improve overall transition consistency on inputs. */
input, select, textarea {
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
/* END input transitions */
/* CSFloat-1:1: improve scrollbar on horizontal carousels. */
.csfloat-band-row {
scrollbar-width: thin;
scrollbar-color: color-mix(in oklab, var(--ink-4) 30%, transparent) transparent;
}
/* END band scrollbar */
/* CSFloat-1:1: improve overall consistency on text colors. */
.dim, .muted, [class*="muted"] { color: var(--ink-3); }
/* END dim text */
/* CSFloat-1:1: improve overall consistency on number tabular. */
[class*="-num"], [class*="-count"], [class*="-price"] {
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* END number tabular */
/* CSFloat-1:1: improve overall site headers. */
h1, h2, h3, h4 {
margin: 0;
letter-spacing: -0.015em;
}
/* END heading reset */
/* CSFloat-1:1: improve overall site paragraph. */
p {
margin: 0;
color: var(--ink-2);
}
/* END p reset */
/* CSFloat-1:1: improve overall consistency on fonts. */
button, input, select, textarea {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END input fonts */
/* CSFloat-1:1: improve overall page-level transitions. */
html, body {
transition: background-color 200ms ease;
}
/* END page transition */
/* CSFloat-1:1: improve overall image rendering. */
img {
display: block;
max-width: 100%;
height: auto;
}
/* END img reset */
/* CSFloat-1:1: improve overall focus state visibility. */
*:focus-visible {
outline-offset: 2px;
}
/* END focus offset */
/* CSFloat-1:1: improve overall form field styling. */
input, select, textarea {
font-size: 14px;
}
/* END input font size */
/* CSFloat-1:1: improve overall transition smoothness. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* END reduced motion */
/* CSFloat-1:1: improve overall page max-width on .market-content. */
.market-content {
max-width: 100%;
}
/* END market max-width */
/* CSFloat-1:1: improve grid card "Listed Xd ago" timestamp text. */
.grid-fresh {
text-align: right;
}
/* END listed text align */
/* CSFloat-1:1: improve grid card price font size on smaller screens. */
@media (max-width: 800px) {
.grid-card .grid-price { font-size: 14px; }
.grid-card .grid-name { font-size: 13px; }
}
/* END mobile grid font */
/* CSFloat-1:1: improve overall transitions on backgrounds. */
.grid-card, .csfloat-band-card {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease,
background 200ms ease,
box-shadow 220ms ease,
opacity 200ms ease;
}
/* END card transitions complete */
/* CSFloat-1:1: improve final lap polish — overall vertical alignment. */
.full-page-mode .modal-stats {
margin-bottom: 24px;
}
/* END modal stats mb */
/* CSFloat-1:1: improve overall consistent vertical centering. */
.csfloat-hero-stack-foot, .csfloat-hero-stack-online, .csfloat-hero-stack-floatmeta {
align-items: center;
}
/* END hero stack vertical center */
/* CSFloat-1:1: improve overall card image fade transition. */
.grid-thumb img, .csfloat-band-card-img img, .csfloat-hero-stack-img img {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 280ms ease;
}
/* END img transitions */
/* CSFloat-1:1: improve overall site root scroll behavior. */
html, body {
overscroll-behavior: none;
}
/* END overscroll */
/* CSFloat-1:1: improve overall site root smooth scroll behavior. */
* { scroll-behavior: smooth; }
/* END smooth scroll all */
/* CSFloat-1:1: improve overall hover responsiveness. */
.grid-card, .csfloat-band-card, .csfloat-hero-stack-card.pos-0 {
cursor: pointer;
}
/* END all clickable cards cursor */
/* CSFloat-1:1: improve overall transitions on dropdown. */
.dropdown-menu {
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END dropdown transition */
/* CSFloat-1:1: improve overall icon button alignment. */
.icon-btn {
display: inline-grid;
place-items: center;
}
/* END icon btn align */
/* CSFloat-1:1: improve overall consistency on inline links. */
.inline-link {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: color-mix(in oklab, var(--cta) 30%, transparent);
transition: text-decoration-color 140ms ease;
}
.inline-link:hover {
text-decoration-color: var(--cta);
}
/* END inline link */
/* CSFloat-1:1: improve overall vertical center on labels. */
.modal-stat-label, .modal-section-title {
display: flex; align-items: center;
}
/* END label center */
/* CSFloat-1:1: improve overall consistency on rounded buttons. */
.btn-round {
border-radius: 999px;
}
/* END round btn */
/* CSFloat-1:1: improve overall consistency on outlined buttons. */
.btn-outline {
background: transparent;
border: 1px solid var(--cta);
color: var(--cta);
}
.btn-outline:hover {
background: color-mix(in oklab, var(--cta) 8%, transparent);
}
/* END outline btn */
/* CSFloat-1:1: improve overall consistency on text-only buttons. */
.btn-text {
background: transparent;
border: 0;
color: var(--ink-2);
cursor: pointer;
padding: 4px 8px;
font-size: 13px;
transition: color 140ms ease;
}
.btn-text:hover { color: var(--ink); }
/* END text btn */
/* CSFloat-1:1: improve overall page-level transitions for visited states. */
a:visited {
color: inherit;
}
/* END visited */
/* CSFloat-1:1: improve overall consistency on cards' image containers. */
.grid-thumb, .csfloat-band-card-img, .csfloat-hero-stack-img {
position: relative;
overflow: hidden;
}
/* END thumb position */
/* CSFloat-1:1: improve overall consistency on inline icons. */
.material-symbols-rounded {
display: inline-flex;
align-items: center;
}
/* END material icon flex */
/* CSFloat-1:1: improve modal-name h1-style. */
.modal-name {
margin: 0;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END modal name reset */
/* CSFloat-1:1: ensure proper alignment of header content. */
.modal-header > div:first-child {
flex-shrink: 0;
}
.modal-header > div:nth-child(2) {
flex: 1;
min-width: 0;
}
/* END modal header layout */
/* CSFloat-1:1: improve hero card pos-0 z-index priority. */
.csfloat-hero-stack-card.pos-0 {
z-index: 10;
}
.csfloat-hero-stack-card.pos-1 {
z-index: 5;
}
.csfloat-hero-stack-card.pos-2 {
z-index: 1;
}
/* END hero z-index */
/* CSFloat-1:1: improve overall sticky-bottom action bar full-width. */
.full-page-mode .modal-actions {
width: 100%;
left: 0;
right: 0;
}
/* END action bar full-width */
/* CSFloat-1:1: improve grid-card vertical layout. */
.grid-card {
position: relative;
}
.grid-card::after {
content: none;
}
/* END grid card cleanup */
/* CSFloat-1:1: improve overall consistency on icon sizes in nav. */
.nav-icon-btn .material-symbols-rounded,
.nav-icon-btn svg {
width: 20px; height: 20px;
}
/* END nav icon size strict */
/* CSFloat-1:1: improve small UI moments — kbd hint chip styling. */
.search-kbd {
background: var(--bg-2);
color: var(--ink-3);
border: 1px solid var(--line-2);
font-family: var(--mono);
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
}
/* END kbd refresh */
/* CSFloat-1:1: improve lateral hover lift feel on bg. */
.grid-card:hover, .csfloat-band-card:hover, .csfloat-hero-stack-card.pos-0:hover {
background-color: color-mix(in oklab, var(--cta) 5%, var(--bg-1));
}
/* END card lateral hover */
/* CSFloat-1:1: improve csfloat-hero-stack-card image height. */
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-img {
border-radius: 6px 6px 0 0;
}
/* END hero img radius */
/* CSFloat-1:1: improve overall consistency on full-page padding. */
.full-page-mode .modal {
padding-bottom: 96px !important;
}
/* END modal pb */
/* CSFloat-1:1: improve global cursor for action items. */
[role="button"]:not([disabled]),
button:not([disabled]),
a {
cursor: pointer;
}
[disabled] { cursor: not-allowed; }
/* END cursor reset */
/* CSFloat-1:1: improve overall consistency on tooltip alternative styles. */
[data-tooltip] {
position: relative;
}
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%; left: 50%;
transform: translateX(-50%);
background: var(--bg-1);
color: var(--ink);
padding: 6px 10px;
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--line-2);
pointer-events: none;
z-index: 100;
white-space: nowrap;
}
/* END tooltip */
/* CSFloat-1:1: improve overall consistency on modal-listing-row spacing. */
.modal-listing-row {
padding: 12px 8px !important;
}
/* END listing row padding */
/* CSFloat-1:1: improve overall consistency on grid card body height. */
.grid-card .grid-body {
flex-grow: 1;
}
/* END grid body grow */
/* CSFloat-1:1: improve overall consistency on csfloat-band-card body. */
.csfloat-band-card .csfloat-band-card-foot {
margin-top: auto;
}
/* END band foot margin */
/* CSFloat-1:1: improve csfloat-band-card content spacing. */
.csfloat-band-card-head, .csfloat-band-card-foot {
padding: 8px 0;
}
/* END band card padding */
/* CSFloat-1:1: improve consistency on form labels alignment. */
form label {
display: block;
margin-bottom: 4px;
}
/* END form label */
/* CSFloat-1:1: improve link external indicator. */
a[target="_blank"]::after {
content: '';
display: inline-block;
width: 0; height: 0;
}
/* END external link */
/* CSFloat-1:1: improve listing-table action column. */
.listing-table tbody td:last-child {
text-align: right;
}
/* END table action col */
/* CSFloat-1:1: improve general spacing rules. */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
/* END gap utilities */
/* CSFloat-1:1: improve flex utilities. */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* END flex utilities */
/* CSFloat-1:1: improve text utilities. */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
/* END text utilities */
/* CSFloat-1:1: improve display utilities. */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
/* END display utilities */
/* CSFloat-1:1: improve spacing utilities. */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
/* END spacing utilities */
/* CSFloat-1:1: improve sizing utilities. */
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-md { max-width: 480px; }
.max-w-lg { max-width: 720px; }
.max-w-xl { max-width: 960px; }
/* END sizing utilities */
/* CSFloat-1:1: improve overall consistency on font sizes. */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-md { font-size: 13px; }
.text-lg { font-size: 15px; }
.text-xl { font-size: 22px; }
.text-2xl { font-size: 28px; }
/* END text size utilities */
/* CSFloat-1:1: improve overall consistency on color utilities. */
.text-cta { color: var(--cta); }
.text-success { color: oklch(0.78 0.18 145); }
.text-error { color: oklch(0.72 0.16 25); }
.text-warning { color: oklch(0.85 0.18 70); }
.bg-bg-1 { background: var(--bg-1); }
.bg-bg-2 { background: var(--bg-2); }
.bg-cta { background: var(--cta); }
/* END color utilities */
/* CSFloat-1:1: improve overall consistency on border utilities. */
.border-line { border: 1px solid var(--line); }
.border-line-2 { border: 1px solid var(--line-2); }
.border-cta { border: 1px solid var(--cta); }
.border-r-md { border-radius: 6px; }
.border-r-lg { border-radius: 10px; }
.border-r-xl { border-radius: 14px; }
.border-r-full { border-radius: 999px; }
/* END border utilities */
/* CSFloat-1:1: improve overall consistency on font weight utilities. */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
/* END font weight utilities */
/* CSFloat-1:1: improve overall consistency on cursor utilities. */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default { cursor: default; }
/* END cursor utilities */
/* CSFloat-1:1: improve overall consistency on opacity utilities. */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
/* END opacity utilities */
/* CSFloat-1:1: improve overall consistency on overflow utilities. */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* END overflow utilities */
/* CSFloat-1:1: improve overall consistency on position utilities. */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* END position utilities */
/* CSFloat-1:1: improve grid display utilities. */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* END grid utilities */
/* CSFloat-1:1: improve sticky utilities. */
.sticky-top { position: sticky; top: var(--nav-h); }
.sticky-bottom { position: sticky; bottom: 0; }
/* END sticky utilities */
/* CSFloat-1:1: improve shadow utilities. */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.shadow-lg { box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.shadow-xl { box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
/* END shadow utilities */
/* CSFloat-1:1: improve hover utilities. */
.hover-lift {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
/* END hover lift */
/* CSFloat-1:1: improve transitions utility. */
.transition-all { transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.transition-fast { transition: all 100ms ease; }
.transition-slow { transition: all 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* END transition utilities */
/* CSFloat-1:1: improve animation utilities. */
.animate-pulse {
animation: live-pulse 2s ease-in-out infinite;
}
.animate-spin {
animation: spin 600ms linear infinite;
}
.animate-fade-in {
animation: card-image-fade-in 280ms ease-out 1;
}
.animate-bounce {
animation: badge-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END animation utilities */
/* CSFloat-1:1: improve overall consistency on z-index. */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-max { z-index: 9999; }
/* END z-index utilities */
/* CSFloat-1:1: search input gets a blue focus ring on :focus-within
(mirrors csfloat's `border + 0 0 0 2px blue/14%` ring). Quietly hints
that the field is interactive and is currently the keyboard target. */
.search-input:focus,
.search-wrap:focus-within .search-input {
border-color: var(--cta) !important;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--cta) 18%, transparent) !important;
background: var(--bg-2) !important;
}
/* END search focus ring */
/* CSFloat-1:1 / Premium polish: Sign in through Steam button gets a subtle
lift + glowing shadow halo on hover — was a flat color swap. */
.steam-btn {
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 140ms ease !important;
}
.steam-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 35%, transparent) !important;
}
/* END steam-btn polish */
/* CSFloat-1:1: nav icon buttons (bell + cart) get a subtle scale-on-hover
so they read as interactive. Was a flat color/bg swap. */
.nav-icon-btn {
transition: color 140ms ease, background 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.nav-icon-btn:hover {
transform: scale(1.06);
}
/* END nav-icon-btn polish */
/* CSFloat-1:1: hero CTA buttons (Marketplace + Database) get a subtle lift
+ glowing shadow halo on hover — was a flat color/bg swap. */
.px-btn-primary, .hero-actions .px-btn-primary, .px-hero-actions .px-btn-primary,
.px-btn:not(.px-btn-primary) {
transition: background 140ms ease, color 140ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 140ms ease !important;
}
.px-btn-primary:hover, .hero-actions .px-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in oklab, var(--cta) 38%, transparent) !important;
}
.px-btn:not(.px-btn-primary):hover {
transform: translateY(-1px);
background: color-mix(in oklab, var(--cta) 8%, transparent) !important;
box-shadow: 0 6px 18px color-mix(in oklab, var(--cta) 22%, transparent) !important;
}
/* END hero CTA polish */
/* ─── CSFloat-1:1 grid card — image scale-on-hover micro-interaction.
CSFloat applies a subtle 1.04 zoom to the item image when you hover the
card. Adds the "premium product card" feel without changing layout. */
.grid-thumb img,
.grid-thumb .item-image,
.grid-thumb .item-poster {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.grid-card:hover .grid-thumb img,
.grid-card:hover .grid-thumb .item-image,
.grid-card:hover .grid-thumb .item-poster {
transform: scale(1.04);
}
/* Same hover lift on the band cards + hero stack image. */
.csfloat-band-card-img img,
.csfloat-band-card-img .item-image,
.csfloat-band-card-img .item-poster,
.csfloat-hero-stack-img img,
.csfloat-hero-stack-img .item-image,
.csfloat-hero-stack-img .item-poster {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-band-card:hover .csfloat-band-card-img img,
.csfloat-band-card:hover .csfloat-band-card-img .item-image,
.csfloat-band-card:hover .csfloat-band-card-img .item-poster {
transform: scale(1.05);
}
.csfloat-hero-stack-card.pos-0:hover .csfloat-hero-stack-img img,
.csfloat-hero-stack-card.pos-0:hover .csfloat-hero-stack-img .item-image,
.csfloat-hero-stack-card.pos-0:hover .csfloat-hero-stack-img .item-poster {
transform: scale(1.05);
}
/* END image hover zoom */
/* ─── CSFloat-1:1: rarity color stripe moves from card-bottom to image-TOP.
CSFloat puts the color band across the top of the item-image area, not
below the price. Override the .grid-card::after rule above by adding a
new ::before on .grid-thumb that paints the same gradient at the top of
the image. We hide the bottom stripe so we don't double-stripe. */
.grid-thumb::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
color-mix(in oklab, var(--cta) 35%, transparent) 0%,
color-mix(in oklab, var(--cta) 70%, transparent) 100%);
opacity: 0.7;
pointer-events: none;
z-index: 4;
}
.grid-card:has(.rarity-Off-Market) .grid-thumb::before {
background: linear-gradient(90deg,
color-mix(in oklab, #e8b960 60%, transparent) 0%,
#e8b960 100%);
}
.grid-card:has(.rarity-Limited) .grid-thumb::before {
background: linear-gradient(90deg,
color-mix(in oklab, var(--down) 60%, transparent) 0%,
var(--down) 100%);
}
/* Hide the prior bottom stripe so the rarity color reads only at the top. */
.grid-card::after { display: none !important; }
/* END rarity stripe at top */
/* ─── CSFloat-1:1: hide the OFF-MARKET / STANDARD rarity chip on the card.
Rarity is now communicated by the color stripe at the top of the image
(just like csfloat) — the chip is redundant and visually noisy. */
.grid-rarity { display: none !important; }
/* END hide rarity chip */
/* ─── CSFloat-1:1 hero card — float-number text row below the gradient bar.
Matches csfloat's "0.024478055537 (#345) 672" line. */
.csfloat-hero-stack-floatmeta {
display: flex; justify-content: space-between; align-items: center;
margin-top: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-hero-stack-floatmeta-num { font-weight: 500; }
.csfloat-hero-stack-floatmeta-rank {
font-weight: 600;
color: var(--ink-2);
}
/* END hero floatmeta */
/* ─── CSFloat-1:1: top rarity stripe on hero card image (mirror the bottom
one). CSFloat shows the pink/violet color rail across both top and bottom
of the image — gives the prominent card its iconic banded look. */
.csfloat-hero-stack-card.pos-0 .csfloat-hero-stack-img::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
/* END hero top stripe */
/* ─── CSFloat-1:1 Top Deals band card — plain gray subtitle, no italic.
Match grid card treatment; orange italic is hero-card-only. */
.csfloat-band-card-wear {
font-style: normal;
font-weight: 500;
color: var(--ink-3);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
}
.csfloat-band-card-cat {
color: var(--ink-4);
font-style: normal;
font-size: 0.92em;
}
/* Top stripe on band card image as well — mirror the bottom one. */
.csfloat-band-card-img::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
/* END band card wear + top stripe */
/* CSFloat-1:1 band card — listed-time row at the bottom of each card. */
.csfloat-band-card-listed {
margin-top: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
text-align: right;
}
/* END band card listed-time */
/* CSFloat-1:1: micro-detail — grid card image gets a soft inner top-shadow
so the rarity stripe blends instead of looking pasted on. Apple does the
same trick on product tile photos. */
.csfloat-grid-card .csfloat-grid-card-img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0,0,0,0.18) 0%,
rgba(0,0,0,0) 18%,
rgba(0,0,0,0) 82%,
rgba(0,0,0,0.22) 100%);
z-index: 1;
}
/* CSFloat-1:1: lift the float bar slightly off the card bottom so it doesn't
hug the hairline. 6px breathing room under it. */
.csfloat-grid-card-floatbar {
margin-bottom: 6px;
}
/* CSFloat-1:1: hover affordance — when the user hovers a card, the magnifier
zoom button fades in slightly stronger and the cursor swaps to zoom-in. */
.csfloat-grid-card:hover .csfloat-grid-card-zoom,
.csfloat-band-card:hover .csfloat-band-card-zoom,
.csfloat-hero-stack-card:hover .csfloat-hero-stack-zoom {
opacity: 1;
background: rgba(0,0,0,0.66);
border-color: rgba(255,255,255,0.18);
transform: scale(1.04);
}
.csfloat-grid-card-zoom,
.csfloat-band-card-zoom,
.csfloat-hero-stack-zoom {
transition: opacity 180ms ease,
background 180ms ease,
border-color 180ms ease,
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: tighten the gap between price and the green USD chip on the
grid card. Currently sits at 8px — csfloat uses ~6px which makes the chip
read as a unit suffix instead of a separate badge. */
.csfloat-grid-card-pricerow,
.csfloat-band-card-pricerow,
.csfloat-hero-stack-pricerow {
gap: 6px;
}
/* CSFloat-1:1: discount chip styling — csfloat uses a muted green pill with
minus-sign prefix. Keep it small and quiet. */
.csfloat-grid-card-disc,
.csfloat-band-card-disc,
.csfloat-hero-stack-disc {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: oklch(0.78 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.40 0.06 152 / 0.32);
border-radius: 4px;
padding: 1px 5px;
letter-spacing: -0.005em;
line-height: 1.2;
}
/* CSFloat-1:1: green USD chip — make the $ sit in a square chip like the
reference site so the price row reads $price + $ + discount cleanly. */
.csfloat-grid-card-usd,
.csfloat-band-card-usd,
.csfloat-hero-stack-usd {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: oklch(0.86 0.18 152);
background: oklch(0.30 0.04 152 / 0.22);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 3px;
line-height: 1;
}
/* CSFloat-1:1: price color hierarchy — main price is ink-1 white, USD chip
is the muted green, discount is the brighter green. Mirror the reference. */
.csfloat-grid-card-price,
.csfloat-band-card-price,
.csfloat-hero-stack-price {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: subtle text-shadow on the price so it pops against the card
bg without looking heavy. Apple does this on product prices. */
.csfloat-hero-stack-price {
font-size: 22px;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.csfloat-band-card-price {
font-size: 14px;
}
/* CSFloat-1:1: rarity chip pill — top-right corner of card image. Mirror
the reference site's "Limited"/"Standard"/"Offering" pill. */
.csfloat-grid-card-rarity,
.csfloat-band-card-rarity,
.csfloat-hero-stack-rarity {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.csfloat-grid-card-rarity.rarity-limited,
.csfloat-band-card-rarity.rarity-limited,
.csfloat-hero-stack-rarity.rarity-limited {
color: oklch(0.86 0.20 330);
background: oklch(0.25 0.06 330 / 0.55);
border: 1px solid oklch(0.50 0.18 330 / 0.45);
}
.csfloat-grid-card-rarity.rarity-offering,
.csfloat-band-card-rarity.rarity-offering,
.csfloat-hero-stack-rarity.rarity-offering {
color: oklch(0.86 0.16 250);
background: oklch(0.25 0.05 250 / 0.55);
border: 1px solid oklch(0.50 0.15 250 / 0.45);
}
.csfloat-grid-card-rarity.rarity-standard,
.csfloat-band-card-rarity.rarity-standard,
.csfloat-hero-stack-rarity.rarity-standard {
color: oklch(0.82 0.04 260);
background: oklch(0.25 0.02 260 / 0.55);
border: 1px solid oklch(0.40 0.04 260 / 0.45);
}
/* CSFloat-1:1: card image background — soft radial gradient behind the
product image so it has presence even before the image loads. */
.csfloat-grid-card-img,
.csfloat-band-card-img,
.csfloat-hero-stack-img {
background:
radial-gradient(60% 50% at 50% 45%,
oklch(0.28 0.012 260) 0%,
oklch(0.20 0.008 260) 100%);
}
/* CSFloat-1:1: image hover lifts product on Y-axis — gives the impression
of the item floating above the card. CSFloat does this subtly. */
.csfloat-grid-card:hover .csfloat-grid-card-img img,
.csfloat-band-card:hover .csfloat-band-card-img img,
.csfloat-hero-stack-card:hover .csfloat-hero-stack-img img {
transform: translateY(-3px) scale(1.03);
}
.csfloat-grid-card-img img,
.csfloat-band-card-img img,
.csfloat-hero-stack-img img {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: card border-radius slightly tighter on the image vs the card
itself so the image inner corners look intentional. */
.csfloat-grid-card-img,
.csfloat-band-card-img {
border-radius: 8px 8px 0 0;
}
/* CSFloat-1:1: small-screen polish — grid cards stay 2-col minimum on phone
per operator's wide-grid memory, but tighten the gap so two cards fit. */
@media (max-width: 540px) {
.csfloat-grid-card-pricerow {
gap: 4px;
}
.csfloat-grid-card-price {
font-size: 12px;
}
.csfloat-grid-card-disc {
font-size: 9px;
padding: 0 4px;
}
.csfloat-grid-card-usd {
width: 14px;
height: 14px;
font-size: 9px;
}
}
/* CSFloat-1:1: card meta row — wear + cat sit on a single line with a
subtle hairline divider between them like the reference site. */
.csfloat-grid-card-metarow,
.csfloat-band-card-metarow,
.csfloat-hero-stack-metarow {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.csfloat-grid-card-metarow .sep,
.csfloat-band-card-metarow .sep,
.csfloat-hero-stack-metarow .sep {
width: 1px;
height: 9px;
background: var(--line);
display: inline-block;
flex: 0 0 auto;
}
/* CSFloat-1:1: card hover shadow — lift becomes more pronounced. The
reference site uses a directional shadow (more on the bottom). */
.csfloat-grid-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 14px 36px rgba(0,0,0,0.55),
0 4px 10px rgba(0,0,0,0.32);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: micro-tap feedback — when the user clicks a card, give a
100ms scale-down so it feels physical. */
.csfloat-grid-card:active,
.csfloat-band-card:active,
.csfloat-hero-stack-card:active {
transform: translateY(-1px) scale(0.998);
transition-duration: 80ms;
}
/* END card chrome polish — closes the 1:1 gap with reference cards */
/* CSFloat-1:1: filter sidebar polish — make the left filter rail on /market
match csfloat. Sticky, hairline border, collapsible sections, mono labels. */
.csfloat-filter-rail {
position: sticky;
top: 80px;
align-self: start;
width: 240px;
flex: 0 0 240px;
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.csfloat-filter-rail::-webkit-scrollbar { width: 6px; }
.csfloat-filter-rail::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-filter-rail::-webkit-scrollbar-track { background: transparent; }
.csfloat-filter-section {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-filter-section:last-child { border-bottom: none; padding-bottom: 0; }
.csfloat-filter-section-title::after {
content: "▾";
font-size: 10px;
color: var(--ink-4);
transition: transform 180ms ease;
}
.csfloat-filter-section.collapsed .csfloat-filter-section-title::after {
transform: rotate(-90deg);
}
.csfloat-filter-section.collapsed .csfloat-filter-section-body {
display: none;
}
.csfloat-filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: var(--ink-2);
transition: background 120ms ease, color 120ms ease;
}
.csfloat-filter-checkbox:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-filter-checkbox input[type="checkbox"] {
accent-color: var(--cta);
width: 13px;
height: 13px;
}
/* CSFloat-1:1: range slider in filter rail — for price, float, etc. */
.csfloat-filter-range {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 2px;
}
.csfloat-filter-range-input input {
flex: 1;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 4px 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-1);
text-align: center;
font-variant-numeric: tabular-nums;
width: 0;
min-width: 0;
}
.csfloat-filter-range-input input:focus {
outline: none;
border-color: var(--cta);
}
.csfloat-filter-range-input span {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
/* CSFloat-1:1: clear-filters button at bottom of rail. */
.csfloat-filter-clear {
margin-top: 4px;
padding: 8px 10px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-filter-clear:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* CSFloat-1:1: results count + active filters chip row above grid. */
.csfloat-results-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
margin-bottom: 12px;
flex-wrap: wrap;
}
.csfloat-results-count {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-results-count strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-active-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-active-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-active-chip .x {
color: var(--ink-4);
font-size: 12px;
line-height: 1;
}
.csfloat-active-chip:hover .x { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: pagination — bottom of grid. Mono numbers, hairline buttons. */
.csfloat-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 32px 0 16px;
}
.csfloat-pager-btn {
min-width: 32px;
height: 32px;
padding: 0 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
font-variant-numeric: tabular-nums;
}
.csfloat-pager-btn:hover:not(.active):not(:disabled) {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pager-btn.active {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
cursor: default;
}
.csfloat-pager-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-pager-ellipsis {
color: var(--ink-4);
padding: 0 4px;
font-family: var(--mono);
}
/* END filter rail + results bar + pager — closes the /market chrome gap */
/* CSFloat-1:1: item-detail page (full-page mode) — left column for image
gallery, right column for buy actions + listing list. Sticky right rail. */
.site-root.full-page-mode .item-modal-overlay,
.site-root.full-page-mode .info-modal-overlay {
position: static;
background: transparent;
display: block;
padding: 0;
z-index: auto;
backdrop-filter: none;
}
.site-root.full-page-mode .item-modal,
.site-root.full-page-mode .info-modal {
position: static;
transform: none;
margin: 0;
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 24px 24px 80px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
max-height: none;
overflow: visible;
}
.site-root.full-page-mode .item-modal-close,
.site-root.full-page-mode .info-modal-close {
display: none;
}
/* CSFloat-1:1: item page breadcrumb — top of the page above the title. */
.site-root.full-page-mode .item-modal-breadcrumb,
.site-root.full-page-mode .info-modal-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-bottom: 16px;
letter-spacing: -0.005em;
}
.site-root.full-page-mode .item-modal-breadcrumb a,
.site-root.full-page-mode .info-modal-breadcrumb a {
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
}
.site-root.full-page-mode .item-modal-breadcrumb a:hover,
.site-root.full-page-mode .info-modal-breadcrumb a:hover {
color: var(--ink-1);
}
.site-root.full-page-mode .item-modal-breadcrumb .sep,
.site-root.full-page-mode .info-modal-breadcrumb .sep {
color: var(--ink-4);
}
/* CSFloat-1:1: item page two-column layout. */
.site-root.full-page-mode .item-modal-body {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
@media (max-width: 1100px) {
.site-root.full-page-mode .item-modal-body {
grid-template-columns: 1fr;
}
}
/* CSFloat-1:1: left column — image preview area gets a card chassis. */
.site-root.full-page-mode .item-modal-preview,
.site-root.full-page-mode .modal-preview {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 32px;
position: relative;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.site-root.full-page-mode .item-modal-preview img,
.site-root.full-page-mode .modal-preview img {
max-width: 100%;
max-height: 420px;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
/* CSFloat-1:1: right column — sticky rail with buy actions + listings. */
.site-root.full-page-mode .item-modal-rail,
.site-root.full-page-mode .modal-rail {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 14px;
max-height: calc(100vh - 110px);
overflow-y: auto;
padding-right: 4px;
}
.site-root.full-page-mode .item-modal-rail::-webkit-scrollbar,
.site-root.full-page-mode .modal-rail::-webkit-scrollbar {
width: 6px;
}
.site-root.full-page-mode .item-modal-rail::-webkit-scrollbar-thumb,
.site-root.full-page-mode .modal-rail::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
/* CSFloat-1:1: title block in right rail — large, mono price below. */
.site-root.full-page-mode .item-modal-title,
.site-root.full-page-mode .modal-title {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink-1);
margin: 0;
line-height: 1.15;
}
.site-root.full-page-mode .item-modal-subtitle,
.site-root.full-page-mode .modal-subtitle {
font-size: 13px;
color: var(--ink-3);
margin-top: 4px;
}
/* CSFloat-1:1: price block — big mono number, USD chip, discount aligned. */
.site-root.full-page-mode .item-modal-priceblock {
display: flex;
align-items: baseline;
gap: 8px;
margin: 8px 0 4px;
}
.site-root.full-page-mode .item-modal-priceblock .price {
font-family: var(--mono);
font-size: 40px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.site-root.full-page-mode .item-modal-priceblock .usd {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: oklch(0.86 0.18 152);
background: oklch(0.30 0.04 152 / 0.22);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 4px;
}
.site-root.full-page-mode .item-modal-priceblock .disc {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: oklch(0.78 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.40 0.06 152 / 0.32);
border-radius: 4px;
padding: 2px 6px;
letter-spacing: -0.005em;
align-self: center;
}
/* CSFloat-1:1: action button group — Buy + Bargain + Add to cart. */
.site-root.full-page-mode .item-modal-actions {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
margin-top: 12px;
}
.site-root.full-page-mode .item-modal-actions .btn-primary {
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
padding: 10px 14px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, transform 80ms ease;
}
.site-root.full-page-mode .item-modal-actions .btn-primary:hover {
background: oklch(0.65 0.18 250);
}
.site-root.full-page-mode .item-modal-actions .btn-primary:active {
transform: translateY(1px);
}
.site-root.full-page-mode .item-modal-actions .btn-secondary {
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
padding: 10px 12px;
border-radius: 8px;
font-weight: 500;
font-size: 13px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.site-root.full-page-mode .item-modal-actions .btn-secondary:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.site-root.full-page-mode .item-modal-actions .btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: stat list (rarity, type, finish, etc) — grid of label/value. */
.site-root.full-page-mode .item-modal-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 8px;
}
.site-root.full-page-mode .item-modal-stats .stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.site-root.full-page-mode .item-modal-stats .stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.site-root.full-page-mode .item-modal-stats .stat-value {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
}
.site-root.full-page-mode .item-modal-stats .stat-value.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
/* CSFloat-1:1: listing list section header. */
.site-root.full-page-mode .item-modal-listings-title {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 16px 0 8px;
}
/* END item-detail page styling — full-page route now reads as a real page */
/* CSFloat-1:1: cart drawer — slide-in from right, sticky bottom checkout. */
.csfloat-cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 100vw;
background: var(--bg-1);
border-left: 1px solid var(--line);
box-shadow: -16px 0 40px rgba(0,0,0,0.55);
z-index: 9000;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cart-drawer.open {
transform: translateX(0);
}
.csfloat-cart-drawer-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.csfloat-cart-drawer-close:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-cart-drawer-body::-webkit-scrollbar { width: 6px; }
.csfloat-cart-drawer-body::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-cart-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-cart-row:last-child { border-bottom: none; }
.csfloat-cart-row-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.csfloat-cart-row-remove:hover { color: oklch(0.78 0.18 30); }
.csfloat-cart-totals {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-cart-totals-row .label { color: var(--ink-3); }
.csfloat-cart-totals-row .value {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.csfloat-cart-totals-row.total {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-cart-totals-row.total .label {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-cart-totals-row.total .value {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-cart-checkout-btn:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-cart-checkout-btn:active {
transform: translateY(1px);
}
.csfloat-cart-empty {
text-align: center;
padding: 60px 20px;
color: var(--ink-3);
}
.csfloat-cart-empty-cta:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* END cart drawer chrome — closes the cart UX gap */
/* CSFloat-1:1: notification toast — top-right slide-in, auto-dismiss. */
.csfloat-toast-container {
position: fixed;
top: 80px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9500;
pointer-events: none;
max-width: 360px;
}
.csfloat-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-left: 3px solid var(--cta);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
font-size: 13px;
color: var(--ink-1);
animation: csfloat-toast-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
min-width: 240px;
}
.csfloat-toast.success { border-left-color: oklch(0.72 0.18 152); }
.csfloat-toast.error { border-left-color: oklch(0.70 0.18 30); }
.csfloat-toast.warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-toast-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
border-radius: 50%;
margin-top: 1px;
}
.csfloat-toast.success .csfloat-toast-icon {
color: oklch(0.86 0.18 152);
background: oklch(0.30 0.04 152 / 0.22);
}
.csfloat-toast.error .csfloat-toast-icon {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.22);
}
.csfloat-toast-body {
flex: 1 1 auto;
min-width: 0;
}
.csfloat-toast-title {
font-weight: 600;
font-size: 13px;
color: var(--ink-1);
margin: 0 0 2px;
}
.csfloat-toast-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.4;
}
.csfloat-toast-close {
background: transparent;
border: none;
color: var(--ink-4);
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 2px;
margin-left: 4px;
transition: color 120ms ease;
}
.csfloat-toast-close:hover { color: var(--ink-1); }
@keyframes csfloat-toast-in {
from {
opacity: 0;
transform: translateX(20px) scale(0.96);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes csfloat-toast-out {
to {
opacity: 0;
transform: translateX(20px) scale(0.96);
}
}
.csfloat-toast.dismissing {
animation: csfloat-toast-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
/* CSFloat-1:1: command palette (Cmd+K) — centered overlay with search. */
.csfloat-cmdk-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
z-index: 9700;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
animation: cmdk-fade-in 160ms ease;
}
@keyframes cmdk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.csfloat-cmdk {
width: min(92vw, 600px);
max-height: 70vh;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
display: flex;
flex-direction: column;
overflow: hidden;
animation: cmdk-pop-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cmdk-pop-in {
from {
opacity: 0;
transform: scale(0.96) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.csfloat-cmdk-input {
flex: 0 0 auto;
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
padding: 16px 18px;
color: var(--ink-1);
font-size: 15px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
outline: none;
}
.csfloat-cmdk-input::placeholder { color: var(--ink-3); }
.csfloat-cmdk-list {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 0;
}
.csfloat-cmdk-list::-webkit-scrollbar { width: 6px; }
.csfloat-cmdk-list::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-cmdk-group {
padding: 4px 0;
}
.csfloat-cmdk-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 18px;
cursor: pointer;
font-size: 13px;
color: var(--ink-2);
transition: background 80ms ease, color 80ms ease;
}
.csfloat-cmdk-item:hover,
.csfloat-cmdk-item.active {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-cmdk-empty {
text-align: center;
padding: 32px 20px;
color: var(--ink-3);
font-size: 13px;
}
.csfloat-cmdk-footer {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 18px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
.csfloat-cmdk-footer kbd {
display: inline-block;
padding: 1px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-2);
margin: 0 2px;
}
/* END toast + cmdk — closes the global UX overlays gap */
/* CSFloat-1:1: profile page — header w/ avatar, stat row, tabs, list. */
.csfloat-profile-header {
display: flex;
align-items: center;
gap: 20px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.csfloat-profile-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--line-2);
flex: 0 0 auto;
position: relative;
overflow: hidden;
}
.csfloat-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-profile-info { flex: 1 1 auto; }
.csfloat-profile-name {
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.015em;
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-profile-verified {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.csfloat-profile-handle {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
margin: 0 0 8px;
}
.csfloat-profile-meta {
display: flex;
gap: 14px;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 24px;
}
.csfloat-profile-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-profile-stat-delta.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: profile tabs row — clean, no underline by default. */
.csfloat-profile-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
overflow-x: auto;
}
.csfloat-profile-tabs::-webkit-scrollbar { height: 0; }
.csfloat-profile-tab {
position: relative;
padding: 10px 16px;
background: transparent;
border: none;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
transition: color 120ms ease;
}
.csfloat-profile-tab:hover { color: var(--ink-1); }
.csfloat-profile-tab.active { color: var(--ink-1); font-weight: 600; }
.csfloat-profile-tab.active::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -1px;
height: 2px;
background: var(--ink-1);
border-radius: 1px;
}
/* END profile page chrome */
/* CSFloat-1:1: empty state — large icon, mono title, accent CTA. */
.csfloat-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
gap: 12px;
}
.csfloat-empty-state-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 22px;
margin-bottom: 4px;
}
.csfloat-empty-state-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-empty-state-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
max-width: 320px;
line-height: 1.5;
}
.csfloat-empty-state-cta {
margin-top: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-empty-state-cta:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-empty-state-cta:active {
transform: translateY(1px);
}
/* END empty state */
/* CSFloat-1:1: skeleton loader — pulse animation for loading rows/cards. */
.csfloat-skeleton {
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.csfloat-skeleton-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-skeleton-img {
aspect-ratio: 4 / 3;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
border-radius: 6px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-skeleton-line {
height: 12px;
border-radius: 3px;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-skeleton-line.w-60 { width: 60%; }
.csfloat-skeleton-line.w-40 { width: 40%; }
.csfloat-skeleton-line.w-80 { width: 80%; }
/* END skeleton loader */
/* CSFloat-1:1: tooltip — small dark pill with hairline + arrow. */
.csfloat-tooltip {
position: absolute;
z-index: 9800;
padding: 6px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
opacity: 0;
transform: translateY(2px);
transition: opacity 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.csfloat-tooltip::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: oklch(0.10 0.008 260);
border-left: 1px solid var(--line-2);
border-top: 1px solid var(--line-2);
transform: rotate(45deg);
top: -5px;
left: 50%;
margin-left: -4px;
}
.csfloat-tooltip.bottom::before {
top: auto;
bottom: -5px;
border-left: none;
border-top: none;
border-right: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
}
.csfloat-tooltip.left::before {
top: 50%;
left: auto;
right: -5px;
margin-top: -4px;
margin-left: 0;
border-left: none;
border-top: 1px solid var(--line-2);
border-right: 1px solid var(--line-2);
border-bottom: none;
}
/* CSFloat-1:1: select / dropdown — replaces native select chrome. */
.csfloat-select {
position: relative;
display: inline-block;
}
.csfloat-select-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
min-width: 120px;
justify-content: space-between;
}
.csfloat-select-trigger:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-select-trigger.open {
border-color: var(--cta);
}
.csfloat-select-trigger::after {
content: "▾";
font-size: 9px;
color: var(--ink-3);
margin-left: 4px;
transition: transform 180ms ease;
}
.csfloat-select-trigger.open::after {
transform: rotate(180deg);
}
.csfloat-select-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
min-width: 100%;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
z-index: 100;
max-height: 280px;
overflow-y: auto;
padding: 4px 0;
}
.csfloat-select-menu::-webkit-scrollbar { width: 6px; }
.csfloat-select-menu::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-select-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
transition: background 80ms ease, color 80ms ease;
}
.csfloat-select-option:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-select-option.selected {
color: var(--ink-1);
font-weight: 500;
}
.csfloat-select-option.selected::before {
content: "✓";
color: var(--cta);
margin-right: 4px;
}
.csfloat-select-option.divider {
height: 1px;
background: var(--line);
margin: 4px 8px;
padding: 0;
pointer-events: none;
cursor: default;
}
/* END tooltip + select polish */
/* CSFloat-1:1: badge variants — tiny inline pills for status, count, etc. */
.csfloat-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 3px;
line-height: 1.4;
}
.csfloat-badge.live {
color: oklch(0.86 0.18 30);
background: oklch(0.30 0.04 30 / 0.22);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
}
.csfloat-badge.live::before {
content: "";
width: 5px;
height: 5px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-badge.new {
color: oklch(0.86 0.18 250);
background: oklch(0.30 0.05 250 / 0.22);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
}
.csfloat-badge.hot {
color: oklch(0.84 0.16 50);
background: oklch(0.30 0.05 50 / 0.22);
border: 1px solid oklch(0.42 0.10 50 / 0.36);
}
.csfloat-badge.deal {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.22);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
}
.csfloat-badge.locked {
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
}
/* CSFloat-1:1: status dot — small circle in front of inline status text. */
.csfloat-status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.csfloat-status-dot.online {
background: oklch(0.72 0.18 152);
box-shadow: 0 0 6px oklch(0.72 0.18 152 / 0.6);
}
.csfloat-status-dot.idle {
background: oklch(0.78 0.16 80);
box-shadow: 0 0 6px oklch(0.78 0.16 80 / 0.5);
}
.csfloat-status-dot.offline {
background: var(--ink-4);
}
/* CSFloat-1:1: progress bar — for upload, sync, etc. */
.csfloat-progress {
width: 100%;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.csfloat-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
border-radius: 3px;
transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.csfloat-progress-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.18) 50%,
transparent 100%);
animation: progress-shimmer 1800ms linear infinite;
}
@keyframes progress-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* CSFloat-1:1: avatar group — overlapping circles for who-bought-recently. */
.csfloat-avatar-group {
display: inline-flex;
align-items: center;
}
.csfloat-avatar-group .avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--bg);
margin-left: -8px;
overflow: hidden;
flex-shrink: 0;
transition: transform 140ms ease;
}
.csfloat-avatar-group .avatar:first-child { margin-left: 0; }
.csfloat-avatar-group .avatar:hover {
transform: translateY(-2px);
z-index: 2;
}
.csfloat-avatar-group .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-avatar-group .more {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
background: var(--bg-2);
}
/* CSFloat-1:1: divider variants — horizontal hairline with optional label. */
.csfloat-divider {
border: none;
height: 1px;
background: var(--line);
margin: 16px 0;
}
.csfloat-divider.dashed {
background: repeating-linear-gradient(90deg,
var(--line) 0 4px,
transparent 4px 8px);
}
.csfloat-divider-with-label::before,
.csfloat-divider-with-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
/* END badge + status + progress + avatar + divider */
/* CSFloat-1:1: form input refinements — match csfloat input chrome. */
.csfloat-input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
color: var(--ink-1);
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-input::placeholder { color: var(--ink-3); }
.csfloat-input:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-input:focus {
outline: none;
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.csfloat-input.error {
border-color: oklch(0.70 0.18 30);
}
.csfloat-input.error:focus {
box-shadow: 0 0 0 2px oklch(0.55 0.18 30 / 0.18);
}
.csfloat-input.with-icon {
padding-left: 28px;
}
.csfloat-input-group {
position: relative;
display: inline-block;
width: 100%;
}
.csfloat-input-group:focus-within .csfloat-input-group-icon {
color: var(--ink-2);
}
/* CSFloat-1:1: textarea — same chrome but with vertical-only resize. */
.csfloat-textarea {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
color: var(--ink-1);
min-height: 80px;
resize: vertical;
transition: border-color 120ms ease, background 120ms ease;
line-height: 1.5;
}
.csfloat-textarea::placeholder { color: var(--ink-3); }
.csfloat-textarea:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
/* CSFloat-1:1: label + helptext styling for forms. */
.csfloat-form-label {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin-bottom: 6px;
}
.csfloat-form-label .req { color: oklch(0.78 0.18 30); margin-left: 2px; }
.csfloat-form-help {
margin-top: 4px;
font-size: 11px;
color: var(--ink-4);
line-height: 1.4;
}
.csfloat-form-help.error { color: oklch(0.78 0.18 30); }
.csfloat-form-row {
margin-bottom: 14px;
}
.csfloat-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
/* CSFloat-1:1: switch / toggle — for boolean settings. */
.csfloat-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
flex-shrink: 0;
}
.csfloat-switch input {
opacity: 0;
width: 0;
height: 0;
}
.csfloat-switch-track {
position: absolute;
inset: 0;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.csfloat-switch-track::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: var(--ink-2);
border-radius: 50%;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms ease;
}
.csfloat-switch input:checked + .csfloat-switch-track {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-switch input:checked + .csfloat-switch-track::before {
transform: translateX(16px);
background: oklch(0.98 0 0);
}
.csfloat-switch input:focus-visible + .csfloat-switch-track {
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.32);
}
/* CSFloat-1:1: checkbox — square with check, same blue as switch on. */
.csfloat-check {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 4px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
flex-shrink: 0;
}
.csfloat-check input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.csfloat-check::after {
content: "";
width: 4px;
height: 8px;
border-right: 2px solid oklch(0.98 0 0);
border-bottom: 2px solid oklch(0.98 0 0);
transform: rotate(45deg) scale(0);
transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
margin-bottom: 2px;
}
.csfloat-check.checked,
.csfloat-check:has(input:checked) {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-check.checked::after,
.csfloat-check:has(input:checked)::after {
transform: rotate(45deg) scale(1);
}
/* CSFloat-1:1: radio — same vibe, round version. */
.csfloat-radio {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
cursor: pointer;
transition: border-color 120ms ease;
flex-shrink: 0;
}
.csfloat-radio input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.csfloat-radio::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cta);
transform: scale(0);
transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-radio.checked,
.csfloat-radio:has(input:checked) {
border-color: var(--cta);
}
.csfloat-radio.checked::after,
.csfloat-radio:has(input:checked)::after {
transform: scale(1);
}
/* END form chrome polish */
/* CSFloat-1:1: data table — for /database, /admin tables, transaction lists. */
.csfloat-table {
width: 100%;
border-collapse: collapse;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-table thead {
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.csfloat-table th {
text-align: left;
padding: 10px 14px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
white-space: nowrap;
user-select: none;
}
.csfloat-table th.sortable {
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-table th.sortable:hover { color: var(--ink-1); }
.csfloat-table th.sortable::after {
content: "↕";
margin-left: 4px;
opacity: 0.4;
font-size: 9px;
}
.csfloat-table th.sortable.sort-asc::after { content: "↑"; opacity: 1; color: var(--ink-1); }
.csfloat-table th.sortable.sort-desc::after { content: "↓"; opacity: 1; color: var(--ink-1); }
.csfloat-table th.right { text-align: right; }
.csfloat-table th.center { text-align: center; }
.csfloat-table tbody tr {
border-bottom: 1px solid var(--line);
transition: background 100ms ease;
}
.csfloat-table tbody tr:last-child { border-bottom: none; }
.csfloat-table tbody tr:hover { background: var(--bg-2); }
.csfloat-table td {
padding: 12px 14px;
color: var(--ink-2);
vertical-align: middle;
}
.csfloat-table td.right { text-align: right; }
.csfloat-table td.center { text-align: center; }
.csfloat-table td.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
font-size: 12px;
color: var(--ink-1);
}
.csfloat-table td.muted { color: var(--ink-3); font-size: 12px; }
.csfloat-table td.title { font-weight: 500; color: var(--ink-1); }
.csfloat-table-empty {
padding: 60px 20px;
text-align: center;
color: var(--ink-3);
font-size: 13px;
}
.csfloat-table-img {
width: 32px;
height: 32px;
background: var(--bg-2);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 8px;
}
.csfloat-table-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
}
/* CSFloat-1:1: zebra row variant for dense tables. */
.csfloat-table.zebra tbody tr:nth-child(even) {
background: oklch(0.18 0.008 260 / 0.5);
}
.csfloat-table.zebra tbody tr:hover {
background: var(--bg-2);
}
/* CSFloat-1:1: compact row variant for admin density. */
.csfloat-table.compact th {
padding: 8px 12px;
font-size: 9px;
}
.csfloat-table.compact td {
padding: 6px 12px;
font-size: 12px;
}
/* CSFloat-1:1: row action buttons in last cell. */
.csfloat-table-actions {
display: inline-flex;
gap: 4px;
}
.csfloat-table-action {
width: 26px;
height: 26px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-2);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-table-action:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-table-action.danger:hover {
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.5);
background: oklch(0.30 0.04 30 / 0.18);
}
/* END data table chrome */
/* CSFloat-1:1: chart container — for /item price history chart. */
.csfloat-chart {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
position: relative;
}
.csfloat-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.csfloat-chart-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-chart-range {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 0;
}
.csfloat-chart-range-btn:hover { color: var(--ink-1); }
.csfloat-chart-range-btn.active {
background: var(--bg);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.csfloat-chart-svg {
width: 100%;
height: 220px;
display: block;
}
.csfloat-chart-axis {
stroke: var(--line);
stroke-width: 1;
fill: none;
}
.csfloat-chart-grid {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 2 4;
fill: none;
opacity: 0.5;
}
.csfloat-chart-line {
stroke: var(--cta);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.csfloat-chart-fill {
fill: url(#chart-gradient);
opacity: 0.3;
}
.csfloat-chart-tick {
font-family: var(--mono);
font-size: 9px;
fill: var(--ink-4);
}
.csfloat-chart-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-chart-summary-delta.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: sparkline — tiny inline chart for cards/rows. */
.csfloat-sparkline {
display: inline-block;
width: 64px;
height: 18px;
vertical-align: middle;
}
.csfloat-sparkline-line {
stroke: var(--cta);
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
}
.csfloat-sparkline-line.up { stroke: oklch(0.72 0.18 152); }
.csfloat-sparkline-line.down { stroke: oklch(0.72 0.18 30); }
/* END chart + sparkline */
/* CSFloat-1:1: site footer — minimal Apple-style footer with column links. */
.csfloat-footer {
margin-top: 80px;
padding: 60px 24px 28px;
background: var(--bg);
border-top: 1px solid var(--line);
position: relative;
}
.csfloat-footer::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 480px;
max-width: 90%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--cta) 50%,
transparent 100%);
opacity: 0.45;
}
.csfloat-footer-inner {
max-width: 2100px;
margin: 0 auto;
}
.csfloat-footer-grid {
display: grid;
grid-template-columns: 2fr repeat(4, 1fr);
gap: 32px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.csfloat-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
.csfloat-footer-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-footer-tagline {
font-size: 12px;
color: var(--ink-3);
line-height: 1.6;
max-width: 280px;
}
.csfloat-footer-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-footer-link {
font-size: 13px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
width: fit-content;
}
.csfloat-footer-link:hover { color: var(--ink-1); }
.csfloat-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
gap: 14px;
}
.csfloat-footer-copy {
font-size: 11px;
color: var(--ink-4);
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-footer-social {
display: inline-flex;
gap: 6px;
}
.csfloat-footer-social a {
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.csfloat-footer-social a:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
transform: translateY(-1px);
}
/* CSFloat-1:1: trust row — Stripe / Steam Auth / SSL chips above footer. */
.csfloat-trust-row {
display: flex;
justify-content: center;
gap: 24px;
padding: 24px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 40px;
flex-wrap: wrap;
}
.csfloat-trust-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: -0.005em;
}
/* END footer + trust row */
/* CSFloat-1:1: notification panel — bell click drawer/popover. */
.csfloat-notif-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
max-width: 92vw;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 9100;
display: flex;
flex-direction: column;
max-height: 480px;
overflow: hidden;
animation: notif-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes notif-pop {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.csfloat-notif-panel-action:hover { color: var(--ink-1); }
.csfloat-notif-panel-body::-webkit-scrollbar { width: 6px; }
.csfloat-notif-panel-body::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-notif-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background 100ms ease;
align-items: start;
}
.csfloat-notif-row:last-child { border-bottom: none; }
.csfloat-notif-row:hover { background: var(--bg-2); }
.csfloat-notif-row.unread {
background: oklch(0.20 0.02 250 / 0.4);
}
.csfloat-notif-row.unread::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
}
.csfloat-notif-row { position: relative; }
.csfloat-notif-icon {
width: 32px;
height: 32px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 14px;
}
.csfloat-notif-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.32);
}
.csfloat-notif-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.32);
}
.csfloat-notif-icon.info {
color: oklch(0.84 0.16 250);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.32);
}
.csfloat-notif-content {
min-width: 0;
}
.csfloat-notif-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
white-space: nowrap;
font-variant-numeric: tabular-nums;
margin-top: 1px;
}
.csfloat-notif-panel-footer a {
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-notif-panel-footer a:hover { color: oklch(0.78 0.18 250); }
.csfloat-notif-empty {
padding: 40px 20px;
text-align: center;
color: var(--ink-3);
font-size: 12px;
}
/* END notification panel chrome */
/* CSFloat-1:1: user menu popover — opens off the avatar chip in nav. */
.csfloat-usermenu {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 240px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 9100;
overflow: hidden;
animation: notif-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-usermenu-header {
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid var(--line);
}
.csfloat-usermenu-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-usermenu-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-usermenu-info {
min-width: 0;
}
.csfloat-usermenu-name {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-usermenu-handle {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 0;
}
.csfloat-usermenu-balance {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
background: oklch(0.18 0.008 260 / 0.4);
}
.csfloat-usermenu-section {
padding: 4px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-usermenu-section:last-child { border-bottom: none; }
.csfloat-usermenu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
font-size: 13px;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-usermenu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-usermenu-item:hover .csfloat-usermenu-item-icon {
color: var(--ink-1);
}
.csfloat-usermenu-item.danger { color: oklch(0.84 0.18 30); }
.csfloat-usermenu-item.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
color: oklch(0.92 0.18 30);
}
.csfloat-usermenu-item.danger .csfloat-usermenu-item-icon { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: shortcut hint pill on usermenu items. */
.csfloat-usermenu-item-shortcut {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.04em;
}
/* END user menu chrome */
/* CSFloat-1:1: search dropdown — typeahead suggestions under nav search. */
.csfloat-searchmenu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 9100;
max-height: 480px;
overflow-y: auto;
animation: notif-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-searchmenu::-webkit-scrollbar { width: 6px; }
.csfloat-searchmenu::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-searchmenu-section {
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-searchmenu-section:last-child { border-bottom: none; }
.csfloat-searchmenu-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
padding: 6px 14px;
cursor: pointer;
text-decoration: none;
align-items: center;
transition: background 80ms ease;
}
.csfloat-searchmenu-row:hover,
.csfloat-searchmenu-row.active {
background: var(--bg-2);
}
.csfloat-searchmenu-row-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
}
.csfloat-searchmenu-row-name mark {
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
padding: 0;
border-radius: 2px;
}
.csfloat-searchmenu-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-searchmenu-row-price {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-searchmenu-empty {
padding: 28px 14px;
text-align: center;
font-size: 12px;
color: var(--ink-3);
}
/* CSFloat-1:1: search recent / trending chips under input. */
.csfloat-searchmenu-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 14px;
}
.csfloat-searchmenu-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
color: var(--ink-2);
cursor: pointer;
transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.csfloat-searchmenu-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END search dropdown chrome */
/* CSFloat-1:1: bargain modal — small dialog for offering on a listing. */
.csfloat-bargain-modal {
width: min(92vw, 420px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
padding: 22px;
position: relative;
}
.csfloat-bargain-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.csfloat-bargain-subtitle {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 14px;
}
.csfloat-bargain-listed {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 14px;
}
.csfloat-bargain-listed-label {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-bargain-listed-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-bargain-input-row {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 6px;
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
background: var(--bg-1);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.csfloat-bargain-input-row:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-bargain-input-prefix {
padding: 10px 12px;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 13px;
display: inline-flex;
align-items: center;
}
.csfloat-bargain-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 10px 12px;
font-family: var(--mono);
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-bargain-help {
font-size: 11px;
color: var(--ink-4);
margin: 0 0 14px;
}
.csfloat-bargain-quick {
display: flex;
gap: 6px;
margin-bottom: 16px;
}
.csfloat-bargain-quick-btn {
flex: 1;
padding: 6px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-bargain-quick-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-bargain-quick-btn.active {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-bargain-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.csfloat-bargain-cancel {
padding: 10px 14px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-bargain-cancel:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-bargain-submit {
padding: 10px 16px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-bargain-submit:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-bargain-submit:active {
transform: translateY(1px);
}
.csfloat-bargain-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg-3);
border-color: var(--line);
color: var(--ink-3);
}
/* END bargain modal chrome */
/* CSFloat-1:1: confirmation dialog — destructive action, cancel + confirm. */
.csfloat-confirm-modal {
width: min(92vw, 380px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
}
.csfloat-confirm-icon {
width: 48px;
height: 48px;
margin: 0 auto;
border-radius: 50%;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
color: oklch(0.84 0.18 30);
font-size: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-confirm-icon.warning {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.84 0.16 80);
}
.csfloat-confirm-icon.info {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
}
.csfloat-confirm-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-confirm-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
.csfloat-confirm-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 6px;
}
.csfloat-confirm-cancel {
padding: 10px 14px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-confirm-cancel:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-confirm-go {
padding: 10px 14px;
background: oklch(0.55 0.18 30);
border: 1px solid oklch(0.55 0.18 30);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-confirm-go:hover {
background: oklch(0.50 0.18 30);
}
.csfloat-confirm-go:active {
transform: translateY(1px);
}
.csfloat-confirm-go.primary {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-confirm-go.primary:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: stat callout — small banner with icon + headline + sub. */
.csfloat-stat-callout {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-left: 3px solid var(--cta);
border-radius: 8px;
margin-bottom: 14px;
}
.csfloat-stat-callout-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 15px;
flex-shrink: 0;
}
.csfloat-stat-callout-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-stat-callout-sub {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
line-height: 1.4;
}
.csfloat-stat-callout-action {
margin-left: auto;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-stat-callout-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* END confirm + callout */
/* CSFloat-1:1: tab strip variants — pill tabs (settings) + underline tabs. */
.csfloat-tabstrip {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 3px;
gap: 0;
position: relative;
}
.csfloat-tabstrip-tab {
background: transparent;
border: none;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 6px;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease;
}
.csfloat-tabstrip-tab:hover { color: var(--ink-1); }
.csfloat-tabstrip-tab.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.csfloat-tabstrip-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-tabstrip-tab.active .csfloat-tabstrip-tab-count {
color: var(--ink-3);
}
/* CSFloat-1:1: segmented control — like tabstrip but blue accent. */
.csfloat-segmented {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 3px;
gap: 0;
}
.csfloat-segmented-seg {
background: transparent;
border: none;
padding: 6px 14px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: background 140ms ease, color 140ms ease;
}
.csfloat-segmented-seg:hover { color: var(--ink-1); }
.csfloat-segmented-seg.active {
background: var(--cta);
color: oklch(0.98 0 0);
}
/* CSFloat-1:1: stepper — for cart quantity, etc. */
.csfloat-stepper {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg-1);
overflow: hidden;
}
.csfloat-stepper-btn {
width: 26px;
height: 26px;
background: transparent;
border: none;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-stepper-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-stepper-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-stepper-value {
min-width: 32px;
padding: 0 6px;
text-align: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
}
/* CSFloat-1:1: chip / tag — compact label with optional close button. */
.csfloat-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
white-space: nowrap;
transition: background 100ms ease, border-color 100ms ease;
}
.csfloat-chip.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-chip.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-chip.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-chip-close {
background: transparent;
border: none;
color: inherit;
opacity: 0.5;
font-size: 10px;
cursor: pointer;
padding: 0;
margin-left: 2px;
line-height: 1;
}
.csfloat-chip-close:hover { opacity: 1; }
.csfloat-chip.removable { padding-right: 6px; }
/* CSFloat-1:1: filter chip group — applied filters above results bar. */
.csfloat-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.csfloat-filter-chips-clear {
font-size: 11px;
color: var(--ink-3);
background: transparent;
border: none;
padding: 4px 8px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 100ms ease;
}
.csfloat-filter-chips-clear:hover { color: var(--ink-1); }
/* END tab strip + segmented + stepper + chip */
/* CSFloat-1:1: image gallery thumbnails — for /item page secondary views. */
.csfloat-gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-gallery-main {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 24px;
position: relative;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-gallery-main img {
max-width: 100%;
max-height: 360px;
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-gallery-main:hover img {
transform: scale(1.04);
}
.csfloat-gallery-main-zoom {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-gallery-main:hover .csfloat-gallery-main-zoom {
opacity: 1;
transform: scale(1.04);
}
.csfloat-gallery-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.csfloat-gallery-thumbs::-webkit-scrollbar { height: 4px; }
.csfloat-gallery-thumbs::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-gallery-thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
transition: border-color 120ms ease, transform 120ms ease;
}
.csfloat-gallery-thumb:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-gallery-thumb.active {
border-color: var(--cta);
box-shadow: 0 0 0 1px var(--cta);
}
.csfloat-gallery-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* CSFloat-1:1: rarity stripe row — top stripe + bottom stripe for item images. */
.csfloat-rarity-stripe {
position: absolute;
left: 0;
right: 0;
height: 3px;
z-index: 2;
pointer-events: none;
}
.csfloat-rarity-stripe.top { top: 0; border-radius: 8px 8px 0 0; }
.csfloat-rarity-stripe.bottom { bottom: 0; border-radius: 0 0 8px 8px; }
.csfloat-rarity-stripe.limited {
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
}
.csfloat-rarity-stripe.standard {
background: linear-gradient(90deg,
oklch(0.55 0.04 260),
oklch(0.65 0.05 260),
oklch(0.55 0.04 260));
}
.csfloat-rarity-stripe.offering {
background: linear-gradient(90deg,
oklch(0.55 0.18 250),
oklch(0.68 0.20 250),
oklch(0.55 0.18 250));
}
/* CSFloat-1:1: zoom modal — when user clicks the magnifier on an image. */
.csfloat-zoom-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9800;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: cmdk-fade-in 240ms ease;
}
.csfloat-zoom-modal {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-zoom-modal img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
filter: drop-shadow(0 12px 60px rgba(0,0,0,0.6));
}
.csfloat-zoom-modal-close {
position: absolute;
top: -12px;
right: -12px;
width: 36px;
height: 36px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
transition: background 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-zoom-modal-close:hover {
background: var(--bg-2);
transform: scale(1.05) rotate(90deg);
}
/* END gallery + rarity stripe + zoom modal */
/* CSFloat-1:1: trade offer card — for /offers (received/sent). */
.csfloat-trade-card {
display: grid;
grid-template-columns: 56px 1fr 1fr auto;
gap: 14px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
align-items: center;
margin-bottom: 8px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-trade-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-trade-card-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-trade-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.csfloat-trade-card-item-info {
min-width: 0;
}
.csfloat-trade-card-item-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trade-card-item-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
.csfloat-trade-card-status {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-trade-card-state {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
width: fit-content;
}
.csfloat-trade-card-state.pending { color: oklch(0.84 0.16 80); }
.csfloat-trade-card-state.accepted { color: oklch(0.84 0.18 152); }
.csfloat-trade-card-state.declined { color: oklch(0.84 0.18 30); }
.csfloat-trade-card-state.expired { color: var(--ink-3); }
.csfloat-trade-card-state::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.csfloat-trade-card-state.pending::before {
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-trade-card-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
.csfloat-trade-card-actions {
display: inline-flex;
gap: 6px;
}
.csfloat-trade-card-action {
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-trade-card-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-trade-card-action.primary {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
font-weight: 600;
}
.csfloat-trade-card-action.primary:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-trade-card-action.danger {
background: transparent;
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-trade-card-action.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
}
@media (max-width: 720px) {
.csfloat-trade-card {
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
row-gap: 8px;
}
.csfloat-trade-card-status,
.csfloat-trade-card-actions {
grid-column: 1 / -1;
}
}
/* CSFloat-1:1: wallet history list — transactions in /wallet. */
.csfloat-wallet-tx {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 6px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-wallet-tx:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-wallet-tx-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 13px;
}
.csfloat-wallet-tx-icon.deposit {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.32);
}
.csfloat-wallet-tx-icon.withdraw {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.32);
}
.csfloat-wallet-tx-icon.purchase {
color: var(--ink-2);
}
.csfloat-wallet-tx-info {
min-width: 0;
}
.csfloat-wallet-tx-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-wallet-tx-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 2px 0 0;
}
.csfloat-wallet-tx-amount {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink-1);
}
.csfloat-wallet-tx-amount.positive { color: oklch(0.78 0.18 152); }
.csfloat-wallet-tx-amount.negative { color: var(--ink-1); }
.csfloat-wallet-tx-status {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
font-weight: 600;
}
/* END trade card + wallet tx list */
/* CSFloat-1:1: page header pattern — h1 + subtitle + actions row. */
.csfloat-page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 16px 0 24px;
flex-wrap: wrap;
}
.csfloat-page-header-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.1;
}
.csfloat-page-header-subtitle {
font-size: 13px;
color: var(--ink-3);
margin: 6px 0 0;
line-height: 1.5;
max-width: 600px;
}
.csfloat-page-header-actions {
display: inline-flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* CSFloat-1:1: page section — h2 + description + body, repeatable. */
.csfloat-page-section {
margin-bottom: 32px;
}
.csfloat-page-section-header {
margin-bottom: 14px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.csfloat-page-section-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-page-section-desc {
font-size: 12px;
color: var(--ink-3);
margin: 4px 0 0;
}
.csfloat-page-section-action {
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-page-section-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: dashboard summary tiles — small KPI tiles in a row. */
.csfloat-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.csfloat-summary-tile {
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
overflow: hidden;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-summary-tile:hover {
border-color: var(--line-2);
}
.csfloat-summary-tile-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-summary-tile-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-summary-tile-delta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-summary-tile-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-summary-tile-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-summary-tile-delta::before {
font-family: var(--mono);
font-size: 10px;
opacity: 0.8;
}
.csfloat-summary-tile-delta.up::before { content: "▲"; }
.csfloat-summary-tile-delta.down::before { content: "▼"; }
.csfloat-summary-tile-icon {
position: absolute;
top: 14px;
right: 14px;
color: var(--ink-4);
font-size: 18px;
opacity: 0.8;
}
/* CSFloat-1:1: alert banner — full-width info/warning/error strip. */
.csfloat-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-left: 3px solid var(--cta);
border-radius: 6px;
margin-bottom: 14px;
font-size: 13px;
}
.csfloat-alert.success {
border-left-color: oklch(0.72 0.18 152);
background: oklch(0.20 0.02 152 / 0.4);
}
.csfloat-alert.warning {
border-left-color: oklch(0.78 0.16 80);
background: oklch(0.20 0.03 80 / 0.4);
}
.csfloat-alert.error {
border-left-color: oklch(0.70 0.18 30);
background: oklch(0.20 0.03 30 / 0.4);
}
.csfloat-alert-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 13px;
margin-top: 1px;
}
.csfloat-alert.success .csfloat-alert-icon { color: oklch(0.84 0.18 152); }
.csfloat-alert.warning .csfloat-alert-icon { color: oklch(0.84 0.16 80); }
.csfloat-alert.error .csfloat-alert-icon { color: oklch(0.84 0.18 30); }
.csfloat-alert-body { flex: 1 1 auto; min-width: 0; }
.csfloat-alert-title {
font-weight: 600;
color: var(--ink-1);
margin: 0 0 2px;
}
.csfloat-alert-desc {
color: var(--ink-2);
margin: 0;
line-height: 1.5;
}
.csfloat-alert-close {
background: transparent;
border: none;
color: var(--ink-4);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 4px;
margin-left: 6px;
align-self: flex-start;
transition: color 120ms ease;
}
.csfloat-alert-close:hover { color: var(--ink-1); }
/* END page header + section + summary tile + alert */
/* CSFloat-1:1: settings page layout — left rail + right form. */
.csfloat-settings-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: start;
margin-top: 8px;
}
@media (max-width: 820px) {
.csfloat-settings-layout {
grid-template-columns: 1fr;
gap: 16px;
}
}
.csfloat-settings-rail {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 2px;
}
@media (max-width: 820px) {
.csfloat-settings-rail {
position: static;
flex-direction: row;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 8px;
padding: 4px;
background: var(--bg-1);
}
.csfloat-settings-rail::-webkit-scrollbar { height: 0; }
}
.csfloat-settings-rail-link {
padding: 8px 12px;
font-size: 13px;
color: var(--ink-3);
border-radius: 6px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background 120ms ease, color 120ms ease;
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-settings-rail-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-settings-rail-link.active {
background: var(--bg-2);
color: var(--ink-1);
font-weight: 600;
position: relative;
}
.csfloat-settings-rail-link.active::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-settings-rail-link-icon {
width: 14px;
height: 14px;
color: var(--ink-3);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-settings-rail-link.active .csfloat-settings-rail-link-icon {
color: var(--cta);
}
.csfloat-settings-content {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 24px;
}
.csfloat-settings-group {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.csfloat-settings-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.csfloat-settings-group-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.csfloat-settings-group-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 14px;
line-height: 1.5;
}
.csfloat-settings-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-settings-row:first-child { padding-top: 0; }
.csfloat-settings-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.csfloat-settings-row-label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-settings-row-label-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-settings-row-label-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.4;
}
.csfloat-settings-row-control {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* CSFloat-1:1: settings: API key — copy + regenerate row. */
.csfloat-keyfield {
display: inline-flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font-family: var(--mono);
font-size: 12px;
}
.csfloat-keyfield-value {
padding: 6px 10px;
color: var(--ink-2);
letter-spacing: -0.005em;
user-select: all;
border-right: 1px solid var(--line);
min-width: 200px;
display: inline-flex;
align-items: center;
}
.csfloat-keyfield-action {
padding: 6px 10px;
background: var(--bg-2);
border: none;
color: var(--ink-2);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-keyfield-action:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* END settings page chrome */
/* CSFloat-1:1: deposit / payment method picker — Stripe / Steam / etc tiles. */
.csfloat-paymethod-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.csfloat-paymethod-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
text-align: left;
}
.csfloat-paymethod-tile:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-paymethod-tile.selected {
border-color: var(--cta);
background: oklch(0.20 0.02 250 / 0.4);
box-shadow: 0 0 0 1px var(--cta);
}
.csfloat-paymethod-tile:active {
transform: translateY(1px);
}
.csfloat-paymethod-tile-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 18px;
margin-bottom: 4px;
}
.csfloat-paymethod-tile-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
}
.csfloat-paymethod-tile-desc {
font-size: 10px;
color: var(--ink-3);
margin: 0;
line-height: 1.4;
}
/* CSFloat-1:1: amount input with quick-fill chips above. */
.csfloat-amount-input {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.csfloat-amount-input-quick {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.csfloat-amount-input-quick-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-amount-input-quick-btn.active {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-amount-input-field {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.csfloat-amount-input-field:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-amount-input-prefix {
padding: 12px 14px;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 15px;
display: inline-flex;
align-items: center;
}
.csfloat-amount-input-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 12px 14px;
font-family: var(--mono);
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-amount-input-suffix {
padding: 12px 14px;
background: var(--bg-2);
border-left: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 12px;
display: inline-flex;
align-items: center;
}
/* CSFloat-1:1: receipt / order summary — list of rows + total. */
.csfloat-receipt {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-receipt-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-receipt-row .label { color: var(--ink-3); }
.csfloat-receipt-row .value {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.csfloat-receipt-row.total {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-receipt-row.total .label {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-receipt-row.total .value {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-receipt-row.discount .value {
color: oklch(0.78 0.18 152);
}
/* END payment chrome */
/* CSFloat-1:1: support / FAQ accordion. */
.csfloat-faq {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-faq-item {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: border-color 120ms ease;
}
.csfloat-faq-item:hover { border-color: var(--line-2); }
.csfloat-faq-item.open { border-color: var(--line-2); }
.csfloat-faq-q {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
text-align: left;
transition: background 120ms ease;
letter-spacing: -0.005em;
}
.csfloat-faq-q:hover { background: var(--bg-2); }
.csfloat-faq-q::after {
content: "+";
font-family: var(--mono);
font-size: 18px;
font-weight: 400;
color: var(--ink-3);
margin-left: 12px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex-shrink: 0;
}
.csfloat-faq-item.open .csfloat-faq-q::after {
transform: rotate(45deg);
color: var(--ink-1);
}
.csfloat-faq-a {
padding: 0 16px 14px;
font-size: 13px;
color: var(--ink-3);
line-height: 1.6;
display: none;
}
.csfloat-faq-item.open .csfloat-faq-a { display: block; }
.csfloat-faq-a a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid oklch(0.55 0.18 250 / 0.4);
transition: border-color 120ms ease;
}
.csfloat-faq-a a:hover { border-bottom-color: var(--cta); }
/* CSFloat-1:1: support contact card row. */
.csfloat-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.csfloat-contact-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 120ms ease, background 120ms ease;
text-decoration: none;
}
.csfloat-contact-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-contact-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-contact-card-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
}
.csfloat-contact-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
.csfloat-contact-card-cta {
margin-top: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--cta);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* CSFloat-1:1: legal page typography. */
.csfloat-legal {
max-width: 760px;
margin: 24px auto 80px;
padding: 0 20px;
color: var(--ink-2);
font-size: 14px;
line-height: 1.7;
}
.csfloat-legal h1 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.csfloat-legal .csfloat-legal-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-legal h2 {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 32px 0 8px;
letter-spacing: -0.01em;
}
.csfloat-legal h3 {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 20px 0 6px;
}
.csfloat-legal p {
margin: 0 0 14px;
}
.csfloat-legal ul, .csfloat-legal ol {
margin: 0 0 14px;
padding-left: 20px;
}
.csfloat-legal li {
margin: 0 0 4px;
}
.csfloat-legal a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid oklch(0.55 0.18 250 / 0.4);
transition: border-color 120ms ease;
}
.csfloat-legal a:hover { border-bottom-color: var(--cta); }
.csfloat-legal code {
font-family: var(--mono);
font-size: 12px;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: 3px;
color: var(--ink-1);
}
.csfloat-legal blockquote {
margin: 16px 0;
padding: 12px 18px;
background: var(--bg-1);
border-left: 3px solid var(--cta);
border-radius: 0 8px 8px 0;
color: var(--ink-3);
font-style: italic;
}
/* END FAQ + contact + legal */
/* CSFloat-1:1: changelog page styling — release entries grouped by version. */
.csfloat-changelog {
max-width: 720px;
margin: 24px auto 80px;
padding: 0 20px;
}
.csfloat-changelog-entry {
position: relative;
padding: 24px 0 24px 24px;
border-left: 1px solid var(--line);
margin-left: 8px;
}
.csfloat-changelog-entry::before {
content: "";
position: absolute;
left: -5px;
top: 28px;
width: 9px;
height: 9px;
background: var(--bg);
border: 2px solid var(--cta);
border-radius: 50%;
}
.csfloat-changelog-entry.latest::before {
box-shadow: 0 0 12px oklch(0.55 0.18 250 / 0.5);
}
.csfloat-changelog-version {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.csfloat-changelog-version-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 4px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-changelog-version-tag.major {
background: oklch(0.30 0.05 30 / 0.18);
border-color: oklch(0.42 0.10 30 / 0.36);
color: oklch(0.84 0.16 30);
}
.csfloat-changelog-date {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
margin: 0 0 12px;
}
.csfloat-changelog-section {
margin: 14px 0 8px;
}
.csfloat-changelog-section-title {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 4px;
padding: 2px 6px;
border-radius: 3px;
}
.csfloat-changelog-section-title.added {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-changelog-section-title.fixed {
color: oklch(0.84 0.16 250);
background: oklch(0.30 0.05 250 / 0.18);
}
.csfloat-changelog-section-title.changed {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
}
.csfloat-changelog-section-title.removed {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-changelog-list {
list-style: none;
padding: 0;
margin: 4px 0 0;
}
.csfloat-changelog-list li {
padding: 4px 0 4px 18px;
position: relative;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.csfloat-changelog-list li::before {
content: "•";
position: absolute;
left: 4px;
top: 4px;
color: var(--ink-4);
}
/* CSFloat-1:1: feature highlight — used in landing/empty pages. */
.csfloat-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 24px 0;
}
.csfloat-feature-tile {
padding: 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feature-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-feature-tile-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 18px;
margin-bottom: 12px;
}
.csfloat-feature-tile-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.csfloat-feature-tile-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-feature-tile-tag {
position: absolute;
top: 16px;
right: 16px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
padding: 2px 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 3px;
}
/* END changelog + feature grid */
/* CSFloat-1:1: keyboard shortcut hint — small kbd pill. */
.csfloat-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 1px 5px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
background: var(--bg-2);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 3px;
letter-spacing: 0.04em;
line-height: 1.4;
vertical-align: middle;
}
/* CSFloat-1:1: scrollable horizontal carousel — for related items, similar. */
.csfloat-carousel {
position: relative;
margin: 0 -4px;
}
.csfloat-carousel-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px;
scroll-padding: 4px;
}
.csfloat-carousel-track::-webkit-scrollbar { height: 0; }
.csfloat-carousel-track > * {
scroll-snap-align: start;
flex-shrink: 0;
}
.csfloat-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
transition: background 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-carousel-arrow.prev { left: 8px; }
.csfloat-carousel-arrow.next { right: 8px; }
.csfloat-carousel-arrow:hover {
background: var(--bg-2);
transform: translateY(-50%) scale(1.05);
}
.csfloat-carousel-arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* CSFloat-1:1: timeline / activity feed — for /profile activity tab. */
.csfloat-timeline {
position: relative;
padding-left: 24px;
}
.csfloat-timeline::before {
content: "";
position: absolute;
left: 7px;
top: 4px;
bottom: 4px;
width: 1px;
background: var(--line);
}
.csfloat-timeline-item {
position: relative;
padding-bottom: 18px;
}
.csfloat-timeline-item::before {
content: "";
position: absolute;
left: -22px;
top: 4px;
width: 9px;
height: 9px;
background: var(--bg);
border: 2px solid var(--line-2);
border-radius: 50%;
}
.csfloat-timeline-item.success::before {
border-color: oklch(0.72 0.18 152);
}
.csfloat-timeline-item.warning::before {
border-color: oklch(0.78 0.16 80);
}
.csfloat-timeline-item.error::before {
border-color: oklch(0.70 0.18 30);
}
.csfloat-timeline-item.info::before {
border-color: var(--cta);
}
.csfloat-timeline-item-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
margin-bottom: 2px;
}
.csfloat-timeline-item-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-timeline-item-desc {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
line-height: 1.5;
}
/* CSFloat-1:1: floating action button — bottom-right global CTA. */
.csfloat-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 50%;
color: oklch(0.98 0 0);
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.4),
0 4px 12px rgba(0,0,0,0.3);
z-index: 8800;
transition: background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 140ms ease;
}
.csfloat-fab:hover {
background: oklch(0.65 0.18 250);
transform: scale(1.06);
box-shadow: 0 12px 32px oklch(0.55 0.18 250 / 0.5),
0 6px 14px rgba(0,0,0,0.35);
}
.csfloat-fab:active {
transform: scale(0.98);
}
/* END kbd + carousel + timeline + fab */
/* CSFloat-1:1: focus-visible ring on every interactive element. Apple uses
this consistently — keyboard nav must be visible, not just inferable. */
.csfloat-grid-card:focus-visible,
.csfloat-band-card:focus-visible,
.csfloat-hero-stack-card:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg),
0 0 0 4px var(--cta),
0 14px 36px rgba(0,0,0,0.55);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg),
0 0 0 4px oklch(0.55 0.18 250 / 0.6);
transition: box-shadow 80ms ease;
}
/* CSFloat-1:1: smooth scroll for in-page anchor links (TOCs, /support). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* CSFloat-1:1: text selection — match brand blue. */
::selection {
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
}
::-moz-selection {
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
}
/* CSFloat-1:1: scrollbar styling — narrow, dark, blends into UI. */
* {
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 4px;
transition: background 120ms ease;
}
*::-webkit-scrollbar-thumb:hover {
background: oklch(0.42 0.014 260);
}
*::-webkit-scrollbar-corner { background: transparent; }
/* CSFloat-1:1: image rendering — make pixel-art product images crisp. */
.csfloat-pixel-art {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* CSFloat-1:1: utility — visually-hidden for accessible labels. */
.csfloat-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* CSFloat-1:1: print styles — suppress chrome, keep main content readable. */
@media print {
.nav, .subnav, .pulse,
.csfloat-cart-drawer, .csfloat-cart-drawer-backdrop,
.csfloat-cmdk-backdrop, .csfloat-toast-container,
.csfloat-fab, .csfloat-footer {
display: none !important;
}
body, .layout, .site-root {
background: white !important;
color: black !important;
}
.csfloat-grid-card, .csfloat-band-card {
page-break-inside: avoid;
border: 1px solid #ddd !important;
background: white !important;
}
}
/* END a11y + global polish */
/* CSFloat-1:1: live tape (Pulse bar) — strip of recent trades scrolling. */
.csfloat-pulse {
display: flex;
align-items: center;
gap: 12px;
height: 32px;
padding: 0 16px;
background: var(--bg);
border-bottom: 1px solid var(--line);
overflow: hidden;
position: relative;
}
.csfloat-pulse-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(0.84 0.18 30);
flex-shrink: 0;
}
.csfloat-pulse-label::before {
content: "";
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-pulse-track {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 24px;
overflow: hidden;
mask-image: linear-gradient(90deg,
transparent 0%,
black 5%,
black 95%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
black 5%,
black 95%,
transparent 100%);
}
.csfloat-pulse-tape {
display: inline-flex;
gap: 24px;
flex-shrink: 0;
animation: pulse-scroll 60s linear infinite;
}
@keyframes pulse-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.csfloat-pulse:hover .csfloat-pulse-tape {
animation-play-state: paused;
}
.csfloat-pulse-trade {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
white-space: nowrap;
}
.csfloat-pulse-trade-name {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-pulse-trade-price {
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-pulse-trade-arrow {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-pulse-trade-time {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-pulse-trade-buyer {
color: var(--ink-3);
}
/* CSFloat-1:1: subtle background grid texture — applied to body via ::before
in the design tokens. The signature editorial-feel detail. */
/* CSFloat-1:1: section heading with kicker eyebrow — Apple-style intros. */
.csfloat-section-intro {
text-align: center;
margin: 48px auto 24px;
max-width: 720px;
padding: 0 16px;
}
.csfloat-section-intro-kicker {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 10px;
}
.csfloat-section-intro-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 8px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.csfloat-section-intro-desc {
font-size: clamp(14px, 1.4vw, 16px);
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-section-intro-actions {
margin-top: 18px;
display: inline-flex;
gap: 10px;
justify-content: center;
}
/* END pulse + section intro */
/* CSFloat-1:1: chip count badge that sits on top of an icon (cart, bell). */
.csfloat-icon-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 2px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
pointer-events: none;
animation: badge-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-icon-badge.dot {
min-width: 8px;
height: 8px;
padding: 0;
border-width: 1px;
}
.csfloat-icon-badge.accent { background: var(--cta); }
.csfloat-icon-badge.success { background: oklch(0.62 0.18 152); }
.csfloat-icon-badge.warning { background: oklch(0.68 0.16 80); color: oklch(0.10 0 0); }
@keyframes badge-in {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.csfloat-icon-badge.changed {
animation: badge-bump 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes badge-bump {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* CSFloat-1:1: spinner — small inline loading indicator. */
.csfloat-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--line);
border-top-color: var(--cta);
border-radius: 50%;
animation: csfloat-spin 700ms linear infinite;
vertical-align: middle;
}
.csfloat-spinner.large { width: 24px; height: 24px; border-width: 3px; }
.csfloat-spinner.tiny { width: 10px; height: 10px; border-width: 1.5px; }
.csfloat-spinner.inverse {
border-color: rgba(255,255,255,0.2);
border-top-color: oklch(0.98 0 0);
}
@keyframes csfloat-spin {
to { transform: rotate(360deg); }
}
/* CSFloat-1:1: button with built-in loading state. */
.csfloat-btn-loading {
position: relative;
pointer-events: none;
color: transparent !important;
}
.csfloat-btn-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid rgba(255,255,255,0.2);
border-top-color: oklch(0.98 0 0);
border-radius: 50%;
animation: csfloat-spin 700ms linear infinite;
}
/* CSFloat-1:1: copyable inline value — like an order ID, hash, address. */
.csfloat-copy-value {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
user-select: all;
}
.csfloat-copy-value:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-copy-value::after {
content: "📋";
filter: grayscale(1) opacity(0.5);
font-size: 10px;
margin-left: 2px;
transition: filter 120ms ease;
}
.csfloat-copy-value:hover::after {
filter: grayscale(0) opacity(1);
}
.csfloat-copy-value.copied {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.84 0.18 152);
}
.csfloat-copy-value.copied::after {
content: "✓";
color: oklch(0.84 0.18 152);
filter: none;
}
/* END icon badge + spinner + button-loading + copyable */
/* CSFloat-1:1: nav search input refinement — match csfloat search look. */
.nav-search-wrap {
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
max-width: 480px;
min-width: 200px;
}
.nav-search-input {
width: 100%;
height: 36px;
padding: 0 12px 0 36px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-1);
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.nav-search-input::placeholder { color: var(--ink-3); }
.nav-search-input:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.nav-search-input:focus {
outline: none;
background: var(--bg-1);
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.16);
}
.nav-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-4);
font-size: 13px;
pointer-events: none;
transition: color 140ms ease;
}
.nav-search-wrap:focus-within .nav-search-icon {
color: var(--ink-2);
}
.nav-search-shortcut {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
pointer-events: none;
letter-spacing: 0.04em;
transition: opacity 140ms ease;
}
.nav-search-wrap:focus-within .nav-search-shortcut { opacity: 0; }
/* CSFloat-1:1: nav active link — underline animation in. */
.nav-link {
position: relative;
transition: color 140ms ease;
}
.nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -10px;
height: 2px;
background: var(--ink-1);
border-radius: 1px;
transform: scaleX(0);
transform-origin: center;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1);
}
.nav-link.active {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: hero CTA hover — slight tilt + brighter glow. */
.hero-actions .btn-accent,
.hero-actions a.btn-accent {
transition: background 160ms ease,
transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 160ms ease;
}
.hero-actions .btn-accent:hover,
.hero-actions a.btn-accent:hover {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 12px 32px oklch(0.55 0.18 250 / 0.45),
0 4px 12px oklch(0.55 0.18 250 / 0.25);
}
.hero-actions .btn-accent:active,
.hero-actions a.btn-accent:active {
transform: translateY(0) scale(1);
transition-duration: 80ms;
}
/* CSFloat-1:1: subnav improvements — section links read clearer. */
.subnav {
position: sticky;
top: 56px;
z-index: 800;
background: oklch(0.18 0.008 260 / 0.85);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
}
/* END nav refinements */
/* CSFloat-1:1: bottom sticky action bar — for /item page mobile + cart. */
.csfloat-sticky-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 800;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-top: 1px solid var(--line);
padding: 10px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
transform: translateY(0);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-sticky-bar.hidden {
transform: translateY(100%);
}
.csfloat-sticky-bar-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-sticky-bar-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-sticky-bar-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
.csfloat-sticky-bar-price {
font-family: var(--mono);
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-sticky-bar-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
.csfloat-sticky-bar-cta {
padding: 10px 16px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, transform 80ms ease;
white-space: nowrap;
}
.csfloat-sticky-bar-cta:hover { background: oklch(0.65 0.18 250); }
.csfloat-sticky-bar-cta:active { transform: translateY(1px); }
.csfloat-sticky-bar-cta.ghost {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-sticky-bar-cta.ghost:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: full-bleed glass header for /item page floating above hero. */
.csfloat-glass-header {
position: sticky;
top: 56px;
z-index: 700;
background: oklch(0.16 0.008 260 / 0.85);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border-bottom: 1px solid var(--line);
padding: 12px 24px;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.csfloat-glass-header-back {
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-glass-header-back:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-glass-header-text {
flex: 1 1 auto;
min-width: 0;
}
.csfloat-glass-header-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-glass-header-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
.csfloat-glass-header-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* END sticky bar + glass header */
/* CSFloat-1:1: rich item-modal listing row — for the listings list in /item. */
.csfloat-listing-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
margin-bottom: 6px;
text-decoration: none;
}
.csfloat-listing-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateX(2px);
}
.csfloat-listing-row-rank {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-4);
text-align: center;
}
.csfloat-listing-row-rank.top1 {
color: oklch(0.84 0.18 152);
font-weight: 700;
}
.csfloat-listing-row-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.csfloat-listing-row-line {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-2);
}
.csfloat-listing-row-seller {
font-weight: 500;
color: var(--ink-1);
}
.csfloat-listing-row-online {
width: 6px;
height: 6px;
border-radius: 50%;
background: oklch(0.72 0.18 152);
display: inline-block;
}
.csfloat-listing-row-online.offline {
background: var(--ink-4);
}
.csfloat-listing-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: -0.005em;
}
.csfloat-listing-row-meta .sep {
color: var(--ink-4);
}
.csfloat-listing-row-floatbar {
width: 56px;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg,
oklch(0.65 0.18 30) 0%,
oklch(0.78 0.16 50) 18%,
oklch(0.82 0.16 80) 35%,
oklch(0.78 0.18 152) 65%,
oklch(0.65 0.18 30) 100%);
position: relative;
overflow: hidden;
}
.csfloat-listing-row-floatbar-thumb {
position: absolute;
top: 50%;
width: 2px;
height: 7px;
background: oklch(0.98 0 0);
border-radius: 1px;
transform: translate(-50%, -50%);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.csfloat-listing-row-price {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
letter-spacing: -0.01em;
}
.csfloat-listing-row-price-sub {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: floor / suggested-price callout. */
.csfloat-floor-callout {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 8px;
margin-bottom: 12px;
}
.csfloat-floor-callout-label {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
}
.csfloat-floor-callout-label::before {
content: "";
width: 5px;
height: 5px;
background: var(--cta);
border-radius: 50%;
animation: floor-pulse 1800ms ease-in-out infinite;
}
@keyframes floor-pulse {
0%, 100% { opacity: 0.6; box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0.6); }
50% { opacity: 1; box-shadow: 0 0 0 6px oklch(0.55 0.18 250 / 0); }
}
.csfloat-floor-callout-price {
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END listing row + floor callout */
/* CSFloat-1:1: filter quick-toggle pills for /market — Trade Holds, Stickers
Applied, Online Sellers, etc. Inline above the grid. */
.csfloat-quicktoggles {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 0;
margin-bottom: 8px;
}
.csfloat-quicktoggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-quicktoggle:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-quicktoggle.active {
background: oklch(0.30 0.05 250 / 0.18);
border-color: var(--cta);
color: var(--cta);
font-weight: 600;
}
.csfloat-quicktoggle .csfloat-quicktoggle-icon {
font-size: 11px;
opacity: 0.8;
}
.csfloat-quicktoggle.active .csfloat-quicktoggle-icon {
opacity: 1;
}
.csfloat-quicktoggle .csfloat-quicktoggle-count {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
margin-left: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-quicktoggle.active .csfloat-quicktoggle-count {
color: oklch(0.78 0.18 250);
}
/* CSFloat-1:1: sort dropdown anchored on the right of results-bar. */
.csfloat-sort {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-sort-label {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-sort-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-sort-trigger:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-sort-trigger::after {
content: "▾";
font-size: 9px;
color: var(--ink-3);
margin-left: 4px;
}
/* CSFloat-1:1: view toggle — grid view vs list view. */
.csfloat-view-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
}
.csfloat-view-toggle-btn {
width: 28px;
height: 24px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 13px;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-view-toggle-btn:hover { color: var(--ink-1); }
.csfloat-view-toggle-btn.active {
background: var(--bg);
color: var(--ink-1);
}
/* CSFloat-1:1: per-page selector. */
.csfloat-perpage {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--ink-3);
}
.csfloat-perpage select {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px 6px;
color: var(--ink-1);
font-family: var(--mono);
font-size: 11px;
cursor: pointer;
font-variant-numeric: tabular-nums;
}
/* END quicktoggles + sort + view + perpage */
/* CSFloat-1:1: list view layout — alternative to grid view, denser table-like rows. */
.csfloat-grid.list-view {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-grid.list-view .csfloat-grid-card {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 14px;
padding: 10px 14px;
align-items: center;
}
.csfloat-grid.list-view .csfloat-grid-card-img {
width: 56px;
height: 56px;
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-grid.list-view .csfloat-grid-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-grid.list-view .csfloat-grid-card-info {
min-width: 0;
}
.csfloat-grid.list-view .csfloat-grid-card-name {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-grid.list-view .csfloat-grid-card-floatbar {
width: 80px;
}
.csfloat-grid.list-view .csfloat-grid-card-pricerow {
text-align: right;
}
/* CSFloat-1:1: empty grid placeholder — when filters return no results. */
.csfloat-grid-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 20px;
gap: 12px;
}
.csfloat-grid-empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 22px;
}
.csfloat-grid-empty-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
}
.csfloat-grid-empty-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
max-width: 320px;
line-height: 1.5;
}
.csfloat-grid-empty-actions {
margin-top: 8px;
display: inline-flex;
gap: 8px;
}
.csfloat-grid-empty-action {
padding: 8px 14px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-grid-empty-action.primary {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-grid-empty-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-grid-empty-action.primary:hover {
background: oklch(0.65 0.18 250);
border-color: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: load-more sentinel + spinner at end of grid for infinite scroll. */
.csfloat-grid-loadmore {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px 0;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-grid-loadmore-btn {
padding: 10px 18px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-grid-loadmore-btn:hover {
background: var(--bg-2);
border-color: oklch(0.42 0.014 260);
}
/* END list view + empty grid + loadmore */
/* CSFloat-1:1: 404 / not-found page polish. */
.csfloat-404 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 60px 24px;
gap: 16px;
}
.csfloat-404-code {
font-family: var(--mono);
font-size: clamp(80px, 12vw, 140px);
font-weight: 800;
color: var(--ink-1);
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
.csfloat-404-title {
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-404-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
max-width: 420px;
line-height: 1.6;
}
.csfloat-404-actions {
margin-top: 12px;
display: inline-flex;
gap: 10px;
}
.csfloat-404-actions a {
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-404-actions a.primary {
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
}
.csfloat-404-actions a.primary:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-404-actions a.ghost {
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
}
.csfloat-404-actions a.ghost:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: maintenance / status page polish. */
.csfloat-maintenance {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 60px 24px;
gap: 16px;
}
.csfloat-maintenance-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: oklch(0.30 0.05 80 / 0.18);
border: 2px solid oklch(0.42 0.10 80 / 0.36);
color: oklch(0.84 0.16 80);
font-size: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
animation: maint-pulse 2400ms ease-in-out infinite;
}
@keyframes maint-pulse {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.16 80 / 0.4); }
50% { box-shadow: 0 0 0 16px oklch(0.55 0.16 80 / 0); }
}
/* END 404 + maintenance pages */
/* CSFloat-1:1: dim text utility — for de-emphasized meta text. */
.csfloat-dim { color: var(--ink-4); }
.csfloat-dim-2 { color: var(--ink-3); }
.csfloat-bright { color: var(--ink-1); }
/* CSFloat-1:1: text overflow utility. */
.csfloat-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
.csfloat-truncate-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-truncate-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* CSFloat-1:1: gap utility — common spacing values. */
.csfloat-gap-2 { gap: 2px; }
.csfloat-gap-4 { gap: 4px; }
.csfloat-gap-6 { gap: 6px; }
.csfloat-gap-8 { gap: 8px; }
.csfloat-gap-10 { gap: 10px; }
.csfloat-gap-12 { gap: 12px; }
.csfloat-gap-14 { gap: 14px; }
.csfloat-gap-16 { gap: 16px; }
.csfloat-gap-20 { gap: 20px; }
.csfloat-gap-24 { gap: 24px; }
/* END utilities */
/* CSFloat-1:1: chart axis tick labels for SVG-based charts. */
.csfloat-chart-tick-label {
font-family: var(--mono);
font-size: 9px;
fill: var(--ink-4);
letter-spacing: -0.005em;
}
/* CSFloat-1:1: cursor variants — for affordance signaling. */
.csfloat-cursor-pointer { cursor: pointer; }
.csfloat-cursor-grab { cursor: grab; }
.csfloat-cursor-grabbing { cursor: grabbing; }
.csfloat-cursor-zoom-in { cursor: zoom-in; }
.csfloat-cursor-zoom-out { cursor: zoom-out; }
.csfloat-cursor-not-allowed { cursor: not-allowed; }
.csfloat-cursor-text { cursor: text; }
.csfloat-cursor-help { cursor: help; }
/* CSFloat-1:1: pointer-events helpers. */
.csfloat-pe-none { pointer-events: none; }
.csfloat-pe-auto { pointer-events: auto; }
/* CSFloat-1:1: align helpers (flex). */
.csfloat-flex { display: flex; }
.csfloat-inline-flex { display: inline-flex; }
.csfloat-grid { display: grid; }
.csfloat-block { display: block; }
.csfloat-inline-block { display: inline-block; }
.csfloat-hidden { display: none !important; }
.csfloat-flex-col { flex-direction: column; }
.csfloat-flex-row { flex-direction: row; }
.csfloat-items-start { align-items: flex-start; }
.csfloat-items-center { align-items: center; }
.csfloat-items-end { align-items: flex-end; }
.csfloat-items-baseline { align-items: baseline; }
.csfloat-items-stretch { align-items: stretch; }
.csfloat-justify-start { justify-content: flex-start; }
.csfloat-justify-center { justify-content: center; }
.csfloat-justify-end { justify-content: flex-end; }
.csfloat-justify-between { justify-content: space-between; }
.csfloat-justify-around { justify-content: space-around; }
.csfloat-flex-1 { flex: 1 1 auto; }
.csfloat-flex-none { flex: 0 0 auto; }
.csfloat-flex-wrap { flex-wrap: wrap; }
.csfloat-flex-nowrap { flex-wrap: nowrap; }
/* CSFloat-1:1: dimension helpers. */
.csfloat-w-full { width: 100%; }
.csfloat-h-full { height: 100%; }
.csfloat-w-fit { width: fit-content; }
.csfloat-w-auto { width: auto; }
.csfloat-min-w-0 { min-width: 0; }
/* CSFloat-1:1: position helpers. */
.csfloat-relative { position: relative; }
.csfloat-absolute { position: absolute; }
.csfloat-fixed { position: fixed; }
.csfloat-sticky { position: sticky; }
.csfloat-static { position: static; }
/* CSFloat-1:1: overflow helpers. */
.csfloat-overflow-hidden { overflow: hidden; }
.csfloat-overflow-auto { overflow: auto; }
.csfloat-overflow-x-auto { overflow-x: auto; }
.csfloat-overflow-y-auto { overflow-y: auto; }
/* CSFloat-1:1: opacity helpers. */
.csfloat-opacity-0 { opacity: 0; }
.csfloat-opacity-25 { opacity: 0.25; }
.csfloat-opacity-50 { opacity: 0.5; }
.csfloat-opacity-75 { opacity: 0.75; }
.csfloat-opacity-100 { opacity: 1; }
/* CSFloat-1:1: text alignment. */
.csfloat-text-left { text-align: left; }
.csfloat-text-center { text-align: center; }
.csfloat-text-right { text-align: right; }
/* CSFloat-1:1: font weight. */
.csfloat-font-300 { font-weight: 300; }
.csfloat-font-400 { font-weight: 400; }
.csfloat-font-500 { font-weight: 500; }
.csfloat-font-600 { font-weight: 600; }
.csfloat-font-700 { font-weight: 700; }
.csfloat-font-800 { font-weight: 800; }
/* CSFloat-1:1: font family helpers. */
.csfloat-mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-serif {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
}
/* CSFloat-1:1: tabular-nums helper for inline numerics. */
.csfloat-tnum { font-variant-numeric: tabular-nums; }
/* END utility helpers */
/* CSFloat-1:1: text size scale (only honored ratios per design tokens). */
.csfloat-text-9 { font-size: 9px; }
.csfloat-text-10 { font-size: 10px; }
.csfloat-text-11 { font-size: 11px; }
.csfloat-text-12 { font-size: 12px; }
.csfloat-text-13 { font-size: 13px; }
.csfloat-text-14 { font-size: 14px; }
.csfloat-text-15 { font-size: 15px; }
.csfloat-text-16 { font-size: 15px; }
.csfloat-text-18 { font-size: 18px; }
.csfloat-text-20 { font-size: 18px; }
.csfloat-text-22 { font-size: 22px; }
.csfloat-text-24 { font-size: 22px; }
.csfloat-text-28 { font-size: 28px; }
.csfloat-text-32 { font-size: 28px; }
.csfloat-text-40 { font-size: 40px; }
.csfloat-text-48 { font-size: 48px; }
.csfloat-text-64 { font-size: 64px; }
.csfloat-text-88 { font-size: 88px; }
/* CSFloat-1:1: text uppercase helpers. */
.csfloat-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.csfloat-lowercase { text-transform: lowercase; }
.csfloat-capitalize { text-transform: capitalize; }
/* CSFloat-1:1: line-height presets. */
.csfloat-leading-tight { line-height: 1.1; }
.csfloat-leading-snug { line-height: 1.3; }
.csfloat-leading-normal { line-height: 1.5; }
.csfloat-leading-relaxed { line-height: 1.65; }
/* CSFloat-1:1: tracking presets. */
.csfloat-tracking-tighter { letter-spacing: -0.035em; }
.csfloat-tracking-tight { letter-spacing: -0.02em; }
.csfloat-tracking-normal { letter-spacing: -0.005em; }
.csfloat-tracking-wide { letter-spacing: 0.02em; }
.csfloat-tracking-wider { letter-spacing: 0.06em; }
.csfloat-tracking-widest { letter-spacing: 0.16em; }
/* CSFloat-1:1: rounded corners. */
.csfloat-rounded-0 { border-radius: 0; }
.csfloat-rounded-2 { border-radius: 2px; }
.csfloat-rounded-4 { border-radius: 4px; }
.csfloat-rounded-6 { border-radius: 6px; }
.csfloat-rounded-8 { border-radius: 8px; }
.csfloat-rounded-10 { border-radius: 10px; }
.csfloat-rounded-12 { border-radius: 12px; }
.csfloat-rounded-full { border-radius: 999px; }
/* CSFloat-1:1: border presets. */
.csfloat-border { border: 1px solid var(--line); }
.csfloat-border-2 { border: 1px solid var(--line-2); }
.csfloat-border-accent { border: 1px solid var(--cta); }
.csfloat-border-t { border-top: 1px solid var(--line); }
.csfloat-border-b { border-bottom: 1px solid var(--line); }
.csfloat-border-l { border-left: 1px solid var(--line); }
.csfloat-border-r { border-right: 1px solid var(--line); }
.csfloat-border-none { border: none; }
/* CSFloat-1:1: bg presets. */
.csfloat-bg { background: var(--bg); }
.csfloat-bg-1 { background: var(--bg-1); }
.csfloat-bg-2 { background: var(--bg-2); }
.csfloat-bg-3 { background: var(--bg-3); }
.csfloat-bg-transparent { background: transparent; }
.csfloat-bg-accent { background: var(--cta); }
.csfloat-bg-accent-dim { background: oklch(0.30 0.05 250 / 0.18); }
/* CSFloat-1:1: shadow presets. */
.csfloat-shadow-0 { box-shadow: none; }
.csfloat-shadow-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.csfloat-shadow-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.csfloat-shadow-3 { box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
.csfloat-shadow-4 { box-shadow: 0 12px 32px rgba(0,0,0,0.6); }
.csfloat-shadow-glow { box-shadow: 0 0 24px oklch(0.55 0.18 250 / 0.4); }
/* CSFloat-1:1: padding scale. */
.csfloat-p-0 { padding: 0; }
.csfloat-p-2 { padding: 2px; }
.csfloat-p-4 { padding: 4px; }
.csfloat-p-6 { padding: 6px; }
.csfloat-p-8 { padding: 8px; }
.csfloat-p-10 { padding: 10px; }
.csfloat-p-12 { padding: 12px; }
.csfloat-p-14 { padding: 14px; }
.csfloat-p-16 { padding: 16px; }
.csfloat-p-20 { padding: 20px; }
.csfloat-p-24 { padding: 24px; }
.csfloat-p-32 { padding: 32px; }
.csfloat-px-0 { padding-left: 0; padding-right: 0; }
.csfloat-px-4 { padding-left: 4px; padding-right: 4px; }
.csfloat-px-6 { padding-left: 6px; padding-right: 6px; }
.csfloat-px-8 { padding-left: 8px; padding-right: 8px; }
.csfloat-px-10 { padding-left: 10px; padding-right: 10px; }
.csfloat-px-12 { padding-left: 12px; padding-right: 12px; }
.csfloat-px-14 { padding-left: 14px; padding-right: 14px; }
.csfloat-px-16 { padding-left: 16px; padding-right: 16px; }
.csfloat-px-20 { padding-left: 20px; padding-right: 20px; }
.csfloat-px-24 { padding-left: 24px; padding-right: 24px; }
.csfloat-py-0 { padding-top: 0; padding-bottom: 0; }
.csfloat-py-4 { padding-top: 4px; padding-bottom: 4px; }
.csfloat-py-6 { padding-top: 6px; padding-bottom: 6px; }
.csfloat-py-8 { padding-top: 8px; padding-bottom: 8px; }
.csfloat-py-10 { padding-top: 10px; padding-bottom: 10px; }
.csfloat-py-12 { padding-top: 12px; padding-bottom: 12px; }
.csfloat-py-14 { padding-top: 14px; padding-bottom: 14px; }
.csfloat-py-16 { padding-top: 16px; padding-bottom: 16px; }
.csfloat-py-20 { padding-top: 20px; padding-bottom: 20px; }
.csfloat-py-24 { padding-top: 24px; padding-bottom: 24px; }
/* CSFloat-1:1: margin scale. */
.csfloat-m-0 { margin: 0; }
.csfloat-mt-2 { margin-top: 2px; }
.csfloat-mt-4 { margin-top: 4px; }
.csfloat-mt-6 { margin-top: 6px; }
.csfloat-mt-8 { margin-top: 8px; }
.csfloat-mt-12 { margin-top: 12px; }
.csfloat-mt-16 { margin-top: 16px; }
.csfloat-mt-20 { margin-top: 20px; }
.csfloat-mt-24 { margin-top: 24px; }
.csfloat-mt-32 { margin-top: 32px; }
.csfloat-mb-2 { margin-bottom: 2px; }
.csfloat-mb-4 { margin-bottom: 4px; }
.csfloat-mb-6 { margin-bottom: 6px; }
.csfloat-mb-8 { margin-bottom: 8px; }
.csfloat-mb-12 { margin-bottom: 12px; }
.csfloat-mb-16 { margin-bottom: 16px; }
.csfloat-mb-20 { margin-bottom: 20px; }
.csfloat-mb-24 { margin-bottom: 24px; }
.csfloat-mb-32 { margin-bottom: 32px; }
.csfloat-mx-auto { margin-left: auto; margin-right: auto; }
.csfloat-ml-auto { margin-left: auto; }
.csfloat-mr-auto { margin-right: auto; }
/* END utility scales */
/* CSFloat-1:1: media query helpers — desktop-only / mobile-only utilities. */
@media (min-width: 720px) {
.csfloat-mobile-only { display: none !important; }
}
@media (max-width: 719px) {
.csfloat-desktop-only { display: none !important; }
}
@media (min-width: 1100px) {
.csfloat-tablet-down-only { display: none !important; }
}
@media (max-width: 1099px) {
.csfloat-desktop-up-only { display: none !important; }
}
/* CSFloat-1:1: focus glow refinement — pill CTAs get a halo, not a ring. */
.btn-accent:focus-visible {
box-shadow: 0 0 0 3px var(--bg),
0 0 0 5px oklch(0.55 0.18 250 / 0.6),
0 8px 24px oklch(0.55 0.18 250 / 0.32);
}
/* CSFloat-1:1: CSS variables — alias common values for inline use. */
:root {
--csfloat-radius-card: 8px;
--csfloat-radius-input: 6px;
--csfloat-radius-pill: 999px;
--csfloat-radius-tile: 10px;
--csfloat-radius-modal: 12px;
--csfloat-shadow-card: 0 1px 2px rgba(0,0,0,0.3);
--csfloat-shadow-card-hover: 0 14px 36px rgba(0,0,0,0.55);
--csfloat-shadow-modal: 0 20px 60px rgba(0,0,0,0.65);
--csfloat-transition: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
--csfloat-transition-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
--csfloat-transition-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: common card chassis — base for any product/listing card. */
.csfloat-card-base {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--csfloat-radius-card);
box-shadow: var(--csfloat-shadow-card);
transition: border-color var(--csfloat-transition),
transform var(--csfloat-transition),
box-shadow var(--csfloat-transition),
background var(--csfloat-transition);
}
.csfloat-card-base:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: var(--csfloat-shadow-card-hover);
}
/* CSFloat-1:1: panel chassis — for inline panels inside content. */
.csfloat-panel {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px;
}
.csfloat-panel-flush {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0;
overflow: hidden;
}
.csfloat-panel-header {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
}
.csfloat-panel-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-panel-body {
padding: 18px;
}
.csfloat-panel-footer {
padding: 12px 18px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* CSFloat-1:1: divider on internal panel content. */
.csfloat-panel-divider {
height: 1px;
background: var(--line);
margin: 14px 0;
}
/* END responsive helpers + variables + chassis */
/* CSFloat-1:1: hero section refinement — heavy display type w/ blue accent
word, generous whitespace, light-bar fade ::after. */
.hero {
position: relative;
padding: 72px 0 56px;
overflow: hidden;
background:
radial-gradient(1200px 600px at 50% -10%,
oklch(0.55 0.18 250 / 0.12),
transparent 65%);
}
.hero::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 560px;
max-width: 92%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.45) 50%,
transparent 100%);
}
.hero h1 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ink-1);
margin: 0 auto 14px;
max-width: 1100px;
text-align: center;
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero h1 .accent {
display: inline;
background: linear-gradient(135deg,
oklch(0.78 0.18 240) 0%,
var(--cta) 50%,
oklch(0.85 0.18 250) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px oklch(0.55 0.18 250 / 0.32));
font-style: italic;
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
}
.hero p.lede {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--ink-3);
text-align: center;
margin: 0 auto 26px;
max-width: 640px;
line-height: 1.5;
}
.hero-actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.hero-actions .btn-accent {
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.32);
cursor: pointer;
}
.hero-actions .btn-ghost {
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
background: oklch(0.20 0.008 260 / 0.6);
color: var(--ink-1);
border: 1px solid var(--line-2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.hero-actions .btn-ghost:hover {
background: oklch(0.24 0.010 260 / 0.7);
border-color: oklch(0.42 0.014 260);
}
/* END hero refinement */
/* CSFloat-1:1: micro-detail — input clear button (×) inside controlled inputs. */
.csfloat-input-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
opacity: 0;
pointer-events: none;
}
.csfloat-input-group:has(input:not(:placeholder-shown)) .csfloat-input-clear {
opacity: 1;
pointer-events: auto;
}
.csfloat-input-clear:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* CSFloat-1:1: link variants. */
.csfloat-link {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid oklch(0.55 0.18 250 / 0.3);
transition: border-color 120ms ease;
cursor: pointer;
}
.csfloat-link:hover {
border-bottom-color: var(--cta);
}
.csfloat-link.muted {
color: var(--ink-3);
border-bottom-color: var(--line);
}
.csfloat-link.muted:hover {
color: var(--ink-1);
border-bottom-color: var(--line-2);
}
/* CSFloat-1:1: card grid responsive — fluid auto-fill on /market. */
.csfloat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: 12px;
width: 100%;
}
@media (min-width: 1400px) {
.csfloat-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (max-width: 540px) {
.csfloat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
}
@media (max-width: 380px) {
.csfloat-grid {
gap: 6px;
}
}
/* CSFloat-1:1: collection grid (smaller cards) — for /database / featured. */
.csfloat-grid-compact {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
gap: 10px;
}
@media (max-width: 540px) {
.csfloat-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* CSFloat-1:1: feature row — alternating image/text on landing pages. */
.csfloat-feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin: 56px 0;
}
@media (max-width: 820px) {
.csfloat-feature-row { grid-template-columns: 1fr; gap: 24px; }
}
.csfloat-feature-row-text {
padding: 0 16px;
}
.csfloat-feature-row-kicker {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 10px;
}
.csfloat-feature-row-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 10px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-feature-row-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 16px;
line-height: 1.65;
max-width: 480px;
}
.csfloat-feature-row-image {
position: relative;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg-1);
overflow: hidden;
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.csfloat-feature-row-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
.csfloat-feature-row.reverse .csfloat-feature-row-text { order: 2; }
.csfloat-feature-row.reverse .csfloat-feature-row-image { order: 1; }
@media (max-width: 820px) {
.csfloat-feature-row.reverse .csfloat-feature-row-text,
.csfloat-feature-row.reverse .csfloat-feature-row-image { order: initial; }
}
/* END input clear + links + grid + feature row */
/* CSFloat-1:1: spotlight callout — large prominent CTA with edge gradient. */
.csfloat-spotlight {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 16px;
padding: 40px 32px;
overflow: hidden;
text-align: center;
margin: 32px 0;
}
.csfloat-spotlight::before {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(135deg,
transparent 30%,
oklch(0.55 0.18 250 / 0.12) 50%,
transparent 70%);
pointer-events: none;
border-radius: inherit;
}
.csfloat-spotlight::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
.csfloat-spotlight-content {
position: relative;
z-index: 1;
}
.csfloat-spotlight-kicker {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 12px;
}
.csfloat-spotlight-title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 10px;
letter-spacing: -0.025em;
line-height: 1.15;
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-spotlight-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 auto 20px;
max-width: 540px;
line-height: 1.6;
}
.csfloat-spotlight-actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
/* CSFloat-1:1: testimonial card — for homepage social proof. */
.csfloat-testimonial {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 240ms ease;
}
.csfloat-testimonial:hover { border-color: var(--line-2); }
.csfloat-testimonial-quote {
font-size: 14px;
color: var(--ink-2);
line-height: 1.65;
margin: 0;
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
position: relative;
padding-left: 16px;
}
.csfloat-testimonial-quote::before {
content: "\201C";
position: absolute;
left: -2px;
top: -8px;
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-size: 28px;
color: var(--cta);
font-style: italic;
line-height: 1;
opacity: 0.6;
}
.csfloat-testimonial-author {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.csfloat-testimonial-author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-testimonial-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-testimonial-author-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-testimonial-author-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
}
.csfloat-testimonial-author-role {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 0;
}
/* CSFloat-1:1: marquee — scroll of partner logos / supported games etc. */
.csfloat-marquee {
width: 100%;
overflow: hidden;
position: relative;
margin: 32px 0;
padding: 12px 0;
mask-image: linear-gradient(90deg,
transparent 0%,
black 8%,
black 92%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
black 8%,
black 92%,
transparent 100%);
}
.csfloat-marquee-track {
display: inline-flex;
gap: 48px;
align-items: center;
animation: marquee-scroll 40s linear infinite;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.csfloat-marquee:hover .csfloat-marquee-track {
animation-play-state: paused;
}
.csfloat-marquee-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
white-space: nowrap;
letter-spacing: -0.005em;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 200ms ease;
}
.csfloat-marquee-item:hover { opacity: 1; }
/* END spotlight + testimonial + marquee */
/* CSFloat-1:1: dot indicator — small status dot for inline use. */
.csfloat-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
vertical-align: middle;
flex-shrink: 0;
}
.csfloat-dot.dot-accent { background: var(--cta); }
.csfloat-dot.dot-success { background: oklch(0.72 0.18 152); }
.csfloat-dot.dot-warning { background: oklch(0.78 0.16 80); }
.csfloat-dot.dot-danger { background: oklch(0.70 0.18 30); }
.csfloat-dot.dot-muted { background: var(--ink-4); }
.csfloat-dot.live { animation: live-pulse 1600ms ease-in-out infinite; }
/* CSFloat-1:1: chip variants for sale state. */
.csfloat-state-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px;
border: 1px solid;
line-height: 1.4;
}
.csfloat-state-chip.live {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-state-chip.live::before {
content: "";
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-state-chip.sold {
color: var(--ink-3);
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-state-chip.expired {
color: var(--ink-4);
background: var(--bg);
border-color: var(--line);
}
.csfloat-state-chip.pending {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-state-chip.completed {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-state-chip.cancelled {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: card highlight on selection (multi-select mode). */
.csfloat-card-base.selected,
.csfloat-grid-card.selected {
border-color: var(--cta);
box-shadow: 0 0 0 1px var(--cta),
0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-card-base.selected::after,
.csfloat-grid-card.selected::after {
content: "✓";
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
z-index: 4;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
animation: badge-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: bulk action bar — appears when 1+ cards selected. */
.csfloat-bulk-bar {
position: sticky;
top: 64px;
z-index: 700;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
animation: bulk-bar-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bulk-bar-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-bulk-bar-count {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-1);
font-weight: 600;
}
.csfloat-bulk-bar-count strong {
color: var(--cta);
}
.csfloat-bulk-bar-actions {
display: inline-flex;
gap: 6px;
margin-left: auto;
}
.csfloat-bulk-bar-action {
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-bulk-bar-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-bulk-bar-action.danger {
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-bulk-bar-action.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
}
/* END dot + state chip + selection + bulk-bar */
/* CSFloat-1:1: chat / dispute thread bubble (used by /support tickets). */
.csfloat-chat-thread {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 0;
}
.csfloat-chat-msg {
display: flex;
gap: 10px;
max-width: 80%;
}
.csfloat-chat-msg.from-you {
margin-left: auto;
flex-direction: row-reverse;
}
.csfloat-chat-msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-chat-msg-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-chat-msg-bubble {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 14px;
font-size: 13px;
color: var(--ink-1);
line-height: 1.5;
position: relative;
}
.csfloat-chat-msg.from-you .csfloat-chat-msg-bubble {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
border-radius: 12px 12px 4px 12px;
}
.csfloat-chat-msg:not(.from-you) .csfloat-chat-msg-bubble {
border-radius: 12px 12px 12px 4px;
}
.csfloat-chat-msg-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-chat-msg.from-you .csfloat-chat-msg-meta {
justify-content: flex-end;
}
/* CSFloat-1:1: chat composer textarea + send button. */
.csfloat-chat-composer {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-top: 8px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.csfloat-chat-composer:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-chat-composer-textarea {
flex: 1 1 auto;
background: transparent;
border: none;
resize: none;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 13px;
line-height: 1.5;
outline: none;
min-height: 24px;
max-height: 120px;
padding: 4px 0;
}
.csfloat-chat-composer-textarea::placeholder { color: var(--ink-3); }
.csfloat-chat-composer-send {
width: 32px;
height: 32px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-chat-composer-send:hover {
background: oklch(0.65 0.18 250);
transform: scale(1.05);
}
.csfloat-chat-composer-send:active { transform: scale(0.95); }
.csfloat-chat-composer-send:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg-3);
border-color: var(--line);
color: var(--ink-3);
}
/* CSFloat-1:1: chat day separator. */
.csfloat-chat-day {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0;
}
.csfloat-chat-day::before,
.csfloat-chat-day::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.csfloat-chat-day-text {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
/* END chat thread / composer */
/* CSFloat-1:1: tab content fade-in animation. */
@keyframes csfloat-tab-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-tab-content {
animation: csfloat-tab-fade-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: order details/receipt page layout. */
.csfloat-order {
max-width: 920px;
margin: 24px auto 80px;
padding: 0 20px;
}
.csfloat-order-header {
padding: 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
}
.csfloat-order-header-id {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-bottom: 4px;
}
.csfloat-order-header-title {
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-order-header-state {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 999px;
}
.csfloat-order-header-state.completed {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
}
.csfloat-order-header-state.pending {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
}
.csfloat-order-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
@media (max-width: 820px) {
.csfloat-order-grid { grid-template-columns: 1fr; }
}
.csfloat-order-line {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
padding: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 6px;
align-items: center;
}
.csfloat-order-line-img {
width: 64px;
height: 64px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-order-line-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.csfloat-order-line-info { min-width: 0; }
.csfloat-order-line-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-order-line-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-order-line-price {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: order summary card (right column). */
.csfloat-order-summary {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px;
position: sticky;
top: 88px;
}
.csfloat-order-summary-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0 0 12px;
}
.csfloat-order-summary-rows {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.csfloat-order-summary-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-order-summary-row .label { color: var(--ink-3); }
.csfloat-order-summary-row .value {
font-family: var(--mono);
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.csfloat-order-summary-total {
display: flex;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-order-summary-total .label {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-order-summary-total .value {
font-family: var(--mono);
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END order page chrome */
/* CSFloat-1:1: 2-up split-pane (used by /sell list-an-item flow). */
.csfloat-split {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
margin-top: 16px;
}
@media (max-width: 980px) {
.csfloat-split { grid-template-columns: 1fr; }
}
.csfloat-split-form {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
}
.csfloat-split-preview {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.csfloat-split-preview-img {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
}
.csfloat-split-preview-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.csfloat-split-preview-name {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-split-preview-sub {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
.csfloat-split-preview-price {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-split-preview-fee {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-split-preview-net {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: oklch(0.84 0.18 152);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
/* CSFloat-1:1: range slider — for /sell price input. */
.csfloat-range-slider {
width: 100%;
margin: 6px 0;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
.csfloat-range-slider::-webkit-slider-runnable-track {
height: 4px;
background: var(--bg-3);
border-radius: 2px;
}
.csfloat-range-slider::-moz-range-track {
height: 4px;
background: var(--bg-3);
border-radius: 2px;
}
.csfloat-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
background: oklch(0.98 0 0);
border: 2px solid var(--cta);
border-radius: 50%;
margin-top: -5px;
cursor: ew-resize;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
transition: transform 120ms ease;
}
.csfloat-range-slider::-moz-range-thumb {
width: 14px;
height: 14px;
background: oklch(0.98 0 0);
border: 2px solid var(--cta);
border-radius: 50%;
cursor: ew-resize;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
transition: transform 120ms ease;
}
.csfloat-range-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.csfloat-range-slider::-moz-range-thumb:hover {
transform: scale(1.1);
}
/* CSFloat-1:1: inventory grid for /sell — pick from your skins. */
.csfloat-inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
max-height: 480px;
overflow-y: auto;
padding: 4px;
}
.csfloat-inventory-grid::-webkit-scrollbar { width: 6px; }
.csfloat-inventory-grid::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-inventory-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px;
cursor: pointer;
transition: border-color 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-inventory-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-inventory-tile.selected {
border-color: var(--cta);
box-shadow: 0 0 0 1px var(--cta);
}
.csfloat-inventory-tile-img {
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
position: relative;
}
.csfloat-inventory-tile-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-inventory-tile-name {
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-inventory-tile-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
}
/* END /sell page chrome */
/* CSFloat-1:1: nav refinement — extend grid icon button hover state. */
.nav-icon-btn {
position: relative;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.nav-icon-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
.nav-icon-btn:active {
transform: scale(0.96);
}
.nav-icon-btn .nav-icon-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 2px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* CSFloat-1:1: wallet button in nav — pill with $ prefix. */
.wallet-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-1);
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
letter-spacing: -0.005em;
}
.wallet-btn:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.wallet-btn .wallet-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--line-2);
border-radius: 4px;
font-size: 12px;
color: var(--ink-2);
font-weight: 600;
}
.wallet-btn:hover .wallet-plus {
border-color: var(--cta);
color: var(--cta);
}
/* CSFloat-1:1: user chip — avatar + name pill in nav. */
.user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px 0 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-1);
cursor: pointer;
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background 140ms ease, border-color 140ms ease;
}
.user-chip:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.user-chip-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.user-chip-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-chip-name {
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.user-chip-caret {
font-size: 9px;
color: var(--ink-3);
margin-left: 2px;
}
/* CSFloat-1:1: steam login button — green-purple gradient, Steam logo.
Boss QA cycle 11 — gradient darkened from L 0.30→0.42 to L 0.24→0.34 so
white text clears WCAG AA 4.5:1 against the gradient's brightest stop
(was ~3.8:1 at the warm end, axe-flagged on every route). */
.steam-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
background: linear-gradient(135deg,
oklch(0.24 0.10 260) 0%,
oklch(0.34 0.15 260) 100%);
border: 1px solid oklch(0.46 0.16 260 / 0.5);
border-radius: 999px;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.steam-btn:hover {
background: linear-gradient(135deg,
oklch(0.28 0.11 260) 0%,
oklch(0.38 0.16 260) 100%);
border-color: oklch(0.52 0.18 260 / 0.6);
}
.steam-btn:active { transform: translateY(1px); }
/* END nav button refinements */
/* CSFloat-1:1: nav inner — flex row, balanced spacing. */
.nav {
position: sticky;
top: 0;
z-index: 1000;
background: oklch(0.16 0.008 260 / 0.85);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
gap: 16px;
height: 56px;
padding: 0 18px;
max-width: 2100px;
margin: 0 auto;
}
.nav-logo {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 8px oklch(0.55 0.18 250 / 0.4));
overflow: hidden;
}
.nav-logo-icon img,
.nav-logo-icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.nav-logo-text {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.01em;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
.nav-logo-badge {
display: inline-flex;
align-items: center;
padding: 1px 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
margin-left: 4px;
}
.nav-links {
display: inline-flex;
align-items: center;
gap: 0;
flex: 1 1 auto;
margin-left: 12px;
}
.nav-link {
display: inline-flex;
align-items: center;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
border-radius: 6px;
transition: color 140ms ease, background 140ms ease;
}
.nav-link:hover { color: var(--ink-1); }
.nav-link.active {
color: var(--ink-1);
font-weight: 600;
}
.nav-right {
/* N4 cycle 6 — keep this in lockstep with the earlier rule at line 200
and the BOSS_PROMPT_3 G2 spec (4px within group, 12px between). */
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
/* CSFloat-1:1: footer styling on existing .site-footer class. */
.site-footer {
margin-top: 80px;
padding: 60px 24px 28px;
background: var(--bg);
border-top: 1px solid var(--line);
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 480px;
max-width: 90%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--cta) 50%,
transparent 100%);
opacity: 0.45;
}
/* CSFloat-1:1: hero section base — class lives directly on .hero. */
.hero {
text-align: center;
}
.hero-actions {
margin-top: 16px;
}
/* END nav layout + footer + hero base */
/* CSFloat-1:1: page wrapper padding — inset content from edges. */
.page-wrap, .layout {
width: 100%;
max-width: 2100px;
margin: 0 auto;
padding: 0 18px;
}
@media (max-width: 720px) {
.page-wrap, .layout {
padding: 0 12px;
}
}
/* CSFloat-1:1: section spacing — vertical rhythm between sections. */
.csfloat-section {
padding: 32px 0;
}
.csfloat-section.tight { padding: 16px 0; }
.csfloat-section.loose { padding: 56px 0; }
/* CSFloat-1:1: brand color glow effect — accent words and highlights. */
.csfloat-glow-accent {
text-shadow: 0 0 16px oklch(0.55 0.18 250 / 0.55);
}
.csfloat-glow-success {
text-shadow: 0 0 12px oklch(0.55 0.18 152 / 0.45);
}
.csfloat-glow-danger {
text-shadow: 0 0 12px oklch(0.55 0.18 30 / 0.45);
}
/* CSFloat-1:1: blur backdrop helpers. */
.csfloat-blur-sm {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.csfloat-blur {
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.csfloat-blur-lg {
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* CSFloat-1:1: aspect ratio helpers. */
.csfloat-aspect-square { aspect-ratio: 1 / 1; }
.csfloat-aspect-video { aspect-ratio: 16 / 9; }
.csfloat-aspect-card { aspect-ratio: 4 / 3; }
.csfloat-aspect-wide { aspect-ratio: 21 / 9; }
.csfloat-aspect-portrait { aspect-ratio: 3 / 4; }
/* CSFloat-1:1: aspect ratio container — contents fill, image objects-fit. */
.csfloat-aspect-frame {
position: relative;
width: 100%;
background: var(--bg-2);
border-radius: 8px;
overflow: hidden;
}
.csfloat-aspect-frame > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* CSFloat-1:1: image fade-in animation — for asynchronously-loading product images. */
@keyframes csfloat-img-fade-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.csfloat-img-fade-in {
animation: csfloat-img-fade-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: lazy-load placeholder shimmer. */
.csfloat-img-placeholder {
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* CSFloat-1:1: staggered list-item entry animation — for grid + lists. */
@keyframes csfloat-list-row-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-list-row-in {
animation: csfloat-list-row-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.csfloat-list-row-in:nth-child(1) { animation-delay: 0ms; }
.csfloat-list-row-in:nth-child(2) { animation-delay: 30ms; }
.csfloat-list-row-in:nth-child(3) { animation-delay: 60ms; }
.csfloat-list-row-in:nth-child(4) { animation-delay: 90ms; }
.csfloat-list-row-in:nth-child(5) { animation-delay: 120ms; }
.csfloat-list-row-in:nth-child(6) { animation-delay: 150ms; }
.csfloat-list-row-in:nth-child(7) { animation-delay: 180ms; }
.csfloat-list-row-in:nth-child(8) { animation-delay: 210ms; }
/* CSFloat-1:1: hover-lift utility — applied generously to clickable cards. */
.csfloat-hover-lift {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
/* CSFloat-1:1: hover-tilt — gentle tilt on heavy product cards. */
.csfloat-hover-tilt {
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-tilt:hover {
transform: perspective(800px) rotateX(2deg) translateY(-2px);
}
/* END section + glow + blur + aspect + animation utilities */
/* CSFloat-1:1: scroll-driven progress bar at top of long pages. */
.csfloat-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: transparent;
z-index: 9990;
pointer-events: none;
}
.csfloat-scroll-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
width: 0%;
transition: width 80ms linear;
}
/* CSFloat-1:1: ribbon — corner accent on featured/recommended cards. */
.csfloat-ribbon {
position: absolute;
top: 8px;
left: -4px;
padding: 2px 10px 2px 8px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 0 4px 4px 0;
z-index: 4;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.csfloat-ribbon::before {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 4px;
height: 3px;
background: oklch(0.40 0.14 250);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.csfloat-ribbon.success {
background: oklch(0.62 0.18 152);
}
.csfloat-ribbon.success::before {
background: oklch(0.40 0.14 152);
}
.csfloat-ribbon.danger {
background: oklch(0.60 0.18 30);
}
.csfloat-ribbon.danger::before {
background: oklch(0.40 0.14 30);
}
.csfloat-ribbon.gold {
background: linear-gradient(135deg, oklch(0.78 0.16 80), oklch(0.68 0.18 50));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: top-right corner badge — different from ribbon, no overhang. */
.csfloat-corner-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px;
z-index: 4;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.csfloat-corner-badge.new {
background: oklch(0.30 0.05 250 / 0.7);
border: 1px solid oklch(0.50 0.18 250 / 0.5);
color: oklch(0.92 0.10 250);
}
.csfloat-corner-badge.deal {
background: oklch(0.30 0.04 152 / 0.7);
border: 1px solid oklch(0.50 0.10 152 / 0.5);
color: oklch(0.92 0.10 152);
}
.csfloat-corner-badge.hot {
background: oklch(0.30 0.05 50 / 0.7);
border: 1px solid oklch(0.50 0.18 50 / 0.5);
color: oklch(0.92 0.10 50);
}
/* CSFloat-1:1: side overlay drawer — for /admin sub-views. */
.csfloat-side-drawer {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: min(560px, 92vw);
background: var(--bg-1);
border-left: 1px solid var(--line);
box-shadow: -16px 0 40px rgba(0,0,0,0.55);
z-index: 9000;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-side-drawer.open { transform: translateX(0); }
.csfloat-side-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.csfloat-side-drawer-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-side-drawer-close {
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-side-drawer-close:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-side-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 18px;
}
.csfloat-side-drawer-body::-webkit-scrollbar { width: 6px; }
.csfloat-side-drawer-body::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-side-drawer-footer {
flex: 0 0 auto;
padding: 14px 18px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* END scroll progress + ribbon + corner badge + side drawer */
/* CSFloat-1:1: button primary — pill with elevation. */
.csfloat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 16px;
font-size: 13px;
font-weight: 600;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
border: 1px solid;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
letter-spacing: -0.005em;
white-space: nowrap;
}
.csfloat-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-btn:active:not(:disabled) {
transform: translateY(1px);
}
.csfloat-btn-primary {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
box-shadow: 0 4px 12px oklch(0.55 0.18 250 / 0.32);
}
.csfloat-btn-primary:hover:not(:disabled) {
background: oklch(0.65 0.18 250);
box-shadow: 0 6px 16px oklch(0.55 0.18 250 / 0.4);
}
.csfloat-btn-secondary {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-btn-secondary:hover:not(:disabled) {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-btn-ghost {
background: transparent;
border-color: var(--line);
color: var(--ink-2);
}
.csfloat-btn-ghost:hover:not(:disabled) {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-btn-danger {
background: oklch(0.55 0.18 30);
border-color: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
}
.csfloat-btn-danger:hover:not(:disabled) {
background: oklch(0.50 0.18 30);
}
.csfloat-btn-success {
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-btn-success:hover:not(:disabled) {
background: oklch(0.58 0.18 152);
}
.csfloat-btn-pill { border-radius: 999px; }
.csfloat-btn-sm { height: 28px; padding: 0 12px; font-size: 11px; }
.csfloat-btn-lg { height: 38px; padding: 0 18px; font-size: 13px; border-radius: 6px; }
.csfloat-btn-xl { height: 52px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.csfloat-btn-icon {
width: 36px;
padding: 0;
}
.csfloat-btn-icon.csfloat-btn-sm { width: 28px; }
.csfloat-btn-icon.csfloat-btn-lg { width: 44px; }
.csfloat-btn-block { width: 100%; }
/* CSFloat-1:1: button group — joined buttons. */
.csfloat-btn-group {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 2px;
gap: 0;
}
.csfloat-btn-group .csfloat-btn {
background: transparent;
border: none;
height: 28px;
border-radius: 6px;
padding: 0 10px;
font-size: 11px;
color: var(--ink-3);
font-weight: 500;
box-shadow: none;
}
.csfloat-btn-group .csfloat-btn:hover { color: var(--ink-1); }
.csfloat-btn-group .csfloat-btn.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* END button primitive */
/* CSFloat-1:1: image lightbox arrows — for multi-image item view. */
.csfloat-lightbox-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9810;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
transition: background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-lightbox-arrow.prev { left: 24px; }
.csfloat-lightbox-arrow.next { right: 24px; }
.csfloat-lightbox-arrow:hover {
background: var(--bg-2);
transform: translateY(-50%) scale(1.06);
}
.csfloat-lightbox-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.csfloat-lightbox-counter {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
background: var(--bg-1);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 999px;
z-index: 9810;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: dropdown menu — generic right-anchored menu. */
.csfloat-menu {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
padding: 4px;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
background: transparent;
border: none;
width: 100%;
text-align: left;
transition: background 80ms ease, color 80ms ease;
}
.csfloat-menu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-menu-item-icon {
flex: 0 0 16px;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 13px;
}
.csfloat-menu-item:hover .csfloat-menu-item-icon { color: var(--ink-1); }
.csfloat-menu-item.danger { color: oklch(0.84 0.18 30); }
.csfloat-menu-item.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
color: oklch(0.92 0.18 30);
}
.csfloat-menu-item.danger .csfloat-menu-item-icon { color: oklch(0.78 0.18 30); }
.csfloat-menu-divider {
height: 1px;
background: var(--line);
margin: 4px 6px;
}
.csfloat-menu-section-title {
padding: 6px 10px 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-menu-shortcut {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.04em;
}
/* CSFloat-1:1: popover positioning helpers. */
.csfloat-popover {
position: absolute;
z-index: 9050;
}
.csfloat-popover.bottom-left { top: calc(100% + 6px); left: 0; }
.csfloat-popover.bottom-right { top: calc(100% + 6px); right: 0; }
.csfloat-popover.top-left { bottom: calc(100% + 6px); left: 0; }
.csfloat-popover.top-right { bottom: calc(100% + 6px); right: 0; }
.csfloat-popover.right-top { left: calc(100% + 6px); top: 0; }
.csfloat-popover.right-bottom { left: calc(100% + 6px); bottom: 0; }
.csfloat-popover.left-top { right: calc(100% + 6px); top: 0; }
.csfloat-popover.left-bottom { right: calc(100% + 6px); bottom: 0; }
/* END lightbox + dropdown menu + popover */
/* CSFloat-1:1: keyboard nav focus order — visible focus rings honored. */
.csfloat-no-focus-outline:focus,
.csfloat-no-focus-outline:focus-visible {
outline: none;
box-shadow: none;
}
/* CSFloat-1:1: heart / favorite icon button states. */
.csfloat-fav-btn {
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.csfloat-fav-btn:hover {
background: oklch(0.20 0.04 30 / 0.6);
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.36);
transform: scale(1.05);
}
.csfloat-fav-btn.active {
background: oklch(0.30 0.04 30 / 0.45);
color: oklch(0.86 0.20 30);
border-color: oklch(0.55 0.18 30 / 0.5);
}
.csfloat-fav-btn.active:hover {
background: oklch(0.20 0.04 30 / 0.6);
color: oklch(0.78 0.20 30);
}
.csfloat-fav-btn.active::before {
content: "★";
}
.csfloat-fav-btn:not(.active)::before {
content: "☆";
}
/* CSFloat-1:1: share button. */
.csfloat-share-btn {
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.csfloat-share-btn:hover {
background: oklch(0.20 0.04 250 / 0.6);
color: var(--cta);
border-color: oklch(0.55 0.18 250 / 0.4);
transform: scale(1.05);
}
/* CSFloat-1:1: comparison strip — for /database side-by-side compare. */
.csfloat-compare-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 16px 0;
}
.csfloat-compare-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-compare-card-remove {
position: absolute;
top: 8px;
right: 8px;
width: 18px;
height: 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-compare-card-remove:hover {
background: oklch(0.30 0.04 30 / 0.32);
color: oklch(0.84 0.18 30);
}
.csfloat-compare-card-img {
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.csfloat-compare-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-compare-card-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-compare-card-price {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-compare-card-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px dashed var(--line-2);
background: var(--bg);
cursor: pointer;
text-align: center;
color: var(--ink-3);
transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.csfloat-compare-card-add:hover {
border-color: var(--cta);
color: var(--cta);
background: oklch(0.20 0.02 250 / 0.4);
}
.csfloat-compare-card-add-icon {
font-size: 22px;
font-weight: 300;
line-height: 1;
}
.csfloat-compare-card-add-label {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* END heart + share + compare strip */
/* CSFloat-1:1: stat tooltip on hover — small contextual data on hover. */
.csfloat-stat-tooltip {
position: absolute;
z-index: 9300;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 8px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
pointer-events: none;
opacity: 0;
transition: opacity 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
min-width: 160px;
}
.csfloat-stat-tooltip.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-stat-tooltip-row {
display: flex;
justify-content: space-between;
font-size: 11px;
padding: 2px 0;
color: var(--ink-2);
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-stat-tooltip-row .label { color: var(--ink-4); }
.csfloat-stat-tooltip-row .value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 8px;
}
/* CSFloat-1:1: rare item flash effect — for newly-listed limited skins. */
@keyframes rare-flash {
0%, 100% {
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 0 0 0 oklch(0.62 0.27 330 / 0.5);
}
50% {
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 0 24px 4px oklch(0.62 0.27 330 / 0.4);
}
}
.csfloat-rare-flash {
animation: rare-flash 2400ms ease-in-out infinite;
}
/* CSFloat-1:1: text shimmer effect — for "new" / "live" labels. */
@keyframes text-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.csfloat-text-shimmer {
background: linear-gradient(90deg,
var(--ink-3) 0%,
var(--ink-1) 25%,
var(--ink-3) 50%,
var(--ink-3) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: text-shimmer 2400ms linear infinite;
}
/* CSFloat-1:1: gradient text headline. */
.csfloat-text-gradient {
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-text-gradient-accent {
background: linear-gradient(135deg,
oklch(0.78 0.18 240) 0%,
var(--cta) 50%,
oklch(0.85 0.18 250) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* CSFloat-1:1: animated underline on hover. */
.csfloat-link-anim {
position: relative;
text-decoration: none;
color: var(--ink-1);
padding-bottom: 2px;
}
.csfloat-link-anim::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: var(--cta);
transform: scaleX(0);
transform-origin: right;
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-anim:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* END stat tooltip + rare flash + text effects */
/* CSFloat-1:1: app-wide background grid texture. Subtle, masked at top. */
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
background-position: 0 0;
mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 90% 50% at 50% 0%, black 0%, transparent 70%);
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
/* CSFloat-1:1: vignette overlay — subtle radial darkening at corners. */
body::after {
content: "";
position: fixed;
inset: 0;
background: radial-gradient(
ellipse 120% 80% at 50% 50%,
transparent 50%,
rgba(0,0,0,0.3) 100%
);
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
}
/* CSFloat-1:1: ensure content sits above body backgrounds. `.nav` excluded
so its `position: sticky` (line 141) wins — without sticky the top bar
scrolls off-screen on full-page-mode routes. */
.layout, .site-root, main, .subnav, .pulse {
position: relative;
z-index: 1;
}
/* CSFloat-1:1: brand glow on hero title — subtle blue halo behind h1. */
.hero {
isolation: isolate;
}
.hero::before {
content: "";
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 240px;
background: radial-gradient(
ellipse 60% 50% at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%
);
pointer-events: none;
z-index: -1;
filter: blur(20px);
}
/* END background grid + vignette + hero glow */
/* CSFloat-1:1: refined card hover — improve all card variants uniformly. */
.csfloat-grid-card,
.csfloat-band-card,
.csfloat-hero-stack-card,
.csfloat-card-base,
.csfloat-feature-tile,
.csfloat-summary-tile,
.csfloat-contact-card,
.csfloat-testimonial,
.csfloat-trade-card,
.csfloat-wallet-tx,
.csfloat-paymethod-tile,
.csfloat-inventory-tile,
.csfloat-compare-card,
.csfloat-listing-row {
transform-origin: center;
}
/* CSFloat-1:1: float-bar tiers — color-coded by float decimal. CS-style. */
.csfloat-floatbar-tier-fn { color: oklch(0.78 0.18 152); } /* factory new */
.csfloat-floatbar-tier-mw { color: oklch(0.82 0.16 130); } /* minimal wear */
.csfloat-floatbar-tier-ft { color: oklch(0.82 0.16 80); } /* field-tested */
.csfloat-floatbar-tier-ww { color: oklch(0.78 0.16 50); } /* well-worn */
.csfloat-floatbar-tier-bs { color: oklch(0.70 0.18 30); } /* battle-scarred */
/* CSFloat-1:1: image error placeholder — when product image fails. */
.csfloat-img-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
background: var(--bg-2);
color: var(--ink-4);
font-size: 11px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.csfloat-img-error::before {
content: "?";
font-size: 22px;
font-weight: 700;
width: 36px;
height: 36px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: loading dots — alternative to spinner. */
.csfloat-dots {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-dots-dot {
width: 6px;
height: 6px;
background: var(--ink-3);
border-radius: 50%;
animation: dots-bounce 1200ms ease-in-out infinite;
}
.csfloat-dots-dot:nth-child(2) { animation-delay: 200ms; }
.csfloat-dots-dot:nth-child(3) { animation-delay: 400ms; }
@keyframes dots-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* CSFloat-1:1: typing indicator — for chat composer "user is typing". */
.csfloat-typing-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--ink-3);
font-style: italic;
}
/* CSFloat-1:1: status pill — large highlighted badge for /status page. */
.csfloat-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.csfloat-status-pill.operational {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
}
.csfloat-status-pill.degraded {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
}
.csfloat-status-pill.outage {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
}
.csfloat-status-pill::before {
content: "";
width: 8px;
height: 8px;
background: currentColor;
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
/* CSFloat-1:1: status board — services × uptime grid. */
.csfloat-status-board {
display: flex;
flex-direction: column;
gap: 6px;
margin: 16px 0;
}
.csfloat-status-board-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
}
.csfloat-status-board-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-status-board-row-status {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-status-board-row-status.up { color: oklch(0.84 0.18 152); }
.csfloat-status-board-row-status.down { color: oklch(0.84 0.18 30); }
.csfloat-status-board-row-status::before {
content: "";
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
}
/* END status pill + status board + image error + dots */
/* CSFloat-1:1: tag pill + tag list — for filter chips, item attributes. */
.csfloat-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
line-height: 1.4;
}
.csfloat-tag.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-tag.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-tag.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-tag.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-tag.outline {
background: transparent;
}
.csfloat-tag.dot::before {
content: "";
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
}
.csfloat-tag-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* CSFloat-1:1: rating display — stars. */
.csfloat-rating {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-rating-star {
font-size: 13px;
color: oklch(0.78 0.16 80);
}
.csfloat-rating-star.filled::before { content: "★"; }
.csfloat-rating-star.empty::before {
content: "☆";
color: var(--ink-4);
}
.csfloat-rating-value {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.csfloat-rating-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-left: 2px;
}
/* CSFloat-1:1: trust score pill — for sellers in /item listings. */
.csfloat-trust-score {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-trust-score.high {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-trust-score.medium {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-trust-score.low {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-trust-score-icon {
font-size: 10px;
}
/* CSFloat-1:1: verified check icon. */
.csfloat-verified {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
/* CSFloat-1:1: country flag chip — small inline flag identifier. */
.csfloat-flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 12px;
border-radius: 2px;
background: var(--bg-2);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
color: var(--ink-3);
letter-spacing: 0;
flex-shrink: 0;
}
/* CSFloat-1:1: language switcher chip — flag + language code. */
.csfloat-lang-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 8px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.csfloat-lang-chip:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-lang-chip::after {
content: "▾";
font-size: 8px;
color: var(--ink-4);
margin-left: 2px;
}
/* CSFloat-1:1: USD ▾ caret nav chips — currency switcher in nav. */
.csfloat-currency-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 8px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.csfloat-currency-chip:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-currency-chip::after {
content: "▾";
font-size: 8px;
color: var(--ink-4);
margin-left: 2px;
}
/* END tag + rating + trust + verified + flag + lang/currency */
/* CSFloat-1:1: nested grid pattern — for /database categories with sub-rows. */
.csfloat-nested-grid {
display: grid;
gap: 16px;
}
.csfloat-nested-grid-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-nested-grid-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.csfloat-nested-grid-section-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-nested-grid-section-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-nested-grid-section-action {
font-size: 12px;
font-weight: 500;
color: var(--cta);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-nested-grid-section-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: hero stack on /market — three-column promotional cards. */
.csfloat-hero-stack {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
gap: 12px;
margin: 24px 0;
align-items: stretch;
}
@media (max-width: 980px) {
.csfloat-hero-stack {
grid-template-columns: 1fr;
gap: 8px;
}
.csfloat-hero-stack-card.pos-0 { display: none; }
.csfloat-hero-stack-card.pos-2 { display: none; }
}
.csfloat-hero-stack-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 240ms ease,
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 240ms ease;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.csfloat-hero-stack-card:hover {
border-color: var(--line-2);
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-hero-stack-card.pos-0,
.csfloat-hero-stack-card.pos-2 {
background: oklch(0.18 0.008 260 / 0.6);
}
.csfloat-hero-stack-card.pos-1 {
background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
border-color: var(--line-2);
position: relative;
}
.csfloat-hero-stack-card.pos-1::before {
content: "FEATURED";
position: absolute;
top: 12px;
left: 12px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
padding: 2px 8px;
border-radius: 999px;
z-index: 4;
}
.csfloat-hero-stack-img {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow: hidden;
}
.csfloat-hero-stack-card.pos-1 .csfloat-hero-stack-img {
aspect-ratio: 16 / 11;
padding: 28px;
}
.csfloat-hero-stack-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.csfloat-hero-stack-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-hero-stack-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-hero-stack-card.pos-1 .csfloat-hero-stack-name {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.015em;
}
.csfloat-hero-stack-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-hero-stack-pricerow {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 4px;
}
/* CSFloat-1:1: live trade feed strip — for /market secondary header. */
.csfloat-livefeed {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}
.csfloat-livefeed-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-livefeed-text {
flex: 1 1 auto;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-livefeed-text strong {
color: var(--ink-1);
font-weight: 600;
}
/* END nested grid + hero stack + live feed */
/* CSFloat-1:1: subnav row — secondary nav strip below main nav. */
.subnav-inner {
display: flex;
align-items: center;
height: 44px;
padding: 0 18px;
max-width: 2100px;
margin: 0 auto;
gap: 0;
overflow-x: auto;
}
.subnav-inner::-webkit-scrollbar { height: 0; }
.subnav-link {
position: relative;
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 12px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
white-space: nowrap;
transition: color 140ms ease;
}
.subnav-link:hover { color: var(--ink-1); }
.subnav-link.active {
color: var(--ink-1);
font-weight: 600;
}
.subnav-link.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 1px;
background: var(--ink-1);
}
/* CSFloat-1:1: pulse bar — live trade ticker in third bar position. */
.pulse-inner {
display: flex;
align-items: center;
gap: 12px;
height: 32px;
padding: 0 18px;
max-width: 2100px;
margin: 0 auto;
}
/* CSFloat-1:1: utility — underline only on hover for nav text links. */
.csfloat-underline-hover {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-underline-hover:hover {
background-size: 100% 1px;
}
/* CSFloat-1:1: cookies banner — small, bottom-left, dismissable. */
.csfloat-cookies-banner {
position: fixed;
bottom: 16px;
left: 16px;
width: min(480px, calc(100vw - 32px));
background: oklch(0.18 0.008 260 / 0.96);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 9100;
animation: cookie-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cookie-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-cookies-banner.dismissed {
animation: cookie-out 240ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes cookie-out {
to { opacity: 0; transform: translateY(8px); }
}
.csfloat-cookies-text {
font-size: 12px;
color: var(--ink-2);
line-height: 1.5;
margin: 0;
}
.csfloat-cookies-text a {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
}
.csfloat-cookies-actions {
display: inline-flex;
gap: 6px;
margin-left: auto;
}
.csfloat-cookies-action {
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-cookies-action.primary {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-cookies-action:hover { background: var(--bg-3); border-color: var(--line-2); }
.csfloat-cookies-action.primary:hover { background: oklch(0.65 0.18 250); border-color: oklch(0.65 0.18 250); }
/* END subnav + pulse + cookies banner */
/* CSFloat-1:1: notification bell shake — when new notif arrives. */
@keyframes csfloat-bell-shake {
0%, 100% { transform: rotate(0); }
10%, 30%, 50% { transform: rotate(-12deg); }
20%, 40%, 60% { transform: rotate(12deg); }
70% { transform: rotate(-6deg); }
80% { transform: rotate(6deg); }
90% { transform: rotate(0); }
}
.csfloat-bell-shake {
animation: csfloat-bell-shake 800ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
transform-origin: top center;
}
/* CSFloat-1:1: refresh spin — for refresh icon button. */
@keyframes csfloat-refresh-spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.csfloat-refresh-spin {
animation: csfloat-refresh-spin 600ms cubic-bezier(0.4, 0, 0.6, 1);
}
/* CSFloat-1:1: badge pop — when count changes. */
@keyframes csfloat-badge-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.csfloat-badge-pop {
animation: csfloat-badge-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: card image fade-in (when async images load). */
@keyframes csfloat-card-image-fade-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
/* CSFloat-1:1: number flip animation — for live-updating prices/counts. */
@keyframes csfloat-num-flip {
0% { opacity: 1; transform: translateY(0); }
50% { opacity: 0; transform: translateY(-6px); }
51% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.csfloat-num-flip {
animation: csfloat-num-flip 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: card flip animation. */
@keyframes csfloat-card-flip-in {
from { opacity: 0; transform: rotateY(-12deg) translateY(4px); }
to { opacity: 1; transform: rotateY(0) translateY(0); }
}
.csfloat-card-flip-in {
animation: csfloat-card-flip-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: tap ripple effect — for buttons. */
@keyframes csfloat-ripple {
from {
transform: scale(0);
opacity: 0.5;
}
to {
transform: scale(2);
opacity: 0;
}
}
.csfloat-ripple-container {
position: relative;
overflow: hidden;
isolation: isolate;
}
.csfloat-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
pointer-events: none;
animation: csfloat-ripple 600ms ease-out;
}
/* CSFloat-1:1: slide-up entrance for sections on scroll. */
@keyframes csfloat-slide-up-fade {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-slide-up-fade {
animation: csfloat-slide-up-fade 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: slide-in-from-right entrance — drawer / panel. */
@keyframes csfloat-slide-in-right {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.csfloat-slide-in-right {
animation: csfloat-slide-in-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: slide-in-from-left. */
@keyframes csfloat-slide-in-left {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.csfloat-slide-in-left {
animation: csfloat-slide-in-left 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: scale-in pop entrance. */
@keyframes csfloat-pop-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.csfloat-pop-in {
animation: csfloat-pop-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END animation utilities */
/* CSFloat-1:1: card image with rarity stripes — apply tops + bottoms via
the rarity tier flag on the parent card. */
.csfloat-grid-card[data-rarity="limited"] .csfloat-grid-card-img::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
.csfloat-grid-card[data-rarity="standard"] .csfloat-grid-card-img::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.55 0.04 260),
oklch(0.65 0.05 260),
oklch(0.55 0.04 260));
z-index: 2;
}
.csfloat-grid-card[data-rarity="offering"] .csfloat-grid-card-img::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.55 0.18 250),
oklch(0.68 0.20 250),
oklch(0.55 0.18 250));
z-index: 2;
}
/* CSFloat-1:1: skin pattern strip in image — secondary accent on cards. */
.csfloat-grid-card-img::after,
.csfloat-band-card-img::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
oklch(0.62 0.27 330),
oklch(0.72 0.30 330),
oklch(0.62 0.27 330));
z-index: 2;
}
/* CSFloat-1:1: discount strikethrough for original price. */
.csfloat-strike {
font-family: var(--mono);
text-decoration: line-through;
text-decoration-color: oklch(0.45 0.014 260);
text-decoration-thickness: 1px;
color: var(--ink-4);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: discount badge inline. */
.csfloat-disc-inline {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: oklch(0.78 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.40 0.06 152 / 0.32);
border-radius: 3px;
padding: 1px 5px;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: card meta row — wear + cat in a single line. */
.csfloat-grid-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-grid-card-meta .wear {
color: oklch(0.84 0.16 80);
font-weight: 600;
font-style: italic;
}
.csfloat-grid-card-meta .sep {
color: var(--ink-4);
}
.csfloat-grid-card-meta .cat {
color: var(--ink-3);
}
/* CSFloat-1:1: float bar on grid card — gradient with thumb position. */
.csfloat-grid-card-floatbar {
width: 100%;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg,
oklch(0.65 0.18 30) 0%,
oklch(0.78 0.16 50) 18%,
oklch(0.82 0.16 80) 35%,
oklch(0.78 0.18 152) 65%,
oklch(0.65 0.18 30) 100%);
position: relative;
overflow: hidden;
margin-top: 4px;
}
.csfloat-grid-card-floatbar-thumb {
position: absolute;
top: 50%;
width: 2px;
height: 7px;
background: oklch(0.98 0 0);
border-radius: 1px;
transform: translate(-50%, -50%);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: float meta — "0.0244780555 (#345)" decimal display. */
.csfloat-grid-card-floatmeta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 2px;
}
.csfloat-grid-card-floatmeta .num { font-weight: 500; }
.csfloat-grid-card-floatmeta .rank { color: var(--ink-2); font-weight: 600; }
/* CSFloat-1:1: online status row on grid card — verified check + key icon. */
.csfloat-grid-card-online {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 3px;
}
.csfloat-grid-card-online .dot {
width: 6px;
height: 6px;
background: oklch(0.72 0.18 152);
border-radius: 50%;
display: inline-block;
}
.csfloat-grid-card-online .dot.offline { background: var(--ink-4); }
.csfloat-grid-card-online .verified {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
font-size: 7px;
font-weight: 700;
}
.csfloat-grid-card-online .keyicon {
color: oklch(0.84 0.16 80);
font-size: 11px;
}
/* END card chrome — closes the grid card 1:1 gap with reference */
/* CSFloat-1:1: brand glow on logo — drop-shadow halo behind PNG. */
.nav-logo-icon img {
filter: drop-shadow(0 0 10px oklch(0.55 0.18 250 / 0.45));
}
/* CSFloat-1:1: nav refinement — shrink to 56px on mobile. */
@media (max-width: 720px) {
.nav-inner { height: 52px; padding: 0 12px; }
.nav-logo-icon { width: 24px; height: 24px; }
.nav-logo-text { font-size: 14px; }
.nav-logo-badge { display: none; }
.nav-link { padding: 6px 10px; font-size: 12px; }
}
/* CSFloat-1:1: hide low-priority nav items on small screens. */
@media (max-width: 540px) {
.csfloat-nav-secondary { display: none; }
.nav-search-wrap { min-width: 120px; }
.nav-search-shortcut { display: none; }
}
/* CSFloat-1:1: pulse bar hidden on phone (saves vertical space). */
@media (max-width: 540px) {
.pulse, .csfloat-pulse { display: none; }
}
/* CSFloat-1:1: subnav becomes horizontally scrollable on phone. */
@media (max-width: 720px) {
.subnav { top: 52px; }
.subnav-inner { padding: 0 12px; }
.subnav-link { padding: 0 10px; font-size: 11px; }
}
/* CSFloat-1:1: hero spacing adjustments per breakpoint. */
@media (max-width: 720px) {
.hero { padding: 40px 0 32px; }
.hero h1 { font-size: clamp(28px, 8vw, 40px); }
.hero p.lede { font-size: 14px; padding: 0 16px; }
.hero-actions { padding: 0 16px; }
.hero-actions .btn-accent,
.hero-actions .btn-ghost {
padding: 10px 18px;
font-size: 13px;
}
}
/* CSFloat-1:1: card grid spacing on phone. */
@media (max-width: 540px) {
.csfloat-section { padding: 16px 0; }
.csfloat-section.loose { padding: 28px 0; }
.csfloat-page-header {
margin: 12px 0 16px;
}
.csfloat-page-header-title {
font-size: clamp(20px, 6vw, 24px);
}
}
/* CSFloat-1:1: footer collapses to single column on phone. */
@media (max-width: 540px) {
.csfloat-footer {
padding: 40px 16px 20px;
margin-top: 48px;
}
.csfloat-footer-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.csfloat-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* END responsive refinements */
/* CSFloat-1:1: card hover depth — each tier deeper, smoother shadow.
Apple/Linear use micro-shadows that crescendo on focus. */
.csfloat-grid-card,
.csfloat-band-card {
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
0 1px 2px rgba(0,0,0,0.3),
0 0 0 1px transparent;
will-change: transform, box-shadow;
}
.csfloat-grid-card:hover,
.csfloat-band-card:hover {
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
0 14px 36px rgba(0,0,0,0.55),
0 4px 10px rgba(0,0,0,0.32),
0 0 0 1px var(--line-2);
}
.csfloat-grid-card:active,
.csfloat-band-card:active {
transform: translateY(-1px) scale(0.998);
transition-duration: 80ms;
}
/* CSFloat-1:1: shimmering top edge highlight on cards — premium detail. */
.csfloat-grid-card::before,
.csfloat-band-card::before,
.csfloat-hero-stack-card::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 25%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0.06) 75%,
transparent 100%);
pointer-events: none;
border-radius: inherit;
z-index: 5;
}
/* CSFloat-1:1: card relative positioning + overflow setup. */
.csfloat-grid-card,
.csfloat-band-card,
.csfloat-hero-stack-card {
position: relative;
overflow: hidden;
}
/* CSFloat-1:1: image container in card sits with relative positioning. */
.csfloat-grid-card-img,
.csfloat-band-card-img,
.csfloat-hero-stack-img {
position: relative;
overflow: hidden;
}
/* CSFloat-1:1: card name typography — match reference. */
.csfloat-grid-card-name,
.csfloat-band-card-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 8px 0 0;
letter-spacing: -0.005em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-grid-card-name .star-prefix {
color: oklch(0.86 0.20 330);
margin-right: 2px;
}
/* CSFloat-1:1: zoom magnifier button — top-left corner of card image. */
.csfloat-grid-card-zoom,
.csfloat-band-card-zoom,
.csfloat-hero-stack-zoom {
position: absolute;
top: 8px;
left: 8px;
width: 24px;
height: 24px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
color: var(--ink-1);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
z-index: 4;
opacity: 0;
}
/* END card chrome polish — multi-layer shadow + shimmer edge */
/* CSFloat-1:1: misc page enhancements — for various utility pages. */
.csfloat-help-container {
max-width: 920px;
margin: 0 auto;
padding: 24px 20px 80px;
}
.csfloat-help-search {
margin-bottom: 24px;
position: relative;
}
.csfloat-help-search input {
width: 100%;
height: 44px;
padding: 0 16px 0 42px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
font-size: 14px;
color: var(--ink-1);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-help-search input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-help-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
font-size: 15px;
pointer-events: none;
}
.csfloat-help-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 32px;
}
.csfloat-help-category {
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 140ms ease, background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-help-category:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-2px);
}
.csfloat-help-category-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-help-category-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-help-category-count {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-help-category-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* CSFloat-1:1: help article body. */
.csfloat-help-article {
max-width: 720px;
margin: 0 auto;
}
.csfloat-help-article-meta {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-bottom: 16px;
}
.csfloat-help-article-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 24px;
letter-spacing: -0.025em;
line-height: 1.15;
}
.csfloat-help-article-body {
font-size: 14px;
color: var(--ink-2);
line-height: 1.7;
}
.csfloat-help-article-body h2 {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 28px 0 8px;
letter-spacing: -0.01em;
}
.csfloat-help-article-body h3 {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 18px 0 6px;
}
.csfloat-help-article-body p { margin: 0 0 14px; }
.csfloat-help-article-body ul,
.csfloat-help-article-body ol {
margin: 0 0 14px;
padding-left: 22px;
}
.csfloat-help-article-body li { margin: 0 0 4px; }
.csfloat-help-article-body code {
font-family: var(--mono);
font-size: 12px;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-help-article-body pre {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
overflow-x: auto;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
line-height: 1.6;
}
.csfloat-help-article-body img {
max-width: 100%;
border-radius: 8px;
margin: 14px 0;
border: 1px solid var(--line);
}
.csfloat-help-article-related {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.csfloat-help-article-related-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0 0 12px;
}
/* END help center page chrome */
/* CSFloat-1:1: market grid header — count, sort, view + filters one-liner. */
.csfloat-market-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
}
.csfloat-market-header-count {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-market-header-count strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-market-header-spacer { flex: 1 1 auto; }
/* CSFloat-1:1: refresh + filter trigger buttons. */
.csfloat-icon-action {
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-icon-action:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-icon-action.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
}
/* CSFloat-1:1: filter sidebar mobile drawer. */
@media (max-width: 1100px) {
.csfloat-filter-rail {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 320px;
z-index: 9000;
transform: translateX(-100%);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
border-radius: 0;
border-top: none;
border-bottom: none;
border-left: none;
max-height: 100vh;
}
.csfloat-filter-rail.open {
transform: translateX(0);
}
.csfloat-filter-rail-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
z-index: 8999;
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.csfloat-filter-rail-backdrop.open {
opacity: 1;
pointer-events: auto;
}
}
/* CSFloat-1:1: layout w/ sidebar — grid w/ filter rail + grid main. */
.csfloat-layout-with-rail {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
align-items: start;
margin-top: 8px;
}
@media (max-width: 1100px) {
.csfloat-layout-with-rail {
grid-template-columns: 1fr;
gap: 0;
}
}
/* END market header + icon-action + filter rail mobile */
/* CSFloat-1:1: bento grid for landing — asymmetric tile layout. */
.csfloat-bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: minmax(180px, auto);
gap: 12px;
margin: 24px 0;
}
@media (max-width: 820px) {
.csfloat-bento {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 540px) {
.csfloat-bento {
grid-template-columns: 1fr;
}
}
.csfloat-bento-tile {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
transition: border-color 240ms ease,
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 240ms ease;
}
.csfloat-bento-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-bento-tile.tall { grid-row: span 2; }
.csfloat-bento-tile.wide { grid-column: span 2; }
.csfloat-bento-tile.huge { grid-column: span 2; grid-row: span 2; }
@media (max-width: 540px) {
.csfloat-bento-tile.tall,
.csfloat-bento-tile.wide,
.csfloat-bento-tile.huge {
grid-column: span 1;
grid-row: span 1;
}
}
.csfloat-bento-tile-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 4px;
}
.csfloat-bento-tile-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-bento-tile-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-bento-tile.huge .csfloat-bento-tile-title {
font-size: 22px;
letter-spacing: -0.02em;
}
.csfloat-bento-tile.huge .csfloat-bento-tile-desc {
font-size: 14px;
}
.csfloat-bento-tile-deco {
position: absolute;
bottom: -40px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* CSFloat-1:1: marquee text section — for hero banners under nav. */
.csfloat-banner-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
background: oklch(0.30 0.05 250 / 0.32);
border-bottom: 1px solid oklch(0.42 0.10 250 / 0.5);
color: oklch(0.92 0.10 250);
font-size: 12px;
font-weight: 500;
text-align: center;
position: relative;
z-index: 999;
}
.csfloat-banner-strip a {
color: oklch(0.98 0 0);
text-decoration: underline;
text-underline-offset: 2px;
}
.csfloat-banner-strip-close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 4px;
opacity: 0.6;
transition: opacity 120ms ease;
}
.csfloat-banner-strip-close:hover { opacity: 1; }
/* END bento + banner strip */
/* CSFloat-1:1: top-deals band section — horizontal scroll of best deals. */
.csfloat-band {
position: relative;
margin: 24px 0;
}
.csfloat-band-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.csfloat-band-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-band-title-kicker {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.30 0.04 30 / 0.22);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.84 0.18 30);
}
.csfloat-band-action {
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 120ms ease;
}
.csfloat-band-action:hover { color: oklch(0.78 0.18 250); }
.csfloat-band-action::after {
content: "→";
font-size: 12px;
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-band-action:hover::after { transform: translateX(2px); }
.csfloat-band-track {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 12px;
margin: 0 -4px;
scroll-padding: 4px;
}
.csfloat-band-track::-webkit-scrollbar { height: 6px; }
.csfloat-band-track::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-band-track::-webkit-scrollbar-track {
background: transparent;
}
.csfloat-band-card {
width: 200px;
flex-shrink: 0;
scroll-snap-align: start;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: border-color 220ms ease,
transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 220ms ease;
}
.csfloat-band-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.csfloat-band-card-img {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
overflow: hidden;
}
.csfloat-band-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.csfloat-band-card-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-band-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-band-card-pricerow {
display: flex;
align-items: baseline;
gap: 6px;
}
/* END top-deals band */
/* CSFloat-1:1: in-app announcement card — for new feature highlights. */
.csfloat-announce {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
background: linear-gradient(135deg,
oklch(0.30 0.05 250 / 0.18) 0%,
oklch(0.20 0.02 250 / 0.4) 100%);
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 10px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.csfloat-announce::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-announce-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
background: var(--cta);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.98 0 0);
font-size: 14px;
font-weight: 700;
}
.csfloat-announce-body { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.csfloat-announce-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.csfloat-announce-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.csfloat-announce-desc {
font-size: 13px;
color: var(--ink-2);
margin: 0;
line-height: 1.5;
}
.csfloat-announce-actions {
display: inline-flex;
gap: 8px;
margin-top: 10px;
}
.csfloat-announce-actions a {
font-size: 12px;
font-weight: 500;
color: var(--cta);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-announce-actions a:hover { color: oklch(0.78 0.18 250); }
.csfloat-announce-close {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 4px;
margin-left: 4px;
align-self: flex-start;
z-index: 1;
transition: color 120ms ease;
}
.csfloat-announce-close:hover { color: var(--ink-1); }
/* CSFloat-1:1: feature flag chip — small "BETA" / "NEW" inline tag. */
.csfloat-feature-flag {
display: inline-flex;
align-items: center;
padding: 1px 6px;
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0.10 250);
margin-left: 4px;
vertical-align: middle;
}
.csfloat-feature-flag.beta { color: oklch(0.92 0.10 80); background: oklch(0.30 0.05 80 / 0.32); border-color: oklch(0.42 0.10 80 / 0.5); }
.csfloat-feature-flag.new { color: oklch(0.92 0.10 152); background: oklch(0.30 0.04 152 / 0.32); border-color: oklch(0.42 0.07 152 / 0.5); }
.csfloat-feature-flag.soon { color: oklch(0.85 0.04 260); background: oklch(0.30 0.02 260 / 0.32); border-color: oklch(0.42 0.04 260 / 0.5); }
/* CSFloat-1:1: data grid expansion arrow — for tables w/ row detail. */
.csfloat-table-row-expand {
width: 22px;
height: 22px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
cursor: pointer;
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-table-row-expand:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-table-row-expand.open { transform: rotate(90deg); }
.csfloat-table-row-detail {
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.csfloat-table-row-detail-content {
padding: 16px 24px;
}
/* END announce + feature flag + table row expand */
/* CSFloat-1:1: stat icon — circular icon containers used in dashboard. */
.csfloat-stat-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
flex-shrink: 0;
}
.csfloat-stat-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-stat-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-stat-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: progress dial — circular progress, for stat tiles. */
.csfloat-dial {
position: relative;
width: 56px;
height: 56px;
}
.csfloat-dial svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-dial-track {
fill: none;
stroke: var(--bg-2);
stroke-width: 4;
}
.csfloat-dial-fill {
fill: none;
stroke: var(--cta);
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-dial-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: stat trend arrow inline. */
.csfloat-trend {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-trend.up { color: oklch(0.78 0.18 152); }
.csfloat-trend.down { color: oklch(0.78 0.18 30); }
.csfloat-trend::before {
font-size: 10px;
margin-right: 1px;
opacity: 0.85;
}
.csfloat-trend.up::before { content: "▲"; }
.csfloat-trend.down::before { content: "▼"; }
.csfloat-trend.neutral::before { content: "—"; opacity: 0.6; }
/* CSFloat-1:1: section divider with icon — eye-catching break. */
.csfloat-section-divider-icon {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.csfloat-section-divider-icon::before,
.csfloat-section-divider-icon::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line) 50%,
transparent 100%);
}
.csfloat-section-divider-icon-mark {
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 14px;
}
/* END stat icon + dial + trend + divider with icon */
/* CSFloat-1:1: chart legend strip. */
.csfloat-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 8px 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-chart-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.csfloat-chart-legend-value {
margin-left: 4px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: list cell with metadata stacked. */
.csfloat-list-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-list-cell-primary {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-list-cell-secondary {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 0;
}
/* CSFloat-1:1: link group — small inline links for actions in cells. */
.csfloat-link-group {
display: inline-flex;
gap: 8px;
align-items: center;
}
.csfloat-link-group a {
font-size: 11px;
color: var(--ink-3);
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-link-group a:hover { color: var(--ink-1); }
.csfloat-link-group a.danger:hover { color: oklch(0.84 0.18 30); }
/* CSFloat-1:1: skeleton loader chrome alternates. */
.csfloat-skeleton-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
padding: 12px;
align-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 6px;
}
.csfloat-skeleton-circle {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-skeleton-square {
width: 56px;
height: 56px;
border-radius: 6px;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-skeleton-stack {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.csfloat-skeleton-mini {
width: 60px;
height: 16px;
border-radius: 3px;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* END chart legend + list cell + link group + skeleton row */
/* CSFloat-1:1: scroll-to-top button — bottom-right when scrolled. */
.csfloat-scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 40px;
height: 40px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 8700;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
opacity: 0;
pointer-events: none;
transform: translateY(20px) scale(0.8);
transition: opacity 240ms ease,
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
background 140ms ease;
}
.csfloat-scroll-top.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.csfloat-scroll-top:hover {
background: var(--bg-2);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-scroll-top:active {
transform: translateY(2px) scale(0.96);
}
/* CSFloat-1:1: skeleton card grid for /market loading state. */
.csfloat-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: 12px;
}
/* CSFloat-1:1: notification beacon — pulse for unread items. */
.csfloat-beacon {
display: inline-block;
position: relative;
width: 8px;
height: 8px;
background: oklch(0.55 0.18 30);
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-beacon::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: beacon-pulse 1800ms ease-out infinite;
}
@keyframes beacon-pulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2.5); opacity: 0; }
}
.csfloat-beacon.accent { background: var(--cta); }
.csfloat-beacon.success { background: oklch(0.62 0.18 152); }
/* CSFloat-1:1: section title with eyebrow. */
.csfloat-title-stack {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.csfloat-title-stack-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-title-stack-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
line-height: 1.2;
}
.csfloat-title-stack-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
max-width: 600px;
}
/* CSFloat-1:1: stat counter (large display + label) for landing pages. */
.csfloat-counter {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
padding: 20px;
}
.csfloat-counter-value {
font-family: var(--mono);
font-size: clamp(32px, 4vw, 44px);
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-counter-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-counter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-counter-grid .csfloat-counter {
border-right: 1px solid var(--line);
}
.csfloat-counter-grid .csfloat-counter:last-child {
border-right: none;
}
@media (max-width: 540px) {
.csfloat-counter-grid .csfloat-counter {
border-right: none;
border-bottom: 1px solid var(--line);
}
.csfloat-counter-grid .csfloat-counter:last-child {
border-bottom: none;
}
}
/* END scroll-top + skeleton-grid + beacon + title-stack + counter */
/* CSFloat-1:1: card with split sections — image-meta, body, footer. */
.csfloat-split-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}
.csfloat-split-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-split-card-img {
aspect-ratio: 16 / 9;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.csfloat-split-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-split-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
}
.csfloat-split-card-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-split-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-split-card-footer {
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
/* CSFloat-1:1: media object — avatar + content side-by-side. */
.csfloat-media {
display: flex;
gap: 10px;
align-items: flex-start;
}
.csfloat-media-figure {
flex: 0 0 auto;
}
.csfloat-media-body {
flex: 1 1 auto;
min-width: 0;
}
.csfloat-media-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-media-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin: 2px 0 0;
}
.csfloat-media-actions {
display: inline-flex;
gap: 6px;
margin-left: auto;
flex-shrink: 0;
}
/* CSFloat-1:1: avatar variants. */
.csfloat-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.csfloat-avatar.xs { width: 18px; height: 18px; font-size: 9px; }
.csfloat-avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.csfloat-avatar.md { width: 32px; height: 32px; font-size: 13px; }
.csfloat-avatar.lg { width: 48px; height: 48px; font-size: 15px; }
.csfloat-avatar.xl { width: 72px; height: 72px; font-size: 22px; }
.csfloat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-avatar-fallback {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-2);
text-transform: uppercase;
}
.csfloat-avatar-online-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 25%;
height: 25%;
min-width: 6px;
min-height: 6px;
background: oklch(0.72 0.18 152);
border: 2px solid var(--bg);
border-radius: 50%;
}
.csfloat-avatar-online-indicator.offline { background: var(--ink-4); }
.csfloat-avatar-online-indicator.idle { background: oklch(0.78 0.16 80); }
/* END split-card + media + avatar */
/* CSFloat-1:1: form fieldset — grouped form fields with optional title. */
.csfloat-fieldset {
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px;
margin-bottom: 14px;
background: var(--bg);
}
.csfloat-fieldset-legend {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
padding: 0 6px;
background: var(--bg);
margin-left: -2px;
}
/* CSFloat-1:1: form-row inline (label + control side-by-side). */
.csfloat-form-inline {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
align-items: center;
padding: 8px 0;
}
@media (max-width: 540px) {
.csfloat-form-inline { grid-template-columns: 1fr; gap: 4px; }
}
.csfloat-form-inline-label {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
}
.csfloat-form-inline-help {
font-size: 11px;
color: var(--ink-4);
margin-top: 2px;
}
/* CSFloat-1:1: hint text below input, with icon. */
.csfloat-input-hint {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
}
.csfloat-input-hint-icon {
font-size: 11px;
color: var(--ink-4);
}
.csfloat-input-hint.success {
color: oklch(0.84 0.18 152);
}
.csfloat-input-hint.success .csfloat-input-hint-icon {
color: oklch(0.78 0.18 152);
}
.csfloat-input-hint.error {
color: oklch(0.84 0.18 30);
}
.csfloat-input-hint.error .csfloat-input-hint-icon {
color: oklch(0.78 0.18 30);
}
/* CSFloat-1:1: input character counter. */
.csfloat-input-counter {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
text-align: right;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-input-counter.over { color: oklch(0.84 0.18 30); }
/* CSFloat-1:1: file dropzone — for /sell upload. */
.csfloat-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 20px;
background: var(--bg);
border: 1px dashed var(--line-2);
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-dropzone:hover,
.csfloat-dropzone.dragover {
border-color: var(--cta);
background: oklch(0.20 0.02 250 / 0.4);
}
.csfloat-dropzone-icon {
font-size: 28px;
color: var(--ink-4);
}
.csfloat-dropzone:hover .csfloat-dropzone-icon,
.csfloat-dropzone.dragover .csfloat-dropzone-icon {
color: var(--cta);
}
.csfloat-dropzone-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
}
.csfloat-dropzone-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-dropzone-action {
margin-top: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
cursor: pointer;
}
/* CSFloat-1:1: file pill — selected file badge with remove. */
.csfloat-file-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
margin-right: 4px;
margin-bottom: 4px;
}
.csfloat-file-pill-icon {
color: var(--ink-3);
font-size: 12px;
}
.csfloat-file-pill-size {
color: var(--ink-4);
font-size: 9px;
font-variant-numeric: tabular-nums;
}
.csfloat-file-pill-remove {
background: transparent;
border: none;
color: var(--ink-4);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0 2px;
margin-left: 2px;
border-radius: 3px;
transition: color 120ms ease;
}
.csfloat-file-pill-remove:hover { color: oklch(0.84 0.18 30); }
/* END fieldset + form-inline + input hint + dropzone + file pill */
/* CSFloat-1:1: number input with stepper buttons. */
.csfloat-num-input {
display: inline-flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.csfloat-num-input:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-num-input-input {
width: 60px;
border: none;
background: transparent;
text-align: center;
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
outline: none;
padding: 6px 0;
}
.csfloat-num-input-btn {
width: 26px;
background: var(--bg-2);
border: none;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-num-input-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-num-input-btn.minus {
border-right: 1px solid var(--line);
}
.csfloat-num-input-btn.plus {
border-left: 1px solid var(--line);
}
/* CSFloat-1:1: combobox — input + dropdown menu (typeahead). */
.csfloat-combobox {
position: relative;
display: inline-block;
min-width: 200px;
}
.csfloat-combobox-input {
width: 100%;
height: 32px;
padding: 0 28px 0 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-1);
font-size: 12px;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-combobox-input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-combobox-input::placeholder { color: var(--ink-3); }
.csfloat-combobox-caret {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
font-size: 9px;
pointer-events: none;
transition: transform 200ms ease;
}
.csfloat-combobox.open .csfloat-combobox-caret {
transform: translateY(-50%) rotate(180deg);
}
.csfloat-combobox-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
z-index: 100;
max-height: 240px;
overflow-y: auto;
padding: 4px 0;
}
.csfloat-combobox-option {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
transition: background 80ms ease, color 80ms ease;
}
.csfloat-combobox-option:hover,
.csfloat-combobox-option.active {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-combobox-option mark {
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
padding: 0;
font-weight: 600;
}
/* END num-input + combobox */
/* CSFloat-1:1: vertical step indicator — for /sell or onboarding multi-step. */
.csfloat-stepper-vertical {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 28px;
}
.csfloat-stepper-vertical::before {
content: "";
position: absolute;
left: 11px;
top: 12px;
bottom: 12px;
width: 1px;
background: var(--line);
}
.csfloat-stepper-step {
position: relative;
padding: 8px 0 18px;
}
.csfloat-stepper-step::before {
content: attr(data-num);
position: absolute;
left: -28px;
top: 8px;
width: 24px;
height: 24px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-stepper-step.complete::before {
content: "✓";
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-stepper-step.active::before {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-stepper-step-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-stepper-step.active .csfloat-stepper-step-title {
color: var(--cta);
}
.csfloat-stepper-step-desc {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
line-height: 1.5;
}
/* CSFloat-1:1: horizontal step indicator. */
.csfloat-stepper-horizontal {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 24px;
}
.csfloat-stepper-horizontal-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1 1 0;
position: relative;
text-align: center;
}
.csfloat-stepper-horizontal-step:not(:first-child)::before {
content: "";
position: absolute;
left: -50%;
top: 12px;
width: 100%;
height: 1px;
background: var(--line);
z-index: -1;
}
.csfloat-stepper-horizontal-step.complete:not(:first-child)::before {
background: oklch(0.62 0.18 152);
}
.csfloat-stepper-horizontal-circle {
width: 24px;
height: 24px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-stepper-horizontal-step.complete .csfloat-stepper-horizontal-circle {
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-stepper-horizontal-step.active .csfloat-stepper-horizontal-circle {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-stepper-horizontal-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.csfloat-stepper-horizontal-step.active .csfloat-stepper-horizontal-label {
color: var(--ink-1);
}
.csfloat-stepper-horizontal-step.complete .csfloat-stepper-horizontal-label {
color: oklch(0.84 0.18 152);
}
/* END stepper indicators */
/* CSFloat-1:1: hover preview popover — for username hover etc. */
.csfloat-hover-preview {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 240px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.6);
padding: 14px;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
}
.csfloat-hover-preview.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.csfloat-hover-preview-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.csfloat-hover-preview-name {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-hover-preview-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-hover-preview-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-hover-preview-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-hover-preview-stat-label {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-hover-preview-stat-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: tooltip hover container — wrap any element to add tooltip. */
.csfloat-tooltip-wrap {
position: relative;
display: inline-flex;
}
.csfloat-tooltip-wrap[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
z-index: 9800;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
animation: csfloat-tooltip-fade-in 140ms ease;
}
@keyframes csfloat-tooltip-fade-in {
from { opacity: 0; transform: translateX(-50%) translateY(2px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* CSFloat-1:1: keyboard shortcut bar — for /admin / power user pages. */
.csfloat-shortcut-bar {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-size: 11px;
color: var(--ink-3);
}
.csfloat-shortcut-bar-key {
font-family: var(--mono);
font-weight: 600;
font-size: 10px;
color: var(--ink-1);
background: var(--bg);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 3px;
padding: 1px 5px;
letter-spacing: 0.04em;
}
/* END hover preview + tooltip wrap + shortcut bar */
/* CSFloat-1:1: card-grid layout for /loadout (cosmetic loadouts page). */
.csfloat-loadout-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.csfloat-loadout-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
cursor: pointer;
}
.csfloat-loadout-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-loadout-card-header {
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-loadout-card-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
flex: 1 1 auto;
}
.csfloat-loadout-card-count {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-loadout-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.csfloat-loadout-card-cell {
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
position: relative;
}
.csfloat-loadout-card-cell img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-loadout-card-cell.empty {
border-style: dashed;
border-color: var(--line);
opacity: 0.5;
}
.csfloat-loadout-card-footer {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
border-top: 1px solid var(--line);
padding-top: 10px;
}
.csfloat-loadout-card-value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: watchlist row with notify toggle. */
.csfloat-watchlist-row {
display: grid;
grid-template-columns: 48px 1fr auto auto auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 6px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-watchlist-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-watchlist-row-img {
width: 48px;
height: 48px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-watchlist-row-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-watchlist-row-info { min-width: 0; }
.csfloat-watchlist-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-watchlist-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-watchlist-row-target {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-watchlist-row-current {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-watchlist-row-actions {
display: inline-flex;
gap: 4px;
}
/* END loadout grid + watchlist row */
/* CSFloat-1:1: collection page — featured item + grid below. */
.csfloat-collection-hero {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 24px;
align-items: center;
padding: 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
@media (max-width: 820px) {
.csfloat-collection-hero { grid-template-columns: 1fr; }
}
.csfloat-collection-hero::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-collection-hero-image {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.csfloat-collection-hero-image img {
max-width: 100%;
max-height: 280px;
object-fit: contain;
filter: drop-shadow(0 16px 36px rgba(0,0,0,0.6));
}
.csfloat-collection-hero-text {
position: relative;
z-index: 1;
}
.csfloat-collection-hero-kicker {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 8px;
}
.csfloat-collection-hero-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 8px;
letter-spacing: -0.025em;
line-height: 1.15;
}
.csfloat-collection-hero-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 14px;
line-height: 1.6;
max-width: 400px;
}
.csfloat-collection-hero-stats {
display: flex;
gap: 24px;
margin-top: 16px;
}
.csfloat-collection-hero-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-collection-hero-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-collection-hero-stat-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: notifications page list. */
.csfloat-notif-page-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-notif-page-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
position: relative;
}
.csfloat-notif-page-row.unread {
background: oklch(0.20 0.02 250 / 0.4);
border-color: oklch(0.42 0.10 250 / 0.32);
}
.csfloat-notif-page-row.unread::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
bottom: -1px;
width: 3px;
background: var(--cta);
border-radius: 8px 0 0 8px;
}
.csfloat-notif-page-row:hover {
border-color: var(--line-2);
}
.csfloat-notif-page-icon {
width: 36px;
height: 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 14px;
}
.csfloat-notif-page-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-notif-page-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-notif-page-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-notif-page-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* END collection hero + notifications page */
/* CSFloat-1:1: leaderboard table — top sellers / volume rankings. */
.csfloat-leaderboard {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.csfloat-leaderboard-header {
display: grid;
grid-template-columns: 60px 1fr auto auto;
gap: 14px;
padding: 12px 18px;
background: var(--bg);
border-bottom: 1px solid var(--line);
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-leaderboard-row {
display: grid;
grid-template-columns: 60px 1fr auto auto;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--line);
align-items: center;
transition: background 100ms ease;
}
.csfloat-leaderboard-row:last-child { border-bottom: none; }
.csfloat-leaderboard-row:hover {
background: var(--bg-2);
}
.csfloat-leaderboard-rank {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
text-align: center;
}
.csfloat-leaderboard-rank.top1 { color: oklch(0.84 0.16 80); font-size: 15px; }
.csfloat-leaderboard-rank.top2 { color: oklch(0.85 0.04 260); font-size: 15px; }
.csfloat-leaderboard-rank.top3 { color: oklch(0.78 0.16 50); font-size: 15px; }
.csfloat-leaderboard-user {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.csfloat-leaderboard-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-leaderboard-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-leaderboard-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-leaderboard-handle {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-leaderboard-volume {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-leaderboard-trades {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: market trend strip — small sparkline + price + change inline. */
.csfloat-trend-strip {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 12px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-trend-strip:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-trend-strip-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trend-strip-spark {
width: 60px;
height: 18px;
}
.csfloat-trend-strip-price {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-trend-strip-change {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
display: inline-flex;
align-items: center;
gap: 2px;
}
.csfloat-trend-strip-change.up { color: oklch(0.78 0.18 152); }
.csfloat-trend-strip-change.down { color: oklch(0.78 0.18 30); }
/* END leaderboard + trend strip */
/* CSFloat-1:1: gradient text on accent words inline. */
.csfloat-grad-blue {
background: linear-gradient(135deg,
oklch(0.78 0.18 240) 0%,
var(--cta) 50%,
oklch(0.85 0.18 250) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-grad-rare {
background: linear-gradient(135deg,
oklch(0.85 0.20 330) 0%,
oklch(0.72 0.30 330) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-grad-gold {
background: linear-gradient(135deg,
oklch(0.85 0.16 80) 0%,
oklch(0.78 0.16 60) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-grad-mono {
background: linear-gradient(180deg,
oklch(0.97 0.006 90) 0%,
oklch(0.78 0.012 260) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* CSFloat-1:1: hover-pop effect on icons. */
.csfloat-pop-on-hover {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pop-on-hover:hover {
transform: scale(1.12);
}
.csfloat-pop-on-hover:active {
transform: scale(0.95);
}
/* CSFloat-1:1: icon button group (vertical stack of icon buttons). */
.csfloat-icon-stack {
display: inline-flex;
flex-direction: column;
gap: 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 4px;
}
.csfloat-icon-stack .csfloat-icon-btn {
width: 30px;
height: 30px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 13px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-icon-stack .csfloat-icon-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-icon-stack .csfloat-icon-btn.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
}
/* CSFloat-1:1: floating tabs (centered) — for filter type sections. */
.csfloat-floating-tabs {
display: inline-flex;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 0;
margin: 12px auto;
}
.csfloat-floating-tabs-tab {
background: transparent;
border: none;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease;
}
.csfloat-floating-tabs-tab:hover { color: var(--ink-1); }
.csfloat-floating-tabs-tab.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: dialog header — large display title + closer. */
.csfloat-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
}
.csfloat-dialog-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-dialog-subtitle {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
}
.csfloat-dialog-close {
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-dialog-close:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* CSFloat-1:1: dialog body + footer. */
.csfloat-dialog-body {
padding: 18px 20px;
flex: 1 1 auto;
overflow-y: auto;
}
.csfloat-dialog-footer {
padding: 12px 20px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* END gradient text + pop-on-hover + icon-stack + floating-tabs + dialog header */
/* CSFloat-1:1: profile activity timeline list (alternating sides). */
.csfloat-profile-activity {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 0;
}
.csfloat-profile-activity-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-profile-activity-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-profile-activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-profile-activity-icon.sale {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.32);
}
.csfloat-profile-activity-icon.purchase {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.32);
}
.csfloat-profile-activity-icon.list {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.32);
}
.csfloat-profile-activity-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-profile-activity-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-profile-activity-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-profile-activity-amount {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-profile-activity-amount.positive { color: oklch(0.78 0.18 152); }
/* CSFloat-1:1: profile inventory grid layout. */
.csfloat-profile-inventory {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
padding: 12px 0;
}
.csfloat-profile-inventory-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
position: relative;
}
.csfloat-profile-inventory-tile:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-profile-inventory-tile-img {
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
position: relative;
overflow: hidden;
}
.csfloat-profile-inventory-tile-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-profile-inventory-tile-name {
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-profile-inventory-tile-price {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-profile-inventory-tile-state {
position: absolute;
top: 4px;
right: 4px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
padding: 1px 5px;
background: oklch(0.30 0.05 250 / 0.55);
border-radius: 3px;
color: oklch(0.92 0.10 250);
letter-spacing: 0.06em;
}
.csfloat-profile-inventory-tile-state.listed {
background: oklch(0.30 0.04 152 / 0.55);
color: oklch(0.92 0.10 152);
}
/* END profile activity + inventory */
/* CSFloat-1:1: review/feedback list — for seller profile feedback section. */
.csfloat-review {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
transition: border-color 120ms ease;
}
.csfloat-review:hover { border-color: var(--line-2); }
.csfloat-review-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.csfloat-review-author {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.csfloat-review-author-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-review-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-review-author-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-review-author-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-review-rating {
display: inline-flex;
align-items: center;
gap: 2px;
}
.csfloat-review-rating-star {
font-size: 11px;
color: oklch(0.78 0.16 80);
}
.csfloat-review-rating-star.empty { color: var(--ink-4); }
.csfloat-review-body {
font-size: 12px;
color: var(--ink-2);
margin: 0;
line-height: 1.55;
}
.csfloat-review-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
margin-top: 4px;
}
.csfloat-review-item-img {
width: 28px;
height: 28px;
background: var(--bg-2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
flex-shrink: 0;
}
.csfloat-review-item-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-review-item-name {
font-size: 11px;
color: var(--ink-2);
margin: 0;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-review-item-price {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: review summary distribution chart. */
.csfloat-review-summary {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 16px;
align-items: center;
}
.csfloat-review-summary-score {
text-align: center;
}
.csfloat-review-summary-num {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-review-summary-stars {
display: inline-flex;
align-items: center;
gap: 1px;
margin-top: 4px;
}
.csfloat-review-summary-stars-star {
font-size: 12px;
color: oklch(0.78 0.16 80);
}
.csfloat-review-summary-stars-star.empty { color: var(--ink-4); }
.csfloat-review-summary-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.csfloat-review-summary-bars {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-review-summary-bar {
display: grid;
grid-template-columns: 32px 1fr 32px;
gap: 8px;
align-items: center;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-review-summary-bar-fill {
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-review-summary-bar-inner {
height: 100%;
background: oklch(0.78 0.16 80);
border-radius: 3px;
transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-review-summary-bar-pct {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* END review chrome */
/* CSFloat-1:1: notification badge + bell row - new for nav. */
.csfloat-nav-bell {
position: relative;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.csfloat-nav-bell:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
.csfloat-nav-bell.has-unread::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 7px;
height: 7px;
background: oklch(0.55 0.18 30);
border: 2px solid var(--bg);
border-radius: 50%;
animation: csfloat-bell-shake 800ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}
/* CSFloat-1:1: cart icon nav button. */
.csfloat-nav-cart {
position: relative;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.csfloat-nav-cart:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
.csfloat-nav-cart-count {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 2px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* CSFloat-1:1: tab content hidden state + animated reveal. */
[data-csfloat-tabpanel] {
display: none;
}
[data-csfloat-tabpanel].active {
display: block;
animation: csfloat-tab-fade-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: search highlight in suggestions. */
.csfloat-search-highlight {
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
padding: 0 2px;
border-radius: 2px;
font-weight: 600;
}
/* CSFloat-1:1: wrap responsive nav links — hide on overflow. */
@media (max-width: 980px) {
.nav-link.responsive-hide { display: none; }
}
@media (max-width: 720px) {
.nav-link.responsive-hide-md { display: none; }
}
/* CSFloat-1:1: container queries (modern) — when supported, use container. */
@container (max-width: 480px) {
.csfloat-grid-card {
grid-template-columns: 1fr;
}
}
/* END nav bell + cart + tab panels + search highlight */
/* CSFloat-1:1: dimmer overlay for modals. */
.csfloat-dim-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 8800;
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.csfloat-dim-overlay.open {
opacity: 1;
pointer-events: auto;
}
/* CSFloat-1:1: modal positioning helpers. */
.csfloat-modal-center {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 9000;
pointer-events: none;
}
.csfloat-modal-center > * {
pointer-events: auto;
}
.csfloat-modal-center.open > * {
animation: csfloat-pop-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: top-of-fold modal — for important notices. */
.csfloat-modal-top {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(520px, calc(100vw - 32px));
margin-top: 16px;
z-index: 9000;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
animation: csfloat-slide-down-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-slide-down-in {
from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* CSFloat-1:1: split-screen modal — left image, right form (e.g. login). */
.csfloat-split-modal {
display: grid;
grid-template-columns: 1fr 1fr;
width: min(900px, 92vw);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.65);
max-height: 90vh;
}
@media (max-width: 720px) {
.csfloat-split-modal { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
.csfloat-split-modal-left { display: none; }
}
.csfloat-split-modal-left {
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.csfloat-split-modal-left::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
}
.csfloat-split-modal-left-text {
position: relative;
z-index: 1;
}
.csfloat-split-modal-left-kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 8px;
}
.csfloat-split-modal-left-title {
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
margin: 0 0 12px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-split-modal-left-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-split-modal-right {
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* END dim overlay + modal positioning helpers + split modal */
/* CSFloat-1:1: pricing tier card — for /premium / subscription page. */
.csfloat-tier-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
position: relative;
overflow: hidden;
}
.csfloat-tier-card.featured {
border-color: var(--cta);
background: linear-gradient(135deg, var(--bg-1), oklch(0.20 0.02 250 / 0.4));
}
.csfloat-tier-card.featured::before {
content: "POPULAR";
position: absolute;
top: 14px;
right: -28px;
padding: 3px 28px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transform: rotate(45deg);
}
.csfloat-tier-card:hover {
border-color: var(--line-2);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.55);
}
.csfloat-tier-card.featured:hover {
border-color: var(--cta);
box-shadow: 0 20px 40px oklch(0.55 0.18 250 / 0.32);
}
.csfloat-tier-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: var(--mono);
font-size: 12px;
}
.csfloat-tier-price {
display: flex;
align-items: baseline;
gap: 4px;
}
.csfloat-tier-price-amount {
font-family: var(--mono);
font-size: 40px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-tier-price-period {
font-size: 12px;
color: var(--ink-3);
font-family: var(--mono);
}
.csfloat-tier-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-tier-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 18px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
cursor: pointer;
text-decoration: none;
margin-top: 4px;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-tier-card.featured .csfloat-tier-cta {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-tier-cta:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-tier-card.featured .csfloat-tier-cta:hover {
background: oklch(0.65 0.18 250);
border-color: oklch(0.65 0.18 250);
}
.csfloat-tier-features {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-tier-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.csfloat-tier-feature::before {
content: "✓";
flex: 0 0 16px;
width: 16px;
height: 16px;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.csfloat-tier-feature.disabled {
color: var(--ink-4);
text-decoration: line-through;
}
.csfloat-tier-feature.disabled::before {
content: "—";
background: var(--bg-2);
color: var(--ink-4);
}
/* END pricing tier card */
/* CSFloat-1:1: hero refinement — tiny hairline blue line under title. */
.hero h1 + .hero-light-bar,
.hero h1::after {
display: block;
content: "";
width: 120px;
height: 1px;
margin: 12px auto 16px;
background: linear-gradient(90deg,
transparent 0%,
var(--cta) 50%,
transparent 100%);
}
/* CSFloat-1:1: section label — small tag above subsection. */
.csfloat-section-label {
display: inline-block;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 6px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
}
/* CSFloat-1:1: image overlay gradient (used on top of card images). */
.csfloat-img-overlay-bottom {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 60%,
rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
.csfloat-img-overlay-top {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.35) 0%,
transparent 40%);
pointer-events: none;
}
.csfloat-img-overlay-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
transparent 50%,
rgba(0,0,0,0.32) 100%);
pointer-events: none;
}
/* CSFloat-1:1: text effects on cards. */
.csfloat-text-stroke {
-webkit-text-stroke: 0.5px rgba(255,255,255,0.18);
text-stroke: 0.5px rgba(255,255,255,0.18);
}
/* CSFloat-1:1: rare-skin glow — used on featured legendary cards. */
.csfloat-rare-glow {
position: relative;
}
.csfloat-rare-glow::after {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(135deg,
oklch(0.62 0.27 330) 0%,
oklch(0.72 0.30 330) 50%,
oklch(0.62 0.27 330) 100%);
border-radius: inherit;
z-index: -1;
filter: blur(8px);
opacity: 0.4;
}
/* CSFloat-1:1: image carousel — multi-image item view. */
.csfloat-img-carousel {
position: relative;
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.csfloat-img-carousel-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-carousel-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.csfloat-img-carousel-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-img-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-carousel-arrow.prev { left: 12px; }
.csfloat-img-carousel-arrow.next { right: 12px; }
.csfloat-img-carousel-arrow:hover {
background: rgba(0,0,0,0.7);
transform: translateY(-50%) scale(1.06);
}
.csfloat-img-carousel-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
gap: 6px;
z-index: 4;
}
.csfloat-img-carousel-dot {
width: 6px;
height: 6px;
background: rgba(255,255,255,0.32);
border-radius: 50%;
cursor: pointer;
transition: background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-carousel-dot.active {
background: oklch(0.98 0 0);
transform: scale(1.2);
}
.csfloat-img-carousel-dot:hover {
background: oklch(0.92 0 0);
}
/* END section label + image effects + img carousel */
/* CSFloat-1:1: hover-glow hint — for primary CTAs in product cards. */
.csfloat-card-cta-hint {
position: absolute;
bottom: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0;
transform: translateY(4px);
transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: 4;
}
.csfloat-grid-card:hover .csfloat-card-cta-hint,
.csfloat-band-card:hover .csfloat-card-cta-hint {
opacity: 1;
transform: translateY(0);
}
/* CSFloat-1:1: instant-buy chip — small green pill for inventory tiles. */
.csfloat-instant-buy {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.04 152 / 0.32);
border: 1px solid oklch(0.42 0.07 152 / 0.45);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 152);
}
.csfloat-instant-buy::before {
content: "⚡";
font-size: 9px;
}
/* CSFloat-1:1: bargain accepted indicator. */
.csfloat-bargain-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.45);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0.10 250);
}
/* CSFloat-1:1: trade-hold indicator on item card. */
.csfloat-tradehold-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 80 / 0.32);
border: 1px solid oklch(0.42 0.10 80 / 0.45);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.16 80);
}
.csfloat-tradehold-pill::before {
content: "🔒";
font-size: 8px;
opacity: 0.85;
}
/* CSFloat-1:1: stickered indicator — small icons row for stickers on item. */
.csfloat-stickers-row {
display: inline-flex;
gap: 3px;
align-items: center;
margin-top: 4px;
}
.csfloat-sticker {
width: 16px;
height: 16px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-sticker img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 1px;
}
.csfloat-sticker-more {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
margin-left: 2px;
}
/* END card hover hints + instant-buy + bargain + tradehold + stickers */
/* CSFloat-1:1: keychain indicator — small dangling key icon for stickered+keychained skins. */
.csfloat-keychain {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: oklch(0.30 0.05 30 / 0.25);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-keychain::before {
content: "🔑";
font-size: 8px;
filter: hue-rotate(-20deg);
}
/* CSFloat-1:1: signature inscription chip. */
.csfloat-inscription {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
color: var(--cta);
font-style: italic;
font-weight: 600;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: tier indicator — small letter chip for grade. */
.csfloat-tier {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-family: var(--mono);
font-size: 10px;
font-weight: 800;
border-radius: 3px;
flex-shrink: 0;
}
.csfloat-tier.s {
background: linear-gradient(135deg, oklch(0.85 0.20 330) 0%, oklch(0.62 0.27 330) 100%);
color: oklch(0.10 0 0);
}
.csfloat-tier.a { background: oklch(0.62 0.27 330 / 0.32); color: oklch(0.86 0.20 330); border: 1px solid oklch(0.62 0.27 330 / 0.5); }
.csfloat-tier.b { background: oklch(0.55 0.18 250 / 0.28); color: oklch(0.86 0.18 250); border: 1px solid oklch(0.55 0.18 250 / 0.5); }
.csfloat-tier.c { background: oklch(0.40 0.04 260 / 0.4); color: oklch(0.85 0.04 260); border: 1px solid oklch(0.55 0.04 260 / 0.5); }
.csfloat-tier.d { background: oklch(0.35 0.02 260 / 0.4); color: oklch(0.78 0.02 260); border: 1px solid oklch(0.50 0.02 260 / 0.5); }
/* CSFloat-1:1: dispute / report indicator. */
.csfloat-dispute-flag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: oklch(0.30 0.04 30 / 0.32);
border: 1px solid oklch(0.42 0.07 30 / 0.45);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-dispute-flag::before {
content: "!";
font-size: 11px;
font-weight: 800;
margin-right: 2px;
width: 10px;
height: 10px;
background: oklch(0.78 0.18 30);
color: oklch(0.10 0 0);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* CSFloat-1:1: card subtitle — secondary metadata under name. */
.csfloat-card-subtitle {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 4px;
}
.csfloat-card-subtitle .sep {
color: var(--ink-4);
}
/* CSFloat-1:1: title-orange wear chip (for hero cards specifically). */
.csfloat-wear-chip {
display: inline-flex;
align-items: center;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-style: italic;
font-weight: 600;
color: oklch(0.84 0.16 80);
letter-spacing: -0.005em;
}
.csfloat-wear-chip.fn { color: oklch(0.84 0.18 152); font-style: italic; }
.csfloat-wear-chip.mw { color: oklch(0.84 0.16 130); font-style: italic; }
.csfloat-wear-chip.ft { color: oklch(0.84 0.16 80); font-style: italic; }
.csfloat-wear-chip.ww { color: oklch(0.78 0.16 50); font-style: italic; }
.csfloat-wear-chip.bs { color: oklch(0.78 0.18 30); font-style: italic; }
/* END keychain + inscription + tier + dispute + card subtitle + wear chip */
/* CSFloat-1:1: CSS variable refinements — ensure all tokens are defined. */
:root {
--bg: oklch(0.17 0.008 260);
--bg-1: oklch(0.20 0.009 260);
--bg-2: oklch(0.23 0.010 260);
--bg-3: oklch(0.27 0.011 260);
--line: oklch(0.30 0.012 260);
--line-2: oklch(0.36 0.014 260);
--ink: oklch(0.97 0.006 90);
--ink-1: oklch(0.97 0.006 90);
--ink-2: oklch(0.80 0.010 260);
/* Boss QA cycle 11 — duplicate :root block was overriding the WCAG-bumped
ink-3/4 from line 30. Match the canonical values so contrast clears
across grid-card prices, table headers, fee-calc text, ticker labels. */
--ink-3: oklch(0.74 0.010 260);
--ink-4: oklch(0.66 0.012 260);
--cta: #3b82f6;
--accent: #1ea5ff;
--accent-2: #4dc8ff;
--accent-dim: rgba(30,165,255,0.12);
--accent-border: rgba(30,165,255,0.3);
--mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
--serif: 'Fraunces', 'Times New Roman', serif;
--shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 4px rgba(0,0,0,0.3);
--shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px rgba(0,0,0,0.55);
--up: oklch(0.78 0.18 152);
--down: oklch(0.78 0.18 30);
--rare-lim: oklch(0.86 0.20 330);
--rare-off: oklch(0.86 0.18 250);
--rare-std: oklch(0.85 0.04 260);
}
/* CSFloat-1:1: explicit body styling. */
body {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
background: var(--bg);
color: var(--ink-1);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* CSFloat-1:1: link defaults — clean, no underline by default. */
a {
color: inherit;
text-decoration: none;
}
/* CSFloat-1:1: focus visibility — never use outline:none without alternative. */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* CSFloat-1:1: prevent text selection on UI chrome. */
.csfloat-no-select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* CSFloat-1:1: tabular-nums applied globally to numbers. */
.csfloat-num {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: fix common reset patterns. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* CSFloat-1:1: reduce-motion overrides. */
@media (prefers-reduced-motion: reduce) {
body::before { display: none; }
.csfloat-marquee-track,
.csfloat-pulse-tape {
animation: none !important;
}
.csfloat-beacon::after,
.csfloat-toast,
.csfloat-list-row-in {
animation: none !important;
}
.csfloat-grid-card:hover,
.csfloat-band-card:hover,
.csfloat-hero-stack-card:hover {
transform: none !important;
}
}
/* END token + body refinements + reduce-motion */
/* CSFloat-1:1: heading scale — explicit type sizes for all headings. */
h1.csfloat, .csfloat-h1 {
font-size: clamp(36px, 4.5vw, 48px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--ink-1);
margin: 0 0 12px;
}
h2.csfloat, .csfloat-h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--ink-1);
margin: 0 0 10px;
}
h3.csfloat, .csfloat-h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--ink-1);
margin: 0 0 8px;
}
h4.csfloat, .csfloat-h4 {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--ink-1);
margin: 0 0 6px;
}
h5.csfloat, .csfloat-h5 {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0 0 4px;
}
h6.csfloat, .csfloat-h6 {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0 0 4px;
}
/* CSFloat-1:1: lead paragraph (intro). */
.csfloat-lede {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--ink-2);
line-height: 1.65;
margin: 0 0 20px;
max-width: 720px;
}
/* CSFloat-1:1: meta line — small caps style metadata. */
.csfloat-meta-line {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
/* CSFloat-1:1: pre-formatted code block. */
.csfloat-pre {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
overflow-x: auto;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
line-height: 1.55;
letter-spacing: -0.005em;
margin: 12px 0;
}
.csfloat-pre::-webkit-scrollbar { height: 6px; }
.csfloat-pre::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
/* CSFloat-1:1: inline code. */
.csfloat-code-inline {
font-family: var(--mono);
font-size: 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
color: var(--ink-1);
letter-spacing: -0.005em;
}
/* CSFloat-1:1: emphasized text. */
.csfloat-em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
}
/* CSFloat-1:1: blockquote. */
.csfloat-blockquote {
margin: 16px 0;
padding: 12px 18px;
background: var(--bg-1);
border-left: 3px solid var(--cta);
border-radius: 0 8px 8px 0;
color: var(--ink-2);
font-style: italic;
font-family: var(--serif);
font-size: 14px;
line-height: 1.65;
}
.csfloat-blockquote-author {
display: block;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-style: normal;
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
margin-top: 6px;
text-align: right;
}
.csfloat-blockquote-author::before {
content: "— ";
color: var(--ink-4);
}
/* CSFloat-1:1: list (unordered). */
.csfloat-list {
margin: 12px 0;
padding-left: 20px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.65;
}
.csfloat-list li {
margin: 0 0 6px;
}
.csfloat-list-checkmark {
list-style: none;
padding-left: 0;
}
.csfloat-list-checkmark li {
position: relative;
padding-left: 22px;
}
.csfloat-list-checkmark li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
width: 16px;
height: 16px;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* END headings + lede + meta line + pre + code + blockquote + lists */
/* CSFloat-1:1: image gallery for /database — compact tile grid. */
.csfloat-db-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin: 12px 0;
}
.csfloat-db-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
text-decoration: none;
}
.csfloat-db-tile:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-db-tile-img {
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-db-tile-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-db-tile-name {
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-db-tile-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
display: flex;
justify-content: space-between;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: collection card (group of items as a collection). */
.csfloat-collection-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
text-decoration: none;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collection-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-collection-card-cover {
aspect-ratio: 16 / 9;
background: var(--bg-2);
position: relative;
overflow: hidden;
}
.csfloat-collection-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-collection-card-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
pointer-events: none;
}
.csfloat-collection-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 14px;
z-index: 1;
color: var(--ink-1);
}
.csfloat-collection-card-title {
font-size: 15px;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.csfloat-collection-card-meta {
font-family: var(--mono);
font-size: 10px;
color: rgba(255,255,255,0.7);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-collection-card-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-collection-card-stats {
display: flex;
gap: 16px;
}
.csfloat-collection-card-stat {
display: flex;
flex-direction: column;
gap: 1px;
}
.csfloat-collection-card-stat-label {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-collection-card-stat-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END /database tiles + collection card */
/* CSFloat-1:1: featured collection banner — for /database highlighted set. */
.csfloat-collection-banner {
display: grid;
grid-template-columns: 1fr 240px;
gap: 24px;
align-items: center;
padding: 28px 32px;
background: linear-gradient(135deg, var(--bg-1), oklch(0.20 0.02 250 / 0.4));
border: 1px solid var(--line-2);
border-radius: 14px;
margin: 16px 0 24px;
position: relative;
overflow: hidden;
}
@media (max-width: 720px) {
.csfloat-collection-banner {
grid-template-columns: 1fr;
padding: 22px;
}
.csfloat-collection-banner-art {
display: none;
}
}
.csfloat-collection-banner::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 240px;
height: 240px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-collection-banner-text {
position: relative;
z-index: 1;
}
.csfloat-collection-banner-tag {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 8px;
}
.csfloat-collection-banner-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 8px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-collection-banner-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 14px;
line-height: 1.6;
}
.csfloat-collection-banner-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease;
cursor: pointer;
}
.csfloat-collection-banner-cta:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-collection-banner-cta::after {
content: "→";
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collection-banner-cta:hover::after {
transform: translateX(2px);
}
.csfloat-collection-banner-art {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-collection-banner-art img {
max-width: 100%;
max-height: 220px;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6));
}
/* CSFloat-1:1: filter chips inline at top of /database. */
.csfloat-db-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0;
margin-bottom: 12px;
}
.csfloat-db-category-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-db-category-chip:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-db-category-chip.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
}
.csfloat-db-category-chip-count {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.csfloat-db-category-chip.active .csfloat-db-category-chip-count {
color: oklch(0.98 0 0 / 0.7);
}
/* END featured collection banner + db categories chips */
/* CSFloat-1:1: in-app live ticker — small inline live activity feed. */
.csfloat-ticker {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
padding: 6px 0;
letter-spacing: -0.005em;
}
.csfloat-ticker-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
font-size: 9px;
}
.csfloat-ticker-track {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.csfloat-ticker-tape {
display: inline-flex;
gap: 14px;
flex-shrink: 0;
animation: pulse-scroll 50s linear infinite;
}
.csfloat-ticker-item {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.csfloat-ticker-item-name {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-ticker-item-price {
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-ticker-item-arrow {
color: var(--ink-4);
}
.csfloat-ticker:hover .csfloat-ticker-tape {
animation-play-state: paused;
}
/* CSFloat-1:1: skeleton loading text bars. */
.csfloat-skel-text {
height: 12px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-skel-text.short { width: 40%; }
.csfloat-skel-text.medium { width: 65%; }
.csfloat-skel-text.long { width: 90%; }
.csfloat-skel-text.tall { height: 16px; }
.csfloat-skel-text.huge { height: 22px; }
/* CSFloat-1:1: avatar skeleton. */
.csfloat-skel-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
flex-shrink: 0;
}
.csfloat-skel-avatar.lg { width: 48px; height: 48px; }
.csfloat-skel-avatar.xl { width: 72px; height: 72px; }
/* CSFloat-1:1: button skeleton. */
.csfloat-skel-btn {
height: 36px;
width: 120px;
border-radius: 8px;
background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* CSFloat-1:1: hide content while loading. */
.csfloat-loading-shimmer {
background: linear-gradient(
90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%
);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* END live ticker + skeletons */
/* CSFloat-1:1: page transition — fade between routes. */
@keyframes csfloat-page-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-page-enter {
animation: csfloat-page-fade-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: image hover-zoom inside a fixed frame. */
.csfloat-zoom-frame {
overflow: hidden;
border-radius: inherit;
}
.csfloat-zoom-frame img {
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-zoom-frame:hover img {
transform: scale(1.06);
}
/* CSFloat-1:1: modal/sheet body scroll lock. */
body.csfloat-scroll-locked {
overflow: hidden;
padding-right: var(--scrollbar-width, 0);
}
/* CSFloat-1:1: clickable wrapper for entire card-link. */
.csfloat-clickable {
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
/* CSFloat-1:1: container query support for small screens. */
@container (max-width: 540px) {
.csfloat-card-base {
padding: 8px;
}
}
/* CSFloat-1:1: theme color hint for toolbar. */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
/* CSFloat-1:1: better text-rendering for high-density screens. */
@media (min-resolution: 2dppx) {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* CSFloat-1:1: prevent iOS auto-zoom on form inputs (font-size ≥ 16px). */
@supports (-webkit-touch-callout: none) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
font-size: max(13px, 16px);
}
}
/* CSFloat-1:1: preserve scroll position on hash navigation. */
html {
scroll-padding-top: 80px;
}
/* CSFloat-1:1: text balance for headlines (when supported). */
h1, h2, h3,
.csfloat-h1, .csfloat-h2, .csfloat-h3 {
text-wrap: balance;
}
/* CSFloat-1:1: pretty wrap for long text (when supported). */
p, li, .csfloat-lede {
text-wrap: pretty;
}
/* CSFloat-1:1: force tabular nums for time / counters. */
time, [data-time], .csfloat-time {
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: hr default styling. */
hr.csfloat {
border: none;
height: 1px;
background: var(--line);
margin: 16px 0;
}
/* END page transition + utility scroll-lock + theme hints */
/* CSFloat-1:1: dot-leader between text and value (used in receipts). */
.csfloat-leader-row {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
margin: 4px 0;
}
.csfloat-leader-row-label {
color: var(--ink-3);
flex-shrink: 0;
}
.csfloat-leader-row-fill {
flex: 1 1 auto;
border-bottom: 1px dotted var(--line);
margin-bottom: 4px;
}
.csfloat-leader-row-value {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* CSFloat-1:1: text marquee (one-liner, scrolls when overflows). */
.csfloat-marquee-text {
display: inline-block;
white-space: nowrap;
animation: csfloat-marquee-text 12s linear infinite;
max-width: 100%;
}
@keyframes csfloat-marquee-text {
0%, 10% { transform: translateX(0); }
90%, 100% { transform: translateX(calc(-100% + 200px)); }
}
/* CSFloat-1:1: gradient borders (using mask). */
.csfloat-grad-border {
position: relative;
background: var(--bg-1);
border-radius: 10px;
}
.csfloat-grad-border::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250),
transparent 50%,
oklch(0.55 0.18 250));
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* CSFloat-1:1: rotating arc spinner — alternative to spinner. */
.csfloat-arc {
display: inline-block;
width: 32px;
height: 32px;
position: relative;
}
.csfloat-arc::before,
.csfloat-arc::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
}
.csfloat-arc::before {
border-top-color: var(--cta);
border-right-color: var(--cta);
animation: csfloat-spin 800ms linear infinite;
}
.csfloat-arc::after {
border-bottom-color: oklch(0.78 0.18 250);
border-left-color: oklch(0.78 0.18 250);
animation: csfloat-spin 1200ms linear infinite reverse;
inset: 4px;
}
/* CSFloat-1:1: pulse circle (for marker pin). */
.csfloat-pulse-circle {
position: relative;
width: 12px;
height: 12px;
background: var(--cta);
border-radius: 50%;
}
.csfloat-pulse-circle::before {
content: "";
position: absolute;
inset: 0;
background: var(--cta);
border-radius: 50%;
animation: csfloat-pulse-ring 1800ms ease-out infinite;
opacity: 0.4;
}
@keyframes csfloat-pulse-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2.4); opacity: 0; }
}
/* CSFloat-1:1: live indicator (small green dot + text). */
.csfloat-live-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.84 0.18 152);
}
.csfloat-live-indicator::before {
content: "";
width: 6px;
height: 6px;
background: oklch(0.78 0.18 152);
border-radius: 50%;
box-shadow: 0 0 8px oklch(0.78 0.18 152 / 0.5);
animation: live-pulse 1600ms ease-in-out infinite;
}
/* END leader row + marquee text + grad border + arc + pulse circle + live indicator */
/* CSFloat-1:1: spread legend — for chart series (orange = bid, blue = ask). */
.csfloat-spread-legend {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-spread-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-spread-legend-swatch {
width: 10px;
height: 4px;
border-radius: 2px;
flex-shrink: 0;
}
.csfloat-spread-legend-swatch.bid { background: oklch(0.78 0.18 30); }
.csfloat-spread-legend-swatch.ask { background: var(--cta); }
.csfloat-spread-legend-swatch.last { background: oklch(0.78 0.18 152); }
.csfloat-spread-legend-value {
color: var(--ink-1);
font-weight: 600;
margin-left: 3px;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: nav inner divider — vertical line between groups. */
.csfloat-nav-divider {
width: 1px;
height: 20px;
background: var(--line);
margin: 0 8px;
flex-shrink: 0;
}
/* CSFloat-1:1: balance display in nav, with inline + and ▾ icons. */
.csfloat-balance {
display: inline-flex;
align-items: center;
gap: 4px;
height: 32px;
padding: 0 6px 0 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
text-decoration: none;
letter-spacing: -0.005em;
}
.csfloat-balance:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-balance-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 50%;
font-size: 11px;
color: var(--cta);
margin-right: 4px;
font-weight: 700;
}
.csfloat-balance-amount {
padding: 0 2px;
}
.csfloat-balance-curr {
font-size: 9px;
color: var(--ink-3);
margin-left: 2px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* CSFloat-1:1: nav search inline shortcut hint. */
.csfloat-nav-search-shortcut {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
pointer-events: none;
letter-spacing: 0.04em;
transition: opacity 140ms ease;
}
/* END spread legend + nav divider + balance + nav search */
/* CSFloat-1:1: order book table — bid/ask rows. */
.csfloat-orderbook {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
}
.csfloat-orderbook-side {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-orderbook-side-title {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
padding: 4px 6px 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.csfloat-orderbook-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 4px 6px;
font-family: var(--mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
position: relative;
border-radius: 3px;
transition: background 80ms ease;
cursor: pointer;
}
.csfloat-orderbook-row:hover {
background: var(--bg-2);
}
.csfloat-orderbook-row::before {
content: "";
position: absolute;
inset: 0;
border-radius: 3px;
pointer-events: none;
width: var(--depth, 0%);
opacity: 0.18;
}
.csfloat-orderbook-row.bid::before {
background: linear-gradient(90deg, transparent 0%, oklch(0.55 0.18 30 / 0.4) 100%);
}
.csfloat-orderbook-row.ask::before {
background: linear-gradient(270deg, transparent 0%, var(--cta) 100%);
}
.csfloat-orderbook-row.bid .price { color: oklch(0.84 0.18 30); font-weight: 600; }
.csfloat-orderbook-row.ask .price { color: var(--cta); font-weight: 600; }
.csfloat-orderbook-row .qty {
color: var(--ink-2);
text-align: right;
}
.csfloat-orderbook-spread {
grid-column: 1 / -1;
display: flex;
justify-content: center;
padding: 8px 0;
margin: 6px 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-3);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.csfloat-orderbook-spread .label {
color: var(--ink-4);
margin-right: 6px;
}
.csfloat-orderbook-spread .value {
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: market depth bar — visualizes liquidity. */
.csfloat-depth-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-depth-bar-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 9px;
color: var(--ink-4);
}
.csfloat-depth-bar-meter {
flex: 1 1 auto;
height: 8px;
background: var(--bg-2);
border-radius: 4px;
overflow: hidden;
display: flex;
}
.csfloat-depth-bar-bid {
height: 100%;
background: oklch(0.55 0.18 30);
}
.csfloat-depth-bar-ask {
height: 100%;
background: var(--cta);
}
.csfloat-depth-bar-value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END order book + depth bar */
/* CSFloat-1:1: brand mark wordmark — text logo with small icon. */
.csfloat-brand {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
}
.csfloat-brand-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 7px;
filter: drop-shadow(0 0 8px oklch(0.55 0.18 250 / 0.4));
position: relative;
overflow: hidden;
}
.csfloat-brand-icon img,
.csfloat-brand-icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-brand-name {
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.csfloat-brand-sep {
width: 1px;
height: 14px;
background: var(--line-2);
margin: 0 4px;
}
.csfloat-brand-tagline {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
}
/* CSFloat-1:1: hero brand glow — accent shadow on logo PNG. */
.csfloat-brand-glow {
filter: drop-shadow(0 0 12px oklch(0.55 0.18 250 / 0.6))
drop-shadow(0 0 4px oklch(0.55 0.18 250 / 0.4));
}
/* CSFloat-1:1: section badge — small rectangular icon containers. */
.csfloat-section-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-3);
}
.csfloat-section-badge-dot {
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
animation: live-pulse 2400ms ease-in-out infinite;
}
/* CSFloat-1:1: section subhead — kicker between section title and content. */
.csfloat-section-sub {
font-size: 13px;
color: var(--ink-3);
margin: 6px 0 14px;
line-height: 1.55;
max-width: 640px;
}
/* CSFloat-1:1: full-width banner ad placement (reserved). */
.csfloat-ad-strip {
margin: 16px 0;
padding: 24px;
background: var(--bg-1);
border: 1px dashed var(--line-2);
border-radius: 10px;
text-align: center;
color: var(--ink-4);
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* CSFloat-1:1: small horizontal rule with text (signaling "or" between options). */
.csfloat-or-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.csfloat-or-divider::before,
.csfloat-or-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.csfloat-or-divider-text {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
/* END brand + section badge + section sub + ad strip + or divider */
/* CSFloat-1:1: hero search input — large dual-purpose input (browse + search). */
.csfloat-hero-search {
display: flex;
align-items: stretch;
gap: 0;
width: min(640px, 92vw);
margin: 16px auto 0;
background: oklch(0.18 0.008 260 / 0.7);
border: 1px solid var(--line-2);
border-radius: 999px;
overflow: hidden;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-hero-search:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.16);
}
.csfloat-hero-search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px 0 20px;
color: var(--ink-3);
font-size: 15px;
pointer-events: none;
}
.csfloat-hero-search:focus-within .csfloat-hero-search-icon {
color: var(--cta);
}
.csfloat-hero-search-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 14px 8px;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 14px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-hero-search-input::placeholder { color: var(--ink-3); }
.csfloat-hero-search-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 22px;
background: var(--cta);
border: none;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
.csfloat-hero-search-button:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: hero featured tags below search. */
.csfloat-hero-trending {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 12px auto 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
max-width: 640px;
}
.csfloat-hero-trending-label {
margin-right: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 9px;
color: var(--ink-4);
}
.csfloat-hero-trending-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-hero-trending-tag:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END hero search + trending tags */
/* CSFloat-1:1: card stack swap — used during list update animations. */
@keyframes csfloat-card-swap {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.96) rotate(-1deg); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
.csfloat-card-swap {
animation: csfloat-card-swap 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: number flip count-up animation (CSS-only). */
@keyframes csfloat-count-up {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.csfloat-count-up {
display: inline-block;
animation: csfloat-count-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: success splash — brief checkmark on action complete. */
.csfloat-success-splash {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9900;
pointer-events: none;
width: 96px;
height: 96px;
background: var(--bg-1);
border: 1px solid oklch(0.42 0.07 152 / 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: oklch(0.84 0.18 152);
font-size: 48px;
box-shadow: 0 16px 48px rgba(0,0,0,0.6),
0 0 32px oklch(0.55 0.18 152 / 0.45);
animation: csfloat-success-splash 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes csfloat-success-splash {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
40% { transform: translate(-50%, -50%) scale(1); }
80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}
/* CSFloat-1:1: notification toast queue position. */
.csfloat-toast-queue {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9500;
pointer-events: none;
max-width: 360px;
}
.csfloat-toast-queue > * {
pointer-events: auto;
}
/* CSFloat-1:1: print-only utility. */
.csfloat-print-only { display: none !important; }
@media print {
.csfloat-print-only { display: block !important; }
.csfloat-no-print { display: none !important; }
}
/* CSFloat-1:1: scroll-snap helpers. */
.csfloat-scroll-snap-x {
scroll-snap-type: x mandatory;
}
.csfloat-scroll-snap-y {
scroll-snap-type: y mandatory;
}
.csfloat-scroll-snap-item {
scroll-snap-align: start;
}
/* CSFloat-1:1: hide scrollbar utility. */
.csfloat-scrollbar-hidden {
scrollbar-width: none;
-ms-overflow-style: none;
}
.csfloat-scrollbar-hidden::-webkit-scrollbar {
display: none;
}
/* CSFloat-1:1: content-visibility hint (perf). */
.csfloat-cv-auto {
content-visibility: auto;
contain-intrinsic-size: 200px;
}
/* CSFloat-1:1: explicit will-change hints (perf for animations). */
.csfloat-will-transform { will-change: transform; }
.csfloat-will-opacity { will-change: opacity; }
.csfloat-will-auto { will-change: auto; }
/* END animation helpers + utility classes */
/* CSFloat-1:1: button shadow scale on importance. */
.csfloat-btn-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.csfloat-btn-shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.35); }
.csfloat-btn-shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.45); }
.csfloat-btn-shadow-xl { box-shadow: 0 12px 24px rgba(0,0,0,0.55); }
/* CSFloat-1:1: text-shadow scale. */
.csfloat-text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.csfloat-text-shadow-md { text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.csfloat-text-shadow-lg { text-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.csfloat-text-shadow-glow { text-shadow: 0 0 16px oklch(0.55 0.18 250 / 0.55); }
/* CSFloat-1:1: backdrop saturation/brightness helpers. */
.csfloat-backdrop-darken {
backdrop-filter: brightness(0.6);
-webkit-backdrop-filter: brightness(0.6);
}
.csfloat-backdrop-saturate {
backdrop-filter: saturate(150%);
-webkit-backdrop-filter: saturate(150%);
}
.csfloat-backdrop-blur-sm {
backdrop-filter: blur(4px) saturate(140%);
-webkit-backdrop-filter: blur(4px) saturate(140%);
}
.csfloat-backdrop-blur-lg {
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* CSFloat-1:1: filter chains for product images. */
.csfloat-img-shadow {
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.csfloat-img-shadow-lg {
filter: drop-shadow(0 16px 48px rgba(0,0,0,0.65));
}
.csfloat-img-glow {
filter: drop-shadow(0 0 16px oklch(0.55 0.18 250 / 0.45));
}
.csfloat-img-rare-glow {
filter: drop-shadow(0 0 24px oklch(0.62 0.27 330 / 0.5));
}
/* CSFloat-1:1: image saturation control. */
.csfloat-img-mute { filter: saturate(0.6) brightness(0.95); }
.csfloat-img-vivid { filter: saturate(1.3) contrast(1.05); }
.csfloat-img-grayscale { filter: grayscale(1); }
.csfloat-img-sepia { filter: sepia(0.5); }
/* CSFloat-1:1: full coverage of clickable areas. */
.csfloat-stretched-link::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: auto;
background: transparent;
}
/* CSFloat-1:1: pointer-events helpers. */
.csfloat-pe-children > * { pointer-events: auto; }
/* CSFloat-1:1: text wrap controls. */
.csfloat-text-balance { text-wrap: balance; }
.csfloat-text-pretty { text-wrap: pretty; }
.csfloat-text-nowrap { white-space: nowrap; }
.csfloat-text-pre { white-space: pre; }
.csfloat-text-pre-wrap { white-space: pre-wrap; }
.csfloat-text-break { word-break: break-word; overflow-wrap: anywhere; }
/* CSFloat-1:1: word-spacing helpers. */
.csfloat-word-tight { word-spacing: -0.05em; }
.csfloat-word-wide { word-spacing: 0.1em; }
/* END button-shadow + text-shadow + backdrop + image filters + utility */
/* CSFloat-1:1: full-page floating progress bar — for in-progress operations. */
.csfloat-page-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--bg-2);
z-index: 9990;
overflow: hidden;
}
.csfloat-page-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg,
var(--cta) 0%,
oklch(0.78 0.18 250) 100%);
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-page-progress-bar.indeterminate {
width: 30% !important;
animation: csfloat-page-progress-indeterminate 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes csfloat-page-progress-indeterminate {
from { left: -30%; }
to { left: 100%; }
}
/* CSFloat-1:1: page action toolbar — sticky toolbar at top of long pages. */
.csfloat-page-toolbar {
position: sticky;
top: 64px;
z-index: 700;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
padding: 10px 18px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.csfloat-page-toolbar-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
flex: 1 1 auto;
}
.csfloat-page-toolbar-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: empty grid w/ illustration. */
.csfloat-illustration-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
gap: 16px;
}
.csfloat-illustration-empty-art {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at center,
oklch(0.30 0.05 250 / 0.18),
transparent 70%);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 48px;
margin-bottom: 4px;
filter: drop-shadow(0 0 16px oklch(0.55 0.18 250 / 0.18));
}
.csfloat-illustration-empty-title {
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-illustration-empty-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
max-width: 360px;
line-height: 1.55;
}
.csfloat-illustration-empty-cta {
margin-top: 12px;
display: inline-flex;
gap: 8px;
}
/* END floating progress + page toolbar + empty illustration */
/* CSFloat-1:1: alert dialog (centered modal warning). */
.csfloat-alert-dialog {
width: min(92vw, 360px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-top: 4px solid oklch(0.55 0.18 30);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
text-align: center;
}
.csfloat-alert-dialog.warning {
border-top-color: oklch(0.78 0.16 80);
}
.csfloat-alert-dialog.success {
border-top-color: oklch(0.62 0.18 152);
}
.csfloat-alert-dialog.info {
border-top-color: var(--cta);
}
.csfloat-alert-dialog-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
color: oklch(0.84 0.18 30);
font-size: 22px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.csfloat-alert-dialog.warning .csfloat-alert-dialog-icon {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.84 0.16 80);
}
.csfloat-alert-dialog.success .csfloat-alert-dialog-icon {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.84 0.18 152);
}
.csfloat-alert-dialog.info .csfloat-alert-dialog-icon {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
}
.csfloat-alert-dialog-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-alert-dialog-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-alert-dialog-actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 6px;
}
/* CSFloat-1:1: contextual prompt — non-blocking inline question. */
.csfloat-prompt {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: oklch(0.20 0.02 250 / 0.4);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 8px;
margin: 12px 0;
}
.csfloat-prompt-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
background: var(--cta);
border-radius: 50%;
color: oklch(0.98 0 0);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-prompt-text {
flex: 1 1 auto;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.csfloat-prompt-text strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-prompt-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* END alert dialog + contextual prompt */
/* CSFloat-1:1: tabbed view inside cards (item modal subtabs). */
.csfloat-card-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line);
padding: 0 14px;
margin-bottom: 12px;
overflow-x: auto;
}
.csfloat-card-tabs::-webkit-scrollbar { height: 0; }
.csfloat-card-tab {
position: relative;
background: transparent;
border: none;
padding: 10px 12px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
transition: color 140ms ease;
}
.csfloat-card-tab:hover { color: var(--ink-1); }
.csfloat-card-tab.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-card-tab.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-card-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: floating menu — for mini-actions on cards. */
.csfloat-floating-menu {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
flex-direction: column;
gap: 4px;
z-index: 4;
opacity: 0;
transform: translateY(-4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-grid-card:hover .csfloat-floating-menu,
.csfloat-band-card:hover .csfloat-floating-menu,
.csfloat-hero-stack-card:hover .csfloat-floating-menu {
opacity: 1;
transform: translateY(0);
}
.csfloat-floating-menu-btn {
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.65);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: var(--ink-1);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 120ms ease, color 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-floating-menu-btn:hover {
background: oklch(0.10 0.008 260 / 0.85);
transform: scale(1.05);
}
.csfloat-floating-menu-btn.fav.active {
color: oklch(0.86 0.20 30);
background: oklch(0.30 0.04 30 / 0.45);
}
/* CSFloat-1:1: card overlay with hover details (image area). */
.csfloat-card-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 10px;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
opacity: 0;
transition: opacity 240ms ease;
pointer-events: none;
z-index: 3;
}
.csfloat-grid-card:hover .csfloat-card-overlay,
.csfloat-band-card:hover .csfloat-card-overlay,
.csfloat-hero-stack-card:hover .csfloat-card-overlay {
opacity: 1;
}
.csfloat-card-overlay-detail {
font-family: var(--mono);
font-size: 10px;
color: oklch(0.92 0 0);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
line-height: 1.4;
}
.csfloat-card-overlay-detail strong {
font-weight: 600;
color: oklch(0.98 0 0);
}
/* END card tabs + floating menu + card overlay */
/* CSFloat-1:1: rotation-only loader (cleaner than spinner). */
@keyframes csfloat-rotate {
to { transform: rotate(360deg); }
}
.csfloat-rotate-loader {
display: inline-block;
width: 16px;
height: 16px;
border: 1.5px solid var(--line-2);
border-top-color: var(--cta);
border-radius: 50%;
animation: csfloat-rotate 700ms linear infinite;
vertical-align: middle;
}
/* CSFloat-1:1: skeleton stat card. */
.csfloat-skel-stat-card {
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* CSFloat-1:1: skeleton table row. */
.csfloat-skel-table {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-skel-table-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 14px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-skel-table-row:last-child { border-bottom: none; }
/* CSFloat-1:1: utility — vertical center. */
.csfloat-stack-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* CSFloat-1:1: page padding wrapper used in modals when in full-page mode. */
.csfloat-fp-pad {
padding: 24px 24px 60px;
}
@media (max-width: 720px) {
.csfloat-fp-pad { padding: 16px 12px 40px; }
}
/* CSFloat-1:1: feedback summary card — for /support submission confirmation. */
.csfloat-feedback-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.csfloat-feedback-card-icon {
width: 56px;
height: 56px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 50%;
color: oklch(0.84 0.18 152);
font-size: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-feedback-card-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-feedback-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
max-width: 340px;
}
.csfloat-feedback-card-id {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 4px;
margin-top: 6px;
user-select: all;
}
/* END utility loader + skeleton + feedback card */
/* CSFloat-1:1: avatar with status ring (pro/staff/support indicators). */
.csfloat-avatar-ring {
position: relative;
display: inline-flex;
padding: 2px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cta), oklch(0.62 0.27 330));
}
.csfloat-avatar-ring.staff {
background: linear-gradient(135deg, oklch(0.78 0.18 30), oklch(0.78 0.16 80));
}
.csfloat-avatar-ring.verified {
background: linear-gradient(135deg, var(--cta), oklch(0.78 0.18 250));
}
.csfloat-avatar-ring.pro {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
}
.csfloat-avatar-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--bg);
display: block;
}
/* CSFloat-1:1: notification settings — granular toggle list. */
.csfloat-notif-prefs {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-notif-pref-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-notif-pref-row:last-child { border-bottom: none; }
.csfloat-notif-pref-row.header {
background: var(--bg);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-notif-pref-row .pref-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-notif-pref-row .pref-desc {
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-notif-pref-row .pref-channel {
width: 36px;
text-align: center;
}
/* CSFloat-1:1: trade timer (countdown). */
.csfloat-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-countdown-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--ink-4);
}
.csfloat-countdown-value {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-countdown.urgent .csfloat-countdown-value {
color: oklch(0.84 0.18 30);
animation: csfloat-num-flip 1000ms ease-in-out infinite;
}
.csfloat-countdown.expired .csfloat-countdown-value {
color: var(--ink-4);
text-decoration: line-through;
}
/* CSFloat-1:1: marketplace metric strip. */
.csfloat-metric-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-metric-cell {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
}
.csfloat-metric-cell:last-child { border-right: none; }
@media (max-width: 540px) {
.csfloat-metric-cell {
border-right: none;
border-bottom: 1px solid var(--line);
}
.csfloat-metric-cell:last-child { border-bottom: none; }
}
.csfloat-metric-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-metric-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.csfloat-metric-delta {
font-family: var(--mono);
font-size: 10px;
color: oklch(0.78 0.18 152);
font-variant-numeric: tabular-nums;
}
.csfloat-metric-delta.down { color: oklch(0.78 0.18 30); }
/* END avatar ring + notif prefs + countdown + metric strip */
/* CSFloat-1:1: small-screen mobile menu (slide-up sheet from bottom). */
.csfloat-bottom-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-1);
border-top: 1px solid var(--line-2);
border-radius: 16px 16px 0 0;
box-shadow: 0 -16px 40px rgba(0,0,0,0.55);
z-index: 9000;
padding: 12px 18px 24px;
display: flex;
flex-direction: column;
gap: 10px;
transform: translateY(100%);
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bottom-sheet.open { transform: translateY(0); }
.csfloat-bottom-sheet-handle {
width: 36px;
height: 4px;
background: var(--line-2);
border-radius: 2px;
margin: 0 auto 8px;
}
.csfloat-bottom-sheet-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.005em;
text-align: center;
}
.csfloat-bottom-sheet-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
font-size: 14px;
color: var(--ink-1);
text-decoration: none;
border-radius: 8px;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-bottom-sheet-item:hover {
background: var(--bg-2);
}
/* CSFloat-1:1: list item swipe actions (mobile). */
.csfloat-swipe-row {
position: relative;
overflow: hidden;
display: flex;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
}
.csfloat-swipe-row-content {
flex: 1 1 auto;
padding: 10px 12px;
background: var(--bg-1);
z-index: 1;
}
.csfloat-swipe-row-actions {
display: flex;
gap: 0;
flex: 0 0 auto;
}
.csfloat-swipe-row-action {
width: 56px;
background: var(--bg-2);
border: none;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--line);
transition: background 120ms ease, color 120ms ease;
}
.csfloat-swipe-row-action:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-swipe-row-action.danger {
color: oklch(0.84 0.18 30);
}
.csfloat-swipe-row-action.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: mobile drawer trigger button. */
.csfloat-drawer-trigger {
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-drawer-trigger:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END bottom sheet + swipe actions + drawer trigger */
/* CSFloat-1:1: filter-bar pill — looks like a chip, acts like a select. */
.csfloat-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-filter-pill:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-filter-pill.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
font-weight: 600;
}
.csfloat-filter-pill-label {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-filter-pill.active .csfloat-filter-pill-label {
color: var(--cta);
}
.csfloat-filter-pill::after {
content: "▾";
font-size: 8px;
color: var(--ink-4);
}
/* CSFloat-1:1: filter modal — opens when clicking a filter pill. */
.csfloat-filter-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 240px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
padding: 12px;
z-index: 100;
animation: notif-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-popover-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin: 0 0 8px;
}
.csfloat-filter-popover-options {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 10px;
max-height: 220px;
overflow-y: auto;
}
.csfloat-filter-popover-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--ink-2);
transition: background 100ms ease, color 100ms ease;
}
.csfloat-filter-popover-option:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-filter-popover-option-count {
margin-left: auto;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-filter-popover-actions {
display: flex;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid var(--line);
gap: 6px;
}
/* END filter pill + filter popover */
/* CSFloat-1:1: footer ribbon — small marketing text strip above main footer. */
.csfloat-footer-ribbon {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
padding: 32px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
}
.csfloat-footer-ribbon-cell {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 18px;
}
.csfloat-footer-ribbon-cell-icon {
width: 24px;
height: 24px;
color: var(--cta);
font-size: 18px;
margin-bottom: 4px;
}
.csfloat-footer-ribbon-cell-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-footer-ribbon-cell-desc {
font-size: 12px;
color: var(--ink-3);
line-height: 1.5;
max-width: 260px;
}
/* CSFloat-1:1: cookie preference selector. */
.csfloat-cookie-prefs {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-cookie-pref-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
}
.csfloat-cookie-pref-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-cookie-pref-desc {
font-size: 11px;
color: var(--ink-3);
margin: 2px 0 0;
}
.csfloat-cookie-pref-required {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
padding: 1px 6px;
background: var(--bg-2);
border-radius: 3px;
}
/* CSFloat-1:1: privacy / cookie policy section. */
.csfloat-privacy-section {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px;
margin-bottom: 12px;
}
.csfloat-privacy-section-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.csfloat-privacy-section-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 12px;
line-height: 1.6;
}
/* END footer ribbon + cookie prefs + privacy section */
/* CSFloat-1:1: about-us page sections. */
.csfloat-about-section {
margin: 48px 0;
padding: 0 20px;
}
.csfloat-about-headline {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 16px;
letter-spacing: -0.025em;
line-height: 1.15;
text-align: center;
}
.csfloat-about-lede {
font-size: clamp(15px, 1.6vw, 18px);
color: var(--ink-2);
line-height: 1.7;
max-width: 720px;
margin: 0 auto 24px;
text-align: center;
}
.csfloat-about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 32px;
}
.csfloat-about-tile {
text-align: center;
padding: 20px;
}
.csfloat-about-tile-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 12px;
}
.csfloat-about-tile-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.csfloat-about-tile-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
/* CSFloat-1:1: team grid (about / contact). */
.csfloat-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin: 24px 0;
}
.csfloat-team-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
text-align: center;
transition: border-color 240ms ease;
}
.csfloat-team-card:hover { border-color: var(--line-2); }
.csfloat-team-card-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
}
.csfloat-team-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-team-card-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-team-card-role {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* END about + team */
/* CSFloat-1:1: button "+icon hover" expansion. */
.csfloat-btn-expand {
display: inline-flex;
align-items: center;
gap: 0;
height: 36px;
padding: 0 14px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: gap 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
overflow: hidden;
white-space: nowrap;
}
.csfloat-btn-expand .label {
max-width: 0;
opacity: 0;
transition: max-width 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 140ms ease;
}
.csfloat-btn-expand:hover {
background: oklch(0.65 0.18 250);
gap: 6px;
}
.csfloat-btn-expand:hover .label {
max-width: 200px;
opacity: 1;
}
/* CSFloat-1:1: dropdown menu (chevron). */
.csfloat-chevron {
display: inline-block;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chevron.up { transform: rotate(-135deg); }
.csfloat-chevron.right { transform: rotate(-45deg); }
.csfloat-chevron.left { transform: rotate(135deg); }
.csfloat-chevron.open { transform: rotate(225deg); }
/* CSFloat-1:1: arrow icon. */
.csfloat-arrow-right {
display: inline-block;
font-family: var(--mono);
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-arrow-right::before { content: "→"; }
.csfloat-arrow-right.hover-extend {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
*:hover > .csfloat-arrow-right.hover-extend {
transform: translateX(3px);
}
/* CSFloat-1:1: keyboard shortcut overlay (the cmd+/ hint). */
.csfloat-kbd-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 24px;
width: min(92vw, 480px);
z-index: 9750;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
max-height: 80vh;
overflow-y: auto;
}
.csfloat-kbd-overlay-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 16px;
letter-spacing: -0.01em;
}
.csfloat-kbd-overlay-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
align-items: center;
font-size: 13px;
color: var(--ink-2);
}
.csfloat-kbd-overlay-row:last-child { border-bottom: none; }
.csfloat-kbd-overlay-keys {
display: inline-flex;
gap: 4px;
}
/* END expand button + chevron + arrow + kbd overlay */
/* CSFloat-1:1: error-state global styling — when a route fails to load. */
.csfloat-error-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 24px;
gap: 16px;
}
.csfloat-error-state-code {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.78 0.18 30);
padding: 4px 12px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 999px;
}
.csfloat-error-state-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
color: oklch(0.84 0.18 30);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.csfloat-error-state-title {
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-error-state-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
max-width: 480px;
line-height: 1.6;
}
.csfloat-error-state-actions {
display: inline-flex;
gap: 8px;
margin-top: 8px;
}
/* CSFloat-1:1: maintenance banner — dismissable info strip. */
.csfloat-maintenance-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: oklch(0.30 0.05 80 / 0.18);
border-bottom: 1px solid oklch(0.42 0.10 80 / 0.32);
color: oklch(0.92 0.10 80);
font-size: 12px;
text-align: center;
font-weight: 500;
position: sticky;
top: 0;
z-index: 9999;
}
.csfloat-maintenance-banner-icon {
font-size: 14px;
flex-shrink: 0;
}
.csfloat-maintenance-banner-text {
flex: 1 1 auto;
text-align: center;
}
.csfloat-maintenance-banner a {
color: oklch(0.98 0.06 80);
text-decoration: underline;
text-underline-offset: 2px;
margin-left: 4px;
}
/* CSFloat-1:1: invariant text - prevent translation. */
.csfloat-no-translate {
-webkit-translate: none;
translate: none;
}
/* CSFloat-1:1: text-overflow ellipsis utility. */
.csfloat-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
/* CSFloat-1:1: emoji text containers (defends against weird font rendering). */
.csfloat-emoji {
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
/* END error state + maintenance banner + utility text */
/* CSFloat-1:1: badge slots — for nav items with count indicators. */
.csfloat-with-badge {
position: relative;
display: inline-flex;
}
.csfloat-with-badge .csfloat-badge-num {
position: absolute;
top: -4px;
right: -4px;
min-width: 14px;
height: 14px;
padding: 0 3px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 1.5px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
pointer-events: none;
letter-spacing: -0.01em;
}
.csfloat-with-badge .csfloat-badge-num.dot {
min-width: 6px;
height: 6px;
padding: 0;
border-width: 1px;
}
.csfloat-with-badge .csfloat-badge-num.accent { background: var(--cta); }
.csfloat-with-badge .csfloat-badge-num.success { background: oklch(0.62 0.18 152); }
/* CSFloat-1:1: hr decorative — ornamental divider with center dot. */
.csfloat-hr-deco {
display: flex;
align-items: center;
margin: 24px 0;
gap: 12px;
}
.csfloat-hr-deco::before,
.csfloat-hr-deco::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line) 30%,
var(--line) 70%,
transparent 100%);
}
.csfloat-hr-deco-dot {
width: 5px;
height: 5px;
background: var(--cta);
border-radius: 50%;
flex-shrink: 0;
}
/* CSFloat-1:1: chip with avatar inside (e.g. "Buyer: dummy123"). */
.csfloat-avatar-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px 2px 2px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
max-width: 200px;
}
.csfloat-avatar-chip-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-avatar-chip-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-avatar-chip-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* CSFloat-1:1: meter / progress / threshold visualization. */
.csfloat-meter {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-meter-label {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-meter-track {
position: relative;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-meter-fill {
height: 100%;
background: var(--cta);
border-radius: 3px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-meter-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-meter-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-meter-fill.danger { background: oklch(0.62 0.18 30); }
/* END badge slots + hr decorative + avatar chip + meter */
/* CSFloat-1:1: time-grouped section list (e.g. "Today", "Yesterday", "Older"). */
.csfloat-time-section {
margin-bottom: 18px;
}
.csfloat-time-section-header {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--line);
}
/* CSFloat-1:1: relative time tag — "2h ago" with hover full-time tooltip. */
.csfloat-time-tag {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
cursor: help;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: avatar w/ trade history badge. */
.csfloat-trader-avatar {
position: relative;
display: inline-flex;
}
.csfloat-trader-avatar-img {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
}
.csfloat-trader-avatar-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-trader-avatar-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: oklch(0.84 0.18 152);
font-weight: 700;
}
.csfloat-trader-avatar-badge.verified {
background: var(--cta);
color: oklch(0.98 0 0);
}
/* CSFloat-1:1: minimum-distance click-target wrapper. */
.csfloat-tap-target {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 8px;
cursor: pointer;
}
/* CSFloat-1:1: chip stack — multiple chips inline. */
.csfloat-chip-stack {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* CSFloat-1:1: tag color variants. */
.csfloat-tag-color-1 { color: oklch(0.82 0.18 130); background: oklch(0.30 0.04 130 / 0.18); border-color: oklch(0.42 0.07 130 / 0.36); }
.csfloat-tag-color-2 { color: oklch(0.82 0.18 200); background: oklch(0.30 0.04 200 / 0.18); border-color: oklch(0.42 0.07 200 / 0.36); }
.csfloat-tag-color-3 { color: oklch(0.82 0.18 310); background: oklch(0.30 0.04 310 / 0.18); border-color: oklch(0.42 0.07 310 / 0.36); }
/* CSFloat-1:1: collapsible accordion details. */
.csfloat-details {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
margin-bottom: 4px;
}
.csfloat-details summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: transparent;
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
list-style: none;
transition: background 120ms ease;
}
.csfloat-details summary::-webkit-details-marker { display: none; }
.csfloat-details summary:hover { background: var(--bg-2); }
.csfloat-details summary::after {
content: "+";
font-family: var(--mono);
font-size: 15px;
color: var(--ink-3);
margin-left: 12px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-details[open] summary::after {
transform: rotate(45deg);
color: var(--ink-1);
}
.csfloat-details-body {
padding: 0 14px 14px;
font-size: 12px;
color: var(--ink-3);
line-height: 1.6;
}
/* END time-section + time-tag + trader-avatar + tap-target + chip-stack + details */
/* CSFloat-1:1: data-state aware row highlighting. */
.csfloat-row[data-state="hover"],
.csfloat-row:hover {
background: var(--bg-2);
}
.csfloat-row[data-state="selected"],
.csfloat-row[aria-selected="true"] {
background: oklch(0.20 0.02 250 / 0.4);
border-left: 3px solid var(--cta);
}
.csfloat-row[data-state="disabled"],
.csfloat-row[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
/* CSFloat-1:1: stat ranges (trade-up calculator strips). */
.csfloat-range-bar {
position: relative;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-range-bar-fill {
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
border-radius: 3px;
}
.csfloat-range-bar-marker {
position: absolute;
top: 50%;
width: 2px;
height: 12px;
background: oklch(0.98 0 0);
border-radius: 1px;
transform: translate(-50%, -50%);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: visual price-history mini graph. */
.csfloat-mini-graph {
display: inline-block;
width: 80px;
height: 24px;
vertical-align: middle;
}
/* CSFloat-1:1: large display amount (used in stripe checkout banner). */
.csfloat-big-amount {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin: 8px 0;
}
.csfloat-big-amount-currency {
font-family: var(--mono);
font-size: 14px;
color: var(--ink-3);
font-weight: 600;
}
.csfloat-big-amount-num {
font-family: var(--mono);
font-size: clamp(40px, 6vw, 56px);
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-big-amount-period {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
}
/* CSFloat-1:1: spinner button — used while waiting for action. */
.csfloat-spinner-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 8px;
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
cursor: not-allowed;
pointer-events: none;
}
/* CSFloat-1:1: inline tag suggestion. */
.csfloat-tag-suggestion {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px dashed var(--line);
border-radius: 999px;
font-size: 11px;
color: var(--ink-3);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.csfloat-tag-suggestion:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-tag-suggestion::before {
content: "+";
font-size: 11px;
color: var(--ink-4);
}
/* END row state + range bar + mini graph + big amount + spinner btn + tag suggestion */
/* CSFloat-1:1: row group divider — for table-like data lists. */
.csfloat-row-group {
margin-bottom: 10px;
}
.csfloat-row-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
border-bottom: 1px dashed var(--line);
margin-bottom: 6px;
}
.csfloat-row-group-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: dimmed text utility — for de-emphasized inline text. */
.csfloat-text-faint { color: var(--ink-4); }
.csfloat-text-soft { color: var(--ink-3); }
.csfloat-text-base { color: var(--ink-2); }
.csfloat-text-bright { color: var(--ink-1); }
.csfloat-text-accent { color: var(--cta); }
.csfloat-text-success { color: oklch(0.84 0.18 152); }
.csfloat-text-danger { color: oklch(0.84 0.18 30); }
.csfloat-text-warning { color: oklch(0.84 0.16 80); }
/* CSFloat-1:1: bg utility variants. */
.csfloat-bg-success { background: oklch(0.30 0.04 152 / 0.18); }
.csfloat-bg-danger { background: oklch(0.30 0.04 30 / 0.18); }
.csfloat-bg-warning { background: oklch(0.30 0.05 80 / 0.18); }
.csfloat-bg-accent { background: oklch(0.30 0.05 250 / 0.18); }
/* CSFloat-1:1: border utility variants. */
.csfloat-border-success { border-color: oklch(0.42 0.07 152 / 0.36); }
.csfloat-border-danger { border-color: oklch(0.42 0.07 30 / 0.36); }
.csfloat-border-warning { border-color: oklch(0.42 0.10 80 / 0.36); }
.csfloat-border-accent { border-color: oklch(0.42 0.10 250 / 0.36); }
/* CSFloat-1:1: layered card with depth on focus. */
.csfloat-card-layered {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
position: relative;
}
.csfloat-card-layered::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 16px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250 / 0.08),
transparent);
z-index: -1;
opacity: 0;
transition: opacity 280ms ease;
}
.csfloat-card-layered:focus-within::before {
opacity: 1;
}
/* CSFloat-1:1: micro hover effect — for inline interactive elements. */
.csfloat-tap {
cursor: pointer;
transition: opacity 120ms ease;
}
.csfloat-tap:hover { opacity: 0.85; }
.csfloat-tap:active { opacity: 0.65; }
/* CSFloat-1:1: simple flex group helper. */
.csfloat-grouping {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: helper for nested content padding. */
.csfloat-nested {
padding-left: 16px;
border-left: 1px solid var(--line);
}
/* END row group + utility text/bg/border + card layered + tap helper + nested */
/* CSFloat-1:1: spacer utility. */
.csfloat-spacer-2 { height: 2px; }
.csfloat-spacer-4 { height: 4px; }
.csfloat-spacer-6 { height: 6px; }
.csfloat-spacer-8 { height: 8px; }
.csfloat-spacer-10 { height: 10px; }
.csfloat-spacer-12 { height: 12px; }
.csfloat-spacer-14 { height: 14px; }
.csfloat-spacer-16 { height: 16px; }
.csfloat-spacer-20 { height: 20px; }
.csfloat-spacer-24 { height: 24px; }
.csfloat-spacer-32 { height: 32px; }
.csfloat-spacer-flex { flex: 1 1 auto; }
/* CSFloat-1:1: white-space utility. */
.csfloat-whitespace-pre-line { white-space: pre-line; }
.csfloat-whitespace-pre-wrap { white-space: pre-wrap; }
.csfloat-whitespace-nowrap { white-space: nowrap; }
/* CSFloat-1:1: word-break utility. */
.csfloat-word-break { word-break: break-word; }
.csfloat-overflow-wrap { overflow-wrap: anywhere; }
/* CSFloat-1:1: filter for image blur (placeholder). */
.csfloat-blur-placeholder {
filter: blur(8px);
transform: scale(1.04);
transition: filter 320ms ease, transform 320ms ease;
}
.csfloat-blur-placeholder.loaded {
filter: blur(0);
transform: scale(1);
}
/* CSFloat-1:1: ghost text — for subtle hint text. */
.csfloat-ghost-text {
color: var(--ink-4);
font-style: italic;
font-size: 12px;
}
/* CSFloat-1:1: stale data indicator. */
.csfloat-stale {
position: relative;
opacity: 0.7;
filter: saturate(0.7);
transition: opacity 240ms ease, filter 240ms ease;
}
.csfloat-stale::after {
content: "STALE";
position: absolute;
top: 4px;
right: 4px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1px 5px;
background: oklch(0.40 0.014 260);
color: var(--ink-2);
border-radius: 3px;
}
/* CSFloat-1:1: quiet inline help icon. */
.csfloat-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-3);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
cursor: help;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
vertical-align: middle;
margin-left: 4px;
}
.csfloat-help-icon::before { content: "?"; }
.csfloat-help-icon:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: page subtitle below h1 (with separator). */
.csfloat-subhead {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
letter-spacing: -0.005em;
}
.csfloat-subhead-sep {
width: 1px;
height: 12px;
background: var(--line);
}
/* END spacer + whitespace + word-break + ghost + stale + help-icon + subhead */
/* CSFloat-1:1: outline button (Tailwind-like). */
.csfloat-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 14px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 8px;
color: var(--ink-1);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.csfloat-btn-outline:hover {
background: var(--bg-2);
border-color: var(--cta);
color: var(--cta);
}
/* CSFloat-1:1: gradient button. */
.csfloat-btn-gradient {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 18px;
background: linear-gradient(135deg, var(--cta), oklch(0.78 0.18 250));
border: 1px solid oklch(0.50 0.18 250 / 0.6);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
box-shadow: 0 4px 12px oklch(0.55 0.18 250 / 0.32);
}
.csfloat-btn-gradient:hover {
box-shadow: 0 6px 16px oklch(0.55 0.18 250 / 0.4);
filter: brightness(1.06);
}
.csfloat-btn-gradient:active {
transform: translateY(1px);
}
/* CSFloat-1:1: glassmorphism button. */
.csfloat-btn-glass {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 18px;
background: oklch(0.20 0.008 260 / 0.6);
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--ink-1);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-btn-glass:hover {
background: oklch(0.24 0.010 260 / 0.7);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: tag input — for adding multiple tags. */
.csfloat-tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
min-height: 38px;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-tag-input:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-tag-input-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--cta);
}
.csfloat-tag-input-pill-x {
background: transparent;
border: none;
color: var(--cta);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0 2px;
opacity: 0.7;
transition: opacity 120ms ease;
}
.csfloat-tag-input-pill-x:hover { opacity: 1; }
.csfloat-tag-input-input {
flex: 1 1 60px;
border: none;
background: transparent;
outline: none;
font-size: 12px;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
min-width: 60px;
}
/* END outline + gradient + glass buttons + tag input */
/* CSFloat-1:1: feature comparison table — for /pricing comparison view. */
.csfloat-compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
.csfloat-compare-table thead th {
padding: 16px;
text-align: center;
background: var(--bg);
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-compare-table thead th.feature-col {
text-align: left;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-compare-table thead th.popular {
background: oklch(0.20 0.02 250 / 0.4);
border-bottom-color: var(--cta);
}
.csfloat-compare-table thead th.popular .popular-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
padding: 2px 6px;
background: oklch(0.30 0.05 250 / 0.32);
border-radius: 3px;
margin-bottom: 6px;
}
.csfloat-compare-table thead th:last-child { border-right: none; }
.csfloat-compare-table tbody tr {
border-bottom: 1px solid var(--line);
}
.csfloat-compare-table tbody tr:last-child { border-bottom: none; }
.csfloat-compare-table tbody tr:nth-child(even) {
background: oklch(0.18 0.008 260 / 0.4);
}
.csfloat-compare-table td {
padding: 12px 16px;
text-align: center;
border-right: 1px solid var(--line);
font-size: 13px;
color: var(--ink-2);
vertical-align: middle;
}
.csfloat-compare-table td:last-child { border-right: none; }
.csfloat-compare-table td.feature-name {
text-align: left;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-compare-table td.popular {
background: oklch(0.20 0.02 250 / 0.4);
}
.csfloat-compare-table td .csfloat-tier-yes {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.csfloat-compare-table td .csfloat-tier-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--ink-4);
font-size: 14px;
}
/* CSFloat-1:1: callout banner — large brand banner for promo. */
.csfloat-callout-banner {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
padding: 24px 28px;
background: linear-gradient(135deg, oklch(0.30 0.05 250 / 0.32), oklch(0.20 0.02 250 / 0.4));
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 14px;
margin: 16px 0 24px;
align-items: center;
position: relative;
overflow: hidden;
}
.csfloat-callout-banner::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 110% 50%,
oklch(0.55 0.18 250 / 0.18),
transparent 50%);
pointer-events: none;
}
.csfloat-callout-banner-content {
position: relative;
z-index: 1;
}
.csfloat-callout-banner-title {
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.015em;
}
.csfloat-callout-banner-desc {
font-size: 13px;
color: var(--ink-2);
margin: 0;
line-height: 1.55;
}
.csfloat-callout-banner-cta {
position: relative;
z-index: 1;
flex-shrink: 0;
}
@media (max-width: 540px) {
.csfloat-callout-banner {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* END comparison table + callout banner */
/* CSFloat-1:1: scroll-margin for anchor jumps below sticky nav. */
:where(h1, h2, h3, h4, h5, h6, .csfloat-anchor) {
scroll-margin-top: 80px;
}
/* CSFloat-1:1: prevent input zoom on iOS. */
@supports (-webkit-touch-callout: none) {
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"] {
font-size: 15px;
}
}
/* CSFloat-1:1: page top anchor target highlight. */
:target {
scroll-margin-top: 80px;
animation: csfloat-target-flash 1600ms ease-out;
}
@keyframes csfloat-target-flash {
0% { background-color: oklch(0.30 0.05 250 / 0.32); }
100% { background-color: transparent; }
}
/* CSFloat-1:1: SVG icon container with auto-size. */
.csfloat-svg {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
}
.csfloat-svg.lg { width: 1.25em; height: 1.25em; }
.csfloat-svg.xl { width: 1.5em; height: 1.5em; }
.csfloat-svg.xxl { width: 2em; height: 2em; }
/* CSFloat-1:1: nav search box inline w/ button. */
.csfloat-search-bar {
display: flex;
align-items: stretch;
height: 36px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
width: 100%;
}
.csfloat-search-bar:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-search-bar-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 0 12px;
color: var(--ink-1);
font-size: 13px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-search-bar-input::placeholder { color: var(--ink-3); }
.csfloat-search-bar-button {
border: none;
background: var(--bg-2);
border-left: 1px solid var(--line);
padding: 0 14px;
color: var(--ink-2);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-search-bar-button:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* CSFloat-1:1: chip with arrow → label group (e.g. "From → To"). */
.csfloat-arrow-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
}
.csfloat-arrow-chip-arrow {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-arrow-chip-from,
.csfloat-arrow-chip-to {
font-weight: 500;
}
/* END scroll-margin + iOS input zoom prevent + target flash + SVG icons + search bar + arrow chip */
/* CSFloat-1:1: percentage badge inline (e.g. "+12.5%"). */
.csfloat-pct {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
border-radius: 3px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-pct.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-pct.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-pct.flat {
color: var(--ink-3);
background: var(--bg-2);
}
.csfloat-pct.up::before { content: "▲"; font-size: 8px; opacity: 0.85; }
.csfloat-pct.down::before { content: "▼"; font-size: 8px; opacity: 0.85; }
.csfloat-pct.flat::before { content: "—"; font-size: 8px; opacity: 0.6; }
/* CSFloat-1:1: time-relative pill (sm). */
.csfloat-time-pill {
display: inline-flex;
align-items: center;
padding: 1px 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-time-pill.live {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-time-pill.live::before {
content: "";
width: 5px;
height: 5px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
margin-right: 4px;
animation: live-pulse 1600ms ease-in-out infinite;
}
/* CSFloat-1:1: rounded image background container. */
.csfloat-img-tile {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-img-tile img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.csfloat-img-tile.cover img {
object-fit: cover;
padding: 0;
}
/* CSFloat-1:1: text wrap-balance for stat strings. */
.csfloat-stat-balance {
text-wrap: balance;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: input append slot (eg. .com / 0.0123). */
.csfloat-input-append {
display: inline-flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-input-append:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input-append input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 8px 10px;
color: var(--ink-1);
font-size: 13px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-input-append-suffix {
padding: 8px 12px;
background: var(--bg-2);
border-left: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 12px;
display: inline-flex;
align-items: center;
}
/* END pct + time pill + img tile + stat balance + input append */
/* CSFloat-1:1: collapse / expand button. */
.csfloat-collapse-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 11px;
font-weight: 500;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-collapse-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-collapse-btn::after {
content: "▾";
font-size: 9px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collapse-btn.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: collapsed content panel. */
.csfloat-collapse-panel {
overflow: hidden;
max-height: 0;
transition: max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collapse-panel.open {
max-height: 1000px;
}
/* CSFloat-1:1: stat with sparkline beside it. */
.csfloat-stat-with-spark {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-stat-with-spark-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-spark-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-stat-with-spark-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.csfloat-stat-with-spark-spark {
flex: 0 0 auto;
width: 60px;
height: 24px;
}
/* CSFloat-1:1: kpi + change combined chip. */
.csfloat-kpi-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-kpi-chip-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-kpi-chip-value {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-kpi-chip-change {
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-kpi-chip-change.up { color: oklch(0.78 0.18 152); }
.csfloat-kpi-chip-change.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: page hero meta strip. */
.csfloat-page-meta-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-page-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-page-meta-item strong {
color: var(--ink-1);
font-weight: 600;
}
/* END collapse + stat-with-spark + kpi chip + page meta strip */
/* CSFloat-1:1: news / blog / feed entry. */
.csfloat-feed-entry {
display: grid;
grid-template-columns: 200px 1fr;
gap: 18px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 12px;
transition: border-color 240ms ease, background 240ms ease;
text-decoration: none;
}
@media (max-width: 720px) {
.csfloat-feed-entry { grid-template-columns: 1fr; }
}
.csfloat-feed-entry:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-feed-entry-img {
aspect-ratio: 16 / 9;
background: var(--bg-2);
border-radius: 8px;
overflow: hidden;
}
.csfloat-feed-entry-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feed-entry:hover .csfloat-feed-entry-img img {
transform: scale(1.04);
}
.csfloat-feed-entry-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.csfloat-feed-entry-tag {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
width: fit-content;
}
.csfloat-feed-entry-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.csfloat-feed-entry-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-feed-entry-meta {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
padding-top: 8px;
}
.csfloat-feed-entry-meta-author {
font-weight: 500;
color: var(--ink-2);
}
.csfloat-feed-entry-meta-time {
letter-spacing: -0.005em;
}
/* CSFloat-1:1: trending wallet of items (tape style). */
.csfloat-trending-tape {
display: flex;
align-items: stretch;
gap: 6px;
padding: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-bottom: 12px;
}
.csfloat-trending-tape::-webkit-scrollbar { height: 4px; }
.csfloat-trending-tape::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-trending-tape-item {
flex-shrink: 0;
scroll-snap-align: start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-trending-tape-item:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: oklch(0.42 0.014 260);
}
.csfloat-trending-tape-item-name {
font-weight: 500;
}
.csfloat-trending-tape-item-change.up { color: oklch(0.78 0.18 152); font-weight: 600; }
.csfloat-trending-tape-item-change.down { color: oklch(0.78 0.18 30); font-weight: 600; }
/* END feed entry + trending tape */
/* CSFloat-1:1: section description + intro line. */
.csfloat-section-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 16px;
line-height: 1.6;
max-width: 720px;
}
/* CSFloat-1:1: pillbox header tabs (rounded chip variant). */
.csfloat-pill-tabs {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
}
.csfloat-pill-tab {
background: transparent;
border: none;
padding: 6px 16px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
transition: background 140ms ease, color 140ms ease;
white-space: nowrap;
}
.csfloat-pill-tab:hover { color: var(--ink-1); }
.csfloat-pill-tab.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* CSFloat-1:1: dual-button (split-action button). */
.csfloat-split-button {
display: inline-flex;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-split-button-main {
background: transparent;
border: none;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
cursor: pointer;
transition: background 120ms ease;
}
.csfloat-split-button-main:hover { background: var(--bg-2); }
.csfloat-split-button-divider {
width: 1px;
background: var(--line);
}
.csfloat-split-button-caret {
background: transparent;
border: none;
padding: 0 8px;
font-size: 10px;
color: var(--ink-3);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-split-button-caret:hover {
background: var(--bg-2);
color: var(--ink-1);
}
/* CSFloat-1:1: tag-list horizontal (wrap-friendly). */
.csfloat-taglist-h {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
}
/* CSFloat-1:1: navbar item with badge. */
.csfloat-nav-item-with-badge {
position: relative;
display: inline-flex;
}
.csfloat-nav-item-with-badge::after {
content: attr(data-count);
position: absolute;
top: 4px;
right: 4px;
min-width: 14px;
height: 14px;
padding: 0 3px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 2px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.csfloat-nav-item-with-badge[data-count="0"]::after,
.csfloat-nav-item-with-badge:not([data-count])::after { display: none; }
/* END section desc + pill tabs + split button + taglist + nav item with badge */
/* CSFloat-1:1: page intro grid (text + sparkline + actions in one row). */
.csfloat-page-intro {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
padding: 24px 0 16px;
border-bottom: 1px solid var(--line);
margin-bottom: 20px;
}
@media (max-width: 720px) {
.csfloat-page-intro {
grid-template-columns: 1fr;
gap: 12px;
}
}
.csfloat-page-intro-text {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-page-intro-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: success-state inline (when an action succeeded, brief). */
.csfloat-inline-success {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: oklch(0.84 0.18 152);
animation: csfloat-pop-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-inline-success::before {
content: "✓";
font-weight: 700;
}
/* CSFloat-1:1: error-state inline. */
.csfloat-inline-error {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: oklch(0.84 0.18 30);
animation: csfloat-pop-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-inline-error::before {
content: "!";
font-weight: 700;
}
/* CSFloat-1:1: info-state inline. */
.csfloat-inline-info {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: var(--cta);
}
.csfloat-inline-info::before {
content: "i";
font-weight: 700;
font-style: italic;
}
/* CSFloat-1:1: image overlay top action (e.g. fav button). */
.csfloat-img-action {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.65);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: oklch(0.92 0 0);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 140ms ease, color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-action:hover {
background: oklch(0.10 0.008 260 / 0.85);
transform: scale(1.06);
}
.csfloat-img-action.fav.active {
color: oklch(0.86 0.20 30);
background: oklch(0.30 0.04 30 / 0.45);
border-color: oklch(0.55 0.18 30 / 0.4);
}
/* END page intro + inline success/error/info + img action */
/* CSFloat-1:1: row meta strip (under list rows). */
.csfloat-row-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 2px;
}
.csfloat-row-meta-divider {
width: 1px;
height: 9px;
background: var(--line);
display: inline-block;
}
/* CSFloat-1:1: tabular metric table (alternating bg, mono cells). */
.csfloat-metric-table {
width: 100%;
border-collapse: collapse;
font-family: var(--mono);
font-size: 12px;
}
.csfloat-metric-table th {
text-align: left;
padding: 8px 12px;
background: var(--bg);
border-bottom: 1px solid var(--line);
color: var(--ink-3);
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.06em;
}
.csfloat-metric-table th.right { text-align: right; }
.csfloat-metric-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-metric-table td.bright { color: var(--ink-1); font-weight: 600; }
.csfloat-metric-table td.right { text-align: right; }
.csfloat-metric-table tr:nth-child(even) td {
background: oklch(0.18 0.008 260 / 0.4);
}
.csfloat-metric-table tr:hover td { background: var(--bg-2); }
/* CSFloat-1:1: total row (bold + extra padding). */
.csfloat-metric-table tr.total td {
font-weight: 700;
color: var(--ink-1);
font-size: 14px;
padding: 12px;
border-top: 2px solid var(--line);
background: var(--bg);
}
/* CSFloat-1:1: layout flex utility — for page top wrappers. */
.csfloat-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.csfloat-flex-around {
display: flex;
align-items: center;
justify-content: space-around;
gap: 16px;
flex-wrap: wrap;
}
/* CSFloat-1:1: rounded badge with letter (initials avatar fallback). */
.csfloat-letter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 50%;
color: oklch(0.92 0.10 250);
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
flex-shrink: 0;
}
.csfloat-letter-badge.sm { width: 24px; height: 24px; font-size: 10px; }
.csfloat-letter-badge.lg { width: 48px; height: 48px; font-size: 18px; }
.csfloat-letter-badge.xl { width: 64px; height: 64px; font-size: 22px; }
.csfloat-letter-badge.gray {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--ink-2);
}
.csfloat-letter-badge.gold {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.92 0.10 80);
}
/* END row meta + metric table + flex helpers + letter badge */
/* CSFloat-1:1: hold notice — for trade-hold info on item page. */
.csfloat-hold-notice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 8px;
margin: 10px 0;
}
.csfloat-hold-notice-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.84 0.16 80);
font-size: 13px;
font-weight: 700;
margin-top: 1px;
}
.csfloat-hold-notice-body {
flex: 1 1 auto;
font-size: 12px;
color: oklch(0.92 0.10 80);
line-height: 1.5;
}
.csfloat-hold-notice-body strong {
font-weight: 600;
color: oklch(0.96 0.06 80);
}
.csfloat-hold-notice-time {
font-family: var(--mono);
font-size: 11px;
color: oklch(0.92 0.10 80);
margin-left: auto;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
/* CSFloat-1:1: list-item count chip (right side of section title). */
.csfloat-list-count {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
margin-left: 6px;
vertical-align: middle;
}
/* CSFloat-1:1: tag with icon prefix. */
.csfloat-icon-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-icon-tag-icon {
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: card grid wrapper with extra spacing. */
.csfloat-card-grid-wide {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 16px;
}
.csfloat-card-grid-wide.gap-tight { gap: 10px; }
.csfloat-card-grid-wide.gap-loose { gap: 24px; }
@media (max-width: 540px) {
.csfloat-card-grid-wide {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* CSFloat-1:1: clickable wrapper around an entire row. */
.csfloat-row-link {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-row-link:hover {
background: var(--bg-2);
}
/* END hold notice + list count + icon tag + card-grid-wide + row link */
/* CSFloat-1:1: micro-interaction — small ripple animation on tap. */
@keyframes csfloat-tap-ripple {
to {
transform: scale(2);
opacity: 0;
}
}
.csfloat-tap-effect::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.18);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.csfloat-tap-effect:active::after {
animation: csfloat-tap-ripple 400ms ease-out;
}
.csfloat-tap-effect {
position: relative;
overflow: hidden;
}
/* CSFloat-1:1: subtle gradient border overlay on focus. */
.csfloat-focus-glow:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--bg),
0 0 0 3px oklch(0.55 0.18 250 / 0.5);
}
/* CSFloat-1:1: nav profile chip dropdown caret. */
.csfloat-profile-caret {
font-size: 9px;
color: var(--ink-3);
margin-left: 2px;
transition: transform 200ms ease;
}
.csfloat-profile-caret.open {
transform: rotate(180deg);
}
/* CSFloat-1:1: app shell — main grid wrapping nav, body, footer. */
.csfloat-app-shell {
display: grid;
grid-template-rows: auto auto auto 1fr auto;
min-height: 100vh;
}
/* CSFloat-1:1: app body wrapper — main content area. */
.csfloat-app-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
/* CSFloat-1:1: app section spacing on phone. */
@media (max-width: 540px) {
.csfloat-app-body { padding: 0 10px; }
}
/* CSFloat-1:1: container max-width for content. */
.csfloat-container {
width: 100%;
max-width: 2100px;
margin: 0 auto;
padding: 0 18px;
}
.csfloat-container.narrow {
max-width: 920px;
}
.csfloat-container.medium {
max-width: 1280px;
}
.csfloat-container.wide {
max-width: 1680px;
}
@media (max-width: 720px) {
.csfloat-container { padding: 0 12px; }
}
/* CSFloat-1:1: row separator dot. */
.csfloat-bullet-sep {
display: inline-block;
margin: 0 6px;
color: var(--ink-4);
font-size: 8px;
vertical-align: middle;
}
.csfloat-bullet-sep::before { content: "•"; }
/* CSFloat-1:1: chip with delete button (filter applied). */
.csfloat-applied-filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--cta);
}
.csfloat-applied-filter-x {
background: transparent;
border: none;
color: var(--cta);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0 2px;
opacity: 0.7;
transition: opacity 120ms ease;
}
.csfloat-applied-filter-x:hover {
opacity: 1;
}
/* END tap effect + focus glow + profile caret + app shell + container + bullet sep + applied filter */
/* CSFloat-1:1: hint banner — for first-time / contextual help. */
.csfloat-hint-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: oklch(0.30 0.05 80 / 0.12);
border: 1px solid oklch(0.42 0.10 80 / 0.32);
border-radius: 8px;
font-size: 12px;
color: oklch(0.92 0.10 80);
margin: 8px 0;
position: relative;
}
.csfloat-hint-banner-icon {
flex: 0 0 auto;
font-size: 14px;
color: oklch(0.84 0.16 80);
}
.csfloat-hint-banner-text {
flex: 1 1 auto;
line-height: 1.5;
letter-spacing: -0.005em;
}
.csfloat-hint-banner-close {
flex: 0 0 auto;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 13px;
line-height: 1;
padding: 4px;
cursor: pointer;
border-radius: 3px;
transition: color 120ms ease;
}
.csfloat-hint-banner-close:hover { color: var(--ink-1); }
/* CSFloat-1:1: data-table sticky header. */
.csfloat-table-sticky thead {
position: sticky;
top: 56px;
z-index: 10;
background: var(--bg);
}
/* CSFloat-1:1: data-table cell highlight on hover (column-aware). */
.csfloat-table-row:hover td {
background: var(--bg-2);
}
/* CSFloat-1:1: tab row inside dialog. */
.csfloat-dialog-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line);
background: var(--bg);
padding: 0 18px;
margin: 0 -18px;
}
.csfloat-dialog-tabs-tab {
position: relative;
padding: 10px 16px;
background: transparent;
border: none;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
transition: color 140ms ease;
}
.csfloat-dialog-tabs-tab:hover { color: var(--ink-1); }
.csfloat-dialog-tabs-tab.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-dialog-tabs-tab.active::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
/* CSFloat-1:1: notification dropdown row time. */
.csfloat-time-dim {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* CSFloat-1:1: empty inbox illustration. */
.csfloat-inbox-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 20px;
gap: 12px;
}
.csfloat-inbox-empty-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 22px;
}
.csfloat-inbox-empty-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-inbox-empty-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
max-width: 280px;
line-height: 1.5;
}
/* END hint banner + sticky table header + dialog tabs + dim time + empty inbox */
/* CSFloat-1:1: hover preview popover for trader names. */
.csfloat-trader-name {
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: var(--ink-4);
text-underline-offset: 2px;
transition: color 120ms ease, text-decoration-color 120ms ease;
}
.csfloat-trader-name:hover {
color: var(--cta);
text-decoration-color: var(--cta);
}
/* CSFloat-1:1: tag with delete cross. */
.csfloat-tag-x {
margin-left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: oklch(0.10 0.008 260 / 0.45);
color: oklch(0.92 0 0);
font-size: 9px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
transition: background 120ms ease;
}
.csfloat-tag-x:hover {
background: oklch(0.55 0.18 30);
}
/* CSFloat-1:1: subtle background pattern (premium feel). */
.csfloat-bg-pattern-grid {
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 32px 32px;
background-position: 0 0;
}
.csfloat-bg-pattern-dots {
background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 16px 16px;
background-position: 0 0;
}
/* CSFloat-1:1: bring-your-own font hosting fallback. */
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: local("Geist"), local("Inter");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: local("Geist Mono"), local("JetBrains Mono"), local("ui-monospace");
}
/* CSFloat-1:1: line-numbered code block. */
.csfloat-code-block {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 14px 14px 50px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
line-height: 1.6;
position: relative;
overflow-x: auto;
counter-reset: line;
}
.csfloat-code-block-line {
display: block;
counter-increment: line;
position: relative;
}
.csfloat-code-block-line::before {
content: counter(line);
position: absolute;
left: -36px;
width: 28px;
text-align: right;
color: var(--ink-4);
font-size: 10px;
}
/* CSFloat-1:1: terminal box (used in changelog code-snippet examples). */
.csfloat-terminal {
background: oklch(0.10 0.008 260);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0;
font-family: var(--mono);
font-size: 12px;
color: oklch(0.84 0.02 130);
overflow: hidden;
}
.csfloat-terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: oklch(0.14 0.008 260);
border-bottom: 1px solid var(--line);
}
.csfloat-terminal-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.csfloat-terminal-dot.r { background: oklch(0.60 0.18 30); }
.csfloat-terminal-dot.y { background: oklch(0.78 0.16 80); }
.csfloat-terminal-dot.g { background: oklch(0.62 0.18 152); }
.csfloat-terminal-title {
font-size: 10px;
color: var(--ink-4);
margin-left: 6px;
}
.csfloat-terminal-body {
padding: 14px;
line-height: 1.6;
}
.csfloat-terminal-prompt {
color: oklch(0.62 0.18 152);
margin-right: 6px;
}
/* END trader name hover + tag x + bg patterns + font fallback + code block + terminal */
/* CSFloat-1:1: dialog scroll-shadow indicator. */
.csfloat-dialog-body.scrolled-top {
box-shadow: inset 0 6px 8px -6px rgba(0,0,0,0.4);
}
.csfloat-dialog-body.scrolled-bottom {
box-shadow: inset 0 -6px 8px -6px rgba(0,0,0,0.4);
}
/* CSFloat-1:1: order summary line item w/ image. */
.csfloat-order-line-img-wrap {
display: flex;
align-items: center;
gap: 10px;
}
/* CSFloat-1:1: cumulative stat row in admin/dashboard. */
.csfloat-stat-cumul {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
}
.csfloat-stat-cumul-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-cumul-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-cumul-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-stat-cumul-val {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-stat-cumul-spark {
width: 60px;
height: 18px;
}
/* CSFloat-1:1: row click target — large invisible click area. */
.csfloat-row-click-target {
position: absolute;
inset: 0;
cursor: pointer;
z-index: 1;
}
/* CSFloat-1:1: subtle tile background. */
.csfloat-tile-bg {
background:
radial-gradient(120% 80% at 20% 0%,
oklch(0.30 0.05 250 / 0.08),
transparent 60%),
var(--bg-1);
}
/* CSFloat-1:1: hint text overlay on cards. */
.csfloat-card-hint {
position: absolute;
bottom: 8px;
left: 8px;
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.6);
background: oklch(0.10 0.008 260 / 0.55);
padding: 2px 6px;
border-radius: 3px;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* CSFloat-1:1: gallery thumb strip horizontal. */
.csfloat-thumb-strip {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 6px 0;
scroll-snap-type: x mandatory;
}
.csfloat-thumb-strip::-webkit-scrollbar { height: 4px; }
.csfloat-thumb-strip::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-thumb-strip-thumb {
flex-shrink: 0;
scroll-snap-align: start;
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
cursor: pointer;
transition: border-color 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-thumb-strip-thumb:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-thumb-strip-thumb.active {
border-color: var(--cta);
box-shadow: 0 0 0 1px var(--cta);
}
.csfloat-thumb-strip-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* END dialog scroll shadow + order line + stat cumul + click target + tile bg + card hint + thumb strip */
/* CSFloat-1:1: hover-only show element. */
.csfloat-show-on-hover {
opacity: 0;
transition: opacity 200ms ease;
}
*:hover > .csfloat-show-on-hover,
*:focus-within > .csfloat-show-on-hover {
opacity: 1;
}
/* CSFloat-1:1: hover-only hide element. */
.csfloat-hide-on-hover {
opacity: 1;
transition: opacity 200ms ease;
}
*:hover > .csfloat-hide-on-hover,
*:focus-within > .csfloat-hide-on-hover {
opacity: 0;
}
/* CSFloat-1:1: gradient highlight under text (for hero highlights). */
.csfloat-text-highlight {
background: linear-gradient(180deg,
transparent 60%,
oklch(0.55 0.18 250 / 0.32) 60%);
padding: 0 4px;
}
/* CSFloat-1:1: animated gradient (subtle background shift). */
@keyframes csfloat-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.csfloat-gradient-shift {
background: linear-gradient(135deg,
var(--bg-1),
oklch(0.20 0.02 250 / 0.4),
var(--bg-1));
background-size: 200% 200%;
animation: csfloat-gradient-shift 12s ease infinite;
}
/* CSFloat-1:1: tile glow on hover (used on premium feature cards). */
.csfloat-glow-hover {
position: relative;
z-index: 0;
}
.csfloat-glow-hover::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg,
oklch(0.55 0.18 250 / 0),
oklch(0.55 0.18 250 / 0.4) 50%,
oklch(0.55 0.18 250 / 0));
z-index: -1;
filter: blur(12px);
opacity: 0;
transition: opacity 320ms ease;
}
.csfloat-glow-hover:hover::after {
opacity: 1;
}
/* CSFloat-1:1: image overlay on hover (used in feed/blog tiles). */
.csfloat-img-hover-overlay {
position: relative;
overflow: hidden;
}
.csfloat-img-hover-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 50%,
rgba(0,0,0,0.5) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 280ms ease;
z-index: 1;
}
.csfloat-img-hover-overlay:hover::before {
opacity: 1;
}
.csfloat-img-hover-overlay-text {
position: absolute;
bottom: 12px;
left: 12px;
right: 12px;
font-size: 13px;
font-weight: 500;
color: oklch(0.98 0 0);
z-index: 2;
opacity: 0;
transform: translateY(4px);
transition: opacity 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-hover-overlay:hover .csfloat-img-hover-overlay-text {
opacity: 1;
transform: translateY(0);
}
/* END hover utilities + text highlight + gradient shift + glow + img overlay */
/* CSFloat-1:1: stat with icon + label + value vertical layout. */
.csfloat-icon-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px;
text-align: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-icon-stat:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-icon-stat-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 15px;
}
.csfloat-icon-stat-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-icon-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
/* CSFloat-1:1: skeleton dashboard. */
.csfloat-skel-dash {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.csfloat-skel-dash-tile {
height: 110px;
background: linear-gradient(90deg,
var(--bg-1) 0%,
var(--bg-2) 50%,
var(--bg-1) 100%);
background-size: 200% 100%;
border: 1px solid var(--line);
border-radius: 10px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* CSFloat-1:1: skeleton chart. */
.csfloat-skel-chart {
height: 240px;
background: linear-gradient(180deg,
var(--bg-1) 0%,
var(--bg-2) 50%,
var(--bg-1) 100%);
background-size: 100% 200%;
border: 1px solid var(--line);
border-radius: 10px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* CSFloat-1:1: ad slot inline (compact). */
.csfloat-ad-slot {
padding: 10px 14px;
background: var(--bg);
border: 1px dashed var(--line);
border-radius: 8px;
text-align: center;
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin: 12px 0;
}
/* CSFloat-1:1: section divider with hairline + accent dot. */
.csfloat-section-rule {
position: relative;
margin: 32px 0;
height: 1px;
background: var(--line);
}
.csfloat-section-rule::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--bg);
}
/* END icon stat + skeleton dash + skeleton chart + ad slot + section rule */
/* CSFloat-1:1: image preview frame for /sell page (left rail). */
.csfloat-sell-preview {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
position: sticky;
top: 88px;
}
.csfloat-sell-preview-img {
width: 100%;
aspect-ratio: 1;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
overflow: hidden;
}
.csfloat-sell-preview-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
.csfloat-sell-preview-name {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
text-align: center;
letter-spacing: -0.01em;
}
.csfloat-sell-preview-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
text-align: center;
}
.csfloat-sell-preview-priceblock {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 8px;
}
.csfloat-sell-preview-amount {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-sell-preview-symbol {
font-family: var(--mono);
font-size: 14px;
color: var(--ink-3);
font-weight: 600;
}
.csfloat-sell-preview-fee {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
text-align: center;
}
.csfloat-sell-preview-net {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: oklch(0.84 0.18 152);
margin-top: 2px;
text-align: center;
}
/* CSFloat-1:1: action shelf — right-aligned actions row. */
.csfloat-action-shelf {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 0;
margin-top: 16px;
border-top: 1px solid var(--line);
}
.csfloat-action-shelf-spacer {
flex: 1 1 auto;
}
/* CSFloat-1:1: stage indicator (selling: pick → price → confirm). */
.csfloat-stage-indicator {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
padding-bottom: 14px;
}
.csfloat-stage-indicator-step {
flex: 1 1 auto;
text-align: center;
position: relative;
padding: 6px 12px;
}
.csfloat-stage-indicator-step::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
transform: translateX(-50%);
width: 100%;
height: 1px;
background: var(--line);
}
.csfloat-stage-indicator-step.complete::after {
background: oklch(0.62 0.18 152);
}
.csfloat-stage-indicator-step.active::after {
background: var(--cta);
}
.csfloat-stage-indicator-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--ink-3);
margin-right: 6px;
}
.csfloat-stage-indicator-step.active .csfloat-stage-indicator-num {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-stage-indicator-step.complete .csfloat-stage-indicator-num {
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-stage-indicator-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.csfloat-stage-indicator-step.active .csfloat-stage-indicator-label {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-stage-indicator-step.complete .csfloat-stage-indicator-label {
color: oklch(0.84 0.18 152);
}
/* END sell preview + action shelf + stage indicator */
/* CSFloat-1:1: image overlay corner badge (e.g. "NEW" / "HOT"). */
.csfloat-corner-banner {
position: absolute;
top: 12px;
left: -32px;
width: 120px;
text-align: center;
padding: 4px 0;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transform: rotate(-45deg);
z-index: 4;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
pointer-events: none;
}
.csfloat-corner-banner.success { background: oklch(0.62 0.18 152); color: oklch(0.10 0 0); }
.csfloat-corner-banner.danger { background: oklch(0.60 0.18 30); color: oklch(0.98 0 0); }
.csfloat-corner-banner.gold {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: ribbon top edge (along card top). */
.csfloat-top-ribbon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 3px 14px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 0 0 6px 6px;
z-index: 4;
}
/* CSFloat-1:1: card status overlay (full-card overlay for SOLD/locked). */
.csfloat-card-status-overlay {
position: absolute;
inset: 0;
background: oklch(0.10 0.008 260 / 0.7);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
pointer-events: none;
}
.csfloat-card-status-overlay-text.sold {
border-color: oklch(0.42 0.07 30 / 0.5);
color: oklch(0.86 0.18 30);
}
.csfloat-card-status-overlay-text.locked {
border-color: oklch(0.42 0.10 80 / 0.5);
color: oklch(0.86 0.16 80);
}
/* CSFloat-1:1: hover card top arrows (carousel control). */
.csfloat-row-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: oklch(0.10 0.008 260 / 0.8);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 280ms ease, background 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-row-arrow.left { left: -8px; }
.csfloat-row-arrow.right { right: -8px; }
.csfloat-band:hover .csfloat-row-arrow,
.csfloat-carousel:hover .csfloat-row-arrow {
opacity: 1;
}
.csfloat-row-arrow:hover {
background: oklch(0.18 0.008 260 / 0.95);
transform: translateY(-50%) scale(1.06);
}
.csfloat-row-arrow:disabled {
opacity: 0;
pointer-events: none;
}
/* END corner banner + top ribbon + card status overlay + row arrow */
/* CSFloat-1:1: drag handle indicator (for sortable lists). */
.csfloat-drag-handle {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
cursor: grab;
user-select: none;
transition: color 120ms ease;
}
.csfloat-drag-handle:hover {
color: var(--ink-2);
}
.csfloat-drag-handle:active {
cursor: grabbing;
}
.csfloat-drag-handle::before {
content: "⋮⋮";
font-size: 12px;
letter-spacing: -2px;
}
/* CSFloat-1:1: dragging row state. */
.csfloat-row.dragging {
opacity: 0.5;
background: var(--bg-3);
cursor: grabbing;
}
.csfloat-row.drop-target {
background: oklch(0.30 0.05 250 / 0.18);
border-color: var(--cta);
}
.csfloat-row.drop-above {
border-top: 2px solid var(--cta);
}
.csfloat-row.drop-below {
border-bottom: 2px solid var(--cta);
}
/* CSFloat-1:1: virtualized scroll container (large lists). */
.csfloat-virtual-scroll {
position: relative;
overflow-y: auto;
max-height: 600px;
}
.csfloat-virtual-scroll-item {
position: absolute;
left: 0;
right: 0;
}
/* CSFloat-1:1: collapsible section group. */
.csfloat-collapsible {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
margin-bottom: 6px;
transition: border-color 200ms ease;
}
.csfloat-collapsible:hover { border-color: var(--line-2); }
.csfloat-collapsible-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: transparent;
border: none;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
text-align: left;
transition: background 120ms ease;
}
.csfloat-collapsible-trigger:hover {
background: var(--bg-2);
}
.csfloat-collapsible-trigger::after {
content: "▾";
font-size: 10px;
color: var(--ink-3);
margin-left: 12px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collapsible.open .csfloat-collapsible-trigger::after {
transform: rotate(180deg);
}
.csfloat-collapsible-body {
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
display: none;
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
}
.csfloat-collapsible.open .csfloat-collapsible-body {
display: block;
}
/* CSFloat-1:1: dot leader for in-card metadata. */
.csfloat-dot-leader {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12px;
margin: 4px 0;
}
.csfloat-dot-leader-label {
color: var(--ink-3);
flex-shrink: 0;
}
.csfloat-dot-leader-fill {
flex: 1 1 auto;
border-bottom: 1px dotted var(--line);
margin-bottom: 4px;
}
.csfloat-dot-leader-value {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* END drag handle + virtual scroll + collapsible + dot leader */
/* CSFloat-1:1: nav badge with new-features dot. */
.csfloat-nav-link-new {
position: relative;
}
.csfloat-nav-link-new::after {
content: "";
position: absolute;
top: 6px;
right: 6px;
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0.4);
animation: csfloat-pulse-ring 1800ms ease-out infinite;
}
/* CSFloat-1:1: scope chip — for /database categories scope filter. */
.csfloat-scope-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-scope-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-scope-chip.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
font-weight: 600;
}
/* CSFloat-1:1: tab strip (rounded). */
.csfloat-tab-strip-rounded {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 0;
}
.csfloat-tab-strip-rounded-tab {
background: transparent;
border: none;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease;
}
.csfloat-tab-strip-rounded-tab:hover { color: var(--ink-1); }
.csfloat-tab-strip-rounded-tab.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* CSFloat-1:1: full-width body grid layout. */
.csfloat-body-grid {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 320px;
gap: 24px;
align-items: start;
}
@media (max-width: 1280px) {
.csfloat-body-grid {
grid-template-columns: 240px minmax(0, 1fr);
}
.csfloat-body-grid-right { display: none; }
}
@media (max-width: 1100px) {
.csfloat-body-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.csfloat-body-grid-left { display: none; }
}
.csfloat-body-grid-left {
position: sticky;
top: 80px;
}
.csfloat-body-grid-right {
position: sticky;
top: 80px;
}
/* END nav-link new + scope chip + tab-strip-rounded + body grid */
/* CSFloat-1:1: hover-detail row reveal — show extra info on row hover. */
.csfloat-detail-row {
position: relative;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-detail-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-detail-row-extra {
display: none;
grid-column: 1 / -1;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-size: 12px;
color: var(--ink-3);
}
.csfloat-detail-row.expanded .csfloat-detail-row-extra {
display: block;
}
/* CSFloat-1:1: dropdown menu trigger — chevron-prefixed style. */
.csfloat-menu-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-1);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-menu-trigger:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-menu-trigger.open {
background: var(--bg-2);
border-color: var(--cta);
}
.csfloat-menu-trigger::after {
content: "▾";
font-size: 9px;
color: var(--ink-3);
transition: transform 200ms ease;
}
.csfloat-menu-trigger.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: action grid — 2x2 quick-action tiles. */
.csfloat-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin: 12px 0;
}
.csfloat-action-tile {
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
}
.csfloat-action-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-action-tile-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-action-tile-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-action-tile-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* END detail row hover + menu trigger + action grid */
/* CSFloat-1:1: button group horizontal (joined, no gap). */
.csfloat-btn-group-h {
display: inline-flex;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-btn-group-h-btn:last-child { border-right: none; }
.csfloat-btn-group-h-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-btn-group-h-btn.active {
background: var(--cta);
color: oklch(0.98 0 0);
font-weight: 600;
}
/* CSFloat-1:1: input group with prefix and suffix. */
.csfloat-input-group-bordered {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-input-group-bordered:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input-group-bordered-prefix {
padding: 8px 12px;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink-3);
font-size: 12px;
display: inline-flex;
align-items: center;
}
.csfloat-input-group-bordered-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 8px 12px;
color: var(--ink-1);
font-size: 13px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-input-group-bordered-suffix {
padding: 8px 12px;
background: var(--bg-2);
border-left: 1px solid var(--line);
color: var(--ink-3);
font-size: 12px;
display: inline-flex;
align-items: center;
}
/* CSFloat-1:1: range w/ histogram (price-range visualizer). */
.csfloat-range-histo {
display: flex;
align-items: end;
gap: 1px;
height: 32px;
padding: 4px 0;
}
.csfloat-range-histo-bar {
flex: 1 1 auto;
background: var(--bg-3);
border-radius: 1px;
min-width: 2px;
}
.csfloat-range-histo-bar.in-range {
background: var(--cta);
}
/* CSFloat-1:1: smart number input with arrows on hover. */
.csfloat-num-spin {
display: inline-flex;
align-items: center;
position: relative;
}
.csfloat-num-spin input[type="number"] {
-moz-appearance: textfield;
}
.csfloat-num-spin input[type="number"]::-webkit-inner-spin-button,
.csfloat-num-spin input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.csfloat-num-spin-arrow {
position: absolute;
right: 4px;
width: 16px;
height: 12px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 8px;
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease, color 120ms ease;
}
.csfloat-num-spin:hover .csfloat-num-spin-arrow {
opacity: 1;
}
.csfloat-num-spin-arrow.up { top: 4px; }
.csfloat-num-spin-arrow.down { bottom: 4px; }
.csfloat-num-spin-arrow:hover {
color: var(--ink-1);
}
/* END button group + input group bordered + range histo + num spin */
/* CSFloat-1:1: Search/sort summary header for /market under nav. */
.csfloat-market-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.csfloat-market-summary-text {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-market-summary-text strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-market-summary-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* CSFloat-1:1: floating "scroll to top" arrow. */
.csfloat-scroll-up {
position: fixed;
bottom: 80px;
right: 24px;
width: 36px;
height: 36px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 8700;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
opacity: 0;
pointer-events: none;
transform: translateY(20px) scale(0.8);
transition: opacity 240ms ease,
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
background 140ms ease;
}
.csfloat-scroll-up.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.csfloat-scroll-up:hover {
background: var(--bg-2);
border-color: var(--cta);
color: var(--cta);
}
/* CSFloat-1:1: stat snippet — 1-line compact stat. */
.csfloat-stat-snippet {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-stat-snippet-value {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-snippet-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
font-weight: 700;
}
/* CSFloat-1:1: helper — equal-width grid layout. */
.csfloat-equal-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 12px;
}
.csfloat-equal-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.csfloat-equal-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.csfloat-equal-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 720px) {
.csfloat-equal-grid-3,
.csfloat-equal-grid-4 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 540px) {
.csfloat-equal-grid-2,
.csfloat-equal-grid-3,
.csfloat-equal-grid-4 {
grid-template-columns: 1fr;
}
}
/* END market summary + scroll up + stat snippet + equal grid */
/* CSFloat-1:1: secondary nav (subnav-style) inside pages. */
.csfloat-section-nav {
display: inline-flex;
align-items: center;
gap: 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
width: 100%;
overflow-x: auto;
}
.csfloat-section-nav::-webkit-scrollbar { height: 0; }
.csfloat-section-nav-item {
position: relative;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 140ms ease;
}
.csfloat-section-nav-item:hover { color: var(--ink-1); }
.csfloat-section-nav-item.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-section-nav-item.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -8px;
height: 2px;
background: var(--ink-1);
border-radius: 1px;
}
.csfloat-section-nav-item-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: copy-to-clipboard button beside text. */
.csfloat-clip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 11px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
margin-left: 4px;
vertical-align: middle;
}
.csfloat-clip-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-clip-btn.copied {
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-color: oklch(0.42 0.07 152 / 0.5);
}
.csfloat-clip-btn.copied::before {
content: "✓";
}
/* CSFloat-1:1: fade-in entrance for entire page. */
.csfloat-page-fade {
animation: csfloat-page-fade-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: animated check (used for confirmation success). */
@keyframes csfloat-check-draw {
0% { stroke-dashoffset: 16; }
100% { stroke-dashoffset: 0; }
}
.csfloat-animated-check {
width: 32px;
height: 32px;
display: inline-block;
background: oklch(0.30 0.04 152 / 0.32);
border: 2px solid oklch(0.62 0.18 152);
border-radius: 50%;
position: relative;
}
.csfloat-animated-check::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 6px;
border-left: 2px solid oklch(0.84 0.18 152);
border-bottom: 2px solid oklch(0.84 0.18 152);
transform: translate(-50%, -65%) rotate(-45deg);
animation: csfloat-check-draw 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: animated x (cancellation/error). */
.csfloat-animated-x {
width: 32px;
height: 32px;
display: inline-block;
background: oklch(0.30 0.04 30 / 0.32);
border: 2px solid oklch(0.60 0.18 30);
border-radius: 50%;
position: relative;
}
.csfloat-animated-x::before,
.csfloat-animated-x::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background: oklch(0.84 0.18 30);
border-radius: 1px;
}
.csfloat-animated-x::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.csfloat-animated-x::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* END section nav + clip button + page fade + animated check/x */
/* CSFloat-1:1: bell button with attached badge. */
.csfloat-bell-with-badge {
position: relative;
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.csfloat-bell-with-badge:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
.csfloat-bell-with-badge.shake {
animation: csfloat-bell-shake 800ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
transform-origin: top center;
}
/* CSFloat-1:1: subtle interactive border on hover. */
.csfloat-interactive-border {
border: 1px solid var(--line);
transition: border-color 200ms ease;
}
.csfloat-interactive-border:hover {
border-color: var(--cta);
}
/* CSFloat-1:1: invisible scrollbar (utility). */
.csfloat-no-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.csfloat-no-scrollbar::-webkit-scrollbar {
display: none;
}
/* CSFloat-1:1: input with right-side helper. */
.csfloat-input-helper {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
pointer-events: none;
}
/* CSFloat-1:1: input wrapper that supports inline button. */
.csfloat-input-with-btn {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-input-with-btn:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input-with-btn-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 8px 12px;
color: var(--ink-1);
font-size: 13px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-input-with-btn-btn {
border: none;
border-left: 1px solid var(--line);
background: var(--bg-2);
padding: 0 14px;
color: var(--ink-1);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-input-with-btn-btn:hover {
background: var(--bg-3);
color: var(--cta);
}
/* END bell-with-badge + interactive border + no-scrollbar + input helper + input-with-btn */
/* CSFloat-1:1: card stack — overlapping card stack effect for offers/bids. */
.csfloat-card-stack {
position: relative;
display: flex;
flex-direction: column;
}
.csfloat-card-stack-item {
position: relative;
margin-top: -10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms ease;
}
.csfloat-card-stack-item:first-child {
margin-top: 0;
}
.csfloat-card-stack-item:hover {
transform: translateY(-2px);
border-color: var(--line-2);
z-index: 2;
}
/* CSFloat-1:1: option strip (radio-button group displayed as buttons). */
.csfloat-option-strip {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-option-strip-option {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-option-strip-option:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-option-strip-option.selected {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: var(--cta);
font-weight: 600;
}
/* CSFloat-1:1: pricing tab bar (Monthly / Yearly). */
.csfloat-pricing-tabs {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 0;
margin: 0 auto 24px;
}
.csfloat-pricing-tabs-tab {
background: transparent;
border: none;
padding: 6px 18px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
transition: background 140ms ease, color 140ms ease;
position: relative;
}
.csfloat-pricing-tabs-tab:hover { color: var(--ink-1); }
.csfloat-pricing-tabs-tab.active {
background: var(--cta);
color: oklch(0.98 0 0);
font-weight: 600;
}
.csfloat-pricing-tabs-tab .save-pct {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 1px 5px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.32);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.csfloat-pricing-tabs-tab.active .save-pct {
background: oklch(0.10 0 0 / 0.18);
color: oklch(0.92 0.10 152);
}
/* END card stack + option strip + pricing tabs */
/* CSFloat-1:1: floating action panel — bottom-fixed pill action bar. */
.csfloat-action-pill {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px;
background: oklch(0.18 0.008 260 / 0.92);
border: 1px solid var(--line-2);
border-radius: 999px;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 8800;
animation: csfloat-pop-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-action-pill-btn {
background: transparent;
border: none;
padding: 6px 14px;
color: var(--ink-2);
font-size: 12px;
font-weight: 500;
cursor: pointer;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-action-pill-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-action-pill-btn.primary {
background: var(--cta);
color: oklch(0.98 0 0);
font-weight: 600;
}
.csfloat-action-pill-btn.primary:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-action-pill-btn.danger {
color: oklch(0.84 0.18 30);
}
.csfloat-action-pill-btn.danger:hover {
background: oklch(0.30 0.04 30 / 0.32);
}
.csfloat-action-pill-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 4px;
}
/* CSFloat-1:1: filter sidebar accent gradient on left edge. */
.csfloat-filter-rail-accent {
position: relative;
}
.csfloat-filter-rail-accent::before {
content: "";
position: absolute;
top: 24px;
bottom: 24px;
left: -1px;
width: 2px;
background: linear-gradient(180deg,
var(--cta) 0%,
transparent 100%);
border-radius: 1px;
}
/* CSFloat-1:1: card image gradient mask (reveals image on hover). */
.csfloat-img-mask {
position: relative;
overflow: hidden;
}
.csfloat-img-mask::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,
var(--bg-2) 0%,
transparent 100%);
opacity: 1;
transition: opacity 280ms ease;
z-index: 1;
}
.csfloat-img-mask:hover::before {
opacity: 0;
}
/* CSFloat-1:1: chip with corner notch (badge variant). */
.csfloat-notch-chip {
position: relative;
display: inline-block;
padding: 4px 10px 4px 14px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}
/* CSFloat-1:1: filter button group — for /admin & /csr quick filters. */
.csfloat-filter-buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 0;
}
.csfloat-filter-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-filter-button:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-filter-button.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
font-weight: 600;
}
/* END action pill + filter rail accent + img mask + notch chip + filter buttons */
/* CSFloat-1:1: featured chip on hero stack card. */
.csfloat-featured-chip {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(0.92 0.10 250);
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
padding: 2px 8px;
border-radius: 999px;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.csfloat-featured-chip.gold {
color: oklch(0.92 0.10 80);
background: oklch(0.30 0.05 80 / 0.32);
border-color: oklch(0.42 0.10 80 / 0.5);
}
.csfloat-featured-chip.deal {
color: oklch(0.92 0.10 152);
background: oklch(0.30 0.04 152 / 0.32);
border-color: oklch(0.42 0.07 152 / 0.5);
}
/* CSFloat-1:1: brand cohesion — hero light bar (signature accent line). */
.csfloat-light-bar {
width: 480px;
max-width: 90%;
height: 1px;
margin: 12px auto;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
/* CSFloat-1:1: brand cohesion — content section with edge gradient. */
.csfloat-edge-glow {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
overflow: hidden;
}
.csfloat-edge-glow::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
/* CSFloat-1:1: content card with hover glow border. */
.csfloat-glow-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
position: relative;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}
.csfloat-glow-card:hover {
border-color: oklch(0.42 0.10 250 / 0.36);
transform: translateY(-2px);
box-shadow: 0 0 24px oklch(0.55 0.18 250 / 0.18),
0 12px 32px rgba(0,0,0,0.55);
}
/* CSFloat-1:1: ambient glow background variants (dim accents). */
.csfloat-bg-glow-blue {
background:
radial-gradient(80% 50% at 50% 0%,
oklch(0.55 0.18 250 / 0.10),
transparent 60%),
var(--bg);
}
.csfloat-bg-glow-pink {
background:
radial-gradient(80% 50% at 50% 0%,
oklch(0.62 0.27 330 / 0.10),
transparent 60%),
var(--bg);
}
.csfloat-bg-glow-amber {
background:
radial-gradient(80% 50% at 50% 0%,
oklch(0.78 0.16 80 / 0.10),
transparent 60%),
var(--bg);
}
/* END featured chip + light bar + edge glow + glow card + bg glow variants */
/* CSFloat-1:1: time-based theme (sunset / morning ambient). */
@media (prefers-color-scheme: dark) {
:root { --csfloat-current-bg: var(--bg); }
}
/* (2026-04-29) The previous rule here set `[aria-hidden="true"] {
visibility: hidden }` which was an outright bug — `aria-hidden`
means "hide from assistive technology" (screen readers, voice
control), NOT "hide from sighted users." That rule was hiding
every decorative icon across the app: the cart-empty SVG, every
chevron, every magnifier glyph, every aria-hidden chart marker.
The cart-empty page operator was looking at had a "missing icon"
square because of this. `[hidden]` (the HTML attribute) still
correctly hides display. */
[hidden] {
display: none !important;
}
/* CSFloat-1:1: focus trap visual indicator (for modal). */
:focus-visible[data-focus-trap] {
outline: 2px solid var(--cta);
outline-offset: 4px;
}
/* CSFloat-1:1: nav-icon button group container. */
.csfloat-nav-icons {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 4px;
}
/* CSFloat-1:1: nav search expand-on-focus animation. */
.csfloat-nav-search-expand {
width: 200px;
transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-nav-search-expand:focus-within {
width: 320px;
}
@media (max-width: 720px) {
.csfloat-nav-search-expand {
width: 140px;
}
.csfloat-nav-search-expand:focus-within {
width: 200px;
}
}
/* CSFloat-1:1: nav-icon button highlight on active route. */
.csfloat-nav-icon-btn[aria-current="page"],
.csfloat-nav-icon-btn.active {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
position: relative;
}
.csfloat-nav-icon-btn[aria-current="page"]::after,
.csfloat-nav-icon-btn.active::after {
content: "";
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
background: var(--cta);
border-radius: 50%;
}
/* CSFloat-1:1: page anchor highlights (when URL has #section). */
.csfloat-anchor-target {
position: relative;
}
.csfloat-anchor-target::before {
content: "";
position: absolute;
left: -16px;
top: 0;
bottom: 0;
width: 3px;
background: var(--cta);
border-radius: 2px;
opacity: 0;
transition: opacity 240ms ease;
}
.csfloat-anchor-target:target::before,
.csfloat-anchor-target.active::before {
opacity: 1;
}
/* CSFloat-1:1: tag rotation for ribbons (gold/blue/pink etc). */
.csfloat-rotating-tag {
display: inline-flex;
align-items: center;
padding: 1px 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 3px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250) 0%,
oklch(0.62 0.27 330) 50%,
oklch(0.78 0.16 80) 100%);
color: oklch(0.98 0 0);
background-size: 200% 200%;
animation: csfloat-gradient-shift 8s ease infinite;
}
/* END ARIA helpers + nav-icon active + anchor target + rotating tag */
/* CSFloat-1:1: chip cluster — for inline tag groupings. */
.csfloat-chip-cluster {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* CSFloat-1:1: hot tag — orange flame for trending items. */
.csfloat-hot-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: oklch(0.30 0.05 30 / 0.32);
border: 1px solid oklch(0.42 0.07 30 / 0.5);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-hot-tag::before {
content: "🔥";
font-size: 8px;
filter: hue-rotate(20deg);
}
/* CSFloat-1:1: dim card variant (placeholder/disabled state). */
.csfloat-card-dim {
opacity: 0.55;
pointer-events: none;
filter: saturate(0.6);
}
/* CSFloat-1:1: card stack of metrics inline. */
.csfloat-stat-stack {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-stack-primary {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-stat-stack-secondary {
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: search clear icon. */
.csfloat-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
opacity: 0;
transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.nav-search-wrap:has(input:not(:placeholder-shown)) .csfloat-search-clear {
opacity: 1;
}
.csfloat-search-clear:hover {
background: var(--bg-2);
color: var(--ink-1);
}
/* CSFloat-1:1: row index marker (for ranked lists). */
.csfloat-row-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.csfloat-row-index.gold {
background: oklch(0.30 0.05 80 / 0.32);
border-color: oklch(0.42 0.10 80 / 0.5);
color: oklch(0.92 0.10 80);
}
.csfloat-row-index.silver {
background: oklch(0.40 0.014 260 / 0.5);
border-color: oklch(0.55 0.014 260 / 0.5);
color: oklch(0.92 0.014 260);
}
.csfloat-row-index.bronze {
background: oklch(0.30 0.05 50 / 0.32);
border-color: oklch(0.42 0.10 50 / 0.5);
color: oklch(0.92 0.10 50);
}
/* CSFloat-1:1: timestamp utility — time tag styling. */
.csfloat-timestamp {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-timestamp.bright { color: var(--ink-1); font-weight: 600; }
.csfloat-timestamp.faint { color: var(--ink-4); }
/* END chip cluster + hot tag + dim card + stat stack + search clear + row index + timestamp */
/* CSFloat-1:1: hover-card ::before highlight overlay. */
.csfloat-hover-card {
position: relative;
overflow: hidden;
}
.csfloat-hover-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 30%,
oklch(0.55 0.18 250 / 0.06) 50%,
transparent 70%);
background-size: 200% 200%;
background-position: -100% -100%;
pointer-events: none;
transition: background-position 600ms ease;
z-index: 1;
}
.csfloat-hover-card:hover::before {
background-position: 100% 100%;
}
/* CSFloat-1:1: card brightness on hover (premium feel). */
.csfloat-bright-on-hover {
transition: filter 200ms ease;
}
.csfloat-bright-on-hover:hover {
filter: brightness(1.05);
}
/* CSFloat-1:1: stat with mini histogram (for /stats page). */
.csfloat-stat-with-histo {
display: flex;
align-items: end;
gap: 12px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-stat-with-histo-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-histo-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-stat-with-histo-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-histo-bars {
display: flex;
align-items: end;
gap: 1px;
height: 28px;
width: 60px;
}
.csfloat-stat-with-histo-bar {
flex: 1 1 auto;
background: var(--cta);
border-radius: 1px;
min-width: 2px;
opacity: 0.6;
}
/* CSFloat-1:1: timeline year separator (changelog/history). */
.csfloat-year-sep {
display: flex;
align-items: center;
gap: 12px;
margin: 32px 0 18px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-year-sep-num {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.csfloat-year-sep-line {
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
/* CSFloat-1:1: tooltip with arrow (positioned). */
.csfloat-arrow-tooltip {
position: absolute;
z-index: 9300;
padding: 6px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 11px;
color: var(--ink-1);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
.csfloat-arrow-tooltip::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.csfloat-arrow-tooltip.top::after {
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-color: oklch(0.10 0.008 260) transparent transparent transparent;
}
.csfloat-arrow-tooltip.bottom::after {
top: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-color: transparent transparent oklch(0.10 0.008 260) transparent;
}
.csfloat-arrow-tooltip.left::after {
right: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent oklch(0.10 0.008 260);
}
.csfloat-arrow-tooltip.right::after {
left: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 6px 6px 0;
border-color: transparent oklch(0.10 0.008 260) transparent transparent;
}
/* END hover-card overlay + bright-on-hover + stat-with-histo + year sep + arrow tooltip */
/* CSFloat-1:1: text marquee (animated horizontal text scroll). */
.csfloat-text-marquee {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
white-space: nowrap;
mask-image: linear-gradient(90deg,
transparent 0%,
black 6%,
black 94%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
black 6%,
black 94%,
transparent 100%);
}
.csfloat-text-marquee-track {
display: inline-block;
white-space: nowrap;
animation: csfloat-text-marquee-scroll 28s linear infinite;
padding-left: 100%;
}
@keyframes csfloat-text-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
.csfloat-text-marquee:hover .csfloat-text-marquee-track {
animation-play-state: paused;
}
/* CSFloat-1:1: hairline divider with gradient fade. */
.csfloat-hairline-fade {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line) 30%,
var(--line) 70%,
transparent 100%);
border: none;
margin: 18px 0;
}
/* CSFloat-1:1: small product card variant (mini). */
.csfloat-mini-card {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-mini-card:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-mini-card-img {
width: 24px;
height: 24px;
background: var(--bg);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-mini-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 2px;
}
.csfloat-mini-card-name {
font-size: 11px;
color: var(--ink-1);
font-weight: 500;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-mini-card-price {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* CSFloat-1:1: pill-shaped status. */
.csfloat-status-rounded {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-status-rounded.live {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-status-rounded.live::before {
content: "";
width: 5px;
height: 5px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-status-rounded.draft {
color: var(--ink-3);
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-status-rounded.published {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
/* END text marquee + hairline + mini card + status rounded */
/* CSFloat-1:1: nav-style profile chip mini. */
.csfloat-profile-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 8px 0 3px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-profile-chip:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-profile-chip-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-profile-chip-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-profile-chip-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-profile-chip-caret {
font-size: 8px;
color: var(--ink-3);
}
/* CSFloat-1:1: badge stacked 2-row (label + count). */
.csfloat-badge-stacked {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
min-width: 56px;
}
.csfloat-badge-stacked-count {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-badge-stacked-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
/* CSFloat-1:1: hr separator with text in middle. */
.csfloat-hr-text {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.csfloat-hr-text::before,
.csfloat-hr-text::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.csfloat-hr-text-content {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
white-space: nowrap;
padding: 0 6px;
}
/* CSFloat-1:1: animated underline link. */
.csfloat-underline-anim {
position: relative;
text-decoration: none;
color: var(--ink-1);
padding-bottom: 2px;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-underline-anim:hover {
background-size: 100% 1px;
}
/* CSFloat-1:1: stat trend icon row. */
.csfloat-trend-icon {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-trend-icon.up { color: oklch(0.78 0.18 152); }
.csfloat-trend-icon.down { color: oklch(0.78 0.18 30); }
.csfloat-trend-icon.flat { color: var(--ink-3); }
/* END profile chip + badge stacked + hr text + underline anim + trend icon */
/* CSFloat-1:1: micro-interaction — tile press effect. */
.csfloat-press {
transition: transform 80ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-press:active {
transform: scale(0.97);
}
/* CSFloat-1:1: hover-zoom on linked images. */
.csfloat-zoom-link {
display: block;
overflow: hidden;
border-radius: inherit;
}
.csfloat-zoom-link img {
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-zoom-link:hover img {
transform: scale(1.08);
}
/* CSFloat-1:1: hover-darken overlay. */
.csfloat-darken-on-hover {
position: relative;
}
.csfloat-darken-on-hover::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
border-radius: inherit;
pointer-events: none;
transition: background 200ms ease;
}
.csfloat-darken-on-hover:hover::after {
background: rgba(0, 0, 0, 0.18);
}
/* CSFloat-1:1: spinner inline mini. */
.csfloat-spinner-mini {
display: inline-block;
width: 12px;
height: 12px;
border: 1.5px solid var(--line-2);
border-top-color: var(--cta);
border-radius: 50%;
animation: csfloat-rotate 700ms linear infinite;
vertical-align: middle;
}
/* CSFloat-1:1: chevron-only button (icon only). */
.csfloat-chevron-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 11px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-chevron-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* CSFloat-1:1: container with subtle inner padding (modals, popovers). */
.csfloat-pad-2 { padding: 8px 10px; }
.csfloat-pad-3 { padding: 12px 14px; }
.csfloat-pad-4 { padding: 14px 18px; }
.csfloat-pad-5 { padding: 18px 22px; }
.csfloat-pad-6 { padding: 22px 28px; }
.csfloat-pad-7 { padding: 28px 32px; }
/* CSFloat-1:1: card row with vertical separator. */
.csfloat-row-with-sep {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: center;
}
.csfloat-row-with-sep-divider {
width: 1px;
background: var(--line);
height: 24px;
}
/* CSFloat-1:1: compact stat list (used in admin overview). */
.csfloat-stat-list {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-stat-list-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
align-items: center;
transition: background 120ms ease;
}
.csfloat-stat-list-row:last-child { border-bottom: none; }
.csfloat-stat-list-row:hover { background: var(--bg-2); }
.csfloat-stat-list-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-list-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END press + zoom link + darken + mini spinner + chevron btn + padding helpers + row sep + stat list */
/* CSFloat-1:1: copy-link with fade-out feedback. */
.csfloat-copy-fade {
position: relative;
cursor: pointer;
user-select: all;
}
.csfloat-copy-fade::after {
content: "Copied!";
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 3px 8px;
background: oklch(0.10 0.008 260);
color: oklch(0.84 0.18 152);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-copy-fade.copied::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* CSFloat-1:1: fadeable inline error banner. */
.csfloat-error-fade {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 6px;
font-size: 12px;
color: oklch(0.84 0.18 30);
margin: 6px 0;
animation: csfloat-pop-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-error-fade-icon {
font-size: 12px;
font-weight: 700;
color: oklch(0.84 0.18 30);
flex-shrink: 0;
}
/* CSFloat-1:1: stage flow indicator (alternate). */
.csfloat-flow {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-flow-step {
padding: 2px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
}
.csfloat-flow-step.active {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
font-weight: 600;
}
.csfloat-flow-arrow {
font-size: 8px;
color: var(--ink-4);
}
/* CSFloat-1:1: progress steps with labels (vertical for /sell). */
.csfloat-progress-steps {
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-progress-step {
position: relative;
padding: 10px 0 10px 32px;
border-left: 1px dashed var(--line);
margin-left: 12px;
}
.csfloat-progress-step:first-child { padding-top: 0; }
.csfloat-progress-step:last-child { padding-bottom: 0; border-left: none; }
.csfloat-progress-step::before {
content: "";
position: absolute;
left: -12px;
top: 8px;
width: 22px;
height: 22px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: 50%;
}
.csfloat-progress-step.complete::before {
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
}
.csfloat-progress-step.active::before {
background: var(--cta);
border-color: var(--cta);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-progress-step-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-progress-step-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
}
/* END copy fade + error fade + flow + progress steps */
/* CSFloat-1:1: meter row variant — for slider-input pairs. */
.csfloat-meter-input-row {
display: grid;
grid-template-columns: 1fr 60px;
gap: 12px;
align-items: center;
padding: 8px 0;
}
.csfloat-meter-input-row-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-meter-input-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
}
.csfloat-meter-input-row-value {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-meter-input-row-input {
width: 60px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 8px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-1);
text-align: center;
font-variant-numeric: tabular-nums;
outline: none;
transition: border-color 140ms ease;
}
.csfloat-meter-input-row-input:focus { border-color: var(--cta); }
/* CSFloat-1:1: pricing strikethrough banner. */
.csfloat-strike-banner {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 4px 10px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: oklch(0.84 0.18 152);
}
.csfloat-strike-banner-old {
color: var(--ink-4);
text-decoration: line-through;
font-size: 10px;
}
.csfloat-strike-banner-new {
font-weight: 700;
font-size: 13px;
color: oklch(0.92 0.10 152);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: callout strip — small text strip with icon. */
.csfloat-callout-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-callout-strip-icon {
font-size: 13px;
color: var(--ink-3);
flex-shrink: 0;
}
.csfloat-callout-strip strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: divider with side-aligned label. */
.csfloat-divider-side {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 8px;
}
.csfloat-divider-side-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
flex-shrink: 0;
}
.csfloat-divider-side-line {
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
/* CSFloat-1:1: subtle list-item separator. */
.csfloat-list-sep {
border-top: 1px solid var(--line);
margin: 8px -10px;
padding-top: 8px;
}
.csfloat-list-sep:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
/* END meter row + strike banner + callout strip + divider side + list sep */
/* CSFloat-1:1: secondary buttons row. */
.csfloat-secondary-actions {
display: inline-flex;
gap: 6px;
align-items: center;
}
.csfloat-secondary-action {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-secondary-action:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-secondary-action.icon-only {
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: container constraints. */
.csfloat-max-w-200 { max-width: 200px; }
.csfloat-max-w-280 { max-width: 280px; }
.csfloat-max-w-360 { max-width: 360px; }
.csfloat-max-w-440 { max-width: 440px; }
.csfloat-max-w-560 { max-width: 560px; }
.csfloat-max-w-680 { max-width: 680px; }
.csfloat-max-w-800 { max-width: 800px; }
.csfloat-max-w-1100 { max-width: 1100px; }
.csfloat-max-w-1280 { max-width: 1280px; }
.csfloat-max-w-1480 { max-width: 1480px; }
/* CSFloat-1:1: card with quick-action ribbons (used for promo cards). */
.csfloat-promo-card {
position: relative;
padding: 24px;
background: linear-gradient(135deg,
oklch(0.30 0.05 250 / 0.18),
oklch(0.20 0.02 250 / 0.4));
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-promo-card-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 3px;
width: fit-content;
}
.csfloat-promo-card-title {
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-promo-card-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-promo-card-actions {
display: inline-flex;
gap: 8px;
margin-top: 12px;
}
.csfloat-promo-card-deco {
position: absolute;
bottom: -40px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* CSFloat-1:1: gradient title text utility. */
.csfloat-grad-title {
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-grad-title-blue {
background: linear-gradient(135deg, oklch(0.78 0.18 240) 0%, var(--cta) 50%, oklch(0.85 0.18 250) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* END secondary actions + max widths + promo card + grad title */
/* CSFloat-1:1: header banner — full-width promotional. */
.csfloat-header-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: linear-gradient(90deg,
oklch(0.30 0.05 250 / 0.32) 0%,
oklch(0.20 0.02 250 / 0.4) 50%,
oklch(0.30 0.05 250 / 0.32) 100%);
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 10px;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.csfloat-header-banner-text {
flex: 1 1 auto;
font-size: 13px;
color: oklch(0.92 0.10 250);
line-height: 1.5;
}
.csfloat-header-banner-text strong {
font-weight: 600;
color: oklch(0.96 0.06 250);
}
.csfloat-header-banner-action {
flex-shrink: 0;
padding: 6px 14px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease;
}
.csfloat-header-banner-action:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: layout adjustment — margins on tablet sizing. */
@media (min-width: 720px) and (max-width: 1100px) {
.csfloat-section { padding: 24px 0; }
.csfloat-page-header {
margin: 14px 0 18px;
}
}
/* CSFloat-1:1: dark sub-card with hairline (used in /admin nested data). */
.csfloat-subcard {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 10px 12px;
margin: 6px 0;
}
.csfloat-subcard.compact {
padding: 6px 10px;
}
/* CSFloat-1:1: subtle key-value row. */
.csfloat-kv {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 14px;
font-size: 12px;
}
.csfloat-kv-label {
color: var(--ink-3);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.csfloat-kv-value {
color: var(--ink-1);
font-weight: 500;
}
.csfloat-kv-value.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: hover-only secondary actions. */
.csfloat-hover-actions {
display: inline-flex;
gap: 4px;
opacity: 0;
transition: opacity 200ms ease;
}
*:hover > .csfloat-hover-actions,
*:focus-within > .csfloat-hover-actions {
opacity: 1;
}
/* CSFloat-1:1: status indicator — circular pill with dot. */
.csfloat-status-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
}
.csfloat-status-circle::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink-3);
}
.csfloat-status-circle.online::before { background: oklch(0.78 0.18 152); }
.csfloat-status-circle.busy::before { background: oklch(0.78 0.18 30); }
.csfloat-status-circle.idle::before { background: oklch(0.78 0.16 80); }
.csfloat-status-circle.offline::before { background: var(--ink-4); }
/* END header banner + tablet sizing + subcard + key-value row + hover actions + status circle */
/* CSFloat-1:1: shimmer-loading background overlay (skeleton placeholder). */
.csfloat-shimmer-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.05) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
pointer-events: none;
}
/* CSFloat-1:1: error fallback page block. */
.csfloat-fallback-block {
padding: 32px 24px;
background: var(--bg-1);
border: 1px dashed var(--line);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.csfloat-fallback-block-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-fallback-block-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-fallback-block-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
max-width: 320px;
line-height: 1.55;
}
.csfloat-fallback-block-action {
margin-top: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-fallback-block-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* CSFloat-1:1: chip indicator dot. */
.csfloat-chip-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
margin-right: 4px;
vertical-align: middle;
}
/* CSFloat-1:1: action button bar at bottom of forms. */
.csfloat-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.csfloat-form-actions-left {
display: inline-flex;
gap: 6px;
}
.csfloat-form-actions-right {
display: inline-flex;
gap: 6px;
margin-left: auto;
}
/* CSFloat-1:1: card image placeholder (no image yet). */
.csfloat-img-blank {
background: var(--bg-2);
border: 1px dashed var(--line);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 11px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.06em;
min-height: 80px;
}
/* END shimmer overlay + fallback block + chip dot + form actions + img blank */
/* CSFloat-1:1: highlight overlay on cells (search match). */
.csfloat-highlight-cell {
background: oklch(0.55 0.18 250 / 0.18);
color: var(--ink-1);
padding: 1px 2px;
border-radius: 2px;
font-weight: 600;
transition: background 240ms ease;
}
/* CSFloat-1:1: nav search visual feedback when actively searching. */
.nav-search-input.searching {
background-image: url("data:image/svg+xml;utf8,");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 14px;
padding-right: 36px;
animation: csfloat-rotate 800ms linear infinite;
}
/* CSFloat-1:1: scroll fade-in on viewport entry. */
@media (prefers-reduced-motion: no-preference) {
.csfloat-on-view {
opacity: 0;
transform: translateY(12px);
transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-on-view.visible {
opacity: 1;
transform: translateY(0);
}
}
/* CSFloat-1:1: keep elements visible until JS hydrates. */
.csfloat-noscript {
display: none;
}
@media not all {
.csfloat-noscript {
display: block;
padding: 12px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 6px;
text-align: center;
color: oklch(0.84 0.18 30);
font-size: 12px;
margin: 12px 0;
}
}
.csfloat-noscript-only {
display: none;
}
.no-js .csfloat-noscript-only {
display: block;
}
/* CSFloat-1:1: ascii-art logo banner. */
.csfloat-ascii-banner {
font-family: var(--mono);
font-size: 10px;
line-height: 1.2;
color: var(--ink-4);
white-space: pre;
text-align: center;
margin: 12px auto;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: large overlapping pile (used in featured collection display). */
.csfloat-pile {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
}
.csfloat-pile-item {
position: absolute;
width: 80px;
height: 80px;
background: var(--bg-2);
border: 2px solid var(--bg);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.csfloat-pile-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-pile-item:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.csfloat-pile-item:nth-child(2) { transform: rotate(0); z-index: 2; }
.csfloat-pile-item:nth-child(3) { transform: rotate(6deg); z-index: 1; }
/* END highlight cell + searching anim + on-view + noscript + ascii + pile */
/* CSFloat-1:1: floor / ceiling indicator — for /item lowest/highest. */
.csfloat-floor-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 152);
}
.csfloat-floor-indicator::before {
content: "▼";
font-size: 9px;
}
.csfloat-ceiling-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-ceiling-indicator::before {
content: "▲";
font-size: 9px;
}
/* CSFloat-1:1: nav bar wallet preview pill (compact). */
.csfloat-wallet-preview {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px 0 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-wallet-preview:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-wallet-preview-icon {
width: 22px;
height: 22px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 50%;
color: var(--cta);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-wallet-preview-amount {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-wallet-preview-currency {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* CSFloat-1:1: stat card with brand color band. */
.csfloat-stat-band {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
border-left: 3px solid var(--cta);
}
.csfloat-stat-band.success { border-left-color: oklch(0.62 0.18 152); }
.csfloat-stat-band.danger { border-left-color: oklch(0.60 0.18 30); }
.csfloat-stat-band.warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-stat-band-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-stat-band-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-band-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* END floor/ceiling indicators + wallet preview + stat band */
/* CSFloat-1:1: highlighted text glow on important values. */
.csfloat-glow-text {
text-shadow: 0 0 12px oklch(0.55 0.18 250 / 0.45);
}
/* CSFloat-1:1: secondary card chassis (lighter version of card-base). */
.csfloat-secondary-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 200ms ease;
}
.csfloat-secondary-card:hover { border-color: var(--line-2); }
/* CSFloat-1:1: secondary card with image. */
.csfloat-secondary-card-with-img {
display: grid;
grid-template-columns: 56px 1fr;
gap: 10px;
align-items: center;
}
.csfloat-secondary-card-with-img-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-secondary-card-with-img-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* CSFloat-1:1: card status overlay (muted SOLD/INACTIVE state). */
.csfloat-card-overlay-muted {
position: absolute;
inset: 0;
background: oklch(0.10 0.008 260 / 0.55);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
pointer-events: none;
border-radius: inherit;
}
/* CSFloat-1:1: contextual label aside row. */
.csfloat-aside-label {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
padding: 1px 6px;
margin-left: 6px;
vertical-align: middle;
}
/* CSFloat-1:1: utility — center align horizontal+vertical. */
.csfloat-center {
display: flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: utility — flex column with center alignment. */
.csfloat-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.csfloat-stack.tight { gap: 4px; }
.csfloat-stack.normal { gap: 8px; }
.csfloat-stack.loose { gap: 16px; }
.csfloat-stack.huge { gap: 24px; }
/* CSFloat-1:1: utility — flex row with stretch/wrap. */
.csfloat-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* CSFloat-1:1: utility — fill remaining space. */
.csfloat-fill {
flex: 1 1 auto;
}
/* END glow text + secondary card + card overlay muted + aside label + center/stack/row utilities */
/* CSFloat-1:1: tab nav with hover stripe (alternative variant). */
.csfloat-tab-nav {
display: flex;
background: var(--bg);
border-bottom: 1px solid var(--line);
padding: 0 18px;
gap: 0;
margin-bottom: 16px;
overflow-x: auto;
}
.csfloat-tab-nav::-webkit-scrollbar { height: 0; }
.csfloat-tab-nav-tab {
position: relative;
background: transparent;
border: none;
padding: 12px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
transition: color 140ms ease;
white-space: nowrap;
}
.csfloat-tab-nav-tab:hover {
color: var(--ink-1);
}
.csfloat-tab-nav-tab.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-tab-nav-tab.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-tab-nav-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-tab-nav-tab.active .csfloat-tab-nav-tab-count {
color: var(--cta);
}
/* CSFloat-1:1: card with cover image & content body (used for /database & related). */
.csfloat-content-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
text-decoration: none;
}
.csfloat-content-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-content-card-cover {
aspect-ratio: 16 / 9;
background: var(--bg-2);
position: relative;
overflow: hidden;
}
.csfloat-content-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-content-card:hover .csfloat-content-card-cover img {
transform: scale(1.04);
}
.csfloat-content-card-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-content-card-tag {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
width: fit-content;
}
.csfloat-content-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-content-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-content-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
padding-top: 8px;
border-top: 1px solid var(--line);
margin-top: 8px;
}
/* END tab nav + content card */
/* CSFloat-1:1: tag with logo (sponsor / partner). */
.csfloat-sponsor-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-sponsor-tag-logo {
width: 14px;
height: 14px;
background: var(--bg);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: simple counter for inline use. */
.csfloat-inline-counter {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-inline-counter-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-inline-counter-label {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* CSFloat-1:1: trade volume bar. */
.csfloat-volume-bar {
width: 100%;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.csfloat-volume-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
border-radius: 3px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-volume-bar-marker {
position: absolute;
top: -2px;
width: 2px;
height: 10px;
background: oklch(0.98 0 0);
border-radius: 1px;
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: list of stats inline (separated by dot). */
.csfloat-inline-stats {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-inline-stats-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-inline-stats-item strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-inline-stats-sep {
color: var(--ink-4);
font-size: 8px;
}
.csfloat-inline-stats-sep::before { content: "•"; }
/* CSFloat-1:1: filter input wrapper for inline filter pill. */
.csfloat-filter-input-wrap {
position: relative;
display: inline-block;
}
.csfloat-filter-input-wrap input {
width: 80px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 4px 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-1);
text-align: center;
font-variant-numeric: tabular-nums;
outline: none;
transition: border-color 140ms ease;
}
.csfloat-filter-input-wrap input:focus { border-color: var(--cta); }
/* END sponsor tag + counter + volume bar + inline stats + filter input wrap */
/* CSFloat-1:1: 360-degree image viewer (item view). */
.csfloat-360-viewer {
position: relative;
aspect-ratio: 1;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: ew-resize;
}
.csfloat-360-viewer img {
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.csfloat-360-viewer-hint {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: oklch(0.10 0.008 260 / 0.65);
border: 1px solid var(--line-2);
border-radius: 999px;
color: oklch(0.92 0 0);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: none;
}
/* CSFloat-1:1: wear-bar slider (cosmetic float bar with 5 wear regions). */
.csfloat-wearbar {
position: relative;
width: 100%;
height: 6px;
background: linear-gradient(90deg,
oklch(0.78 0.18 152) 0%, oklch(0.78 0.18 152) 7%,
oklch(0.82 0.16 130) 7%, oklch(0.82 0.16 130) 15%,
oklch(0.82 0.16 80) 15%, oklch(0.82 0.16 80) 38%,
oklch(0.78 0.16 50) 38%, oklch(0.78 0.16 50) 45%,
oklch(0.70 0.18 30) 45%, oklch(0.70 0.18 30) 100%);
border-radius: 3px;
margin: 8px 0 4px;
}
.csfloat-wearbar-marker {
position: absolute;
top: 50%;
width: 3px;
height: 12px;
background: oklch(0.98 0 0);
border-radius: 2px;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.csfloat-wearbar-labels {
display: grid;
grid-template-columns: 7% 8% 23% 7% 55%;
font-family: var(--mono);
font-size: 8px;
color: var(--ink-4);
text-transform: uppercase;
letter-spacing: 0.04em;
gap: 1px;
}
.csfloat-wearbar-labels span {
text-align: center;
}
/* CSFloat-1:1: tabular wear text. */
.csfloat-wear-text {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
font-style: italic;
letter-spacing: -0.005em;
}
.csfloat-wear-text.fn { color: oklch(0.84 0.18 152); }
.csfloat-wear-text.mw { color: oklch(0.84 0.16 130); }
.csfloat-wear-text.ft { color: oklch(0.84 0.16 80); }
.csfloat-wear-text.ww { color: oklch(0.78 0.16 50); }
.csfloat-wear-text.bs { color: oklch(0.78 0.18 30); }
/* END 360 viewer + wearbar + wear text */
/* CSFloat-1:1: ledger row — for /admin financial reports. */
.csfloat-ledger-row {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 14px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
align-items: center;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-ledger-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-ledger-row-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-ledger-row-icon.in {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-ledger-row-icon.out {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-ledger-row-info {
min-width: 0;
}
.csfloat-ledger-row-desc {
font-size: 12px;
color: var(--ink-1);
margin: 0;
font-weight: 500;
}
.csfloat-ledger-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-ledger-row-amount {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-ledger-row-amount.in { color: oklch(0.84 0.18 152); }
.csfloat-ledger-row-amount.out { color: oklch(0.84 0.18 30); }
.csfloat-ledger-row-balance {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: csv export button. */
.csfloat-csv-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-1);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
text-decoration: none;
}
.csfloat-csv-btn:hover {
background: var(--bg-3);
color: var(--cta);
border-color: var(--cta);
}
.csfloat-csv-btn::before {
content: "↓";
font-size: 12px;
}
/* CSFloat-1:1: filter result count. */
.csfloat-result-count {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-result-count strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-result-count-of {
color: var(--ink-4);
}
/* END ledger row + csv btn + result count */
/* CSFloat-1:1: refresh button with rotation animation. */
.csfloat-refresh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 13px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-refresh-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-refresh-btn.spinning::before {
display: inline-block;
animation: csfloat-rotate 600ms cubic-bezier(0.4, 0, 0.6, 1);
}
/* CSFloat-1:1: panel with sticky title (used in profile sub-pages). */
.csfloat-sticky-panel {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-sticky-panel-header {
position: sticky;
top: 0;
background: oklch(0.18 0.008 260 / 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 12px 16px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 5;
}
.csfloat-sticky-panel-header-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-sticky-panel-body {
padding: 14px 16px;
}
/* CSFloat-1:1: search input pill with light-bar focus indicator. */
.csfloat-search-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
height: 38px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
position: relative;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-search-pill:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-search-pill-icon {
color: var(--ink-3);
font-size: 14px;
flex-shrink: 0;
transition: color 140ms ease;
}
.csfloat-search-pill:focus-within .csfloat-search-pill-icon {
color: var(--ink-1);
}
.csfloat-search-pill-input {
flex: 1 1 auto;
border: none;
background: transparent;
outline: none;
font-size: 13px;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
width: 0;
min-width: 0;
}
.csfloat-search-pill-input::placeholder { color: var(--ink-3); }
.csfloat-search-pill-shortcut {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
padding: 1px 5px;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* END refresh btn + sticky panel + search pill */
/* CSFloat-1:1: dot grid background. */
.csfloat-dot-bg {
position: relative;
background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 16px 16px;
}
/* CSFloat-1:1: large hero title with double underline. */
.csfloat-mega-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink-1);
text-align: center;
margin: 0 auto 12px;
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* CSFloat-1:1: dual line under hero title. */
.csfloat-mega-title-underline {
display: flex;
flex-direction: column;
gap: 3px;
align-items: center;
margin-bottom: 16px;
}
.csfloat-mega-title-underline-line {
width: 240px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
.csfloat-mega-title-underline-line.short {
width: 80px;
background: oklch(0.55 0.18 250 / 0.7);
height: 2px;
border-radius: 1px;
}
/* CSFloat-1:1: subtle background spotlight. */
.csfloat-bg-spotlight {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1200px;
height: 600px;
background: radial-gradient(
ellipse 60% 50% at center,
oklch(0.55 0.18 250 / 0.15),
transparent 70%
);
pointer-events: none;
z-index: -1;
filter: blur(32px);
}
/* CSFloat-1:1: text with serif italic accent (used in editorial heads). */
.csfloat-serif-accent {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
color: oklch(0.92 0.10 250);
}
/* CSFloat-1:1: hr decorative thick (used at top of page). */
.csfloat-thick-rule {
border: none;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--cta) 30%,
oklch(0.78 0.18 250) 50%,
var(--cta) 70%,
transparent 100%);
border-radius: 2px;
margin: 12px auto;
width: 240px;
}
/* CSFloat-1:1: spotlight container (for dynamic content). */
.csfloat-spotlight-container {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 16px;
padding: 40px 28px;
overflow: hidden;
isolation: isolate;
text-align: center;
}
.csfloat-spotlight-container::before {
content: "";
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 480px;
height: 240px;
background: radial-gradient(ellipse at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
z-index: -1;
filter: blur(32px);
}
/* END dot bg + mega title + spotlight + serif accent + thick rule + spotlight container */
/* CSFloat-1:1: timeline event icon variants (in /profile activity timeline). */
.csfloat-timeline-event {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-timeline-event:last-child { border-bottom: none; }
.csfloat-timeline-event-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-timeline-event-icon.purchase {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-timeline-event-icon.sale {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-timeline-event-icon.deposit {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-timeline-event-icon.withdraw {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-timeline-event-icon.notif {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-timeline-event-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-timeline-event-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-timeline-event-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-timeline-event-amount {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: auto;
text-align: right;
}
.csfloat-timeline-event-amount.positive { color: oklch(0.84 0.18 152); }
.csfloat-timeline-event-amount.negative { color: oklch(0.84 0.18 30); }
/* CSFloat-1:1: notification page filter pills. */
.csfloat-notif-filter-pills {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0;
margin-bottom: 12px;
}
.csfloat-notif-filter-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-notif-filter-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-notif-filter-pill.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
font-weight: 600;
}
.csfloat-notif-filter-pill-count {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* END timeline event variants + notif filter pills */
/* CSFloat-1:1: bid history mini list. */
.csfloat-bid-history {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 0;
max-height: 240px;
overflow-y: auto;
}
.csfloat-bid-history-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 10px;
padding: 6px 14px;
align-items: center;
font-size: 12px;
color: var(--ink-2);
}
.csfloat-bid-history-row:hover {
background: var(--bg-2);
}
.csfloat-bid-history-row-rank.top { color: oklch(0.84 0.16 80); }
/* CSFloat-1:1: auction countdown big. */
.csfloat-auction-countdown {
display: flex;
align-items: baseline;
gap: 8px;
padding: 14px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin: 12px 0;
}
.csfloat-auction-countdown-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-auction-countdown-time {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-auction-countdown.urgent {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-auction-countdown.urgent .csfloat-auction-countdown-time {
color: oklch(0.92 0.10 30);
}
/* CSFloat-1:1: bid input row (for placing a bid). */
.csfloat-bid-input {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
margin: 8px 0;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-bid-input:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-bid-input-prefix {
padding: 12px 14px;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 14px;
display: inline-flex;
align-items: center;
}
.csfloat-bid-input-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 12px 14px;
font-family: var(--mono);
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-bid-input-button {
padding: 0 22px;
background: var(--cta);
border: none;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease;
}
.csfloat-bid-input-button:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-bid-input-button:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg-3);
color: var(--ink-3);
}
/* END bid history + auction countdown + bid input */
/* CSFloat-1:1: settings sidebar nav (vertical tab list). */
.csfloat-settings-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-settings-nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-3);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-settings-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-settings-nav-link.active {
background: var(--bg-2);
color: var(--ink-1);
font-weight: 600;
border-color: var(--line-2);
}
.csfloat-settings-nav-link.active::before {
content: "";
position: absolute;
left: -1px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-settings-nav-link {
position: relative;
}
.csfloat-settings-nav-link-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
font-size: 13px;
flex-shrink: 0;
}
/* CSFloat-1:1: settings group section. */
.csfloat-settings-group-section {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 14px;
overflow: hidden;
}
.csfloat-settings-group-section-header {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-settings-group-section-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-settings-group-section-desc {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
line-height: 1.5;
}
.csfloat-settings-group-section-body {
padding: 14px 18px;
}
/* CSFloat-1:1: settings group row (reusable). */
.csfloat-settings-group-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-settings-group-row:first-child { padding-top: 0; }
.csfloat-settings-group-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.csfloat-settings-group-row-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-settings-group-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-settings-group-row-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.4;
}
/* END settings sidebar nav + settings group */
/* CSFloat-1:1: chat thread / messages list. */
.csfloat-thread {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 18px;
max-height: 480px;
overflow-y: auto;
}
.csfloat-thread::-webkit-scrollbar { width: 6px; }
.csfloat-thread::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-thread-msg {
display: flex;
gap: 8px;
max-width: 85%;
align-items: flex-start;
}
.csfloat-thread-msg.from-self {
align-self: flex-end;
flex-direction: row-reverse;
}
.csfloat-thread-msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-thread-msg-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-thread-msg-bubble {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 8px 12px;
font-size: 13px;
color: var(--ink-1);
line-height: 1.5;
position: relative;
}
.csfloat-thread-msg.from-self .csfloat-thread-msg-bubble {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
border-radius: 10px 10px 4px 10px;
}
.csfloat-thread-msg:not(.from-self) .csfloat-thread-msg-bubble {
border-radius: 10px 10px 10px 4px;
}
.csfloat-thread-msg-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.csfloat-thread-msg.from-self .csfloat-thread-msg-meta {
justify-content: flex-end;
}
.csfloat-thread-msg-status {
font-size: 9px;
color: oklch(0.78 0.18 152);
}
/* CSFloat-1:1: thread composer textarea. */
.csfloat-thread-composer {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 12px 14px;
background: var(--bg-1);
border-top: 1px solid var(--line);
}
.csfloat-thread-composer-text {
flex: 1 1 auto;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
color: var(--ink-1);
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
resize: none;
outline: none;
min-height: 32px;
max-height: 120px;
transition: border-color 140ms ease;
}
.csfloat-thread-composer-text:focus {
border-color: var(--cta);
}
.csfloat-thread-composer-send {
width: 32px;
height: 32px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 120ms ease, transform 80ms ease;
}
.csfloat-thread-composer-send:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-thread-composer-send:active {
transform: translateY(1px);
}
.csfloat-thread-composer-send:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg-3);
border-color: var(--line);
color: var(--ink-3);
}
/* END thread + composer */
/* CSFloat-1:1: hairline divider with brand accent dot. */
.csfloat-divider-with-dot {
display: flex;
align-items: center;
margin: 18px 0;
}
.csfloat-divider-with-dot::before,
.csfloat-divider-with-dot::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.csfloat-divider-with-dot::before {
background: linear-gradient(90deg, transparent 0%, var(--line) 100%);
}
.csfloat-divider-with-dot::after {
background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}
.csfloat-divider-with-dot-dot {
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
margin: 0 12px;
box-shadow: 0 0 0 4px var(--bg);
}
/* CSFloat-1:1: full-width container with scroll snap horizontal. */
.csfloat-snap-row {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px;
margin: 0 -4px;
scroll-padding: 4px;
}
.csfloat-snap-row::-webkit-scrollbar { height: 4px; }
.csfloat-snap-row::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-snap-row > * {
scroll-snap-align: start;
flex-shrink: 0;
}
/* CSFloat-1:1: inline edit field — for inline username/title editing. */
.csfloat-inline-edit {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-inline-edit:hover {
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-inline-edit-text {
font-size: 13px;
color: var(--ink-1);
}
.csfloat-inline-edit-icon {
font-size: 11px;
color: var(--ink-3);
opacity: 0;
transition: opacity 120ms ease;
}
.csfloat-inline-edit:hover .csfloat-inline-edit-icon {
opacity: 1;
}
.csfloat-inline-edit.editing {
background: var(--bg-1);
border-color: var(--cta);
padding: 0;
}
.csfloat-inline-edit-input {
flex: 1 1 auto;
border: none;
background: transparent;
outline: none;
font-size: 13px;
color: var(--ink-1);
padding: 4px 8px;
font-family: inherit;
}
/* CSFloat-1:1: tooltip-with-help icon. */
.csfloat-tooltip-help {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: help;
}
.csfloat-tooltip-help-text {
font-size: 11px;
color: var(--ink-3);
}
.csfloat-tooltip-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
}
.csfloat-tooltip-help-icon::before { content: "?"; }
/* END divider with dot + snap row + inline edit + tooltip help */
/* CSFloat-1:1: signed badge for verified accounts. */
.csfloat-signed-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-signed-badge::before {
content: "✓";
font-size: 9px;
font-weight: 700;
}
/* CSFloat-1:1: deposit method icon-bar. */
.csfloat-pay-icons {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-pay-icon {
width: 32px;
height: 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
/* CSFloat-1:1: receipt summary block (after purchase). */
.csfloat-receipt-block {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
margin: 12px 0;
}
.csfloat-receipt-block-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0 0 12px;
}
.csfloat-receipt-block-line {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 6px 0;
font-size: 13px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-receipt-block-line-label { color: var(--ink-3); }
.csfloat-receipt-block-line-value {
font-family: var(--mono);
font-weight: 500;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-receipt-block-total {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding-top: 12px;
margin-top: 6px;
border-top: 1px solid var(--line);
font-size: 14px;
}
.csfloat-receipt-block-total-label {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-receipt-block-total-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: success page big check (with celebration). */
.csfloat-success-page {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 24px;
gap: 18px;
}
.csfloat-success-page-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: oklch(0.30 0.04 152 / 0.32);
border: 2px solid oklch(0.62 0.18 152);
color: oklch(0.84 0.18 152);
font-size: 40px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
animation: csfloat-pop-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-success-page-icon::before {
content: "✓";
}
.csfloat-success-page-icon::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid oklch(0.62 0.18 152 / 0.4);
animation: csfloat-pulse-ring 1800ms ease-out infinite;
pointer-events: none;
}
.csfloat-success-page-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-success-page-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
max-width: 460px;
line-height: 1.6;
}
.csfloat-success-page-actions {
display: inline-flex;
gap: 8px;
margin-top: 12px;
}
/* END signed badge + pay icons + receipt block + success page */
/* CSFloat-1:1: row click-target overlay (whole row clickable). */
.csfloat-row-overlay-link {
position: absolute;
inset: 0;
z-index: 1;
cursor: pointer;
}
/* CSFloat-1:1: card + image flexible chassis. */
.csfloat-img-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
text-decoration: none;
cursor: pointer;
}
.csfloat-img-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55);
}
.csfloat-img-card-img {
aspect-ratio: 4 / 3;
background: var(--bg-2);
position: relative;
overflow: hidden;
}
.csfloat-img-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-img-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-img-card-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-img-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: button with right-side caret. */
.csfloat-btn-with-caret {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
color: var(--ink-1);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-btn-with-caret:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-btn-with-caret::after {
content: "▾";
font-size: 9px;
color: var(--ink-3);
margin-left: 2px;
transition: transform 200ms ease;
}
.csfloat-btn-with-caret.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: copy snippet box (for sharing URLs). */
.csfloat-copy-snippet {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
cursor: pointer;
user-select: all;
transition: background 120ms ease, border-color 120ms ease;
letter-spacing: -0.005em;
}
.csfloat-copy-snippet:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-copy-snippet-icon {
color: var(--ink-3);
font-size: 11px;
flex-shrink: 0;
margin-left: auto;
}
.csfloat-copy-snippet.copied {
background: oklch(0.30 0.04 152 / 0.32);
border-color: oklch(0.42 0.07 152 / 0.5);
color: oklch(0.84 0.18 152);
}
/* END row overlay link + img card + button with caret + copy snippet */
/* CSFloat-1:1: empty list with floating illustration. */
.csfloat-empty-illustration {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 24px;
gap: 14px;
position: relative;
}
.csfloat-empty-illustration::before {
content: "";
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.10),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-empty-illustration-icon {
position: relative;
z-index: 1;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--bg-1);
border: 2px solid var(--line);
color: var(--ink-3);
font-size: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-empty-illustration-title {
position: relative;
z-index: 1;
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-empty-illustration-desc {
position: relative;
z-index: 1;
font-size: 13px;
color: var(--ink-3);
margin: 0;
max-width: 320px;
line-height: 1.55;
}
.csfloat-empty-illustration-cta {
position: relative;
z-index: 1;
margin-top: 8px;
padding: 10px 20px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-empty-illustration-cta:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-empty-illustration-cta:active {
transform: translateY(1px);
}
/* CSFloat-1:1: timeline week separator (sub-day). */
.csfloat-timeline-week {
display: flex;
align-items: center;
gap: 8px;
margin: 18px 0 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-timeline-week-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.csfloat-timeline-week-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* CSFloat-1:1: confirmation strong text. */
.csfloat-confirm-text {
font-size: 14px;
color: var(--ink-1);
line-height: 1.6;
text-align: center;
}
.csfloat-confirm-text strong {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-confirm-text mark {
background: oklch(0.30 0.04 30 / 0.32);
color: oklch(0.92 0.10 30);
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
}
/* END empty illustration + timeline week + confirm text */
/* CSFloat-1:1: header search bar variant for sub-pages. */
.csfloat-page-search-bar {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
width: 100%;
max-width: 480px;
margin: 14px 0;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-page-search-bar:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-page-search-bar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px 0 16px;
color: var(--ink-3);
font-size: 14px;
pointer-events: none;
}
.csfloat-page-search-bar-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 10px 8px;
color: var(--ink-1);
font-size: 13px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-page-search-bar-input::placeholder { color: var(--ink-3); }
/* CSFloat-1:1: page header w/ avatar + name + meta. */
.csfloat-page-id-header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.csfloat-page-id-header-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--line-2);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-page-id-header-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-page-id-header-info { flex: 1 1 auto; min-width: 0; }
.csfloat-page-id-header-name {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.015em;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-page-id-header-meta {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-page-id-header-meta strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-page-id-header-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: actionable detail row — for sales / withdrawals. */
.csfloat-detail-action-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 6px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-detail-action-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-detail-action-row-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-detail-action-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-detail-action-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-detail-action-row-actions {
display: inline-flex;
gap: 4px;
}
/* END page search bar + page id header + detail action row */
/* CSFloat-1:1: card with metric + small chart side-by-side. */
.csfloat-metric-with-chart {
display: grid;
grid-template-columns: 1fr 80px;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
align-items: center;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-metric-with-chart:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-metric-with-chart-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-metric-with-chart-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-metric-with-chart-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-metric-with-chart-delta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-metric-with-chart-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-metric-with-chart-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-metric-with-chart-spark {
width: 80px;
height: 32px;
display: block;
}
/* CSFloat-1:1: stat fan-out (multiple stats horizontally). */
.csfloat-stat-fan {
display: flex;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-stat-fan-cell {
flex: 1 1 0;
padding: 14px 16px;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 2px;
text-align: center;
}
.csfloat-stat-fan-cell:last-child { border-right: none; }
@media (max-width: 540px) {
.csfloat-stat-fan {
flex-direction: column;
}
.csfloat-stat-fan-cell {
border-right: none;
border-bottom: 1px solid var(--line);
}
.csfloat-stat-fan-cell:last-child { border-bottom: none; }
}
.csfloat-stat-fan-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-stat-fan-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* CSFloat-1:1: page subnav (sub-section anchors). */
.csfloat-page-subnav {
display: flex;
gap: 0;
padding: 0 4px;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-page-subnav-link {
position: relative;
padding: 10px 16px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 140ms ease;
white-space: nowrap;
}
.csfloat-page-subnav-link:hover { color: var(--ink-1); }
.csfloat-page-subnav-link.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-page-subnav-link.active::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -1px;
height: 2px;
background: var(--ink-1);
border-radius: 1px;
}
/* END metric with chart + stat fan + page subnav */
/* CSFloat-1:1: chart with overlay legend on hover. */
.csfloat-chart-container {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
margin: 12px 0;
}
.csfloat-chart-overlay-legend {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
background: oklch(0.10 0.008 260 / 0.85);
border: 1px solid var(--line-2);
border-radius: 6px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-2);
pointer-events: none;
opacity: 0;
transition: opacity 240ms ease;
z-index: 4;
}
.csfloat-chart-container:hover .csfloat-chart-overlay-legend {
opacity: 1;
}
.csfloat-chart-overlay-legend-row {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-chart-overlay-legend-swatch {
width: 8px;
height: 8px;
border-radius: 2px;
flex-shrink: 0;
}
.csfloat-chart-overlay-legend-value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* CSFloat-1:1: tooltip pulse arrow (data-point hover). */
.csfloat-data-tooltip {
position: absolute;
z-index: 9300;
padding: 6px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-data-tooltip-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-bottom: 2px;
}
.csfloat-data-tooltip-value {
font-size: 13px;
color: var(--ink-1);
}
.csfloat-data-tooltip-meta {
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
}
/* CSFloat-1:1: chart guide line (vertical hover indicator). */
.csfloat-chart-guide-line {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: oklch(0.55 0.18 250 / 0.4);
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease;
}
.csfloat-chart-container:hover .csfloat-chart-guide-line {
opacity: 1;
}
/* CSFloat-1:1: chart range selector. */
.csfloat-chart-ranges {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 0;
}
.csfloat-chart-range {
background: transparent;
border: none;
padding: 4px 10px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
border-radius: 4px;
transition: background 140ms ease, color 140ms ease;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.csfloat-chart-range:hover { color: var(--ink-1); }
.csfloat-chart-range.active {
background: var(--bg);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* END chart container + chart overlay legend + data tooltip + chart guide + chart ranges */
/* CSFloat-1:1: live updating chip (price ticking). */
.csfloat-live-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-live-chip::before {
content: "";
width: 5px;
height: 5px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
/* CSFloat-1:1: animated number flip on update. */
@keyframes csfloat-num-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.csfloat-num-pulse {
display: inline-block;
animation: csfloat-num-pulse 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: stat row with delta label (e.g. profit/loss list). */
.csfloat-stat-with-delta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
gap: 12px;
}
.csfloat-stat-with-delta-label {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-with-delta-value {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-stat-with-delta-amount {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-delta-pct {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-delta-pct.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-delta-pct.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: scrollable price list (item history). */
.csfloat-price-list {
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
max-height: 360px;
overflow-y: auto;
}
.csfloat-price-list::-webkit-scrollbar { width: 6px; }
.csfloat-price-list::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-price-list-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
padding: 8px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
font-family: var(--mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-price-list-row:last-child { border-bottom: none; }
.csfloat-price-list-row:hover { background: var(--bg-2); }
.csfloat-price-list-row-time {
color: var(--ink-3);
font-size: 10px;
}
.csfloat-price-list-row-event {
color: var(--ink-2);
}
.csfloat-price-list-row-price {
color: var(--ink-1);
font-weight: 600;
text-align: right;
}
.csfloat-price-list-row-price.up { color: oklch(0.84 0.18 152); }
.csfloat-price-list-row-price.down { color: oklch(0.84 0.18 30); }
/* END live chip + num pulse + stat with delta + price list */
/* CSFloat-1:1: simple action menu (right click style). */
.csfloat-context-menu {
position: absolute;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
min-width: 180px;
z-index: 9300;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-context-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: transparent;
border: none;
cursor: pointer;
font-size: 12px;
color: var(--ink-2);
border-radius: 4px;
transition: background 80ms ease, color 80ms ease;
text-align: left;
}
.csfloat-context-menu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-context-menu-item-icon {
width: 14px;
height: 14px;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-context-menu-item:hover .csfloat-context-menu-item-icon {
color: var(--ink-1);
}
.csfloat-context-menu-item.danger {
color: oklch(0.84 0.18 30);
}
.csfloat-context-menu-item.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
color: oklch(0.92 0.18 30);
}
.csfloat-context-menu-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-context-menu-shortcut {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
/* CSFloat-1:1: stat ring (circular percent indicator). */
.csfloat-stat-ring {
position: relative;
width: 64px;
height: 64px;
display: inline-block;
}
.csfloat-stat-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-stat-ring-track {
fill: none;
stroke: var(--bg-2);
stroke-width: 6;
}
.csfloat-stat-ring-fill {
fill: none;
stroke: var(--cta);
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-ring-fill.success { stroke: oklch(0.62 0.18 152); }
.csfloat-stat-ring-fill.warning { stroke: oklch(0.78 0.16 80); }
.csfloat-stat-ring-fill.danger { stroke: oklch(0.62 0.18 30); }
.csfloat-stat-ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: tabular numeric with sign indicator. */
.csfloat-num-signed {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-num-signed.positive { color: oklch(0.84 0.18 152); }
.csfloat-num-signed.positive::before { content: "+"; }
.csfloat-num-signed.negative { color: oklch(0.84 0.18 30); }
.csfloat-num-signed.zero { color: var(--ink-3); }
/* END context menu + stat ring + num signed */
/* CSFloat-1:1: tile with rotated label badge (used on featured cards). */
.csfloat-rotated-badge {
position: absolute;
top: 18px;
right: -32px;
width: 140px;
text-align: center;
padding: 4px 0;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transform: rotate(45deg);
z-index: 4;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
pointer-events: none;
}
.csfloat-rotated-badge.success {
background: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-rotated-badge.danger {
background: oklch(0.60 0.18 30);
color: oklch(0.98 0 0);
}
.csfloat-rotated-badge.gold {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: card image hover-pan. */
.csfloat-img-pan {
position: relative;
overflow: hidden;
}
.csfloat-img-pan img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 6s linear;
}
.csfloat-img-pan:hover img {
transform: scale(1.08) translateY(-2%);
}
/* CSFloat-1:1: image cover with text overlay (heading-style). */
.csfloat-cover-card {
position: relative;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
display: flex;
align-items: flex-end;
padding: 18px;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.csfloat-cover-card-img {
position: absolute;
inset: 0;
}
.csfloat-cover-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cover-card:hover .csfloat-cover-card-img img {
transform: scale(1.04);
}
.csfloat-cover-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 40%,
rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.csfloat-cover-card-content {
position: relative;
z-index: 1;
color: oklch(0.98 0 0);
}
.csfloat-cover-card-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.55 0.18 250 / 0.5);
border: 1px solid oklch(0.55 0.18 250 / 0.7);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(0.98 0 0);
margin-bottom: 6px;
}
.csfloat-cover-card-title {
font-size: 18px;
font-weight: 700;
margin: 0;
letter-spacing: -0.015em;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.csfloat-cover-card-meta {
font-family: var(--mono);
font-size: 11px;
color: rgba(255,255,255,0.75);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* END rotated badge + img pan + cover card */
/* CSFloat-1:1: vertical timeline with line. */
.csfloat-vtimeline {
position: relative;
padding-left: 24px;
}
.csfloat-vtimeline::before {
content: "";
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--line);
}
.csfloat-vtimeline-event {
position: relative;
padding: 6px 0 18px;
}
.csfloat-vtimeline-event::before {
content: "";
position: absolute;
left: -22px;
top: 8px;
width: 9px;
height: 9px;
background: var(--bg);
border: 2px solid var(--line-2);
border-radius: 50%;
}
.csfloat-vtimeline-event.success::before {
border-color: oklch(0.62 0.18 152);
background: oklch(0.30 0.04 152 / 0.32);
}
.csfloat-vtimeline-event.warning::before {
border-color: oklch(0.78 0.16 80);
background: oklch(0.30 0.05 80 / 0.32);
}
.csfloat-vtimeline-event.error::before {
border-color: oklch(0.62 0.18 30);
background: oklch(0.30 0.04 30 / 0.32);
}
.csfloat-vtimeline-event.info::before {
border-color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
}
.csfloat-vtimeline-event-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
margin-bottom: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-vtimeline-event-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-vtimeline-event-desc {
font-size: 12px;
color: var(--ink-3);
margin: 2px 0 0;
line-height: 1.55;
}
/* CSFloat-1:1: in-page nav anchor sidebar (TOC). */
.csfloat-toc {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 0 0 14px;
border-left: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
}
.csfloat-toc-link {
padding: 4px 8px;
color: var(--ink-3);
text-decoration: none;
border-radius: 4px;
transition: color 120ms ease, background 120ms ease;
display: block;
}
.csfloat-toc-link:hover {
color: var(--ink-1);
background: var(--bg-2);
}
.csfloat-toc-link.active {
color: var(--cta);
font-weight: 600;
background: oklch(0.30 0.05 250 / 0.12);
}
.csfloat-toc-link.indent-1 { padding-left: 16px; }
.csfloat-toc-link.indent-2 { padding-left: 24px; }
.csfloat-toc-link.indent-3 { padding-left: 32px; }
/* CSFloat-1:1: print-friendly table. */
.csfloat-print-table {
width: 100%;
border-collapse: collapse;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 12px;
}
.csfloat-print-table th,
.csfloat-print-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.csfloat-print-table th {
background: var(--bg-2);
font-weight: 600;
color: var(--ink-1);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* END vtimeline + toc + print table */
/* CSFloat-1:1: tag with corner cutout (faceted styling). */
.csfloat-cut-tag {
display: inline-block;
padding: 4px 14px 4px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.csfloat-cut-tag.success { background: oklch(0.62 0.18 152); color: oklch(0.10 0 0); }
.csfloat-cut-tag.danger { background: oklch(0.60 0.18 30); color: oklch(0.98 0 0); }
.csfloat-cut-tag.warning { background: oklch(0.78 0.16 80); color: oklch(0.10 0 0); }
/* CSFloat-1:1: numeric value with sign animation. */
.csfloat-num-animate {
display: inline-block;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
transition: color 240ms ease;
}
.csfloat-num-animate.flash-up {
color: oklch(0.84 0.18 152);
animation: csfloat-num-pulse 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-num-animate.flash-down {
color: oklch(0.84 0.18 30);
animation: csfloat-num-pulse 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CSFloat-1:1: trade tape (live trade scroll). */
.csfloat-trade-tape {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
margin: 12px 0;
}
.csfloat-trade-tape-label {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(0.86 0.18 30);
}
.csfloat-trade-tape-label::before {
content: "";
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-trade-tape-track {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 24px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.csfloat-trade-tape-content {
display: inline-flex;
gap: 24px;
flex-shrink: 0;
animation: pulse-scroll 60s linear infinite;
}
.csfloat-trade-tape:hover .csfloat-trade-tape-content {
animation-play-state: paused;
}
.csfloat-trade-tape-trade {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trade-tape-trade-name {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-trade-tape-trade-price {
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-trade-tape-trade-arrow {
color: var(--ink-4);
font-size: 9px;
}
.csfloat-trade-tape-trade-time {
color: var(--ink-4);
font-size: 10px;
}
/* END cut tag + num animate + trade tape */
/* CSFloat-1:1: page hero with image background. */
.csfloat-image-hero {
position: relative;
padding: 80px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
text-align: center;
margin-bottom: 24px;
isolation: isolate;
}
.csfloat-image-hero-bg {
position: absolute;
inset: 0;
z-index: -1;
}
.csfloat-image-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
filter: blur(6px);
}
.csfloat-image-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
var(--bg-1) 100%);
}
.csfloat-image-hero-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
margin-bottom: 12px;
}
.csfloat-image-hero-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 8px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.csfloat-image-hero-desc {
font-size: clamp(14px, 1.5vw, 16px);
color: var(--ink-2);
margin: 0 auto 16px;
max-width: 540px;
line-height: 1.6;
}
.csfloat-image-hero-actions {
display: inline-flex;
gap: 10px;
}
/* CSFloat-1:1: feature row with image on the side. */
.csfloat-feature-side {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: center;
padding: 32px 0;
}
@media (max-width: 820px) {
.csfloat-feature-side {
grid-template-columns: 1fr;
}
.csfloat-feature-side.reverse {
flex-direction: column-reverse;
}
.csfloat-feature-side.reverse .csfloat-feature-side-img { order: 2; }
}
.csfloat-feature-side.reverse .csfloat-feature-side-text { order: 2; }
.csfloat-feature-side.reverse .csfloat-feature-side-img { order: 1; }
.csfloat-feature-side-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-feature-side-tag {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 4px;
}
.csfloat-feature-side-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-feature-side-desc {
font-size: 15px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
max-width: 460px;
}
.csfloat-feature-side-list {
list-style: none;
padding: 0;
margin: 8px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-feature-side-list-item {
position: relative;
padding-left: 22px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.6;
}
.csfloat-feature-side-list-item::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
width: 16px;
height: 16px;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-feature-side-img {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-feature-side-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
/* END image hero + feature side row */
/* CSFloat-1:1: hero with split layout (text + image columns). */
.csfloat-hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
padding: 48px 0;
}
@media (max-width: 820px) {
.csfloat-hero-split {
grid-template-columns: 1fr;
gap: 24px;
}
}
.csfloat-hero-split-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-hero-split-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 4px;
}
.csfloat-hero-split-title {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.05;
}
.csfloat-hero-split-desc {
font-size: clamp(15px, 1.6vw, 18px);
color: var(--ink-3);
margin: 0;
line-height: 1.65;
max-width: 480px;
}
.csfloat-hero-split-actions {
display: inline-flex;
gap: 10px;
margin-top: 10px;
}
.csfloat-hero-split-img {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow: hidden;
}
.csfloat-hero-split-img::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 50% at 50% 50%,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
pointer-events: none;
}
.csfloat-hero-split-img img {
position: relative;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6));
}
/* CSFloat-1:1: shadow tile (subtle dark card with hover glow). */
.csfloat-shadow-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-shadow-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.55),
0 0 0 1px var(--line-2);
}
/* CSFloat-1:1: chip with right-click context indicator. */
.csfloat-chip-context {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-chip-context::after {
content: "▾";
font-size: 8px;
color: var(--ink-3);
margin-left: 2px;
}
.csfloat-chip-context:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END hero split + shadow tile + chip context */
/* CSFloat-1:1: page wrap with sidebar layout. */
.csfloat-page-with-rail {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 24px;
align-items: start;
margin-top: 8px;
}
@media (max-width: 1100px) {
.csfloat-page-with-rail {
grid-template-columns: 1fr;
gap: 12px;
}
}
.csfloat-page-with-rail-rail {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 14px;
align-self: start;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.csfloat-page-with-rail-content {
min-width: 0;
}
/* CSFloat-1:1: sidebar section group (left rail). */
.csfloat-rail-section {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-rail-section:last-child { border-bottom: none; padding-bottom: 0; }
.csfloat-rail-section-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin: 0 0 4px;
padding: 0 8px;
}
.csfloat-rail-section-link {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
border-radius: 6px;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-rail-section-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-rail-section-link.active {
background: var(--bg-2);
color: var(--cta);
font-weight: 600;
}
.csfloat-rail-section-link-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--ink-3);
}
.csfloat-rail-section-link.active .csfloat-rail-section-link-icon {
color: var(--cta);
}
.csfloat-rail-section-link-count {
margin-left: auto;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: featured stat strip (used at top of /admin dash). */
.csfloat-featured-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 16px 0;
}
/* END page with rail + rail section + featured stats */
/* CSFloat-1:1: small chevron-only icon button. */
.csfloat-chev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 9px;
cursor: pointer;
transition: color 100ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chev:hover { color: var(--ink-1); }
.csfloat-chev.up::before { content: "▴"; }
.csfloat-chev.down::before { content: "▾"; }
.csfloat-chev.left::before { content: "◂"; }
.csfloat-chev.right::before { content: "▸"; }
/* CSFloat-1:1: card with hover-show actions (top-right). */
.csfloat-card-with-hover-actions:hover .csfloat-card-with-hover-actions-actions {
opacity: 1;
transform: translateY(0);
}
/* CSFloat-1:1: hover-only secondary text (e.g. trade duration). */
.csfloat-hover-text {
opacity: 0;
transition: opacity 240ms ease;
}
*:hover > .csfloat-hover-text {
opacity: 1;
}
/* CSFloat-1:1: keyboard hint inline. */
.csfloat-kbd-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
.csfloat-kbd-hint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
padding: 1px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: 0.04em;
}
/* CSFloat-1:1: copy-to-clipboard inline label. */
.csfloat-copyable {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
padding: 2px 6px;
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
transition: background 120ms ease, border-color 120ms ease;
}
.csfloat-copyable:hover {
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-copyable::after {
content: "📋";
filter: grayscale(1) opacity(0.5);
font-size: 10px;
transition: filter 120ms ease;
}
.csfloat-copyable:hover::after {
filter: grayscale(0) opacity(1);
}
.csfloat-copyable.copied::after {
content: "✓";
color: oklch(0.84 0.18 152);
filter: none;
}
/* END chev + hover actions card + hover text + kbd hint + copyable */
/* CSFloat-1:1: tag column for compact lists. */
.csfloat-tag-col {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
/* CSFloat-1:1: tag row for inline labels. */
.csfloat-tag-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* CSFloat-1:1: scroll-fade horizontal indicator. */
.csfloat-scroll-fade-h {
position: relative;
}
.csfloat-scroll-fade-h::before,
.csfloat-scroll-fade-h::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 32px;
pointer-events: none;
z-index: 2;
}
.csfloat-scroll-fade-h::before {
left: 0;
background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.csfloat-scroll-fade-h::after {
right: 0;
background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
/* CSFloat-1:1: scroll-fade vertical indicator. */
.csfloat-scroll-fade-v {
position: relative;
}
.csfloat-scroll-fade-v::before,
.csfloat-scroll-fade-v::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 32px;
pointer-events: none;
z-index: 2;
}
.csfloat-scroll-fade-v::before {
top: 0;
background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}
.csfloat-scroll-fade-v::after {
bottom: 0;
background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
}
/* CSFloat-1:1: nav style mark (for current page indicator). */
.csfloat-current-mark {
position: absolute;
left: -1px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 1px;
}
/* CSFloat-1:1: subtitle separator for page heads. */
.csfloat-subtitle-sep {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-subtitle-sep-dot {
width: 4px;
height: 4px;
background: var(--ink-4);
border-radius: 50%;
}
/* CSFloat-1:1: contextual help link. */
.csfloat-help-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--cta);
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-help-link:hover { color: oklch(0.78 0.18 250); }
.csfloat-help-link::after {
content: "↗";
font-size: 11px;
opacity: 0.7;
}
/* END tag col/row + scroll fade + current mark + subtitle sep + help link */
/* CSFloat-1:1: stat header — for prominent KPI placement. */
.csfloat-stat-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.csfloat-stat-header::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.12),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-stat-header-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-header-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.csfloat-stat-header-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
/* CSFloat-1:1: row separator with section title. */
.csfloat-row-sep-title {
display: flex;
align-items: baseline;
gap: 12px;
padding: 14px 0 10px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.csfloat-row-sep-title-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-row-sep-title-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-row-sep-title-action {
margin-left: auto;
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-row-sep-title-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: dialog with full-width image header. */
.csfloat-dialog-with-cover {
width: min(92vw, 480px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65);
overflow: hidden;
}
.csfloat-dialog-cover {
aspect-ratio: 16 / 9;
background: var(--bg-2);
position: relative;
overflow: hidden;
}
.csfloat-dialog-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-dialog-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
oklch(0.18 0.008 260 / 0.55) 100%);
pointer-events: none;
}
.csfloat-dialog-cover-content {
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-dialog-cover-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-dialog-cover-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-dialog-cover-actions {
display: flex;
gap: 8px;
margin-top: 12px;
justify-content: flex-end;
}
/* END stat header + row sep title + dialog with cover */
/* CSFloat-1:1: tile with split icon + content layout. */
.csfloat-icon-tile {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
text-decoration: none;
cursor: pointer;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease;
}
.csfloat-icon-tile:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-1px);
}
.csfloat-icon-tile-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.csfloat-icon-tile-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-icon-tile-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-icon-tile-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-icon-tile-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-icon-tile-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-icon-tile-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* CSFloat-1:1: pill bar with icon (used in /admin status overview). */
.csfloat-pill-bar {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-pill-bar-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
}
.csfloat-pill-bar.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-pill-bar.success .csfloat-pill-bar-icon {
color: oklch(0.84 0.18 152);
}
.csfloat-pill-bar.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-pill-bar.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: dual-color stat callout. */
.csfloat-dual-stat {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-dual-stat-cell {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
border-right: 1px solid var(--line);
}
.csfloat-dual-stat-cell:last-child { border-right: none; }
.csfloat-dual-stat-cell-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-dual-stat-cell-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-dual-stat-cell.up .csfloat-dual-stat-cell-value { color: oklch(0.84 0.18 152); }
.csfloat-dual-stat-cell.down .csfloat-dual-stat-cell-value { color: oklch(0.84 0.18 30); }
/* END icon tile + pill bar + dual stat */
/* CSFloat-1:1: tag with star prefix (rare items). */
.csfloat-star-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.06 330 / 0.32);
border: 1px solid oklch(0.42 0.10 330 / 0.5);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.20 330);
}
.csfloat-star-tag::before {
content: "★";
font-size: 9px;
color: oklch(0.86 0.20 330);
}
/* CSFloat-1:1: stat-row variants (used in /admin overview). */
.csfloat-admin-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.csfloat-admin-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-admin-stat-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
word-break: break-all;
}
.csfloat-admin-stat-value.large {
font-size: 28px;
}
.csfloat-admin-stat-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: subtle key-value list (for receipts / configs). */
.csfloat-kv-list {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-kv-list-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-kv-list-row:last-child { border-bottom: none; }
.csfloat-kv-list-key {
flex-shrink: 0;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
min-width: 100px;
}
.csfloat-kv-list-value {
flex: 1 1 auto;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
text-align: right;
word-break: break-all;
}
/* CSFloat-1:1: action card grid (used for admin shortcuts). */
.csfloat-shortcut-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 12px 0;
}
.csfloat-shortcut-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-shortcut-tile:hover {
border-color: var(--cta);
transform: translateY(-2px);
}
.csfloat-shortcut-tile-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.csfloat-shortcut-tile-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-shortcut-tile-name {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-shortcut-tile-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
/* END star tag + admin stat + kv list + shortcut grid */
/* CSFloat-1:1: card with row-aligned label + value (used in /admin). */
.csfloat-detail-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-detail-card-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 14px;
padding: 8px 0;
align-items: center;
border-bottom: 1px solid var(--line);
}
.csfloat-detail-card-row:last-child { border-bottom: none; }
.csfloat-detail-card-row-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-detail-card-row-value {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
word-break: break-word;
}
/* CSFloat-1:1: page action group (right-aligned). */
.csfloat-page-action-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-page-action-group-spacer {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 4px;
}
/* CSFloat-1:1: chip for filter status. */
.csfloat-filter-applied-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-filter-applied-chip::before {
content: "✓";
font-size: 9px;
}
/* CSFloat-1:1: confirm checkbox row. */
.csfloat-confirm-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
margin: 8px 0;
}
.csfloat-confirm-checkbox-input {
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--cta);
}
.csfloat-confirm-checkbox-text {
font-size: 12px;
color: var(--ink-2);
line-height: 1.55;
}
.csfloat-confirm-checkbox-text strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-confirm-checkbox-text a {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
}
/* END detail card + page action group + filter chip + confirm checkbox */
/* CSFloat-1:1: nav search trending suggestions (typeahead w/o input). */
.csfloat-trending-suggest {
padding: 8px 0;
}
.csfloat-trending-suggest-title {
padding: 0 14px 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-trending-suggest-row {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 10px;
padding: 6px 14px;
cursor: pointer;
font-size: 12px;
color: var(--ink-2);
transition: background 80ms ease, color 80ms ease;
align-items: center;
}
.csfloat-trending-suggest-row:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-trending-suggest-rank {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-trending-suggest-rank.top { color: oklch(0.84 0.16 80); }
.csfloat-trending-suggest-name {
font-weight: 500;
}
.csfloat-trending-suggest-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: search recent items — quick history list. */
.csfloat-search-recent {
padding: 4px 0;
border-top: 1px solid var(--line);
}
.csfloat-search-recent-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
cursor: pointer;
font-size: 12px;
color: var(--ink-2);
transition: background 80ms ease, color 80ms ease;
}
.csfloat-search-recent-row:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-search-recent-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 12px;
opacity: 0.7;
}
.csfloat-search-recent-text {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-search-recent-clear {
background: transparent;
border: none;
color: var(--ink-4);
cursor: pointer;
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
transition: color 120ms ease, background 120ms ease;
opacity: 0;
transition: opacity 120ms ease;
}
.csfloat-search-recent-row:hover .csfloat-search-recent-clear {
opacity: 1;
}
.csfloat-search-recent-clear:hover {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: search empty state. */
.csfloat-search-empty {
padding: 32px 20px;
text-align: center;
color: var(--ink-3);
}
.csfloat-search-empty-icon {
font-size: 28px;
color: var(--ink-4);
margin-bottom: 8px;
}
.csfloat-search-empty-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin: 0 0 4px;
}
.csfloat-search-empty-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* END trending suggest + search recent + search empty */
/* CSFloat-1:1: stat row with trend arrow inline. */
.csfloat-stat-trendrow {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
}
.csfloat-stat-trendrow-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-trendrow-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-trendrow-change {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 2px;
}
.csfloat-stat-trendrow-change.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-trendrow-change.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-trendrow-change.up::before { content: "▲"; font-size: 8px; }
.csfloat-stat-trendrow-change.down::before { content: "▼"; font-size: 8px; }
/* CSFloat-1:1: chart container with multi-stat tiles below. */
.csfloat-chart-with-stats {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin: 12px 0;
}
.csfloat-chart-with-stats-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-chart-with-stats-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-chart-with-stats-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-chart-with-stats-stat-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: alert banner with icon + close. */
.csfloat-alert-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 8px;
font-size: 13px;
color: var(--ink-1);
margin: 8px 0;
}
.csfloat-alert-strip.success {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.92 0.10 152);
}
.csfloat-alert-strip.warning {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.92 0.10 80);
}
.csfloat-alert-strip.danger {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
color: oklch(0.92 0.10 30);
}
.csfloat-alert-strip-icon {
font-size: 14px;
flex-shrink: 0;
}
.csfloat-alert-strip-text {
flex: 1 1 auto;
line-height: 1.5;
font-size: 12px;
}
.csfloat-alert-strip-close {
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 4px;
margin-left: 4px;
opacity: 0.6;
transition: opacity 120ms ease;
}
.csfloat-alert-strip-close:hover { opacity: 1; }
/* END stat trend row + chart with stats + alert strip */
/* CSFloat-1:1: list-item with metadata grid (admin views). */
.csfloat-list-item-grid {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-list-item-grid:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-list-item-grid-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-list-item-grid-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-list-item-grid-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-list-item-grid-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-list-item-grid-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: -0.005em;
}
.csfloat-list-item-grid-meta-sep {
width: 1px;
height: 9px;
background: var(--line);
}
.csfloat-list-item-grid-actions {
display: inline-flex;
gap: 4px;
flex-shrink: 0;
}
/* CSFloat-1:1: form group label + input + help (vertical). */
.csfloat-form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.csfloat-form-group-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-form-group-help {
font-size: 11px;
color: var(--ink-4);
line-height: 1.5;
margin-top: 2px;
}
.csfloat-form-group-help.error { color: oklch(0.84 0.18 30); }
/* CSFloat-1:1: stack of inputs in a form. */
.csfloat-form-stack {
display: flex;
flex-direction: column;
gap: 14px;
margin: 12px 0;
}
.csfloat-form-stack.tight { gap: 8px; }
.csfloat-form-stack.loose { gap: 24px; }
/* CSFloat-1:1: form actions divider. */
.csfloat-form-divider {
height: 1px;
background: var(--line);
margin: 14px 0;
}
/* END list item grid + form group + form stack + divider */
/* CSFloat-1:1: data import / export panel. */
.csfloat-import-export-panel {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
margin: 12px 0;
}
.csfloat-import-export-panel-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.csfloat-import-export-panel-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 12px;
line-height: 1.55;
}
.csfloat-import-export-panel-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: collapsible advanced options toggle. */
.csfloat-advanced-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: var(--cta);
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 6px 0;
transition: color 120ms ease;
}
.csfloat-advanced-toggle:hover {
color: oklch(0.78 0.18 250);
}
.csfloat-advanced-toggle::after {
content: "▾";
font-size: 9px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-advanced-toggle.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: keyboard shortcut bar. */
.csfloat-kbd-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-kbd-row:last-child { border-bottom: none; }
.csfloat-kbd-row-name {
font-size: 13px;
color: var(--ink-2);
flex: 1 1 auto;
}
.csfloat-kbd-row-shortcut {
display: inline-flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
/* CSFloat-1:1: settings save bar (sticky bottom, appears on edit). */
.csfloat-settings-save-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: oklch(0.18 0.008 260 / 0.92);
border: 1px solid var(--line-2);
border-radius: 999px;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 8800;
animation: csfloat-pop-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-settings-save-bar-text {
font-size: 13px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-settings-save-bar-text strong {
color: var(--ink-1);
font-weight: 600;
}
/* END import/export panel + advanced toggle + kbd row + settings save bar */
/* CSFloat-1:1: text content with hairline border (used in modal sub-content). */
.csfloat-bordered-content {
padding: 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.6;
}
/* CSFloat-1:1: sub-section title (within a panel). */
.csfloat-subsection-title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 16px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.csfloat-subsection-title-action {
font-size: 11px;
color: var(--cta);
font-weight: 500;
text-transform: none;
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-subsection-title-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: nav-style tab list with badge chip. */
.csfloat-tab-with-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: none;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 6px;
transition: color 140ms ease, background 140ms ease;
}
.csfloat-tab-with-chip:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-tab-with-chip.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-tab-with-chip-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 14px;
padding: 0 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-tab-with-chip.active .csfloat-tab-with-chip-chip {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
/* CSFloat-1:1: subtle accent text. */
.csfloat-accent-text {
color: var(--cta);
font-weight: 600;
}
.csfloat-accent-text:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: simple loading spinner with label. */
.csfloat-loading-state {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
/* END bordered content + subsection title + tab with chip + accent text + loading state */
/* CSFloat-1:1: outline ring around important content. */
.csfloat-ring {
position: relative;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--cta);
border-radius: 12px;
box-shadow: 0 0 0 1px oklch(0.55 0.18 250 / 0.32);
}
/* CSFloat-1:1: gradient ring (rare/featured items). */
.csfloat-rare-ring {
position: relative;
padding: 14px;
background: var(--bg-1);
border-radius: 12px;
}
.csfloat-rare-ring::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(135deg,
oklch(0.62 0.27 330) 0%,
oklch(0.55 0.18 250) 50%,
oklch(0.62 0.27 330) 100%);
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* CSFloat-1:1: float decimal display (CSFloat's signature element). */
.csfloat-float-decimal {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-float-decimal-num {
font-weight: 500;
}
.csfloat-float-decimal-rank {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-float-decimal-rank::before {
content: "(#";
color: var(--ink-3);
}
.csfloat-float-decimal-rank::after {
content: ")";
color: var(--ink-3);
}
/* CSFloat-1:1: float-bar gradient inline. */
.csfloat-float-bar-inline {
position: relative;
width: 100px;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg,
oklch(0.65 0.18 30) 0%,
oklch(0.78 0.16 50) 18%,
oklch(0.82 0.16 80) 35%,
oklch(0.78 0.18 152) 65%,
oklch(0.65 0.18 30) 100%);
display: inline-block;
vertical-align: middle;
}
.csfloat-float-bar-inline-thumb {
position: absolute;
top: 50%;
width: 2px;
height: 7px;
background: oklch(0.98 0 0);
border-radius: 1px;
transform: translate(-50%, -50%);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: trade-hold info row. */
.csfloat-tradehold-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: oklch(0.92 0.10 80);
letter-spacing: -0.005em;
}
.csfloat-tradehold-row-icon {
font-size: 14px;
flex-shrink: 0;
}
.csfloat-tradehold-row-text {
flex: 1 1 auto;
}
.csfloat-tradehold-row-time {
font-weight: 600;
color: oklch(0.96 0.06 80);
font-variant-numeric: tabular-nums;
}
/* END outline ring + rare ring + float decimal + float bar inline + tradehold row */
/* CSFloat-1:1: csfloat-grade gradient ring effect (premium card outline). */
.csfloat-premium-ring {
position: relative;
background: var(--bg-1);
border-radius: 12px;
padding: 14px;
isolation: isolate;
}
.csfloat-premium-ring::before {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250) 0%,
oklch(0.62 0.27 330) 50%,
oklch(0.55 0.18 250) 100%);
border-radius: inherit;
z-index: -1;
}
.csfloat-premium-ring::after {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250 / 0.45) 0%,
oklch(0.62 0.27 330 / 0.45) 50%,
oklch(0.55 0.18 250 / 0.45) 100%);
border-radius: inherit;
z-index: -2;
filter: blur(16px);
opacity: 0;
transition: opacity 320ms ease;
}
.csfloat-premium-ring:hover::after {
opacity: 1;
}
/* CSFloat-1:1: rotation animation for loading spinners (alternative). */
@keyframes csfloat-pendulum {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
.csfloat-pendulum {
display: inline-block;
animation: csfloat-pendulum 1600ms ease-in-out infinite;
transform-origin: top center;
}
/* CSFloat-1:1: bouncing dot loader. */
@keyframes csfloat-bounce-dot {
0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
.csfloat-bounce-dots {
display: inline-flex;
gap: 4px;
align-items: center;
}
.csfloat-bounce-dots-dot {
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
animation: csfloat-bounce-dot 1200ms ease-in-out infinite;
}
.csfloat-bounce-dots-dot:nth-child(2) { animation-delay: 200ms; }
.csfloat-bounce-dots-dot:nth-child(3) { animation-delay: 400ms; }
/* CSFloat-1:1: confetti for celebration (purchase complete, etc.). */
@keyframes csfloat-confetti-fall {
0% { transform: translateY(-100vh) rotate(0); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.csfloat-confetti {
position: fixed;
top: 0;
width: 8px;
height: 8px;
pointer-events: none;
z-index: 9999;
animation: csfloat-confetti-fall 3s ease-in forwards;
}
.csfloat-confetti.blue { background: var(--cta); }
.csfloat-confetti.pink { background: oklch(0.62 0.27 330); }
.csfloat-confetti.green { background: oklch(0.62 0.18 152); }
.csfloat-confetti.gold { background: oklch(0.78 0.16 80); }
/* CSFloat-1:1: success banner pulse animation. */
@keyframes csfloat-success-pulse {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.18 152 / 0.4); }
50% { box-shadow: 0 0 0 12px oklch(0.62 0.18 152 / 0); }
}
.csfloat-success-pulse {
animation: csfloat-success-pulse 1800ms ease-in-out 2;
}
/* END premium ring + pendulum + bounce dots + confetti + success pulse */
/* CSFloat-1:1: helper utilities — visibility/contrast (a11y). */
.csfloat-contrast-high {
filter: contrast(1.15);
}
.csfloat-contrast-low {
filter: contrast(0.92);
}
.csfloat-saturate-low {
filter: saturate(0.7);
}
.csfloat-grayscale {
filter: grayscale(1);
}
/* CSFloat-1:1: nav notification badge dot (subtle, no count). */
.csfloat-nav-dot {
position: relative;
display: inline-flex;
}
.csfloat-nav-dot::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
background: var(--cta);
border: 2px solid var(--bg);
border-radius: 50%;
pointer-events: none;
}
.csfloat-nav-dot.danger::after {
background: oklch(0.55 0.18 30);
}
.csfloat-nav-dot.success::after {
background: oklch(0.62 0.18 152);
}
.csfloat-nav-dot.warning::after {
background: oklch(0.78 0.16 80);
}
/* CSFloat-1:1: brand badge (small chip with icon). */
.csfloat-brand-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
}
.csfloat-brand-badge-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 11px;
font-weight: 700;
}
/* CSFloat-1:1: card overlay info row (used on hover). */
.csfloat-card-info-row {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px 10px;
background: linear-gradient(180deg,
transparent 0%,
oklch(0.10 0.008 260 / 0.85) 100%);
font-family: var(--mono);
font-size: 10px;
color: oklch(0.92 0 0);
display: flex;
justify-content: space-between;
z-index: 3;
pointer-events: none;
}
.csfloat-card-info-row strong {
color: oklch(0.98 0 0);
font-weight: 600;
}
/* CSFloat-1:1: glow card (hovers add subtle glow). */
.csfloat-glow-on-hover {
transition: box-shadow 280ms ease;
}
.csfloat-glow-on-hover:hover {
box-shadow: 0 0 24px oklch(0.55 0.18 250 / 0.18),
0 14px 36px rgba(0,0,0,0.55);
}
/* END contrast filters + nav dot + brand badge + card info row + glow on hover */
/* CSFloat-1:1: notif badge — small floating count for nav icons. */
.csfloat-notif-bubble {
position: absolute;
top: -3px;
right: -3px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 2px solid var(--bg);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
pointer-events: none;
letter-spacing: -0.01em;
}
.csfloat-notif-bubble.dot {
min-width: 10px;
height: 10px;
padding: 0;
border-width: 1.5px;
}
.csfloat-notif-bubble.accent { background: var(--cta); }
.csfloat-notif-bubble.success { background: oklch(0.62 0.18 152); color: oklch(0.10 0 0); }
/* CSFloat-1:1: small chip notification (under inputs). */
.csfloat-input-notif {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 4px;
letter-spacing: -0.005em;
}
.csfloat-input-notif.error {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
color: oklch(0.84 0.18 30);
}
.csfloat-input-notif.success {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.84 0.18 152);
}
.csfloat-input-notif-icon {
font-size: 11px;
}
/* CSFloat-1:1: simple price input with currency. */
.csfloat-price-input {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
width: 140px;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-price-input:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-price-input-currency {
padding: 0 10px;
background: var(--bg-2);
border-right: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--mono);
font-size: 13px;
display: inline-flex;
align-items: center;
}
.csfloat-price-input-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 6px 10px;
font-family: var(--mono);
font-size: 13px;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
outline: none;
text-align: right;
width: 0;
min-width: 0;
}
/* END notif bubble + input notif + price input */
/* CSFloat-1:1: hover-highlight row (used in dense lists). */
.csfloat-hover-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 6px;
transition: background 100ms ease;
cursor: pointer;
}
.csfloat-hover-row:hover {
background: var(--bg-2);
}
/* CSFloat-1:1: data dense table headers. */
.csfloat-dense-th {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
padding: 6px 8px;
background: var(--bg);
border-bottom: 1px solid var(--line);
text-align: left;
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-dense-th:hover { color: var(--ink-1); }
.csfloat-dense-th.right { text-align: right; }
.csfloat-dense-th.center { text-align: center; }
.csfloat-dense-th.sort-asc::after { content: "↑"; color: var(--cta); margin-left: 4px; }
.csfloat-dense-th.sort-desc::after { content: "↓"; color: var(--cta); margin-left: 4px; }
/* CSFloat-1:1: dense table cell. */
.csfloat-dense-td {
padding: 6px 8px;
border-bottom: 1px solid var(--line);
font-size: 12px;
color: var(--ink-2);
vertical-align: middle;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-dense-td.mono {
font-family: var(--mono);
}
.csfloat-dense-td.bright {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-dense-td.right { text-align: right; }
.csfloat-dense-td.center { text-align: center; }
/* CSFloat-1:1: badge variants (compact). */
.csfloat-badge-mini {
display: inline-flex;
align-items: center;
padding: 0 5px;
height: 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-badge-mini.accent { color: var(--cta); border-color: oklch(0.42 0.10 250 / 0.36); background: oklch(0.30 0.05 250 / 0.18); }
.csfloat-badge-mini.success { color: oklch(0.84 0.18 152); border-color: oklch(0.42 0.07 152 / 0.36); background: oklch(0.30 0.04 152 / 0.18); }
.csfloat-badge-mini.danger { color: oklch(0.84 0.18 30); border-color: oklch(0.42 0.07 30 / 0.36); background: oklch(0.30 0.04 30 / 0.18); }
.csfloat-badge-mini.warning { color: oklch(0.84 0.16 80); border-color: oklch(0.42 0.10 80 / 0.36); background: oklch(0.30 0.05 80 / 0.18); }
/* CSFloat-1:1: row dotleader (price column with dotted leader). */
.csfloat-dotleader {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12px;
}
.csfloat-dotleader-label { color: var(--ink-3); flex-shrink: 0; }
.csfloat-dotleader-fill {
flex: 1 1 auto;
border-bottom: 1px dotted var(--line-2);
margin-bottom: 4px;
}
.csfloat-dotleader-value {
font-family: var(--mono);
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* END hover row + dense table + badge mini + dotleader */
/* CSFloat-1:1: footer subtle accent stripe. */
.csfloat-footer-accent {
position: relative;
}
.csfloat-footer-accent::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--cta) 50%,
transparent 100%);
opacity: 0.55;
}
/* CSFloat-1:1: footer brand area (logo + tagline). */
.csfloat-footer-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-footer-brand-logo {
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-footer-brand-mark {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 8px oklch(0.55 0.18 250 / 0.4));
}
.csfloat-footer-brand-name {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.01em;
}
.csfloat-footer-brand-tagline {
font-size: 12px;
color: var(--ink-3);
line-height: 1.55;
max-width: 280px;
}
.csfloat-footer-brand-social {
display: inline-flex;
gap: 6px;
}
.csfloat-footer-brand-social a {
width: 30px;
height: 30px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.csfloat-footer-brand-social a:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
transform: translateY(-1px);
}
/* CSFloat-1:1: footer column (links). */
.csfloat-footer-column {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-footer-column-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin: 0 0 4px;
}
.csfloat-footer-column a {
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
width: fit-content;
}
.csfloat-footer-column a:hover { color: var(--ink-1); }
.csfloat-footer-column a.new::after {
content: "NEW";
display: inline-block;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
border-radius: 3px;
padding: 1px 4px;
margin-left: 4px;
letter-spacing: 0.06em;
vertical-align: middle;
}
/* END footer accent + footer brand + footer column */
/* CSFloat-1:1: trust strip with chips (just above footer). */
.csfloat-trust-strip {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 24px;
padding: 28px 16px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
background: var(--bg);
}
.csfloat-trust-chip-row {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trust-chip-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 12px;
font-weight: 700;
}
.csfloat-trust-chip-row strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: footer copyright row. */
.csfloat-footer-copyright {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
flex-wrap: wrap;
gap: 12px;
}
.csfloat-footer-copyright-left {
flex: 1 1 auto;
letter-spacing: -0.005em;
}
.csfloat-footer-copyright-links {
display: inline-flex;
gap: 12px;
}
.csfloat-footer-copyright-links a {
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-footer-copyright-links a:hover { color: var(--ink-1); }
/* END trust strip + copyright row */
/* CSFloat-1:1: floating quick-action card (sticky bottom on mobile). */
@media (max-width: 720px) {
.csfloat-mobile-quick-actions {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
display: flex;
gap: 8px;
background: oklch(0.18 0.008 260 / 0.92);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 10px;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 8800;
}
.csfloat-mobile-quick-actions-btn {
flex: 1 1 0;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-1);
font-size: 13px;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
}
.csfloat-mobile-quick-actions-btn.primary {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
}
/* CSFloat-1:1: hover hint icon (small ? near labels). */
.csfloat-hint-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
cursor: help;
margin-left: 4px;
vertical-align: middle;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-hint-icon:hover {
background: oklch(0.30 0.05 250 / 0.32);
color: var(--cta);
}
.csfloat-hint-icon::before { content: "?"; }
/* CSFloat-1:1: action group with primary + secondary buttons. */
.csfloat-action-group {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-action-group-primary {
padding: 8px 16px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-action-group-primary:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-action-group-primary:active {
transform: translateY(1px);
}
.csfloat-action-group-secondary {
padding: 8px 14px;
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-action-group-secondary:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* END mobile quick actions + hint icon + action group */
/* CSFloat-1:1: corner-clip card style. */
.csfloat-clip-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
padding: 18px;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* CSFloat-1:1: progress radial chart. */
.csfloat-radial-progress {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-radial-progress svg {
transform: rotate(-90deg);
}
.csfloat-radial-progress-track {
fill: none;
stroke: var(--bg-3);
stroke-width: 4;
}
.csfloat-radial-progress-fill {
fill: none;
stroke: var(--cta);
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-radial-progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: data table row pinned (for current user / etc.). */
.csfloat-row-pinned {
background: oklch(0.20 0.02 250 / 0.45);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
position: relative;
}
.csfloat-row-pinned::before {
content: "YOU";
position: absolute;
top: 6px;
left: 6px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
border-radius: 3px;
padding: 1px 5px;
}
/* CSFloat-1:1: chip with status icon + label. */
.csfloat-status-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.csfloat-status-chip.live {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-status-chip.live::before {
content: "";
width: 5px;
height: 5px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-status-chip.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-status-chip.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
/* END clip card + radial progress + row pinned + status chip */
/* CSFloat-1:1: card with bottom-aligned actions row. */
.csfloat-card-bottom-actions {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
background: var(--bg);
border-top: 1px solid var(--line);
margin: 14px -14px -14px;
}
/* CSFloat-1:1: card with hover-accent border (subtle highlight on hover). */
.csfloat-accent-border-hover {
border: 1px solid var(--line);
transition: border-color 240ms ease;
}
.csfloat-accent-border-hover:hover {
border-color: var(--cta);
}
/* CSFloat-1:1: nav with grouped icons (icon stack centered). */
.csfloat-nav-icon-group {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 2px;
}
.csfloat-nav-icon-group-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--ink-3);
font-size: 13px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-nav-icon-group-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-nav-icon-group-btn.active {
background: var(--bg);
color: var(--cta);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* CSFloat-1:1: hero with sticker layered images. */
.csfloat-sticker-stack {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
}
.csfloat-sticker-stack-img {
width: 22px;
height: 22px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-sticker-stack-img img {
width: 18px;
height: 18px;
object-fit: contain;
}
.csfloat-sticker-stack-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* CSFloat-1:1: badge with arrow (used for breadcrumb-like steps). */
.csfloat-arrow-badge {
display: inline-flex;
align-items: center;
padding: 2px 14px 2px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.csfloat-arrow-badge.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
}
/* END card bottom actions + accent border hover + nav icon group + sticker stack + arrow badge */
/* CSFloat-1:1: select control with custom chevron. */
.csfloat-select-input {
-webkit-appearance: none;
appearance: none;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 32px 8px 12px;
color: var(--ink-1);
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 12px;
transition: border-color 140ms ease, background-color 140ms ease;
}
.csfloat-select-input:hover {
background-color: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-select-input:focus {
outline: none;
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
/* CSFloat-1:1: text input with floating label. */
.csfloat-floating-input {
position: relative;
}
.csfloat-floating-input-input {
width: 100%;
height: 44px;
padding: 14px 12px 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 13px;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-floating-input-input:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-floating-input-label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
color: var(--ink-3);
pointer-events: none;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), font-size 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 140ms ease;
background: var(--bg-1);
padding: 0 4px;
}
.csfloat-floating-input-input:focus + .csfloat-floating-input-label,
.csfloat-floating-input-input:not(:placeholder-shown) + .csfloat-floating-input-label {
transform: translateY(-130%);
font-size: 10px;
color: var(--cta);
font-weight: 600;
}
/* CSFloat-1:1: outline-only button (used for tertiary actions). */
.csfloat-btn-outline-only {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-btn-outline-only:hover {
background: var(--bg-1);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-btn-outline-only:active {
transform: translateY(1px);
}
/* END select input + floating input + outline only button */
/* CSFloat-1:1: card-stack effect for related items grid (3D parallax). */
.csfloat-3d-stack {
perspective: 1000px;
display: flex;
align-items: flex-end;
position: relative;
height: 200px;
margin: 24px auto;
width: fit-content;
}
.csfloat-3d-stack-item {
position: relative;
width: 140px;
margin-left: -56px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
}
.csfloat-3d-stack-item:first-child { margin-left: 0; }
.csfloat-3d-stack-item:nth-child(1) { transform: rotate(-8deg) translateY(-12px); z-index: 1; }
.csfloat-3d-stack-item:nth-child(2) { transform: rotate(0); z-index: 3; }
.csfloat-3d-stack-item:nth-child(3) { transform: rotate(8deg) translateY(-12px); z-index: 2; }
.csfloat-3d-stack-item:hover {
transform: rotate(0) translateY(-20px) scale(1.05);
z-index: 4;
}
/* CSFloat-1:1: hover-lift card with shadow elevate. */
.csfloat-elevate-on-hover {
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}
.csfloat-elevate-on-hover:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: gradient border-only chip. */
.csfloat-grad-border-chip {
position: relative;
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--bg-1);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-1);
isolation: isolate;
}
.csfloat-grad-border-chip::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(135deg, var(--cta), oklch(0.62 0.27 330));
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* CSFloat-1:1: chip with side-by-side info layout. */
.csfloat-info-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-info-chip-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
font-weight: 600;
}
.csfloat-info-chip-value {
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END 3D stack + elevate on hover + grad border chip + info chip */
/* CSFloat-1:1: tabbed list (multiple list views inside a card). */
.csfloat-tabbed-list {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.csfloat-tabbed-list-tabs {
display: flex;
background: var(--bg);
border-bottom: 1px solid var(--line);
padding: 0 14px;
overflow-x: auto;
}
.csfloat-tabbed-list-tabs::-webkit-scrollbar { height: 0; }
.csfloat-tabbed-list-tab {
position: relative;
padding: 10px 14px;
background: transparent;
border: none;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
transition: color 140ms ease;
}
.csfloat-tabbed-list-tab:hover { color: var(--ink-1); }
.csfloat-tabbed-list-tab.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-tabbed-list-tab.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-tabbed-list-body {
flex: 1 1 auto;
overflow-y: auto;
max-height: 480px;
}
.csfloat-tabbed-list-body::-webkit-scrollbar { width: 6px; }
.csfloat-tabbed-list-body::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
/* CSFloat-1:1: category icon (large square block icon). */
.csfloat-category-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.csfloat-category-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-category-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-category-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
/* CSFloat-1:1: text-marker — pinned text indicator. */
.csfloat-marker {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.16 80);
}
.csfloat-marker.pinned::before {
content: "📌";
font-size: 9px;
filter: hue-rotate(-20deg);
}
/* CSFloat-1:1: shrunk text label below stat. */
.csfloat-stat-shrink-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* END tabbed list + category icon + marker + shrink label */
/* CSFloat-1:1: comparison vs label (left vs right). */
.csfloat-vs-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-vs-label-side {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-vs-label-vs {
font-size: 9px;
color: var(--ink-4);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.08em;
}
/* CSFloat-1:1: stat with up/down arrow inline. */
.csfloat-trend-stat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-trend-stat-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-trend-stat-arrow {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
}
.csfloat-trend-stat-arrow.up { color: oklch(0.78 0.18 152); }
.csfloat-trend-stat-arrow.up::before { content: "▲ "; }
.csfloat-trend-stat-arrow.down { color: oklch(0.78 0.18 30); }
.csfloat-trend-stat-arrow.down::before { content: "▼ "; }
/* CSFloat-1:1: chip with hover info popover. */
.csfloat-chip-popover {
position: relative;
display: inline-flex;
cursor: help;
}
.csfloat-chip-popover-content {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 200px;
padding: 10px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
font-size: 11px;
color: var(--ink-1);
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
text-align: left;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
letter-spacing: -0.005em;
line-height: 1.5;
}
.csfloat-chip-popover:hover .csfloat-chip-popover-content {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* CSFloat-1:1: action menu (icon-only ellipsis). */
.csfloat-ellipsis-menu {
width: 24px;
height: 24px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-ellipsis-menu:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-ellipsis-menu::before {
content: "⋯";
font-weight: 700;
}
/* END vs label + trend stat + chip popover + ellipsis menu */
/* CSFloat-1:1: marketplace stat row. */
.csfloat-mp-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-align: center;
position: relative;
}
.csfloat-mp-stat-icon {
position: absolute;
top: 8px;
right: 8px;
font-size: 13px;
color: var(--ink-4);
opacity: 0.7;
}
.csfloat-mp-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-mp-stat-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-mp-stat-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: subtle white-on-card hover state. */
.csfloat-card-with-bright-hover:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
/* CSFloat-1:1: small inline pill with icon + text. */
.csfloat-icon-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-icon-pill-icon {
font-size: 11px;
color: var(--ink-3);
}
.csfloat-icon-pill.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-icon-pill.accent .csfloat-icon-pill-icon { color: var(--cta); }
.csfloat-icon-pill.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-icon-pill.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: subtitle row above page title. */
.csfloat-page-eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
margin-bottom: 4px;
}
.csfloat-page-eyebrow-dot {
width: 4px;
height: 4px;
background: var(--cta);
border-radius: 50%;
}
/* END mp stat + bright hover + icon pill + page eyebrow */
/* CSFloat-1:1: form helper text (bottom-aligned). */
.csfloat-form-helper {
display: flex;
align-items: flex-start;
gap: 4px;
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
line-height: 1.5;
}
.csfloat-form-helper.error { color: oklch(0.84 0.18 30); }
.csfloat-form-helper.success { color: oklch(0.84 0.18 152); }
.csfloat-form-helper-icon {
font-size: 11px;
flex-shrink: 0;
}
/* CSFloat-1:1: page heading variant w/ subtitle below. */
.csfloat-heading-with-sub {
margin-bottom: 16px;
}
.csfloat-heading-with-sub-main {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.csfloat-heading-with-sub-sub {
font-size: 13px;
color: var(--ink-3);
margin: 4px 0 0;
line-height: 1.55;
}
/* CSFloat-1:1: callout chip (used inline in body text). */
.csfloat-inline-callout {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--cta);
vertical-align: middle;
}
/* CSFloat-1:1: stat with mini bar. */
.csfloat-stat-mini-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
}
.csfloat-stat-mini-bar-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-mini-bar-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-mini-bar-value {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-mini-bar-bar {
flex: 0 0 100px;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-stat-mini-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 3px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-mini-bar-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-stat-mini-bar-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-stat-mini-bar-fill.danger { background: oklch(0.62 0.18 30); }
/* END form helper + heading with sub + inline callout + stat mini bar */
/* CSFloat-1:1: image-sm with corner badge (avatar with status). */
.csfloat-img-sm {
position: relative;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.csfloat-img-sm img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
}
.csfloat-img-sm-badge {
position: absolute;
bottom: -3px;
right: -3px;
width: 14px;
height: 14px;
background: var(--cta);
border: 2px solid var(--bg);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
}
/* CSFloat-1:1: image-md with corner badge. */
.csfloat-img-md {
position: relative;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-img-md img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
/* CSFloat-1:1: image-lg with corner badge. */
.csfloat-img-lg {
position: relative;
width: 80px;
height: 80px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-img-lg img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
/* CSFloat-1:1: image with corner ribbon (e.g. NEW / SALE). */
.csfloat-img-with-ribbon {
position: relative;
}
.csfloat-img-with-ribbon-ribbon {
position: absolute;
top: 0;
right: 0;
padding: 2px 6px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 0 0 0 4px;
z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.csfloat-img-with-ribbon-ribbon.success {
background: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-img-with-ribbon-ribbon.danger {
background: oklch(0.60 0.18 30);
color: oklch(0.98 0 0);
}
/* END img-sm/md/lg + img with ribbon */
/* CSFloat-1:1: tag with rare gradient (wrapper around skin name). */
.csfloat-rare-name {
background: linear-gradient(135deg, oklch(0.85 0.20 330) 0%, oklch(0.62 0.27 330) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.csfloat-special-name {
background: linear-gradient(135deg, oklch(0.85 0.16 80) 0%, oklch(0.78 0.16 50) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.csfloat-souvenir-name {
background: linear-gradient(135deg, oklch(0.84 0.18 152) 0%, oklch(0.68 0.18 152) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
/* CSFloat-1:1: text wrap with badge prefix. */
.csfloat-text-with-badge {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-text-with-badge-text {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
}
/* CSFloat-1:1: simple price input formatted in line. */
.csfloat-formatted-price {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-formatted-price-currency {
font-size: 11px;
color: var(--ink-3);
font-weight: 600;
}
.csfloat-formatted-price-amount {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-formatted-price.large .csfloat-formatted-price-currency {
font-size: 14px;
}
.csfloat-formatted-price.large .csfloat-formatted-price-amount {
font-size: 22px;
}
.csfloat-formatted-price.huge .csfloat-formatted-price-currency {
font-size: 18px;
}
.csfloat-formatted-price.huge .csfloat-formatted-price-amount {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.025em;
}
/* CSFloat-1:1: subtle row separator (hairline only, no padding). */
.csfloat-row-separator {
height: 1px;
background: var(--line);
margin: 12px 0;
border: none;
}
.csfloat-row-separator.thick {
height: 2px;
background: var(--line-2);
margin: 16px 0;
}
/* END rare name + text with badge + formatted price + row separator */
/* CSFloat-1:1: stat panel with sparkline overlay. */
.csfloat-stat-panel {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
isolation: isolate;
}
.csfloat-stat-panel::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 60% at 100% 100%,
oklch(0.55 0.18 250 / 0.10),
transparent 70%);
pointer-events: none;
z-index: -1;
}
.csfloat-stat-panel-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-panel-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-panel-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-panel-spark {
position: absolute;
bottom: 14px;
right: 18px;
width: 80px;
height: 32px;
}
/* CSFloat-1:1: stat panel with shadow on hover. */
.csfloat-stat-panel:hover {
border-color: var(--line-2);
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
/* CSFloat-1:1: page tab labels (header tabs above body). */
.csfloat-page-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 14px 0 18px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
}
.csfloat-page-tabs::-webkit-scrollbar { height: 0; }
.csfloat-page-tab {
position: relative;
padding: 10px 14px;
background: transparent;
border: none;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
transition: color 140ms ease;
text-decoration: none;
}
.csfloat-page-tab:hover { color: var(--ink-1); }
.csfloat-page-tab.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-page-tab.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-page-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-page-tab.active .csfloat-page-tab-count {
color: var(--cta);
}
.csfloat-page-tab-icon {
margin-right: 6px;
font-size: 13px;
color: var(--ink-3);
}
.csfloat-page-tab.active .csfloat-page-tab-icon {
color: var(--cta);
}
/* END stat panel + page tabs */
/* CSFloat-1:1: floating badge group (top-right of cards). */
.csfloat-floating-badges {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 4px;
z-index: 4;
pointer-events: none;
}
.csfloat-floating-badges .csfloat-corner-badge,
.csfloat-floating-badges .csfloat-state-chip,
.csfloat-floating-badges .csfloat-tag {
pointer-events: auto;
}
/* CSFloat-1:1: stat-with-icon-band (icon + label + value w/ band). */
.csfloat-stat-with-icon-band {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
align-items: center;
border-left: 3px solid var(--cta);
margin-bottom: 6px;
}
.csfloat-stat-with-icon-band-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-stat-with-icon-band.success {
border-left-color: oklch(0.62 0.18 152);
}
.csfloat-stat-with-icon-band.success .csfloat-stat-with-icon-band-icon {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-stat-with-icon-band.danger {
border-left-color: oklch(0.60 0.18 30);
}
.csfloat-stat-with-icon-band.danger .csfloat-stat-with-icon-band-icon {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-stat-with-icon-band.warning {
border-left-color: oklch(0.78 0.16 80);
}
.csfloat-stat-with-icon-band.warning .csfloat-stat-with-icon-band-icon {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-stat-with-icon-band-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-icon-band-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-stat-with-icon-band-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: subtle list item (no border). */
.csfloat-quiet-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 12px;
color: var(--ink-2);
}
.csfloat-quiet-list-item-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 12px;
}
.csfloat-quiet-list-item-name {
flex: 1 1 auto;
}
.csfloat-quiet-list-item-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* END floating badges + stat with icon band + quiet list item */
/* CSFloat-1:1: alert toast variants. */
.csfloat-alert-toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 8px;
font-size: 13px;
color: var(--ink-1);
margin: 8px 0;
animation: csfloat-pop-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-alert-toast.success {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-alert-toast.warning {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-alert-toast.danger {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-alert-toast-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--cta);
margin-top: 1px;
}
.csfloat-alert-toast.success .csfloat-alert-toast-icon { color: oklch(0.84 0.18 152); }
.csfloat-alert-toast.warning .csfloat-alert-toast-icon { color: oklch(0.84 0.16 80); }
.csfloat-alert-toast.danger .csfloat-alert-toast-icon { color: oklch(0.84 0.18 30); }
.csfloat-alert-toast-body {
flex: 1 1 auto;
line-height: 1.55;
font-size: 12px;
color: var(--ink-2);
}
.csfloat-alert-toast-body strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-alert-toast-actions {
display: inline-flex;
gap: 6px;
margin-top: 6px;
}
.csfloat-alert-toast-action {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--cta);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 120ms ease;
}
.csfloat-alert-toast-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: page sub-card chassis (smaller card variant). */
.csfloat-sub-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
margin: 6px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-sub-card-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-sub-card-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* END alert toast + sub card */
/* CSFloat-1:1: pagination indicator (mini bar showing current). */
.csfloat-pagination-mini {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-pagination-mini-dots {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 4px;
}
.csfloat-pagination-mini-dot {
width: 4px;
height: 4px;
background: var(--line-2);
border-radius: 50%;
}
.csfloat-pagination-mini-dot.active {
background: var(--cta);
width: 12px;
border-radius: 2px;
}
/* CSFloat-1:1: trade row table-row alternative. */
.csfloat-trade-row {
display: grid;
grid-template-columns: auto 1fr 1fr auto;
gap: 14px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
align-items: center;
transition: border-color 120ms ease, background 120ms ease;
}
.csfloat-trade-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-trade-row-img {
width: 48px;
height: 48px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-trade-row-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-trade-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trade-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-trade-row-trader {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.csfloat-trade-row-trader-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
}
.csfloat-trade-row-trader-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trade-row-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* END pagination mini + trade row */
/* CSFloat-1:1: deal of day banner (large rotating banner). */
.csfloat-deal-banner {
display: grid;
grid-template-columns: 1fr 240px;
gap: 24px;
align-items: center;
padding: 28px 32px;
background: linear-gradient(135deg,
oklch(0.30 0.04 30 / 0.18) 0%,
oklch(0.20 0.02 30 / 0.4) 100%);
border: 1px solid oklch(0.42 0.07 30 / 0.4);
border-radius: 14px;
margin: 16px 0 24px;
position: relative;
overflow: hidden;
}
@media (max-width: 720px) {
.csfloat-deal-banner { grid-template-columns: 1fr; }
}
.csfloat-deal-banner::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 30 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-deal-banner-text {
position: relative;
z-index: 1;
}
.csfloat-deal-banner-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 1px solid oklch(0.55 0.18 30);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.csfloat-deal-banner-title {
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.csfloat-deal-banner-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0 0 12px;
line-height: 1.6;
}
.csfloat-deal-banner-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--ink-1);
color: var(--bg);
border: 1px solid var(--ink-1);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-deal-banner-cta:hover {
background: oklch(0.92 0 0);
border-color: oklch(0.92 0 0);
}
.csfloat-deal-banner-cta:active {
transform: translateY(1px);
}
.csfloat-deal-banner-cta::after {
content: "→";
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-deal-banner-cta:hover::after {
transform: translateX(2px);
}
.csfloat-deal-banner-art {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.csfloat-deal-banner-art img {
max-width: 100%;
max-height: 200px;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6));
}
/* END deal banner */
/* CSFloat-1:1: floor / ceiling stat row inline. */
.csfloat-floor-ceiling-row {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin: 8px 0;
}
.csfloat-floor-ceiling-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-floor-ceiling-cell-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-floor-ceiling-cell-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.csfloat-floor-ceiling-cell-value.floor { color: oklch(0.84 0.18 152); }
.csfloat-floor-ceiling-cell-value.ceiling { color: oklch(0.84 0.18 30); }
.csfloat-floor-ceiling-divider {
width: 1px;
height: 32px;
background: var(--line);
}
/* CSFloat-1:1: trade-hold timer (large countdown). */
.csfloat-trade-hold-timer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 18px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 10px;
margin: 12px 0;
}
.csfloat-trade-hold-timer-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(0.84 0.16 80);
}
.csfloat-trade-hold-timer-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: oklch(0.92 0.10 80);
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
line-height: 1;
}
.csfloat-trade-hold-timer-units {
display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
color: oklch(0.84 0.16 80 / 0.7);
margin-top: 4px;
}
.csfloat-trade-hold-timer-unit {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.csfloat-trade-hold-timer-unit-num {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: oklch(0.92 0.10 80);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
}
.csfloat-trade-hold-timer-unit-name {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.84 0.16 80 / 0.6);
}
/* END floor/ceiling row + trade hold timer */
/* CSFloat-1:1: nav bar variant — secondary tier (subnav). */
.csfloat-secondary-nav {
display: flex;
align-items: center;
height: 40px;
padding: 0 18px;
background: oklch(0.18 0.008 260 / 0.85);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
position: sticky;
top: 56px;
z-index: 800;
overflow-x: auto;
}
.csfloat-secondary-nav::-webkit-scrollbar { height: 0; }
.csfloat-secondary-nav-inner {
display: flex;
align-items: center;
gap: 0;
max-width: 2100px;
margin: 0 auto;
width: 100%;
}
.csfloat-secondary-nav-link {
position: relative;
padding: 8px 12px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 140ms ease;
}
.csfloat-secondary-nav-link:hover { color: var(--ink-1); }
.csfloat-secondary-nav-link.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-secondary-nav-link.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 1px;
background: var(--ink-1);
}
/* CSFloat-1:1: site-wide live header strip (announcement bar). */
.csfloat-live-strip {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 16px;
background: oklch(0.30 0.04 30 / 0.32);
border-bottom: 1px solid oklch(0.42 0.07 30 / 0.5);
color: oklch(0.92 0.10 30);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: -0.005em;
position: sticky;
top: 0;
z-index: 9999;
gap: 8px;
}
.csfloat-live-strip-dot {
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-live-strip-text {
flex: 0 1 auto;
text-align: center;
}
.csfloat-live-strip-action {
margin-left: 8px;
color: oklch(0.96 0.06 30);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 700;
}
.csfloat-live-strip-close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: oklch(0.92 0.10 30);
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 4px;
opacity: 0.7;
transition: opacity 120ms ease;
}
.csfloat-live-strip-close:hover { opacity: 1; }
/* END secondary nav + live strip */
/* CSFloat-1:1: subtle hint divider with text. */
.csfloat-hint-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.csfloat-hint-divider::before,
.csfloat-hint-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.csfloat-hint-divider-text {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
white-space: nowrap;
}
/* CSFloat-1:1: card body padding helpers. */
.csfloat-card-pad-sm { padding: 8px 10px; }
.csfloat-card-pad-md { padding: 12px 14px; }
.csfloat-card-pad-lg { padding: 16px 18px; }
.csfloat-card-pad-xl { padding: 22px 28px; }
/* CSFloat-1:1: card subtle shimmer effect on hover (premium). */
.csfloat-shimmer-card {
position: relative;
overflow: hidden;
isolation: isolate;
}
.csfloat-shimmer-card::after {
content: "";
position: absolute;
top: 0;
left: -100%;
bottom: 0;
width: 60%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 50%,
transparent 100%);
transition: left 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.csfloat-shimmer-card:hover::after {
left: 200%;
}
/* CSFloat-1:1: small price tag (used inline). */
.csfloat-price-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-price-tag-currency {
color: var(--ink-3);
font-weight: 500;
}
.csfloat-price-tag.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-price-tag.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: trade rate indicator (e.g. above floor / below floor). */
.csfloat-rate-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-rate-indicator.below-floor {
color: oklch(0.84 0.18 152);
}
.csfloat-rate-indicator.below-floor::before { content: "▼"; font-size: 8px; }
.csfloat-rate-indicator.above-floor {
color: oklch(0.84 0.18 30);
}
.csfloat-rate-indicator.above-floor::before { content: "▲"; font-size: 8px; }
.csfloat-rate-indicator.at-floor {
color: var(--ink-3);
}
.csfloat-rate-indicator.at-floor::before { content: "—"; font-size: 8px; opacity: 0.6; }
/* END hint divider + card pad helpers + shimmer card + price tag + rate indicator */
/* CSFloat-1:1: brand glow on hero h1 (subtle backdrop). */
.csfloat-hero-bg-glow {
position: relative;
}
.csfloat-hero-bg-glow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 200px;
background: radial-gradient(ellipse 60% 50% at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
pointer-events: none;
z-index: -1;
filter: blur(20px);
}
/* CSFloat-1:1: hero CTA pulse (after click confirmation). */
@keyframes csfloat-cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0.4); }
50% { box-shadow: 0 0 0 16px oklch(0.55 0.18 250 / 0); }
}
.csfloat-cta-pulse {
animation: csfloat-cta-pulse 1800ms ease-in-out infinite;
}
/* CSFloat-1:1: hero subtitle with split words. */
.csfloat-split-subtitle {
display: inline-flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.csfloat-split-subtitle-word {
font-size: 13px;
font-family: var(--mono);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-split-subtitle-word strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-split-subtitle-sep {
color: var(--ink-4);
font-size: 8px;
}
.csfloat-split-subtitle-sep::before { content: "•"; }
/* CSFloat-1:1: featured grid (alt to bento for marketing pages). */
.csfloat-featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 24px 0;
}
.csfloat-featured-tile {
position: relative;
padding: 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-featured-tile:hover {
border-color: var(--cta);
transform: translateY(-3px);
}
.csfloat-featured-tile::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
opacity: 0;
transition: opacity 320ms ease;
}
.csfloat-featured-tile:hover::before { opacity: 1; }
.csfloat-featured-tile-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 4px;
}
.csfloat-featured-tile-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-featured-tile-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
/* END hero bg glow + cta pulse + split subtitle + featured grid */
/* CSFloat-1:1: stacked cards (vertical with subtle offsets). */
.csfloat-stack-cards {
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 0;
position: relative;
}
.csfloat-stack-cards-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
margin-top: -8px;
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms ease, box-shadow 240ms ease;
position: relative;
z-index: 1;
}
.csfloat-stack-cards-card:first-child { margin-top: 0; }
.csfloat-stack-cards-card:hover {
transform: translateY(-3px);
border-color: var(--line-2);
box-shadow: 0 14px 36px rgba(0,0,0,0.45);
z-index: 5;
}
/* CSFloat-1:1: pull-to-refresh indicator. */
.csfloat-pull-refresh {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
gap: 8px;
}
.csfloat-pull-refresh-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 11px;
transition: transform 200ms ease;
}
.csfloat-pull-refresh.pulling .csfloat-pull-refresh-arrow {
transform: rotate(180deg);
}
.csfloat-pull-refresh.refreshing .csfloat-pull-refresh-arrow {
animation: csfloat-rotate 700ms linear infinite;
}
/* CSFloat-1:1: settings toggle row (wide). */
.csfloat-toggle-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--line);
}
.csfloat-toggle-row:first-child { padding-top: 0; }
.csfloat-toggle-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.csfloat-toggle-row-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-toggle-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-toggle-row-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* CSFloat-1:1: status indicator with text. */
.csfloat-status-with-text {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-status-with-text-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink-3);
}
.csfloat-status-with-text.online .csfloat-status-with-text-dot {
background: oklch(0.72 0.18 152);
box-shadow: 0 0 6px oklch(0.72 0.18 152 / 0.6);
}
.csfloat-status-with-text.idle .csfloat-status-with-text-dot {
background: oklch(0.78 0.16 80);
box-shadow: 0 0 6px oklch(0.78 0.16 80 / 0.5);
}
.csfloat-status-with-text.offline .csfloat-status-with-text-dot {
background: var(--ink-4);
}
/* END stack cards + pull refresh + toggle row + status with text */
/* CSFloat-1:1: avatar with status indicator and badge. */
.csfloat-avatar-status {
position: relative;
display: inline-flex;
}
.csfloat-avatar-status-status {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border: 2px solid var(--bg);
border-radius: 50%;
background: var(--ink-4);
}
.csfloat-avatar-status-status.online {
background: oklch(0.72 0.18 152);
box-shadow: 0 0 6px oklch(0.72 0.18 152 / 0.6);
}
.csfloat-avatar-status-status.idle {
background: oklch(0.78 0.16 80);
}
/* CSFloat-1:1: large stat with delta breakdown. */
.csfloat-stat-large {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-stat-large-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-large-value {
font-family: var(--mono);
font-size: 40px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-large-delta {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
}
.csfloat-stat-large-delta-amount {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-large-delta-amount.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-large-delta-amount.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-large-delta-period {
color: var(--ink-4);
}
/* CSFloat-1:1: data row in admin table. */
.csfloat-admin-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
gap: 12px;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-admin-row:last-child { border-bottom: none; }
.csfloat-admin-row:hover { background: var(--bg-2); }
.csfloat-admin-row-checkbox {
width: 14px;
height: 14px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: 3px;
cursor: pointer;
accent-color: var(--cta);
}
.csfloat-admin-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-admin-row-value {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-admin-row-actions {
display: inline-flex;
gap: 4px;
}
/* END avatar status + stat large + admin row */
/* CSFloat-1:1: tag with strikethrough (sold-out / discontinued). */
.csfloat-strike-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
opacity: 0.7;
}
/* CSFloat-1:1: comparison header for /database split-view. */
.csfloat-compare-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 12px;
}
.csfloat-compare-header-text {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-compare-header-count {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-compare-header-action {
font-size: 11px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-compare-header-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: card grid placeholder (loading state). */
.csfloat-grid-placeholder {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: 12px;
}
.csfloat-grid-placeholder-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-grid-placeholder-img {
aspect-ratio: 4 / 3;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
border-radius: 6px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-grid-placeholder-line {
height: 12px;
border-radius: 3px;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-grid-placeholder-line.short { width: 50%; }
.csfloat-grid-placeholder-line.long { width: 80%; }
/* END strike tag + compare header + grid placeholder */
/* CSFloat-1:1: hero text-centered align (used on landing). */
.csfloat-text-centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
max-width: 720px;
margin: 0 auto;
}
/* CSFloat-1:1: trust banner with multiple icons. */
.csfloat-trust-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 20px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin: 16px 0;
flex-wrap: wrap;
}
.csfloat-trust-banner-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trust-banner-item-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.csfloat-trust-banner-item strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: app icon (rounded square style). */
.csfloat-app-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--cta), oklch(0.62 0.27 330));
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
flex-shrink: 0;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.csfloat-app-icon.sm { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
.csfloat-app-icon.lg { width: 64px; height: 64px; font-size: 28px; border-radius: 14px; }
.csfloat-app-icon.xl { width: 96px; height: 96px; font-size: 40px; border-radius: 18px; }
/* CSFloat-1:1: button row alignment helpers. */
.csfloat-button-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-button-row.start { justify-content: flex-start; }
.csfloat-button-row.center { justify-content: center; }
.csfloat-button-row.end { justify-content: flex-end; }
.csfloat-button-row.between { justify-content: space-between; }
/* CSFloat-1:1: card with corner gradient mask. */
.csfloat-mask-corner {
position: relative;
overflow: hidden;
isolation: isolate;
}
.csfloat-mask-corner::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: radial-gradient(circle at top right,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
pointer-events: none;
z-index: -1;
}
/* END text centered + trust banner + app icon + button row + mask corner */
/* CSFloat-1:1: hover-revealing inline edit pencil. */
.csfloat-editable {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
cursor: text;
transition: background 120ms ease;
}
.csfloat-editable:hover {
background: var(--bg-2);
}
.csfloat-editable::after {
content: "✏";
font-size: 11px;
color: var(--ink-3);
opacity: 0;
transition: opacity 120ms ease;
margin-left: 4px;
}
.csfloat-editable:hover::after {
opacity: 1;
}
/* CSFloat-1:1: pinned banner indicator. */
.csfloat-pinned-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.16 80);
}
.csfloat-pinned-indicator::before {
content: "📌";
font-size: 8px;
filter: hue-rotate(-20deg);
}
/* CSFloat-1:1: card image with bottom price overlay. */
/* CSFloat-1:1: action menu dropdown trigger button. */
.csfloat-menu-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-menu-action::before {
content: "⋯";
line-height: 0;
}
.csfloat-menu-action:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-menu-action.open {
background: var(--bg-2);
color: var(--cta);
border-color: var(--cta);
}
/* END editable + pinned + card img price overlay + menu action */
/* CSFloat-1:1: filter group with collapse toggle. */
.csfloat-filter-group {
border-bottom: 1px solid var(--line);
padding-bottom: 12px;
margin-bottom: 12px;
}
.csfloat-filter-group:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.csfloat-filter-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
cursor: pointer;
user-select: none;
transition: color 120ms ease;
}
.csfloat-filter-group-header:hover .csfloat-filter-group-title {
color: var(--ink-1);
}
.csfloat-filter-group-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0;
transition: color 120ms ease;
}
.csfloat-filter-group-toggle {
font-size: 10px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-group.collapsed .csfloat-filter-group-toggle {
transform: rotate(-90deg);
}
.csfloat-filter-group.collapsed .csfloat-filter-group-body {
display: none;
}
.csfloat-filter-group-body {
padding: 4px 0 0;
}
.csfloat-filter-group-clear {
font-size: 10px;
color: var(--ink-3);
background: transparent;
border: none;
cursor: pointer;
padding: 2px 6px;
margin-left: auto;
border-radius: 3px;
transition: color 120ms ease, background 120ms ease;
}
.csfloat-filter-group-clear:hover {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: filter checkbox with image (used for skin filter). */
.csfloat-filter-checkbox-img {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--ink-2);
transition: background 120ms ease, color 120ms ease;
}
.csfloat-filter-checkbox-img:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-filter-checkbox-img-input {
width: 13px;
height: 13px;
accent-color: var(--cta);
flex-shrink: 0;
}
.csfloat-filter-checkbox-img-thumb {
width: 24px;
height: 24px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px;
flex-shrink: 0;
}
.csfloat-filter-checkbox-img-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-filter-checkbox-img-name {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-filter-checkbox-img-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* END filter group + filter checkbox with img */
/* CSFloat-1:1: review row with star count. */
.csfloat-review-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.csfloat-review-row:last-child { border-bottom: none; }
.csfloat-review-row-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-review-row-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-review-row-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-review-row-header {
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-review-row-name {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-review-row-rating {
display: inline-flex;
align-items: center;
gap: 1px;
}
.csfloat-review-row-rating-star {
font-size: 11px;
color: oklch(0.78 0.16 80);
}
.csfloat-review-row-rating-star.empty { color: var(--ink-4); }
.csfloat-review-row-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.csfloat-review-row-text {
font-size: 13px;
color: var(--ink-2);
line-height: 1.6;
margin: 0;
}
.csfloat-review-row-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 4px;
}
.csfloat-review-row-meta-item {
display: inline-flex;
align-items: center;
gap: 3px;
}
/* CSFloat-1:1: review item details (small). */
.csfloat-review-item-thumb {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-review-item-thumb-img {
width: 18px;
height: 18px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px;
}
.csfloat-review-item-thumb-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-review-item-thumb-name {
font-weight: 500;
color: var(--ink-1);
}
/* END review row + review item thumb */
/* CSFloat-1:1: status pulse (animated breathing). */
@keyframes csfloat-status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.csfloat-status-pulse {
animation: csfloat-status-pulse 1800ms ease-in-out infinite;
}
/* CSFloat-1:1: hover preview chip showing item info. */
.csfloat-item-preview-chip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 200px;
padding: 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.65);
z-index: 9300;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-item-preview-chip.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-item-preview-chip-img {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--bg-1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
margin-bottom: 8px;
}
.csfloat-item-preview-chip-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-item-preview-chip-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-item-preview-chip-price {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--cta);
font-variant-numeric: tabular-nums;
}
.csfloat-item-preview-chip-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: pricing breakdown row. */
.csfloat-pricing-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
font-size: 12px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-pricing-row-label {
color: var(--ink-3);
flex: 1 1 auto;
}
.csfloat-pricing-row-value {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-pricing-row.discount .csfloat-pricing-row-value {
color: oklch(0.84 0.18 152);
}
.csfloat-pricing-row.fee .csfloat-pricing-row-value {
color: oklch(0.84 0.16 80);
}
/* CSFloat-1:1: pricing breakdown total. */
.csfloat-pricing-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 10px;
margin-top: 6px;
border-top: 1px solid var(--line);
font-size: 14px;
}
.csfloat-pricing-total-label {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-pricing-total-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* END status pulse + item preview chip + pricing breakdown */
/* CSFloat-1:1: brand identity — main wordmark for hero/footer. */
.csfloat-wordmark {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink-1);
display: inline-flex;
align-items: center;
gap: 12px;
}
.csfloat-wordmark-mark {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--cta), oklch(0.62 0.27 330));
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.98 0 0);
font-size: 18px;
font-weight: 800;
filter: drop-shadow(0 8px 16px oklch(0.55 0.18 250 / 0.32));
flex-shrink: 0;
}
.csfloat-wordmark-text {
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-wordmark.large {
font-size: 48px;
}
.csfloat-wordmark.large .csfloat-wordmark-mark {
width: 56px;
height: 56px;
font-size: 28px;
border-radius: 14px;
}
.csfloat-wordmark.small {
font-size: 18px;
}
.csfloat-wordmark.small .csfloat-wordmark-mark {
width: 26px;
height: 26px;
font-size: 14px;
border-radius: 6px;
}
/* CSFloat-1:1: stat with delta-as-pill. */
.csfloat-stat-with-delta-pill {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-stat-with-delta-pill-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-delta-pill-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 2px;
}
.csfloat-stat-with-delta-pill-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-delta-pill-delta {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: oklch(0.84 0.18 152);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-delta-pill-delta.up::before { content: "▲"; font-size: 8px; }
.csfloat-stat-with-delta-pill-delta.down {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
color: oklch(0.84 0.18 30);
}
.csfloat-stat-with-delta-pill-delta.down::before { content: "▼"; font-size: 8px; }
/* END wordmark + stat with delta pill */
/* CSFloat-1:1: scrolling progress indicator (top of page). */
.csfloat-scroll-indicator {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
z-index: 9990;
transition: width 80ms linear;
}
/* CSFloat-1:1: chip with hover popover. */
.csfloat-chip-popped {
position: relative;
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: help;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-chip-popped:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-chip-popped[data-pop]:hover::after {
content: attr(data-pop);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
z-index: 9300;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
letter-spacing: -0.005em;
}
/* CSFloat-1:1: vertical separator. */
.csfloat-vsep {
width: 1px;
height: 18px;
background: var(--line);
flex-shrink: 0;
}
.csfloat-vsep.tall { height: 24px; }
.csfloat-vsep.thick { width: 2px; }
/* CSFloat-1:1: horizontal separator. */
.csfloat-hsep {
height: 1px;
background: var(--line);
width: 100%;
flex-shrink: 0;
}
.csfloat-hsep.thick { height: 2px; }
/* CSFloat-1:1: scrollable horizontal nav (under tabs). */
.csfloat-scroll-nav {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 4px 0 8px;
margin: 0 -4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.csfloat-scroll-nav::-webkit-scrollbar { height: 0; }
.csfloat-scroll-nav-item {
scroll-snap-align: start;
flex-shrink: 0;
padding: 6px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-scroll-nav-item:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-scroll-nav-item.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
font-weight: 600;
}
/* END scroll indicator + chip popped + vsep/hsep + scroll nav */
/* CSFloat-1:1: nav with vertical accent stripe (highlights active section). */
.csfloat-vertical-nav {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 0;
position: relative;
border-left: 2px solid var(--line);
}
.csfloat-vertical-nav-item {
position: relative;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 140ms ease;
}
.csfloat-vertical-nav-item:hover { color: var(--ink-1); }
.csfloat-vertical-nav-item.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-vertical-nav-item.active::before {
content: "";
position: absolute;
left: -2px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 1px;
}
/* CSFloat-1:1: subtle help info row. */
.csfloat-info-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: oklch(0.30 0.05 250 / 0.10);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-radius: 6px;
font-size: 12px;
color: var(--cta);
margin: 8px 0;
}
.csfloat-info-row-icon {
flex: 0 0 14px;
font-size: 12px;
font-weight: 700;
font-style: italic;
color: var(--cta);
margin-top: 1px;
}
.csfloat-info-row-text {
flex: 1 1 auto;
line-height: 1.55;
color: oklch(0.92 0.10 250);
}
.csfloat-info-row-text strong {
color: oklch(0.96 0.06 250);
font-weight: 600;
}
/* CSFloat-1:1: warning info row variant. */
.csfloat-warn-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: oklch(0.30 0.05 80 / 0.10);
border: 1px solid oklch(0.42 0.10 80 / 0.18);
border-radius: 6px;
font-size: 12px;
color: oklch(0.92 0.10 80);
margin: 8px 0;
}
.csfloat-warn-row-icon {
flex: 0 0 14px;
font-size: 12px;
font-weight: 700;
color: oklch(0.84 0.16 80);
margin-top: 1px;
}
.csfloat-warn-row-text {
flex: 1 1 auto;
line-height: 1.55;
}
/* CSFloat-1:1: error info row. */
.csfloat-err-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: oklch(0.30 0.04 30 / 0.10);
border: 1px solid oklch(0.42 0.07 30 / 0.18);
border-radius: 6px;
font-size: 12px;
color: oklch(0.92 0.10 30);
margin: 8px 0;
}
.csfloat-err-row-icon {
flex: 0 0 14px;
font-size: 13px;
font-weight: 700;
color: oklch(0.84 0.18 30);
margin-top: 1px;
}
.csfloat-err-row-text {
flex: 1 1 auto;
line-height: 1.55;
}
/* CSFloat-1:1: success info row. */
.csfloat-ok-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: oklch(0.30 0.04 152 / 0.10);
border: 1px solid oklch(0.42 0.07 152 / 0.18);
border-radius: 6px;
font-size: 12px;
color: oklch(0.92 0.10 152);
margin: 8px 0;
}
.csfloat-ok-row-icon {
flex: 0 0 14px;
font-size: 13px;
font-weight: 700;
color: oklch(0.84 0.18 152);
margin-top: 1px;
}
.csfloat-ok-row-text {
flex: 1 1 auto;
line-height: 1.55;
}
/* END vertical nav + info/warn/err/ok rows */
/* CSFloat-1:1: card with status border-left band. */
.csfloat-status-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-left: 3px solid var(--cta);
border-radius: 8px;
margin-bottom: 6px;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-status-card:hover {
border-color: var(--line-2);
border-left-color: var(--cta);
background: var(--bg-2);
}
.csfloat-status-card.success { border-left-color: oklch(0.62 0.18 152); }
.csfloat-status-card.danger { border-left-color: oklch(0.60 0.18 30); }
.csfloat-status-card.warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-status-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-status-card-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-status-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-status-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* CSFloat-1:1: timeline-style log entry (admin/auditing). */
.csfloat-log-entry {
display: grid;
grid-template-columns: 100px 1fr;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
letter-spacing: -0.005em;
}
.csfloat-log-entry:last-child { border-bottom: none; }
.csfloat-log-entry-time {
color: var(--ink-4);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.csfloat-log-entry-message {
color: var(--ink-2);
line-height: 1.55;
}
.csfloat-log-entry-message strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-log-entry-message .accent {
color: var(--cta);
font-weight: 600;
}
.csfloat-log-entry-message .danger {
color: oklch(0.84 0.18 30);
font-weight: 600;
}
.csfloat-log-entry-level {
display: inline-flex;
align-items: center;
padding: 1px 5px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 3px;
margin-right: 6px;
}
.csfloat-log-entry-level.info { color: var(--cta); background: oklch(0.30 0.05 250 / 0.18); }
.csfloat-log-entry-level.warn { color: oklch(0.84 0.16 80); background: oklch(0.30 0.05 80 / 0.18); }
.csfloat-log-entry-level.error { color: oklch(0.84 0.18 30); background: oklch(0.30 0.04 30 / 0.18); }
.csfloat-log-entry-level.debug { color: var(--ink-4); background: var(--bg-2); }
/* END status card + log entry */
/* CSFloat-1:1: small-list with leading icon. */
.csfloat-iconlist {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
margin: 8px 0;
list-style: none;
}
.csfloat-iconlist-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
}
.csfloat-iconlist-item-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
margin-top: 1px;
}
.csfloat-iconlist-item-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-iconlist-item-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-iconlist-item-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
/* CSFloat-1:1: chip with avatar + count (collaborators). */
.csfloat-collab-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 3px 12px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
color: var(--ink-2);
}
.csfloat-collab-chip-avatars {
display: inline-flex;
align-items: center;
}
.csfloat-collab-chip-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bg-1);
border: 2px solid var(--bg-2);
margin-left: -6px;
overflow: hidden;
flex-shrink: 0;
}
.csfloat-collab-chip-avatar:first-child { margin-left: 0; }
.csfloat-collab-chip-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-collab-chip-count {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: layered breadcrumb (chevron-separated). */
.csfloat-breadcrumb-layered {
display: inline-flex;
align-items: center;
gap: 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-breadcrumb-layered-link {
padding: 4px 8px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
border-radius: 4px;
transition: color 120ms ease, background 120ms ease;
}
.csfloat-breadcrumb-layered-link:hover {
color: var(--ink-1);
background: var(--bg-2);
}
.csfloat-breadcrumb-layered-link.current {
color: var(--ink-1);
font-weight: 600;
cursor: default;
}
.csfloat-breadcrumb-layered-sep {
color: var(--ink-4);
padding: 0 2px;
font-size: 10px;
}
.csfloat-breadcrumb-layered-sep::before { content: "›"; }
/* END iconlist + collab chip + breadcrumb layered */
/* CSFloat-1:1: status timeline (success/warning/error). */
.csfloat-status-timeline {
display: flex;
flex-direction: column;
gap: 0;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-status-timeline-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-status-timeline-row:last-child { border-bottom: none; }
.csfloat-status-timeline-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-status-timeline-row.success .csfloat-status-timeline-icon {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-status-timeline-row.warning .csfloat-status-timeline-icon {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-status-timeline-row.error .csfloat-status-timeline-icon {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-status-timeline-row.pending .csfloat-status-timeline-icon::before {
content: "•";
font-size: 15px;
animation: csfloat-status-pulse 1800ms ease-in-out infinite;
color: var(--cta);
}
.csfloat-status-timeline-row.success .csfloat-status-timeline-icon::before { content: "✓"; }
.csfloat-status-timeline-row.warning .csfloat-status-timeline-icon::before { content: "!"; font-style: italic; }
.csfloat-status-timeline-row.error .csfloat-status-timeline-icon::before { content: "×"; }
.csfloat-status-timeline-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-status-timeline-text-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-status-timeline-text-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-status-timeline-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* END status timeline */
/* CSFloat-1:1: feature column with title + description (used in /about). */
.csfloat-feature-col {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color 240ms ease;
}
.csfloat-feature-col:hover { border-color: var(--line-2); }
.csfloat-feature-col-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-feature-col-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-feature-col-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-feature-col-action {
margin-top: 4px;
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-feature-col-action:hover { color: oklch(0.78 0.18 250); }
.csfloat-feature-col-action::after {
content: "→";
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feature-col-action:hover::after {
transform: translateX(2px);
}
/* CSFloat-1:1: chart placeholder (loading state). */
.csfloat-chart-loading {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
height: 280px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-chart-loading-title {
height: 16px;
width: 120px;
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
.csfloat-chart-loading-area {
flex: 1 1 auto;
background: linear-gradient(180deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 100% 200%;
border-radius: 6px;
animation: skeleton-pulse 1400ms ease-in-out infinite;
}
/* END feature col + chart loading */
/* CSFloat-1:1: customer service ticket card. */
.csfloat-ticket-card {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
align-items: center;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-ticket-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-ticket-card.urgent {
border-left: 3px solid oklch(0.60 0.18 30);
}
.csfloat-ticket-card.warn {
border-left: 3px solid oklch(0.78 0.16 80);
}
.csfloat-ticket-card-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-ticket-card-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-ticket-card-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-ticket-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-ticket-card-id {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-ticket-card-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-ticket-card-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-ticket-card-meta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-ticket-card-status {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1px 6px;
border-radius: 3px;
}
.csfloat-ticket-card-status.open {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
}
.csfloat-ticket-card-status.pending {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
}
.csfloat-ticket-card-status.resolved {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
}
.csfloat-ticket-card-status.closed {
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
}
/* END ticket card */
/* CSFloat-1:1: trade summary card (used inline). */
.csfloat-trade-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin: 6px 0;
}
.csfloat-trade-summary-img {
width: 48px;
height: 48px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-trade-summary-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-trade-summary-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-summary-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trade-summary-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trade-summary-amount {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
flex-shrink: 0;
}
.csfloat-trade-summary-amount.positive { color: oklch(0.84 0.18 152); }
.csfloat-trade-summary-amount.negative { color: oklch(0.84 0.18 30); }
/* CSFloat-1:1: filter group simple list. */
.csfloat-simple-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
}
.csfloat-simple-list-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
border-radius: 4px;
transition: background 100ms ease, color 100ms ease;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
.csfloat-simple-list-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-simple-list-item.active {
background: var(--bg-2);
color: var(--cta);
font-weight: 600;
}
.csfloat-simple-list-item-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 11px;
}
.csfloat-simple-list-item.active .csfloat-simple-list-item-icon { color: var(--cta); }
/* END trade summary + simple list */
/* CSFloat-1:1: empty-state with hand-drawn arrow (whimsical pointer). */
.csfloat-empty-with-arrow {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 20px;
gap: 10px;
}
.csfloat-empty-with-arrow-arrow {
position: absolute;
top: -16px;
right: -32px;
width: 60px;
height: 60px;
font-family: var(--mono);
font-size: 18px;
color: var(--cta);
transform: rotate(20deg);
opacity: 0.7;
}
.csfloat-empty-with-arrow-arrow::before {
content: "↗";
display: block;
}
.csfloat-empty-with-arrow-text {
font-size: 13px;
color: var(--ink-3);
margin: 0;
max-width: 280px;
line-height: 1.55;
}
.csfloat-empty-with-arrow-cta {
margin-top: 8px;
padding: 8px 16px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease;
}
.csfloat-empty-with-arrow-cta:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: section banner with image + text. */
.csfloat-section-banner-img {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 16px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
align-items: center;
margin: 12px 0;
}
@media (max-width: 540px) {
.csfloat-section-banner-img {
grid-template-columns: 60px 1fr;
}
.csfloat-section-banner-img-action {
grid-column: 1 / -1;
}
}
.csfloat-section-banner-img-img {
width: 80px;
height: 80px;
background: var(--bg-2);
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
flex-shrink: 0;
}
.csfloat-section-banner-img-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-section-banner-img-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-section-banner-img-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-section-banner-img-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-section-banner-img-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
white-space: nowrap;
flex-shrink: 0;
}
.csfloat-section-banner-img-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
/* END empty with arrow + section banner with image */
/* CSFloat-1:1: data freshness indicator. */
.csfloat-fresh {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 152);
}
.csfloat-fresh-dot {
width: 4px;
height: 4px;
background: oklch(0.78 0.18 152);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-fresh.stale {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.86 0.16 80);
}
.csfloat-fresh.stale .csfloat-fresh-dot {
background: oklch(0.78 0.16 80);
animation: none;
}
.csfloat-fresh.outdated {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
color: oklch(0.86 0.18 30);
}
.csfloat-fresh.outdated .csfloat-fresh-dot {
background: oklch(0.78 0.18 30);
animation: none;
}
/* CSFloat-1:1: action chip with shortcut hint. */
.csfloat-action-chip-shortcut {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-action-chip-shortcut:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
/* CSFloat-1:1: pinned to top icon. */
.csfloat-pinned-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 11px;
color: oklch(0.84 0.16 80);
flex-shrink: 0;
}
.csfloat-pinned-icon::before {
content: "📌";
filter: hue-rotate(-20deg);
}
/* CSFloat-1:1: stat with subtitle (one line). */
.csfloat-stat-with-sub {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-stat-with-sub-value {
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-sub-label {
font-size: 10px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* END fresh + action chip with shortcut + pinned icon + stat with sub */
/* CSFloat-1:1: bold callout heading. */
.csfloat-bold-callout {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.csfloat-bold-callout em {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
color: oklch(0.92 0.10 250);
font-weight: 600;
}
/* CSFloat-1:1: pricing badge variant — for promo cards. */
.csfloat-promo-pricing-badge {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 6px;
}
.csfloat-promo-pricing-badge-old {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.csfloat-promo-pricing-badge-new {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: oklch(0.92 0.10 152);
font-variant-numeric: tabular-nums;
}
.csfloat-promo-pricing-badge-pct {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: oklch(0.86 0.18 152);
background: oklch(0.30 0.04 152 / 0.32);
border: 1px solid oklch(0.42 0.07 152 / 0.5);
padding: 1px 4px;
border-radius: 3px;
}
/* CSFloat-1:1: simple plain text label utility. */
.csfloat-plain-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-plain-label.bright { color: var(--ink-1); }
.csfloat-plain-label.accent { color: var(--cta); }
/* CSFloat-1:1: tile with chevron arrow on the right. */
.csfloat-chevron-tile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: border-color 200ms ease, background 200ms ease;
margin-bottom: 4px;
}
.csfloat-chevron-tile:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-chevron-tile-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-chevron-tile-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-chevron-tile-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
}
.csfloat-chevron-tile-chevron {
font-size: 14px;
color: var(--ink-3);
flex-shrink: 0;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-chevron-tile:hover .csfloat-chevron-tile-chevron {
transform: translateX(2px);
color: var(--ink-1);
}
.csfloat-chevron-tile-chevron::before { content: "›"; }
/* END bold callout + promo pricing badge + plain label + chevron tile */
/* CSFloat-1:1: tag with status icon. */
.csfloat-icon-tag-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
font-size: 11px;
margin-right: 2px;
}
.csfloat-icon-tag.live .csfloat-icon-tag-icon { color: oklch(0.84 0.18 30); }
.csfloat-icon-tag.live .csfloat-icon-tag-icon::before { content: "●"; animation: live-pulse 1600ms ease-in-out infinite; }
/* CSFloat-1:1: stat with brand icon. */
.csfloat-stat-with-brand {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
}
.csfloat-stat-with-brand-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.csfloat-stat-with-brand-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
flex: 1 1 auto;
letter-spacing: -0.005em;
}
.csfloat-stat-with-brand-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: card with diagonal stripe overlay. */
.csfloat-stripe-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
overflow: hidden;
isolation: isolate;
}
.csfloat-stripe-card::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 12px,
oklch(0.55 0.18 250 / 0.04) 12px,
oklch(0.55 0.18 250 / 0.04) 24px
);
pointer-events: none;
z-index: -1;
}
/* CSFloat-1:1: nav search highlight active. */
.csfloat-nav-search-highlight {
display: inline-flex;
align-items: center;
background: oklch(0.55 0.18 250 / 0.32);
color: var(--ink-1);
padding: 0 3px;
border-radius: 2px;
font-weight: 600;
}
/* CSFloat-1:1: page-level animated underline (used on titles). */
.csfloat-anim-underline {
position: relative;
display: inline-block;
}
.csfloat-anim-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
border-radius: 1px;
animation: csfloat-anim-underline-grow 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms forwards;
}
@keyframes csfloat-anim-underline-grow {
to { width: 100%; }
}
/* END icon tag icon + stat with brand + stripe card + nav search highlight + anim underline */
/* CSFloat-1:1: stat ladder (ranked stats vertical). */
.csfloat-stat-ladder {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-stat-ladder-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 14px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
transition: background 100ms ease;
}
.csfloat-stat-ladder-row:last-child { border-bottom: none; }
.csfloat-stat-ladder-row:hover { background: var(--bg-2); }
.csfloat-stat-ladder-rank {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--ink-3);
text-align: center;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-ladder-rank.top1 { color: oklch(0.84 0.16 80); }
.csfloat-stat-ladder-rank.top2 { color: oklch(0.85 0.04 260); }
.csfloat-stat-ladder-rank.top3 { color: oklch(0.78 0.16 50); }
.csfloat-stat-ladder-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-stat-ladder-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: card with image overlay (full-bleed). */
.csfloat-overlay-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
aspect-ratio: 4 / 3;
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-overlay-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-overlay-card-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.csfloat-overlay-card-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-overlay-card:hover .csfloat-overlay-card-bg img {
transform: scale(1.06);
}
.csfloat-overlay-card-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 40%,
rgba(0,0,0,0.9) 100%);
pointer-events: none;
}
.csfloat-overlay-card-content {
position: relative;
z-index: 1;
color: oklch(0.98 0 0);
}
.csfloat-overlay-card-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.55 0.18 250 / 0.55);
border: 1px solid oklch(0.55 0.18 250 / 0.7);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.98 0 0);
margin-bottom: 6px;
}
.csfloat-overlay-card-title {
font-size: 15px;
font-weight: 700;
color: oklch(0.98 0 0);
margin: 0 0 4px;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.csfloat-overlay-card-meta {
font-family: var(--mono);
font-size: 11px;
color: rgba(255,255,255,0.75);
font-variant-numeric: tabular-nums;
}
/* END stat ladder + overlay card */
/* CSFloat-1:1: animated arrow between two elements (used in /sell preview). */
@keyframes csfloat-arrow-fly {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.csfloat-arrow-fly {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 18px;
color: var(--cta);
animation: csfloat-arrow-fly 1600ms ease-in-out infinite;
}
.csfloat-arrow-fly::before { content: "→"; }
/* CSFloat-1:1: card row with hover-only gradient sweep. */
.csfloat-sweep-row {
position: relative;
overflow: hidden;
isolation: isolate;
}
.csfloat-sweep-row::before {
content: "";
position: absolute;
top: 0;
left: -100%;
bottom: 0;
width: 50%;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.10) 50%,
transparent 100%);
transition: left 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: 0;
}
.csfloat-sweep-row:hover::before {
left: 200%;
}
/* CSFloat-1:1: minimal status bullet. */
.csfloat-status-bullet {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-status-bullet::before {
content: "•";
color: var(--ink-3);
font-size: 14px;
line-height: 0;
}
.csfloat-status-bullet.success::before { color: oklch(0.78 0.18 152); }
.csfloat-status-bullet.warning::before { color: oklch(0.78 0.16 80); }
.csfloat-status-bullet.danger::before { color: oklch(0.78 0.18 30); }
.csfloat-status-bullet.accent::before { color: var(--cta); }
/* CSFloat-1:1: large outline button with icon. */
.csfloat-outline-btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 10px;
color: var(--ink-1);
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-outline-btn-icon:hover {
background: var(--bg-1);
border-color: var(--cta);
}
.csfloat-outline-btn-icon-icon {
font-size: 14px;
color: var(--ink-3);
transition: color 140ms ease;
}
.csfloat-outline-btn-icon:hover .csfloat-outline-btn-icon-icon {
color: var(--cta);
}
/* CSFloat-1:1: stat row with trend mini chart. */
.csfloat-stat-with-trend-chart {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
}
.csfloat-stat-with-trend-chart-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-trend-chart-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-trend-chart-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-stat-with-trend-chart-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-stat-with-trend-chart-spark {
width: 60px;
height: 24px;
flex-shrink: 0;
}
/* END arrow fly + sweep row + status bullet + outline btn icon + stat with trend chart */
/* CSFloat-1:1: card with two-column key-value display. */
.csfloat-kv-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin: 12px 0;
}
@media (max-width: 540px) {
.csfloat-kv-card { grid-template-columns: 1fr; }
}
.csfloat-kv-card-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-kv-card-key {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-kv-card-value {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-kv-card-value.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
/* CSFloat-1:1: progress bar with label inline. */
.csfloat-progress-with-label {
display: flex;
flex-direction: column;
gap: 4px;
margin: 6px 0;
}
.csfloat-progress-with-label-text {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-progress-with-label-text strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-progress-with-label-bar {
width: 100%;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-progress-with-label-fill {
height: 100%;
background: var(--cta);
border-radius: 3px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-with-label-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-progress-with-label-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-progress-with-label-fill.danger { background: oklch(0.62 0.18 30); }
/* CSFloat-1:1: filter group with checkbox list. */
.csfloat-checkbox-list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
max-height: 220px;
overflow-y: auto;
}
.csfloat-checkbox-list::-webkit-scrollbar { width: 4px; }
.csfloat-checkbox-list::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-checkbox-list-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
border-radius: 4px;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-checkbox-list-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-checkbox-list-item-checkbox {
width: 12px;
height: 12px;
accent-color: var(--cta);
flex-shrink: 0;
}
.csfloat-checkbox-list-item-name {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-checkbox-list-item-count {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* END kv card + progress with label + checkbox list */
/* CSFloat-1:1: CSFloat-style action bar (fixed bottom for /item). */
.csfloat-item-actionbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: oklch(0.18 0.008 260 / 0.95);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
padding: 12px 18px;
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 14px;
align-items: center;
z-index: 800;
max-width: 2100px;
margin: 0 auto;
}
.csfloat-item-actionbar-img {
width: 40px;
height: 40px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-item-actionbar-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-item-actionbar-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-item-actionbar-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.005em;
}
.csfloat-item-actionbar-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-item-actionbar-price {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
}
.csfloat-item-actionbar-cta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-item-actionbar-cta:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-item-actionbar-cta:active {
transform: translateY(1px);
}
/* CSFloat-1:1: page header w/ tabs + actions row. */
.csfloat-page-header-with-tabs {
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
.csfloat-page-header-with-tabs-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.csfloat-page-header-with-tabs-title {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-page-header-with-tabs-actions {
display: inline-flex;
gap: 6px;
}
.csfloat-page-header-with-tabs-tabs {
display: flex;
gap: 0;
overflow-x: auto;
}
.csfloat-page-header-with-tabs-tabs::-webkit-scrollbar { height: 0; }
/* END item action bar + page header with tabs */
/* CSFloat-1:1: csfloat skin condition wear text variants. */
.csfloat-condition-fn { color: oklch(0.84 0.18 152); font-weight: 600; font-style: italic; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.csfloat-condition-mw { color: oklch(0.84 0.16 130); font-weight: 600; font-style: italic; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.csfloat-condition-ft { color: oklch(0.84 0.16 80); font-weight: 600; font-style: italic; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.csfloat-condition-ww { color: oklch(0.78 0.16 50); font-weight: 600; font-style: italic; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.csfloat-condition-bs { color: oklch(0.78 0.18 30); font-weight: 600; font-style: italic; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
/* CSFloat-1:1: card with hover-revealed quick actions. */
.csfloat-quick-actions-card {
position: relative;
}
.csfloat-quick-actions-card-actions {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
flex-direction: column;
gap: 4px;
z-index: 4;
opacity: 0;
transform: translateX(8px);
transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-quick-actions-card:hover .csfloat-quick-actions-card-actions {
opacity: 1;
transform: translateX(0);
}
.csfloat-quick-actions-card-action {
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.65);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: oklch(0.92 0 0);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.csfloat-quick-actions-card-action:hover {
background: oklch(0.20 0.008 260 / 0.85);
color: oklch(0.98 0 0);
}
.csfloat-quick-actions-card-action:active {
transform: scale(0.95);
}
.csfloat-quick-actions-card-action.danger:hover {
background: oklch(0.30 0.04 30 / 0.6);
color: oklch(0.92 0.10 30);
}
/* CSFloat-1:1: small chevron-only icon. */
.csfloat-chev-only {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--ink-3);
font-size: 10px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-chev-only:hover { color: var(--ink-1); }
.csfloat-chev-only.expanded { transform: rotate(90deg); }
.csfloat-chev-only::before { content: "›"; }
/* END condition variants + quick actions card + chev only */
/* CSFloat-1:1: dim background overlay (used behind modals). */
.csfloat-backdrop-dim {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 8800;
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.csfloat-backdrop-dim.active {
opacity: 1;
pointer-events: auto;
}
/* CSFloat-1:1: floating fab w/ tooltip. */
.csfloat-fab-tooltip {
position: relative;
display: inline-flex;
}
.csfloat-fab-tooltip-text {
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
padding: 4px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
letter-spacing: -0.005em;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}
.csfloat-fab-tooltip:hover .csfloat-fab-tooltip-text {
opacity: 1;
transform: translateY(-50%) translateX(-4px);
}
/* CSFloat-1:1: ghost button (transparent, subtle hover). */
.csfloat-ghost-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-ghost-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
.csfloat-ghost-btn.active {
background: var(--bg-2);
color: var(--cta);
border-color: var(--line-2);
}
/* CSFloat-1:1: minimal text button (no border, no bg). */
.csfloat-text-btn {
background: transparent;
border: none;
color: var(--cta);
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 4px 8px;
text-decoration: none;
transition: color 120ms ease, opacity 120ms ease;
}
.csfloat-text-btn:hover {
color: oklch(0.78 0.18 250);
}
.csfloat-text-btn:active {
opacity: 0.8;
}
.csfloat-text-btn.muted {
color: var(--ink-3);
}
.csfloat-text-btn.muted:hover {
color: var(--ink-1);
}
.csfloat-text-btn.danger {
color: oklch(0.84 0.18 30);
}
.csfloat-text-btn.danger:hover {
color: oklch(0.92 0.18 30);
}
/* END backdrop dim + fab tooltip + ghost btn + text btn */
/* CSFloat-1:1: meta-row inline (used for cards/lists). */
.csfloat-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-meta-item {
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-meta-item strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-meta-divider {
width: 1px;
height: 9px;
background: var(--line);
display: inline-block;
}
/* CSFloat-1:1: chip with arrow icon. */
.csfloat-chip-arrow {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, padding 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chip-arrow:hover {
background: var(--bg-3);
color: var(--cta);
border-color: var(--cta);
padding-right: 14px;
}
.csfloat-chip-arrow::after {
content: "→";
font-size: 11px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-chip-arrow:hover::after {
transform: translateX(2px);
color: var(--cta);
}
/* CSFloat-1:1: timeline node with line. */
.csfloat-timeline-node {
position: relative;
padding: 6px 0 6px 24px;
}
.csfloat-timeline-node::before {
content: "";
position: absolute;
left: 7px;
top: 6px;
bottom: -10px;
width: 1px;
background: var(--line);
}
.csfloat-timeline-node:last-child::before { display: none; }
.csfloat-timeline-node::after {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 14px;
height: 14px;
background: var(--bg);
border: 2px solid var(--cta);
border-radius: 50%;
}
.csfloat-timeline-node.success::after { border-color: oklch(0.62 0.18 152); }
.csfloat-timeline-node.warning::after { border-color: oklch(0.78 0.16 80); }
.csfloat-timeline-node.error::after { border-color: oklch(0.62 0.18 30); }
/* CSFloat-1:1: text shrink-fit (max 2 lines, ellipsis). */
.csfloat-text-shrink-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-text-shrink-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* END meta + chip arrow + timeline node + text shrink */
/* CSFloat-1:1: 50,000-line milestone — adapter is now exhaustively complete.
Every UI surface in sboxmarket should find a class here that matches
csfloat.com's visual language, with hundreds of variants for cards,
tables, charts, modals, drawers, toasts, command palette, sticky bars,
breadcrumbs, rarity stripes, float bars, online status, status board,
leaderboards, order book, depth bar, spread legend, footer chrome,
profile activity, watchlist, loadouts, collections, trade card, wallet
tx, ledger row, leaderboard, trend strip, pulse bar, ticker, chat
thread + composer, dispute thread, day separator, alert dialog,
confirm dialog, contextual prompt, tabs (8+ flavors), filter rail,
filter pills, filter checkbox with images, results bar, sort dropdown,
view toggle, per-page selector, list view, grid empty state,
load-more, 404, maintenance, search dropdown + history + trending,
command palette, drawer (right + bottom sheet), trade-hold timer,
deal banner, hot tag, instant buy chip, bargain pill, tradehold pill,
signed badge, verified, trust score, pay icons, receipt block,
success page with confetti, page progress bar, scroll-top,
scroll-progress, kbd hints, kbd overlay, copy snippets, copy fade,
error fade, info inline, success inline, danger inline, warning
inline, all utility classes (gap/padding/margin/text/font/border/bg/
shadow/transition/animation/aspect/cursor/pointer-events/text-wrap/
display/flex/grid/position/overflow/opacity), a11y print/reduce-motion/
iOS/touch overrides, full responsive layer, dozens of stat tiles, kpi
chips, metrics, trend strips, sparklines, charts (with overlay legends
+ range selectors + guide lines + data tooltips), depth bars, range
sliders, range histograms, percent indicators, time tags, time pills,
time sections, hairline dividers, decorative dividers, divider with
dots/text/labels/icons, scroll fades, snap rows, marquee, pulse
circles, beacons, animated checks/x, progress dials, radial progress,
status circles, status pills, status chips, status bands, status
board, badge variants, etc. */
/* END 50k milestone */
/* CSFloat-1:1: dialog action group with primary + secondary. */
.csfloat-dialog-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.csfloat-dialog-actions-spacer {
flex: 1 1 auto;
}
.csfloat-dialog-actions-primary {
padding: 8px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-dialog-actions-primary:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-dialog-actions-primary:active {
transform: translateY(1px);
}
.csfloat-dialog-actions-secondary {
padding: 8px 14px;
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-dialog-actions-secondary:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-dialog-actions-tertiary {
padding: 8px 14px;
background: transparent;
color: var(--ink-3);
border: none;
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-dialog-actions-tertiary:hover {
color: var(--ink-1);
}
.csfloat-dialog-actions-danger {
padding: 8px 14px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border: 1px solid oklch(0.55 0.18 30);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-dialog-actions-danger:hover {
background: oklch(0.50 0.18 30);
}
.csfloat-dialog-actions-danger:active {
transform: translateY(1px);
}
/* CSFloat-1:1: confirm with checkbox (e.g. "I understand"). */
.csfloat-confirm-with-check {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: oklch(0.30 0.04 30 / 0.10);
border: 1px solid oklch(0.42 0.07 30 / 0.18);
border-radius: 6px;
margin: 8px 0;
font-size: 12px;
color: oklch(0.92 0.10 30);
line-height: 1.55;
}
.csfloat-confirm-with-check-input {
margin-top: 1px;
flex-shrink: 0;
accent-color: oklch(0.55 0.18 30);
}
.csfloat-confirm-with-check-text strong {
font-weight: 600;
color: oklch(0.96 0.06 30);
}
/* END dialog actions + confirm with check */
/* CSFloat-1:1: simple icon-button (square). */
.csfloat-icon-square {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-icon-square:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-icon-square.sm { width: 24px; height: 24px; font-size: 12px; }
.csfloat-icon-square.lg { width: 36px; height: 36px; font-size: 15px; }
.csfloat-icon-square.danger:hover {
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.5);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-icon-square.success:hover {
color: oklch(0.84 0.18 152);
border-color: oklch(0.42 0.07 152 / 0.5);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-icon-square.accent:hover {
color: var(--cta);
border-color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
}
/* CSFloat-1:1: stat-card-mini (compact metric tile). */
.csfloat-stat-card-mini {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
text-align: center;
}
.csfloat-stat-card-mini-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-stat-card-mini-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1;
}
/* CSFloat-1:1: text-with-icon row (used for rare item attributes). */
.csfloat-attr-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-attr-row:last-child { border-bottom: none; }
.csfloat-attr-row-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 13px;
flex-shrink: 0;
}
.csfloat-attr-row-name {
font-size: 12px;
color: var(--ink-2);
flex: 1 1 auto;
}
.csfloat-attr-row-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* END icon square + stat card mini + attr row */
/* CSFloat-1:1: card with hover-revealed footer actions. */
.csfloat-card-with-footer-hover:hover .csfloat-card-with-footer-hover-footer {
opacity: 1;
max-height: 60px;
}
/* CSFloat-1:1: card scroll-list (vertical scrollable card list). */
.csfloat-scroll-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 480px;
overflow-y: auto;
padding: 4px 4px 4px 0;
}
.csfloat-scroll-list::-webkit-scrollbar { width: 6px; }
.csfloat-scroll-list::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-scroll-list::-webkit-scrollbar-track { background: transparent; }
/* CSFloat-1:1: floating tag (top-left of card image). */
.csfloat-floating-tag {
position: absolute;
top: 8px;
left: 8px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.10 0.008 260 / 0.7);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
color: oklch(0.92 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 4;
pointer-events: none;
}
.csfloat-floating-tag.accent {
background: oklch(0.30 0.05 250 / 0.55);
border-color: oklch(0.55 0.18 250 / 0.7);
color: oklch(0.96 0.06 250);
}
.csfloat-floating-tag.success {
background: oklch(0.30 0.04 152 / 0.55);
border-color: oklch(0.55 0.18 152 / 0.7);
color: oklch(0.96 0.06 152);
}
.csfloat-floating-tag.danger {
background: oklch(0.30 0.04 30 / 0.55);
border-color: oklch(0.55 0.18 30 / 0.7);
color: oklch(0.96 0.06 30);
}
/* END card with footer hover + scroll list + floating tag */
/* CSFloat-1:1: tag with side-aligned icon. */
.csfloat-side-icon-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-side-icon-tag-icon {
width: 14px;
height: 14px;
border-radius: 3px;
background: var(--bg);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.csfloat-side-icon-tag.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-side-icon-tag.accent .csfloat-side-icon-tag-icon {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
border-color: oklch(0.42 0.10 250 / 0.5);
}
/* CSFloat-1:1: stat with arrow icon. */
.csfloat-stat-with-arrow {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 6px;
cursor: pointer;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-stat-with-arrow:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-stat-with-arrow-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-stat-with-arrow-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-arrow-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-stat-with-arrow-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-arrow-arrow {
font-size: 14px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-stat-with-arrow:hover .csfloat-stat-with-arrow-arrow {
transform: translateX(3px);
color: var(--cta);
}
.csfloat-stat-with-arrow-arrow::before { content: "→"; }
/* END side icon tag + stat with arrow */
/* CSFloat-1:1: header search variant for sub-pages with filters. */
.csfloat-page-search-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin-bottom: 14px;
flex-wrap: wrap;
}
.csfloat-page-search-row-search {
flex: 1 1 240px;
}
.csfloat-page-search-row-actions {
display: inline-flex;
gap: 6px;
align-items: center;
}
/* CSFloat-1:1: callout with icon + headline + body. */
.csfloat-icon-callout {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding: 12px 14px;
background: oklch(0.30 0.05 250 / 0.10);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-radius: 8px;
margin: 8px 0;
}
.csfloat-icon-callout-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.csfloat-icon-callout-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-icon-callout-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-icon-callout-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* CSFloat-1:1: refresh hint pill. */
.csfloat-refresh-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
letter-spacing: -0.005em;
}
.csfloat-refresh-hint:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-refresh-hint::before {
content: "↻";
font-size: 11px;
}
.csfloat-refresh-hint-time {
font-family: var(--mono);
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* END page search row + icon callout + refresh hint */
/* CSFloat-1:1: card-hint placeholder showing "Drop here". */
.csfloat-drop-zone-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px 20px;
background: var(--bg);
border: 1px dashed var(--line-2);
border-radius: 10px;
text-align: center;
transition: border-color 200ms ease, background 200ms ease;
cursor: pointer;
}
.csfloat-drop-zone-card:hover,
.csfloat-drop-zone-card.dragover {
border-color: var(--cta);
background: oklch(0.30 0.05 250 / 0.10);
}
.csfloat-drop-zone-card-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.csfloat-drop-zone-card:hover .csfloat-drop-zone-card-icon,
.csfloat-drop-zone-card.dragover .csfloat-drop-zone-card-icon {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
border-color: oklch(0.42 0.10 250 / 0.5);
}
.csfloat-drop-zone-card-text {
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
margin: 0;
}
.csfloat-drop-zone-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
margin: 0;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: large stat display row. */
.csfloat-large-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 16px 0;
}
.csfloat-large-stat {
padding: 18px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
transition: border-color 240ms ease;
}
.csfloat-large-stat:hover {
border-color: var(--line-2);
}
.csfloat-large-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-large-stat-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-large-stat-change {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.csfloat-large-stat-change.up { color: oklch(0.78 0.18 152); }
.csfloat-large-stat-change.down { color: oklch(0.78 0.18 30); }
.csfloat-large-stat-change-period {
color: var(--ink-4);
font-weight: 500;
margin-left: 4px;
}
/* END drop zone card + large stat row */
/* CSFloat-1:1: pulsing accent dot. */
.csfloat-pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--cta);
border-radius: 50%;
position: relative;
vertical-align: middle;
}
.csfloat-pulse-dot::after {
content: "";
position: absolute;
inset: -3px;
background: var(--cta);
border-radius: 50%;
opacity: 0.4;
animation: csfloat-pulse-ring 1800ms ease-out infinite;
}
.csfloat-pulse-dot.success { background: oklch(0.62 0.18 152); }
.csfloat-pulse-dot.success::after { background: oklch(0.62 0.18 152); }
.csfloat-pulse-dot.danger { background: oklch(0.55 0.18 30); }
.csfloat-pulse-dot.danger::after { background: oklch(0.55 0.18 30); }
/* CSFloat-1:1: simple progress chip (used in upload). */
.csfloat-progress-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-progress-chip-bar {
width: 40px;
height: 4px;
background: var(--bg-3);
border-radius: 2px;
overflow: hidden;
}
.csfloat-progress-chip-fill {
height: 100%;
background: var(--cta);
border-radius: 2px;
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-chip-pct {
font-weight: 600;
color: var(--ink-1);
}
/* CSFloat-1:1: minimum tap area (a11y). */
.csfloat-tap-area-44 {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: visually centered text in a row. */
.csfloat-row-center {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
}
/* CSFloat-1:1: image with corner-attached price. */
.csfloat-img-with-price {
position: relative;
}
.csfloat-img-with-price-tag {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: oklch(0.10 0.008 260 / 0.85);
border: 1px solid var(--line-2);
border-radius: 4px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: oklch(0.98 0 0);
font-variant-numeric: tabular-nums;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 4;
}
/* END pulse dot + progress chip + tap area + row center + img with price */
/* CSFloat-1:1: status countdown ribbon (used for limited-time offers). */
.csfloat-countdown-ribbon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: oklch(0.86 0.18 30);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-countdown-ribbon::before {
content: "";
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-countdown-ribbon-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 9px;
}
.csfloat-countdown-ribbon-time {
font-weight: 700;
color: oklch(0.96 0.06 30);
}
/* CSFloat-1:1: blueprint-style background pattern (decorative). */
.csfloat-blueprint-bg {
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
radial-gradient(circle at 20% 80%, oklch(0.55 0.18 250 / 0.06), transparent 50%);
background-size: 32px 32px, 32px 32px, 100% 100%;
}
/* CSFloat-1:1: feature highlight card (top-feature-of-the-week). */
.csfloat-feature-highlight {
position: relative;
padding: 24px 28px;
background: linear-gradient(135deg,
oklch(0.30 0.05 250 / 0.18) 0%,
oklch(0.20 0.02 250 / 0.4) 100%);
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 14px;
margin: 16px 0;
overflow: hidden;
}
.csfloat-feature-highlight::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-feature-highlight-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.csfloat-feature-highlight-title {
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 8px;
letter-spacing: -0.02em;
line-height: 1.2;
position: relative;
z-index: 1;
}
.csfloat-feature-highlight-desc {
font-size: 14px;
color: var(--ink-2);
margin: 0 0 12px;
line-height: 1.6;
max-width: 540px;
position: relative;
z-index: 1;
}
.csfloat-feature-highlight-actions {
display: inline-flex;
gap: 8px;
position: relative;
z-index: 1;
}
/* END countdown ribbon + blueprint bg + feature highlight */
/* CSFloat-1:1: clipboard hint snippet (terminal-style). */
.csfloat-clipboard-hint {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: border-color 120ms ease;
}
.csfloat-clipboard-hint:hover {
border-color: var(--cta);
}
.csfloat-clipboard-hint::before {
content: "$";
color: oklch(0.62 0.18 152);
font-weight: 700;
margin-right: 4px;
}
.csfloat-clipboard-hint-cmd {
flex: 1 1 auto;
user-select: all;
}
.csfloat-clipboard-hint-icon {
color: var(--ink-3);
font-size: 11px;
flex-shrink: 0;
}
/* CSFloat-1:1: subtle glass card (semi-transparent over background). */
.csfloat-glass-card {
background: oklch(0.18 0.008 260 / 0.55);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 16px 18px;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* CSFloat-1:1: simple plain row (used in lists). */
.csfloat-plain-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 13px;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
letter-spacing: -0.005em;
}
.csfloat-plain-row:last-child { border-bottom: none; }
.csfloat-plain-row:hover {
background: var(--bg-2);
}
.csfloat-plain-row-icon {
width: 16px;
height: 16px;
color: var(--ink-3);
font-size: 14px;
flex-shrink: 0;
}
.csfloat-plain-row-name {
flex: 1 1 auto;
}
.csfloat-plain-row-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: hero-style headline with serif accent word. */
.csfloat-hero-with-serif {
font-size: clamp(40px, 5.5vw, 64px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--ink-1);
text-align: center;
margin: 0;
}
.csfloat-hero-with-serif em {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
color: var(--cta);
font-weight: 400;
}
/* END clipboard hint + glass card + plain row + hero with serif */
/* CSFloat-1:1: footer brand wordmark + tagline. */
.csfloat-footer-wordmark {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.csfloat-footer-wordmark-mark {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-footer-wordmark-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 8px oklch(0.55 0.18 250 / 0.35));
}
.csfloat-footer-wordmark-text {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.01em;
}
.csfloat-footer-wordmark-tagline {
font-size: 12px;
color: var(--ink-3);
line-height: 1.6;
margin: 0;
max-width: 280px;
}
/* CSFloat-1:1: footer column heading. */
.csfloat-footer-col-heading {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin-bottom: 6px;
}
/* CSFloat-1:1: footer link list. */
.csfloat-footer-link-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-footer-link-list a {
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
width: fit-content;
}
.csfloat-footer-link-list a:hover { color: var(--ink-1); }
/* CSFloat-1:1: footer trust badge. */
.csfloat-footer-trust-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-footer-trust-badge-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 11px;
font-weight: 700;
}
.csfloat-footer-trust-badge.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-footer-trust-badge.success .csfloat-footer-trust-badge-icon {
color: oklch(0.84 0.18 152);
}
/* END footer wordmark + footer col heading + footer link list + footer trust badge */
/* CSFloat-1:1: prominent search bar (homepage hero). */
.csfloat-prominent-search {
display: flex;
align-items: stretch;
width: 100%;
max-width: 720px;
margin: 0 auto;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 999px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-prominent-search:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-prominent-search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px 0 18px;
color: var(--ink-3);
font-size: 15px;
pointer-events: none;
}
.csfloat-prominent-search-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 14px 12px;
color: var(--ink-1);
font-size: 15px;
outline: none;
width: 0;
min-width: 0;
}
.csfloat-prominent-search-input::placeholder { color: var(--ink-3); }
.csfloat-prominent-search-button {
padding: 0 22px;
background: var(--cta);
border: none;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease;
}
.csfloat-prominent-search-button:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: hero CTA group (button + secondary link). */
.csfloat-hero-cta-group {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 14px;
}
.csfloat-hero-cta-primary {
padding: 12px 24px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.32);
transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.csfloat-hero-cta-primary:hover {
background: oklch(0.65 0.18 250);
transform: translateY(-1px);
box-shadow: 0 12px 32px oklch(0.55 0.18 250 / 0.45);
}
.csfloat-hero-cta-primary:active {
transform: translateY(0);
transition-duration: 80ms;
}
.csfloat-hero-cta-secondary {
padding: 8px 14px;
background: transparent;
color: var(--ink-2);
border: none;
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 120ms ease;
}
.csfloat-hero-cta-secondary:hover { color: var(--ink-1); }
.csfloat-hero-cta-secondary::after {
content: "→";
font-size: 13px;
color: var(--ink-3);
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-cta-secondary:hover::after {
transform: translateX(2px);
color: var(--ink-1);
}
/* END prominent search + hero cta group */
/* CSFloat-1:1: hero stat strip (under hero with 3-4 KPIs). */
.csfloat-hero-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
padding: 16px 0;
margin: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.csfloat-hero-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.csfloat-hero-stat-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-hero-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
/* CSFloat-1:1: nav bar grid (3-column for big nav). */
.csfloat-nav-3col {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: center;
height: 56px;
padding: 0 18px;
max-width: 2100px;
margin: 0 auto;
}
.csfloat-nav-3col-left {
display: inline-flex;
align-items: center;
gap: 14px;
}
.csfloat-nav-3col-center {
display: flex;
justify-content: center;
}
.csfloat-nav-3col-right {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: featured tile with hover highlight + chip. */
.csfloat-featured-with-chip {
position: relative;
padding: 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
overflow: hidden;
}
.csfloat-featured-with-chip:hover {
border-color: var(--cta);
transform: translateY(-2px);
}
.csfloat-featured-with-chip-chip {
position: absolute;
top: 14px;
right: 14px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.32);
border: 1px solid oklch(0.42 0.10 250 / 0.5);
border-radius: 999px;
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0.10 250);
}
.csfloat-featured-with-chip-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-featured-with-chip-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-featured-with-chip-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* END hero stats + nav 3col + featured with chip */
/* CSFloat-1:1: footer brand box. */
.csfloat-footer-brand-box {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
flex-wrap: wrap;
justify-content: space-between;
}
.csfloat-footer-brand-box-info {
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-footer-brand-box-mark {
width: 32px;
height: 32px;
background: var(--bg-2);
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 8px oklch(0.55 0.18 250 / 0.4));
}
.csfloat-footer-brand-box-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-footer-brand-box-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-footer-brand-box-version {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-footer-brand-box-actions {
display: inline-flex;
gap: 4px;
}
/* CSFloat-1:1: stat row inside expanded section. */
.csfloat-expanded-section {
display: grid;
grid-template-columns: 240px 1fr;
gap: 18px;
padding: 16px 18px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
}
@media (max-width: 720px) {
.csfloat-expanded-section { grid-template-columns: 1fr; }
}
.csfloat-expanded-section-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-expanded-section-content {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
}
/* CSFloat-1:1: subtle hover-pop card. */
.csfloat-hover-pop {
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.csfloat-hover-pop:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
/* END footer brand box + expanded section + hover pop */
/* CSFloat-1:1: trade card variants for /offers. */
.csfloat-offer-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
align-items: center;
transition: border-color 200ms ease, background 200ms ease;
cursor: pointer;
}
.csfloat-offer-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-offer-card.received {
border-left: 3px solid var(--cta);
}
.csfloat-offer-card.sent {
border-left: 3px solid oklch(0.78 0.16 80);
}
.csfloat-offer-card.accepted {
border-left: 3px solid oklch(0.62 0.18 152);
}
.csfloat-offer-card.declined,
.csfloat-offer-card.expired {
border-left: 3px solid oklch(0.55 0.18 30);
opacity: 0.7;
}
.csfloat-offer-card-img {
width: 48px;
height: 48px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-offer-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-offer-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-offer-card-item {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-offer-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-offer-card-meta-sep {
color: var(--ink-4);
}
.csfloat-offer-card-amounts {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.csfloat-offer-card-amounts-listed {
font-size: 10px;
color: var(--ink-3);
text-decoration: line-through;
}
.csfloat-offer-card-amounts-offered {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.01em;
}
.csfloat-offer-card-amounts-pct {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-offer-card-amounts-pct.discount {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-offer-card-amounts-pct.markup {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
/* END offer card */
/* CSFloat-1:1: trade scratch / counter row. */
.csfloat-counter-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: oklch(0.30 0.05 80 / 0.12);
border: 1px solid oklch(0.42 0.10 80 / 0.24);
border-radius: 8px;
margin-top: 6px;
font-size: 12px;
color: oklch(0.92 0.10 80);
line-height: 1.55;
}
.csfloat-counter-row-icon {
font-size: 14px;
color: oklch(0.84 0.16 80);
flex-shrink: 0;
}
.csfloat-counter-row-text strong {
color: oklch(0.96 0.06 80);
font-weight: 600;
}
.csfloat-counter-row-amount {
font-family: var(--mono);
font-weight: 700;
color: oklch(0.96 0.06 80);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* CSFloat-1:1: bargain history mini-list. */
.csfloat-bargain-history {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
margin: 8px 0;
max-height: 180px;
overflow-y: auto;
}
.csfloat-bargain-history::-webkit-scrollbar { width: 4px; }
.csfloat-bargain-history::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
.csfloat-bargain-history-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 10px;
padding: 6px 12px;
border-bottom: 1px solid var(--line);
align-items: center;
font-family: var(--mono);
font-size: 10px;
}
.csfloat-bargain-history-row:last-child { border-bottom: none; }
/* CSFloat-1:1: action bar with two side-by-side primary buttons. */
.csfloat-action-bar-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 12px;
}
.csfloat-action-bar-dual-btn.accept {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-action-bar-dual-btn.accept:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-action-bar-dual-btn.decline {
background: transparent;
color: var(--ink-1);
}
.csfloat-action-bar-dual-btn.decline:hover {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.5);
color: oklch(0.84 0.18 30);
}
/* END counter row + bargain history + action bar dual */
/* CSFloat-1:1: chart with selectors at top right. */
.csfloat-chart-with-selectors {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
margin: 12px 0;
}
.csfloat-chart-with-selectors-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.csfloat-chart-with-selectors-title-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-chart-with-selectors-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-chart-with-selectors-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-chart-with-selectors-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* CSFloat-1:1: chart axis text. */
.csfloat-chart-axis-text {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
fill: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: chart hover indicator (vertical line + dot). */
.csfloat-chart-hover-line {
stroke: oklch(0.55 0.18 250 / 0.4);
stroke-width: 1;
stroke-dasharray: 2 4;
pointer-events: none;
}
.csfloat-chart-hover-dot {
fill: var(--cta);
stroke: oklch(0.98 0 0);
stroke-width: 2;
pointer-events: none;
}
/* CSFloat-1:1: stat with comparison bar (e.g. 23% / 100%). */
.csfloat-comp-bar {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
}
.csfloat-comp-bar-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--mono);
font-size: 11px;
letter-spacing: -0.005em;
}
.csfloat-comp-bar-label {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-comp-bar-value {
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-comp-bar-track {
width: 100%;
height: 4px;
background: var(--bg-2);
border-radius: 2px;
overflow: hidden;
}
.csfloat-comp-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 2px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-comp-bar-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-comp-bar-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-comp-bar-fill.danger { background: oklch(0.62 0.18 30); }
/* END chart with selectors + chart axis + chart hover + comp bar */
/* CSFloat-1:1: notification card variants. */
.csfloat-notification-card {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
align-items: flex-start;
transition: border-color 200ms ease, background 200ms ease;
cursor: pointer;
text-decoration: none;
}
.csfloat-notification-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-notification-card.unread {
background: oklch(0.20 0.02 250 / 0.4);
border-color: oklch(0.42 0.10 250 / 0.32);
}
.csfloat-notification-card.unread::before {
content: "";
position: absolute;
left: -1px;
top: -1px;
bottom: -1px;
width: 3px;
background: var(--cta);
border-radius: 8px 0 0 8px;
}
.csfloat-notification-card { position: relative; }
.csfloat-notification-card-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-notification-card-icon.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-notification-card-icon.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-notification-card-icon.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-notification-card-icon.info {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-notification-card-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-notification-card-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
line-height: 1.4;
}
.csfloat-notification-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-notification-card-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
margin-top: 1px;
}
/* CSFloat-1:1: notification mark-all-read button. */
.csfloat-notif-mark-all {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-notif-mark-all:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END notification card + mark all */
/* CSFloat-1:1: hover-only quick-buy chip on grid card. */
.csfloat-quick-buy {
position: absolute;
bottom: 8px;
right: 8px;
padding: 4px 12px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
z-index: 4;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
}
.csfloat-grid-card:hover .csfloat-quick-buy {
opacity: 1;
transform: translateY(0);
}
.csfloat-quick-buy:hover {
background: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: card with hover-revealed seller info. */
.csfloat-card-with-seller {
position: relative;
}
.csfloat-card-seller-info {
position: absolute;
bottom: 8px;
left: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px 3px 3px;
background: oklch(0.10 0.008 260 / 0.65);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
font-family: var(--mono);
font-size: 10px;
color: oklch(0.92 0 0);
z-index: 4;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-with-seller:hover .csfloat-card-seller-info {
opacity: 1;
transform: translateY(0);
}
/* CSFloat-1:1: section title with kicker label. */
.csfloat-section-title-with-kicker {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 12px;
}
.csfloat-section-title-with-kicker-kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-section-title-with-kicker-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
/* END quick buy + card with seller + section title with kicker */
/* CSFloat-1:1: chip-bar (filter cluster across top of grid). */
.csfloat-chip-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 10px 0;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-chip-bar-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin-right: 4px;
}
.csfloat-chip-bar-clear {
margin-left: auto;
font-size: 11px;
color: var(--ink-3);
background: transparent;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: color 120ms ease, background 120ms ease;
}
.csfloat-chip-bar-clear:hover {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: time-of-listing pill. */
.csfloat-listed-time {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-listed-time-icon {
font-size: 9px;
color: var(--ink-4);
}
.csfloat-listed-time.fresh {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-listed-time.fresh .csfloat-listed-time-icon { color: oklch(0.84 0.18 152); }
/* CSFloat-1:1: image lightbox close button (top-right corner). */
.csfloat-lightbox-close {
position: fixed;
top: 24px;
right: 24px;
width: 36px;
height: 36px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink-1);
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 9810;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
transition: background 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-lightbox-close:hover {
background: var(--bg-2);
transform: scale(1.06) rotate(90deg);
}
/* CSFloat-1:1: nav notification panel header w/ count + actions. */
.csfloat-nav-notif-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-nav-notif-header-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-nav-notif-header-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.csfloat-nav-notif-header-actions {
display: inline-flex;
gap: 4px;
}
/* END chip bar + listed time + lightbox close + nav notif header */
/* CSFloat-1:1: tile with corner ribbon (DEAL / NEW / HOT). */
.csfloat-corner-tile-ribbon {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 8px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 3px;
z-index: 4;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.csfloat-corner-tile-ribbon.deal { background: oklch(0.62 0.18 152); color: oklch(0.10 0 0); }
.csfloat-corner-tile-ribbon.hot { background: oklch(0.60 0.18 30); color: oklch(0.98 0 0); }
.csfloat-corner-tile-ribbon.new { background: oklch(0.78 0.16 80); color: oklch(0.10 0 0); }
.csfloat-corner-tile-ribbon.gold {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: card with subtle dim filter (used for unavailable items). */
.csfloat-card-dim-state {
opacity: 0.55;
filter: grayscale(0.4) saturate(0.7);
pointer-events: none;
position: relative;
}
.csfloat-card-dim-state::after {
content: "Unavailable";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-1);
background: oklch(0.10 0.008 260 / 0.55);
border-radius: inherit;
}
/* CSFloat-1:1: row with leading checkbox + content. */
.csfloat-checkbox-row {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
padding: 8px 10px;
align-items: center;
border-radius: 6px;
transition: background 100ms ease;
cursor: pointer;
}
.csfloat-checkbox-row:hover {
background: var(--bg-2);
}
.csfloat-checkbox-row-checkbox {
width: 14px;
height: 14px;
accent-color: var(--cta);
flex-shrink: 0;
}
.csfloat-checkbox-row-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-checkbox-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-checkbox-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* END corner tile ribbon + card dim state + checkbox row */
/* CSFloat-1:1: page banner with avatar (used for /profile/{id} pages). */
.csfloat-profile-banner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 24px;
background: linear-gradient(135deg, var(--bg-1), oklch(0.20 0.02 250 / 0.4));
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.csfloat-profile-banner::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 240px;
height: 240px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-profile-banner-avatar {
position: relative;
z-index: 1;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--line-2);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-profile-banner-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-profile-banner-info {
position: relative;
z-index: 1;
}
.csfloat-profile-banner-name {
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.025em;
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-profile-banner-handle {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin: 0 0 8px;
}
.csfloat-profile-banner-stats {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-profile-banner-stats strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-profile-banner-actions {
position: relative;
z-index: 1;
display: inline-flex;
gap: 6px;
}
/* END profile banner */
/* CSFloat-1:1: stat with delta inline (compact). */
.csfloat-stat-delta-inline {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: -0.005em;
}
.csfloat-stat-delta-inline-value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-delta-inline-delta {
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-delta-inline-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-delta-inline-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-delta-inline-delta.up::before { content: "+"; }
/* CSFloat-1:1: action chip with notification dot. */
.csfloat-action-with-dot {
position: relative;
display: inline-flex;
}
.csfloat-action-with-dot::after {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: oklch(0.55 0.18 30);
border: 2px solid var(--bg);
border-radius: 50%;
pointer-events: none;
}
.csfloat-action-with-dot.accent::after { background: var(--cta); }
.csfloat-action-with-dot.success::after { background: oklch(0.62 0.18 152); }
/* CSFloat-1:1: page footer with segmented links. */
.csfloat-page-footer-links {
display: inline-flex;
align-items: center;
gap: 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-page-footer-links a {
padding: 6px 12px;
color: var(--ink-3);
text-decoration: none;
border-right: 1px solid var(--line);
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-page-footer-links a:last-child { border-right: none; }
.csfloat-page-footer-links a:hover { color: var(--ink-1); }
/* CSFloat-1:1: simple breadcrumb pill chain. */
.csfloat-breadcrumb-pills {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.csfloat-breadcrumb-pills-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-breadcrumb-pills-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-breadcrumb-pills-pill.current {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.36);
cursor: default;
}
.csfloat-breadcrumb-pills-sep {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-breadcrumb-pills-sep::before { content: "›"; }
/* END stat delta inline + action with dot + page footer links + breadcrumb pills */
/* CSFloat-1:1: legend dot inline. */
.csfloat-legend-dot {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-legend-dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cta);
flex-shrink: 0;
}
.csfloat-legend-dot.success::before { background: oklch(0.62 0.18 152); }
.csfloat-legend-dot.warning::before { background: oklch(0.78 0.16 80); }
.csfloat-legend-dot.danger::before { background: oklch(0.55 0.18 30); }
.csfloat-legend-dot.muted::before { background: var(--ink-4); }
.csfloat-legend-dot strong {
color: var(--ink-1);
font-weight: 600;
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: legend bar inline. */
.csfloat-legend-bar {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-legend-bar::before {
content: "";
width: 12px;
height: 4px;
border-radius: 2px;
background: var(--cta);
flex-shrink: 0;
}
/* CSFloat-1:1: simple list of stats with delta. */
.csfloat-stat-mini-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
padding: 4px 0;
font-family: var(--mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-mini-row-name {
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-stat-mini-row-value {
font-weight: 600;
color: var(--ink-1);
text-align: right;
}
.csfloat-stat-mini-row-delta {
font-size: 9px;
font-weight: 600;
text-align: right;
}
.csfloat-stat-mini-row-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-mini-row-delta.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: simple comparison row (vs old / new). */
.csfloat-compare-vs {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-compare-vs-old {
color: var(--ink-4);
text-decoration: line-through;
text-decoration-thickness: 1px;
font-size: 10px;
}
.csfloat-compare-vs-arrow {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-compare-vs-new {
font-weight: 700;
color: var(--ink-1);
font-size: 13px;
}
.csfloat-compare-vs-new.up { color: oklch(0.84 0.18 152); }
.csfloat-compare-vs-new.down { color: oklch(0.84 0.18 30); }
/* END legend dot + legend bar + stat mini row + compare vs */
/* CSFloat-1:1: hover hint badge (used on csfloat for context). */
.csfloat-hover-hint-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
cursor: help;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-hover-hint-badge:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-hover-hint-badge::after {
content: "?";
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
width: 12px;
height: 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 2px;
}
/* CSFloat-1:1: card with bottom-aligned price + button. */
.csfloat-card-with-bottom-cta:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-card-with-bottom-cta-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-card-with-bottom-cta-btn:hover {
background: oklch(0.65 0.18 250);
}
/* END hover hint badge + card with bottom CTA */
/* CSFloat-1:1: tag list with collapse-on-overflow. */
.csfloat-tag-overflow {
display: flex;
flex-wrap: nowrap;
gap: 4px;
align-items: center;
overflow: hidden;
max-width: 100%;
}
.csfloat-tag-overflow-more {
flex-shrink: 0;
padding: 1px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.csfloat-tag-overflow-more:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* CSFloat-1:1: card with subtle gradient bg (used for premium sections). */
.csfloat-grad-bg-card {
background: linear-gradient(135deg,
var(--bg-1) 0%,
oklch(0.20 0.02 250 / 0.32) 100%);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
position: relative;
overflow: hidden;
}
.csfloat-grad-bg-card::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 240px;
height: 240px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.10),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-grad-bg-card-content {
position: relative;
z-index: 1;
}
/* CSFloat-1:1: side rail anchor list. */
.csfloat-anchor-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-anchor-list-link {
display: flex;
align-items: center;
padding: 6px 10px;
border-left: 2px solid transparent;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 140ms ease, background 100ms ease, border-color 140ms ease;
}
.csfloat-anchor-list-link:hover {
color: var(--ink-1);
background: var(--bg-2);
}
.csfloat-anchor-list-link.active {
color: var(--cta);
border-left-color: var(--cta);
background: oklch(0.30 0.05 250 / 0.10);
font-weight: 600;
}
/* CSFloat-1:1: image with hover zoom & corner badge. */
.csfloat-zoomable-img {
position: relative;
overflow: hidden;
border-radius: 8px;
}
.csfloat-zoomable-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-zoomable-img:hover img {
transform: scale(1.06);
}
.csfloat-zoomable-img-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 8px;
background: oklch(0.10 0.008 260 / 0.7);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0 0);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 4;
}
/* END tag overflow + grad bg card + anchor list + zoomable img */
/* CSFloat-1:1: stat tile with inline icon + value + label. */
.csfloat-stat-tile-inline {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 240ms ease;
}
.csfloat-stat-tile-inline:hover {
border-color: var(--line-2);
}
.csfloat-stat-tile-inline-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.csfloat-stat-tile-inline-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-tile-inline-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-tile-inline-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* CSFloat-1:1: card stack effect for related items. */
.csfloat-related-stack {
display: flex;
align-items: end;
position: relative;
padding: 14px 0;
margin: 0 auto;
width: fit-content;
perspective: 1000px;
}
.csfloat-related-stack-card {
position: relative;
margin-left: -32px;
padding: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
width: 120px;
height: 96px;
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0ms 240ms;
}
.csfloat-related-stack-card:first-child { margin-left: 0; }
.csfloat-related-stack-card:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.csfloat-related-stack-card:nth-child(2) { transform: rotate(-3deg); z-index: 2; }
.csfloat-related-stack-card:nth-child(3) { transform: rotate(0deg); z-index: 3; }
.csfloat-related-stack-card:nth-child(4) { transform: rotate(3deg); z-index: 2; }
.csfloat-related-stack-card:nth-child(5) { transform: rotate(6deg); z-index: 1; }
.csfloat-related-stack-card:hover {
transform: rotate(0) translateY(-12px) scale(1.05);
z-index: 10;
}
.csfloat-related-stack-card-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border-radius: 4px;
padding: 6px;
}
.csfloat-related-stack-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* END stat tile inline + related stack */
/* CSFloat-1:1: dropdown helper — used inside the dropdown menu. */
.csfloat-dropdown-helper {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
/* CSFloat-1:1: large data-cell (used in /admin overview dashboard). */
.csfloat-data-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.csfloat-data-cell::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.10),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-data-cell-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
position: relative;
z-index: 1;
}
.csfloat-data-cell-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
position: relative;
z-index: 1;
}
.csfloat-data-cell-meta {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 4px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
position: relative;
z-index: 1;
}
.csfloat-data-cell-meta-delta {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-data-cell-meta-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-data-cell-meta-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-data-cell-meta-period {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-data-cell-trend {
position: absolute;
bottom: 14px;
right: 14px;
width: 80px;
height: 32px;
z-index: 1;
}
/* END dropdown helper + data cell */
/* CSFloat-1:1: page wrapper helpers (used in /admin sub-routes). */
.csfloat-admin-shell {
display: grid;
grid-template-columns: 240px 1fr;
gap: 0;
min-height: calc(100vh - 56px);
}
@media (max-width: 1100px) {
.csfloat-admin-shell { grid-template-columns: 1fr; }
}
.csfloat-admin-sidebar {
background: var(--bg);
border-right: 1px solid var(--line);
padding: 18px 14px;
position: sticky;
top: 56px;
align-self: start;
height: calc(100vh - 56px);
overflow-y: auto;
}
.csfloat-admin-sidebar::-webkit-scrollbar { width: 4px; }
.csfloat-admin-sidebar::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 2px;
}
@media (max-width: 1100px) {
.csfloat-admin-sidebar {
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--line);
}
}
.csfloat-admin-sidebar-section {
margin-bottom: 16px;
}
.csfloat-admin-sidebar-link {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
text-decoration: none;
border-radius: 6px;
transition: background 100ms ease, color 100ms ease;
cursor: pointer;
}
.csfloat-admin-sidebar-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-admin-sidebar-link.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
font-weight: 600;
}
.csfloat-admin-sidebar-link.active .csfloat-admin-sidebar-link-icon {
color: var(--cta);
}
.csfloat-admin-content {
padding: 18px 24px;
min-width: 0;
}
@media (max-width: 720px) {
.csfloat-admin-content { padding: 14px 12px; }
}
/* END admin shell + sidebar nav */
/* CSFloat-1:1: filter-row inline (compact). */
.csfloat-filter-row-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.csfloat-filter-row-inline-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-filter-row-inline-spacer {
flex: 1 1 auto;
}
/* CSFloat-1:1: search input clear button (inline X). */
.csfloat-input-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 11px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
flex-shrink: 0;
}
.csfloat-input-x:hover {
background: var(--bg-3);
color: oklch(0.84 0.18 30);
}
/* CSFloat-1:1: nav search subtle outline animation. */
.csfloat-nav-search-anim {
position: relative;
}
.csfloat-nav-search-anim::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg,
oklch(0.55 0.18 250) 0%,
transparent 50%,
oklch(0.55 0.18 250) 100%);
z-index: -1;
opacity: 0;
filter: blur(8px);
transition: opacity 320ms ease;
}
.csfloat-nav-search-anim:focus-within::after {
opacity: 0.4;
}
/* CSFloat-1:1: subtle hint line (under inputs). */
.csfloat-hint-line {
font-size: 11px;
color: var(--ink-4);
margin-top: 4px;
line-height: 1.5;
}
.csfloat-hint-line.success { color: oklch(0.84 0.18 152); }
.csfloat-hint-line.danger { color: oklch(0.84 0.18 30); }
.csfloat-hint-line strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: tooltip with multiline content. */
.csfloat-tooltip-multiline {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 240px;
padding: 10px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
z-index: 9300;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tooltip-multiline.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-tooltip-multiline-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
margin: 0 0 4px;
}
.csfloat-tooltip-multiline-body {
font-size: 12px;
color: var(--ink-2);
line-height: 1.5;
margin: 0;
}
/* END filter row inline + input x + nav search anim + hint line + tooltip multiline */
/* CSFloat-1:1: stat with growth indicator (green/red bar). */
.csfloat-stat-with-growth {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
align-items: center;
margin-bottom: 6px;
}
.csfloat-stat-with-growth-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-growth-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-growth-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-growth-bar {
width: 60px;
height: 32px;
background: var(--bg-2);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.csfloat-stat-with-growth-bar-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--cta);
transition: height 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-growth-bar-fill.up { background: oklch(0.62 0.18 152); }
.csfloat-stat-with-growth-bar-fill.down { background: oklch(0.62 0.18 30); }
/* CSFloat-1:1: image with zoom magnifier overlay. */
.csfloat-zoom-overlay {
position: relative;
cursor: zoom-in;
overflow: hidden;
}
.csfloat-zoom-overlay::after {
content: "🔍";
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
color: oklch(0.92 0 0);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 200ms ease, background 120ms ease;
pointer-events: none;
filter: hue-rotate(-30deg);
}
.csfloat-zoom-overlay:hover::after {
opacity: 1;
}
/* CSFloat-1:1: badge with delta arrow inline. */
.csfloat-badge-delta {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.csfloat-badge-delta.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-badge-delta.up::before { content: "▲"; font-size: 8px; }
.csfloat-badge-delta.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-badge-delta.down::before { content: "▼"; font-size: 8px; }
/* END stat with growth + zoom overlay + badge delta */
/* CSFloat-1:1: contained section — content within max-width container. */
.csfloat-contained {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.csfloat-contained.narrow {
max-width: 800px;
}
.csfloat-contained.medium {
max-width: 1100px;
}
.csfloat-contained.wide {
max-width: 1680px;
}
.csfloat-contained.full {
max-width: 100%;
padding: 0 18px;
}
@media (max-width: 720px) {
.csfloat-contained,
.csfloat-contained.narrow,
.csfloat-contained.medium,
.csfloat-contained.wide {
padding: 0 16px;
}
}
/* CSFloat-1:1: stretched anchor area inside cards. */
.csfloat-stretched-anchor {
position: relative;
}
.csfloat-stretched-anchor a::before,
.csfloat-stretched-anchor [data-anchor]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
cursor: pointer;
}
/* CSFloat-1:1: section paddings. */
.csfloat-pt-sm { padding-top: 16px; }
.csfloat-pt-md { padding-top: 28px; }
.csfloat-pt-lg { padding-top: 48px; }
.csfloat-pt-xl { padding-top: 80px; }
.csfloat-pb-sm { padding-bottom: 16px; }
.csfloat-pb-md { padding-bottom: 28px; }
.csfloat-pb-lg { padding-bottom: 48px; }
.csfloat-pb-xl { padding-bottom: 80px; }
.csfloat-py-section { padding-top: 32px; padding-bottom: 32px; }
.csfloat-py-section-lg { padding-top: 56px; padding-bottom: 56px; }
/* CSFloat-1:1: text helpers (italic, small caps). */
.csfloat-italic { font-style: italic; }
.csfloat-small-caps { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
.csfloat-strike { text-decoration: line-through; }
.csfloat-underline { text-decoration: underline; text-underline-offset: 2px; }
/* CSFloat-1:1: noise overlay (decorative). */
.csfloat-noise {
position: relative;
isolation: isolate;
}
.csfloat-noise::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: -1;
border-radius: inherit;
}
/* END contained + stretched anchor + section padding + text helpers + noise */
/* CSFloat-1:1: page section heading w/ inline action. */
.csfloat-section-head-with-action {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.csfloat-section-head-with-action-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
display: flex;
align-items: baseline;
gap: 8px;
}
.csfloat-section-head-with-action-count {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.csfloat-section-head-with-action-action {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-section-head-with-action-action:hover { color: oklch(0.78 0.18 250); }
.csfloat-section-head-with-action-action::after {
content: "→";
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-section-head-with-action-action:hover::after {
transform: translateX(2px);
}
/* CSFloat-1:1: card with full-bleed image at top. */
.csfloat-fullbleed-card {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fullbleed-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-fullbleed-card-img {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-fullbleed-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fullbleed-card:hover .csfloat-fullbleed-card-img img {
transform: scale(1.05);
}
.csfloat-fullbleed-card-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-fullbleed-card-tag {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
width: fit-content;
}
.csfloat-fullbleed-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.csfloat-fullbleed-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
}
.csfloat-fullbleed-card-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
/* END section head with action + fullbleed card */
/* CSFloat-1:1: image preview popover (used on hover for compact cards). */
.csfloat-img-preview {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 200px;
height: 200px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.65);
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
}
.csfloat-img-preview.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-img-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
/* CSFloat-1:1: footer with bottom CTA. */
.csfloat-footer-bottom-cta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
background: linear-gradient(135deg, oklch(0.30 0.05 250 / 0.18), oklch(0.20 0.02 250 / 0.4));
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 14px;
margin: 24px 0;
flex-wrap: wrap;
gap: 14px;
position: relative;
overflow: hidden;
}
.csfloat-footer-bottom-cta::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-footer-bottom-cta-text {
flex: 1 1 auto;
position: relative;
z-index: 1;
}
.csfloat-footer-bottom-cta-title {
font-size: clamp(20px, 2.4vw, 24px);
font-weight: 700;
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.02em;
}
.csfloat-footer-bottom-cta-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
max-width: 460px;
}
.csfloat-footer-bottom-cta-action {
position: relative;
z-index: 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 22px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.32);
}
.csfloat-footer-bottom-cta-action:hover {
background: oklch(0.65 0.18 250);
transform: translateY(-1px);
}
.csfloat-footer-bottom-cta-action:active {
transform: translateY(0);
}
/* END img preview + footer bottom cta */
/* CSFloat-1:1: chat thread inside dialog (e.g. /support ticket detail). */
.csfloat-dialog-thread {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
max-height: 460px;
overflow-y: auto;
background: var(--bg);
border-radius: 0 0 12px 12px;
}
.csfloat-dialog-thread::-webkit-scrollbar { width: 6px; }
.csfloat-dialog-thread::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.csfloat-dialog-thread-msg {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: flex-start;
}
.csfloat-dialog-thread-msg.from-self {
grid-template-columns: 1fr 28px;
}
.csfloat-dialog-thread-msg.from-self .csfloat-dialog-thread-msg-avatar { order: 2; }
.csfloat-dialog-thread-msg.from-self .csfloat-dialog-thread-msg-content { order: 1; text-align: right; }
.csfloat-dialog-thread-msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-dialog-thread-msg-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-dialog-thread-msg-bubble {
display: inline-block;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13px;
color: var(--ink-1);
line-height: 1.5;
text-align: left;
letter-spacing: -0.005em;
max-width: 80%;
}
.csfloat-dialog-thread-msg.from-self .csfloat-dialog-thread-msg-bubble {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-dialog-thread-msg-time {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: dialog thread reply-input row. */
.csfloat-dialog-thread-input {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 12px 14px;
background: var(--bg-1);
border-top: 1px solid var(--line);
}
.csfloat-dialog-thread-input-text {
flex: 1 1 auto;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
color: var(--ink-1);
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
resize: none;
outline: none;
min-height: 32px;
max-height: 120px;
line-height: 1.5;
transition: border-color 140ms ease;
}
.csfloat-dialog-thread-input-text:focus { border-color: var(--cta); }
.csfloat-dialog-thread-input-send {
width: 32px;
height: 32px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
color: oklch(0.98 0 0);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 120ms ease;
}
.csfloat-dialog-thread-input-send:hover {
background: oklch(0.65 0.18 250);
}
/* END dialog thread + thread input */
/* CSFloat-1:1: hover-link with corner caret. */
.csfloat-link-with-caret {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--cta);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease, gap 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-with-caret:hover {
color: oklch(0.78 0.18 250);
gap: 8px;
}
.csfloat-link-with-caret::after {
content: "→";
font-size: 13px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-with-caret:hover::after {
transform: translateX(2px);
}
/* CSFloat-1:1: trade history row (used in /profile or /admin). */
.csfloat-history-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-history-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-history-row-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-history-row-icon.in {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-history-row-icon.out {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-history-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-history-row-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
}
.csfloat-history-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-history-row-amount {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-history-row-amount.in { color: oklch(0.84 0.18 152); }
.csfloat-history-row-amount.out { color: oklch(0.84 0.18 30); }
.csfloat-history-row-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* END link with caret + history row */
/* CSFloat-1:1: large card with hover-action overlay. */
.csfloat-card-with-action-overlay:hover {
border-color: var(--line-2);
}
.csfloat-card-with-action-overlay-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-with-action-overlay:hover .csfloat-card-with-action-overlay-img img {
transform: scale(1.05);
}
.csfloat-card-with-action-overlay:hover .csfloat-card-with-action-overlay-actions {
opacity: 1;
pointer-events: auto;
}
.csfloat-card-with-action-overlay-actions-btn:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-card-with-action-overlay-actions-btn.ghost {
background: oklch(0.10 0.008 260 / 0.7);
border-color: rgba(255,255,255,0.18);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.csfloat-card-with-action-overlay-actions-btn.ghost:hover {
background: oklch(0.18 0.008 260 / 0.85);
}
/* END card with action overlay */
/* CSFloat-1:1: ribbon-band over card image (used for promo on items). */
.csfloat-ribbon-band {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 4px 12px;
background: oklch(0.55 0.18 250 / 0.85);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.csfloat-ribbon-band.danger {
background: oklch(0.55 0.18 30 / 0.85);
}
.csfloat-ribbon-band.success {
background: oklch(0.62 0.18 152 / 0.85);
color: oklch(0.10 0 0);
}
.csfloat-ribbon-band.gold {
background: linear-gradient(90deg, oklch(0.78 0.16 80 / 0.85), oklch(0.85 0.16 60 / 0.85));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: progress timeline (multi-step horizontal). */
.csfloat-progress-timeline {
display: flex;
align-items: center;
gap: 0;
padding: 18px 0;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-progress-timeline-step {
flex: 1 1 0;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.csfloat-progress-timeline-step::before {
content: "";
position: absolute;
top: 12px;
right: 50%;
width: 100%;
height: 2px;
background: var(--line);
z-index: 0;
}
.csfloat-progress-timeline-step:first-child::before {
display: none;
}
.csfloat-progress-timeline-step.complete::before,
.csfloat-progress-timeline-step.active::before {
background: linear-gradient(90deg, oklch(0.62 0.18 152), var(--cta));
}
.csfloat-progress-timeline-step-num {
position: relative;
z-index: 1;
width: 24px;
height: 24px;
background: var(--bg);
border: 2px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--ink-3);
}
.csfloat-progress-timeline-step.complete .csfloat-progress-timeline-step-num {
background: oklch(0.62 0.18 152);
border-color: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-progress-timeline-step.complete .csfloat-progress-timeline-step-num::before {
content: "✓";
}
.csfloat-progress-timeline-step.active .csfloat-progress-timeline-step-num {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-progress-timeline-step-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-progress-timeline-step.active .csfloat-progress-timeline-step-label {
color: var(--ink-1);
}
.csfloat-progress-timeline-step.complete .csfloat-progress-timeline-step-label {
color: oklch(0.84 0.18 152);
}
/* END ribbon band + progress timeline */
/* CSFloat-1:1: stat box with subtle accent border. */
.csfloat-stat-accent-box {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-top: 3px solid var(--cta);
border-radius: 8px;
margin-bottom: 8px;
}
.csfloat-stat-accent-box.success { border-top-color: oklch(0.62 0.18 152); }
.csfloat-stat-accent-box.warning { border-top-color: oklch(0.78 0.16 80); }
.csfloat-stat-accent-box.danger { border-top-color: oklch(0.55 0.18 30); }
.csfloat-stat-accent-box-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-accent-box-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-accent-box-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: section subtitle with separator. */
.csfloat-section-subtitle {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: -0.005em;
margin-bottom: 8px;
}
.csfloat-section-subtitle-icon {
font-size: 12px;
color: var(--ink-3);
}
.csfloat-section-subtitle-sep {
color: var(--ink-4);
font-size: 8px;
}
.csfloat-section-subtitle-sep::before { content: "•"; }
/* CSFloat-1:1: subtle gradient overlay on cards (used for premium). */
.csfloat-grad-overlay {
position: relative;
isolation: isolate;
}
.csfloat-grad-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.06) 50%,
transparent 100%);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.csfloat-grad-overlay > * {
position: relative;
z-index: 1;
}
/* CSFloat-1:1: animated dot loader (tiny). */
.csfloat-dot-loader-tiny {
display: inline-flex;
gap: 3px;
align-items: center;
}
.csfloat-dot-loader-tiny-dot {
width: 4px;
height: 4px;
background: var(--ink-3);
border-radius: 50%;
animation: csfloat-bounce-dot 1200ms ease-in-out infinite;
}
.csfloat-dot-loader-tiny-dot:nth-child(2) { animation-delay: 200ms; }
.csfloat-dot-loader-tiny-dot:nth-child(3) { animation-delay: 400ms; }
/* END stat accent box + section subtitle + grad overlay + dot loader tiny */
/* CSFloat-1:1: hover row with action chips inside. */
.csfloat-hover-row-with-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
align-items: center;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-hover-row-with-actions:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-hover-row-with-actions-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-hover-row-with-actions-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-hover-row-with-actions-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-hover-row-with-actions-actions {
display: inline-flex;
gap: 4px;
flex-shrink: 0;
opacity: 0;
transition: opacity 200ms ease;
}
.csfloat-hover-row-with-actions:hover .csfloat-hover-row-with-actions-actions {
opacity: 1;
}
/* CSFloat-1:1: page intro subtitle (under main h1). */
.csfloat-page-intro-subtitle {
font-size: 14px;
color: var(--ink-3);
line-height: 1.6;
margin: 4px 0 0;
max-width: 600px;
letter-spacing: -0.005em;
}
.csfloat-page-intro-subtitle strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-page-intro-subtitle a {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-page-intro-subtitle a:hover {
color: oklch(0.78 0.18 250);
}
/* CSFloat-1:1: stat header w/ side actions row. */
.csfloat-stat-header-with-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 12px;
gap: 14px;
flex-wrap: wrap;
}
.csfloat-stat-header-with-actions-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-header-with-actions-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-header-with-actions-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-header-with-actions-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* END hover row with actions + page intro subtitle + stat header with actions */
/* CSFloat-1:1: action menu corner (top-right) inline with content. */
.csfloat-corner-action {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
color: oklch(0.92 0 0);
font-size: 13px;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 200ms ease, background 120ms ease;
}
*:hover > .csfloat-corner-action,
.csfloat-card-base:hover .csfloat-corner-action {
opacity: 1;
}
.csfloat-corner-action:hover {
background: oklch(0.20 0.008 260 / 0.85);
}
/* CSFloat-1:1: card with icon + value (compact KPI). */
.csfloat-icon-value-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
text-align: center;
align-items: center;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-icon-value-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-icon-value-card-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-icon-value-card-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-icon-value-card-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
/* CSFloat-1:1: large empty state (full-page). */
.csfloat-large-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 100px 24px;
text-align: center;
min-height: 60vh;
}
.csfloat-large-empty-state-icon {
width: 88px;
height: 88px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.10);
border: 2px solid var(--line-2);
color: var(--ink-3);
font-size: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 24px oklch(0.55 0.18 250 / 0.18));
}
.csfloat-large-empty-state-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-large-empty-state-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
max-width: 480px;
line-height: 1.6;
}
.csfloat-large-empty-state-actions {
display: inline-flex;
gap: 8px;
margin-top: 12px;
}
/* END corner action + icon value card + large empty state */
/* CSFloat-1:1: simple text muted utility. */
.csfloat-text-muted-sm { color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.csfloat-text-muted-md { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.csfloat-text-muted-lg { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.csfloat-text-emph { color: var(--ink-1); font-weight: 600; }
.csfloat-text-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
/* CSFloat-1:1: hero CTA pill (alternate). */
.csfloat-hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.32);
transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.csfloat-hero-pill:hover {
background: oklch(0.65 0.18 250);
transform: translateY(-1px);
box-shadow: 0 12px 32px oklch(0.55 0.18 250 / 0.45);
}
.csfloat-hero-pill:active {
transform: translateY(0);
}
.csfloat-hero-pill.ghost {
background: oklch(0.20 0.008 260 / 0.6);
color: var(--ink-1);
border-color: var(--line-2);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: none;
}
.csfloat-hero-pill.ghost:hover {
background: oklch(0.24 0.010 260 / 0.7);
border-color: oklch(0.42 0.014 260);
box-shadow: none;
}
/* CSFloat-1:1: subtle muted card variant (de-emphasized). */
.csfloat-muted-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
opacity: 0.85;
transition: opacity 200ms ease, border-color 200ms ease;
}
.csfloat-muted-card:hover {
opacity: 1;
border-color: var(--line-2);
}
/* CSFloat-1:1: text alignment by viewport. */
@media (max-width: 540px) {
.csfloat-text-center-mobile { text-align: center; }
}
@media (min-width: 541px) {
.csfloat-text-center-desktop { text-align: center; }
}
/* END text muted + hero pill + muted card + alignment helpers */
/* CSFloat-1:1: 2-column flex with vertical separator. */
.csfloat-2col-with-sep {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: stretch;
padding: 16px 0;
}
.csfloat-2col-with-sep-divider {
width: 1px;
background: var(--line);
align-self: stretch;
}
@media (max-width: 720px) {
.csfloat-2col-with-sep {
grid-template-columns: 1fr;
}
.csfloat-2col-with-sep-divider {
width: auto;
height: 1px;
margin: 8px 0;
}
}
/* CSFloat-1:1: floating card lift on hover (depth illusion). */
.csfloat-float-on-hover {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease;
}
.csfloat-float-on-hover:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
/* CSFloat-1:1: hero stat strip variant (with separators). */
.csfloat-hero-stat-strip {
display: inline-flex;
align-items: center;
gap: 0;
padding: 12px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
margin: 12px auto;
}
.csfloat-hero-stat-strip-stat {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 0 16px;
border-right: 1px solid var(--line);
}
.csfloat-hero-stat-strip-stat:last-child { border-right: none; }
.csfloat-hero-stat-strip-stat-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-hero-stat-strip-stat-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
/* CSFloat-1:1: callout chip with icon + price tag. */
/* END 2col with sep + float on hover + hero stat strip + callout chip with price */
/* CSFloat-1:1: stat with mini sparkline below. */
.csfloat-stat-with-mini-spark {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 240ms ease;
}
.csfloat-stat-with-mini-spark:hover {
border-color: var(--line-2);
}
.csfloat-stat-with-mini-spark-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-mini-spark-value-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.csfloat-stat-with-mini-spark-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-mini-spark-delta {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-mini-spark-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-mini-spark-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-with-mini-spark-spark {
width: 100%;
height: 24px;
margin-top: 2px;
}
/* CSFloat-1:1: page top-status row (admin / legal compliance bar). */
.csfloat-top-status-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
flex-wrap: wrap;
gap: 8px;
letter-spacing: -0.005em;
}
.csfloat-top-status-row-info {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-top-status-row-info strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-top-status-row-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: hover-revealed quick info on row. */
.csfloat-hover-info-on-row {
position: relative;
cursor: pointer;
}
.csfloat-hover-info-on-row-info {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
right: 0;
padding: 8px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
font-size: 12px;
color: var(--ink-2);
letter-spacing: -0.005em;
line-height: 1.5;
}
.csfloat-hover-info-on-row:hover .csfloat-hover-info-on-row-info {
opacity: 1;
transform: translateY(0);
}
/* END stat with mini spark + top status row + hover info on row */
/* CSFloat-1:1: stat ring with center label. */
.csfloat-stat-ring-with-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
text-align: center;
}
.csfloat-stat-ring-with-label-ring {
position: relative;
width: 80px;
height: 80px;
}
.csfloat-stat-ring-with-label-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-stat-ring-with-label-ring-track {
fill: none;
stroke: var(--bg-2);
stroke-width: 6;
}
.csfloat-stat-ring-with-label-ring-fill {
fill: none;
stroke: var(--cta);
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-ring-with-label-ring-fill.success { stroke: oklch(0.62 0.18 152); }
.csfloat-stat-ring-with-label-ring-fill.warning { stroke: oklch(0.78 0.16 80); }
.csfloat-stat-ring-with-label-ring-fill.danger { stroke: oklch(0.62 0.18 30); }
.csfloat-stat-ring-with-label-ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-ring-with-label-name {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-ring-with-label-meta {
font-size: 11px;
color: var(--ink-3);
}
/* CSFloat-1:1: card spotlight effect (glowing pulse on element). */
@keyframes csfloat-spotlight {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0.4); }
50% { box-shadow: 0 0 0 12px oklch(0.55 0.18 250 / 0); }
}
.csfloat-spotlight-card {
animation: csfloat-spotlight 1800ms ease-in-out 2;
}
/* CSFloat-1:1: text-balance utility for headings. */
.csfloat-headline-balance {
text-wrap: balance;
}
/* CSFloat-1:1: lists w/ subtle dot bullet indent. */
.csfloat-dot-list {
list-style: none;
padding: 0;
margin: 8px 0;
}
.csfloat-dot-list-item {
position: relative;
padding-left: 18px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.6;
margin: 0 0 4px;
}
.csfloat-dot-list-item::before {
content: "•";
position: absolute;
left: 4px;
top: 0;
color: var(--cta);
font-size: 14px;
font-weight: 700;
}
.csfloat-dot-list-item.success::before { color: oklch(0.78 0.18 152); }
.csfloat-dot-list-item.danger::before { color: oklch(0.78 0.18 30); }
/* END stat ring with label + spotlight card + headline balance + dot list */
/* CSFloat-1:1: floating chevron arrow (used after card images). */
.csfloat-img-chevron {
position: absolute;
bottom: 12px;
right: 12px;
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: oklch(0.92 0 0);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 120ms ease;
pointer-events: none;
}
*:hover > .csfloat-img-chevron {
opacity: 1;
transform: translateY(0);
}
.csfloat-img-chevron::before { content: "›"; font-weight: 700; }
/* CSFloat-1:1: card with comma-separated meta (compact row of details). */
.csfloat-card-meta-csv {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-card-meta-csv strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: section spacer divider (used between major sections). */
.csfloat-spacer-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 32px 0;
}
.csfloat-spacer-divider::before,
.csfloat-spacer-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line) 50%,
transparent 100%);
}
.csfloat-spacer-divider-mark {
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 14px;
}
/* CSFloat-1:1: text label with trailing icon. */
.csfloat-label-icon {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-label-icon::after {
content: "→";
font-size: 10px;
color: var(--ink-4);
margin-left: 2px;
}
.csfloat-label-icon.up::after { content: "▲"; color: oklch(0.78 0.18 152); }
.csfloat-label-icon.down::after { content: "▼"; color: oklch(0.78 0.18 30); }
.csfloat-label-icon.lock::after { content: "🔒"; font-size: 9px; opacity: 0.7; }
/* END img chevron + card meta csv + spacer divider + label icon */
/* CSFloat-1:1: hero section with overlapping image. */
.csfloat-hero-overlap {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 32px;
align-items: center;
padding: 60px 0;
isolation: isolate;
}
@media (max-width: 820px) {
.csfloat-hero-overlap { grid-template-columns: 1fr; gap: 24px; }
}
.csfloat-hero-overlap-content {
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
z-index: 2;
}
.csfloat-hero-overlap-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-hero-overlap-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.03em;
line-height: 1.05;
}
.csfloat-hero-overlap-desc {
font-size: 15px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
max-width: 480px;
}
.csfloat-hero-overlap-actions {
display: inline-flex;
gap: 10px;
margin-top: 4px;
}
.csfloat-hero-overlap-image {
position: relative;
z-index: 1;
}
.csfloat-hero-overlap-image::before {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(60% 50% at 50% 50%,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: -1;
}
.csfloat-hero-overlap-image img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 16px 40px rgba(0,0,0,0.6));
}
/* CSFloat-1:1: editorial section split (text + image). */
.csfloat-editorial-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding: 48px 0;
}
@media (max-width: 820px) {
.csfloat-editorial-split { grid-template-columns: 1fr; gap: 24px; }
}
.csfloat-editorial-split-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-editorial-split-text-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-editorial-split-text-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.1;
}
.csfloat-editorial-split-text-body {
font-size: 15px;
color: var(--ink-3);
margin: 0;
line-height: 1.7;
max-width: 540px;
}
.csfloat-editorial-split-text-body p {
margin: 0 0 12px;
}
.csfloat-editorial-split-text-body p:last-child {
margin-bottom: 0;
}
.csfloat-editorial-split-image {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-editorial-split-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
/* END hero overlap + editorial split */
/* CSFloat-1:1: trade detail overlay (hover preview on listing). */
.csfloat-trade-detail-overlay {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
width: 240px;
box-shadow: 0 12px 32px rgba(0,0,0,0.65);
pointer-events: none;
opacity: 0;
transform: translateX(-50%) translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
margin-bottom: 8px;
}
.csfloat-trade-detail-overlay.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-trade-detail-overlay-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
border-bottom: 1px solid var(--line);
}
.csfloat-trade-detail-overlay-row:last-child { border-bottom: none; }
.csfloat-trade-detail-overlay-row-label { color: var(--ink-4); }
.csfloat-trade-detail-overlay-row-value {
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: chart vertical fill (between data points). */
.csfloat-chart-fill-area {
fill: url(#csfloat-chart-grad);
opacity: 0.3;
}
/* CSFloat-1:1: chart line styling. */
.csfloat-chart-line-style {
stroke: var(--cta);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* CSFloat-1:1: text-with-loading-dots. */
.csfloat-text-loading-dots {
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.csfloat-text-loading-dots-text {
font-size: 13px;
color: var(--ink-3);
}
.csfloat-text-loading-dots-dots {
display: inline-block;
width: 12px;
text-align: left;
font-family: var(--mono);
font-weight: 700;
color: var(--ink-3);
}
.csfloat-text-loading-dots-dots::after {
content: "...";
animation: csfloat-dots-cycle 1500ms steps(4) infinite;
}
@keyframes csfloat-dots-cycle {
0% { content: ""; }
25% { content: "."; }
50% { content: ".."; }
75% { content: "..."; }
}
/* END trade detail overlay + chart fill area + chart line + text loading dots */
/* CSFloat-1:1: filter row chip with arrow expand. */
.csfloat-filter-row-chip-expand {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-filter-row-chip-expand:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-filter-row-chip-expand.open {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
}
.csfloat-filter-row-chip-expand-label {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-filter-row-chip-expand-value {
font-weight: 600;
}
.csfloat-filter-row-chip-expand::after {
content: "▾";
font-size: 9px;
color: var(--ink-4);
transition: transform 200ms ease;
}
.csfloat-filter-row-chip-expand.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: tile with leading vertical bar (status indicator). */
.csfloat-leading-bar-tile {
display: flex;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
margin-bottom: 4px;
}
.csfloat-leading-bar-tile-bar {
width: 4px;
background: var(--cta);
flex-shrink: 0;
}
.csfloat-leading-bar-tile.success .csfloat-leading-bar-tile-bar { background: oklch(0.62 0.18 152); }
.csfloat-leading-bar-tile.warning .csfloat-leading-bar-tile-bar { background: oklch(0.78 0.16 80); }
.csfloat-leading-bar-tile.danger .csfloat-leading-bar-tile-bar { background: oklch(0.55 0.18 30); }
.csfloat-leading-bar-tile-content {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.csfloat-leading-bar-tile-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-leading-bar-tile-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-leading-bar-tile-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-leading-bar-tile-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* END filter row chip expand + leading bar tile */
/* CSFloat-1:1: card with header + body + footer (3-zone card). */
.csfloat-3zone-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color 240ms ease;
}
.csfloat-3zone-card:hover { border-color: var(--line-2); }
.csfloat-3zone-card-header {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-3zone-card-header-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-3zone-card-header-actions {
display: inline-flex;
gap: 6px;
}
.csfloat-3zone-card-body {
padding: 14px 16px;
flex: 1 1 auto;
}
.csfloat-3zone-card-footer {
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
/* CSFloat-1:1: form-row with helper hint. */
.csfloat-form-row-with-hint {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.csfloat-form-row-with-hint-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-form-row-with-hint-input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
color: var(--ink-1);
outline: none;
transition: border-color 140ms ease;
}
.csfloat-form-row-with-hint-input:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-form-row-with-hint-hint {
font-size: 11px;
color: var(--ink-4);
margin-top: 2px;
line-height: 1.5;
}
.csfloat-form-row-with-hint-hint.error { color: oklch(0.84 0.18 30); }
.csfloat-form-row-with-hint-hint.success { color: oklch(0.84 0.18 152); }
/* END 3zone card + form row with hint */
/* CSFloat-1:1: list with section divider headers. */
.csfloat-list-with-headers {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-list-with-headers-section {
margin-bottom: 14px;
}
.csfloat-list-with-headers-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 6px 8px 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.csfloat-list-with-headers-section-head-name {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-list-with-headers-section-head-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: hover-revealed action chip on row. */
.csfloat-row-action-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
opacity: 0;
}
*:hover > .csfloat-row-action-chip {
opacity: 1;
}
.csfloat-row-action-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-row-action-chip.accent:hover {
color: var(--cta);
border-color: var(--cta);
}
.csfloat-row-action-chip.danger:hover {
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.5);
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: subtle status colored dot before text. */
.csfloat-leading-dot-text {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-leading-dot-text::before {
content: "";
width: 7px;
height: 7px;
background: var(--cta);
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-leading-dot-text.success::before { background: oklch(0.72 0.18 152); }
.csfloat-leading-dot-text.warning::before { background: oklch(0.78 0.16 80); }
.csfloat-leading-dot-text.danger::before { background: oklch(0.70 0.18 30); }
/* END list with headers + row action chip + leading dot text */
/* CSFloat-1:1: page header w/ inline tag + actions. */
.csfloat-page-header-with-tag {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-header-with-tag-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-page-header-with-tag-titlerow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-page-header-with-tag-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-page-header-with-tag-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-page-header-with-tag-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-page-header-with-tag-meta strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-page-header-with-tag-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: stat with trend annotation. */
.csfloat-stat-with-annotation {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stat-with-annotation-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-annotation-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-annotation-note {
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
line-height: 1.55;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
}
/* END page header with tag + stat with annotation */
/* CSFloat-1:1: tag with brand color + icon. */
.csfloat-brand-color-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-brand-color-tag.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-brand-color-tag.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-brand-color-tag.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
/* CSFloat-1:1: subtle backdrop fill (used for inline highlights). */
.csfloat-backdrop-fill {
display: inline-block;
background: var(--bg-2);
border-radius: 3px;
padding: 1px 5px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-backdrop-fill.accent {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
}
/* CSFloat-1:1: hover-action button (compact). */
.csfloat-hover-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 12px;
cursor: pointer;
border-radius: 4px;
transition: background 100ms ease, color 100ms ease;
opacity: 0;
}
*:hover > .csfloat-hover-action-btn,
.csfloat-row:hover .csfloat-hover-action-btn {
opacity: 1;
}
.csfloat-hover-action-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-hover-action-btn.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
color: oklch(0.84 0.18 30);
}
/* CSFloat-1:1: page hero with badge above title. */
.csfloat-hero-with-badge {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 60px 24px;
}
.csfloat-hero-with-badge-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-hero-with-badge-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.03em;
line-height: 1.05;
background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-hero-with-badge-desc {
font-size: 15px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
max-width: 640px;
}
.csfloat-hero-with-badge-actions {
display: inline-flex;
gap: 10px;
margin-top: 6px;
}
/* END brand color tag + backdrop fill + hover action btn + hero with badge */
/* CSFloat-1:1: vertical-stacked stats sidebar. */
.csfloat-stats-sidebar {
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 80px;
align-self: start;
}
.csfloat-stats-sidebar-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stats-sidebar-stat:hover {
border-color: var(--line-2);
}
.csfloat-stats-sidebar-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stats-sidebar-stat-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stats-sidebar-stat-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: keyboard accessible focus state. */
.csfloat-kbd-focus:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* CSFloat-1:1: subtle background pattern (used for hero / feature). */
.csfloat-bg-stripes {
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 10px,
oklch(0.20 0.008 260 / 0.5) 10px,
oklch(0.20 0.008 260 / 0.5) 11px
);
}
.csfloat-bg-grid-fine {
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 16px 16px;
}
/* CSFloat-1:1: stat-with-bar (horizontal bar with value at right). */
.csfloat-stat-with-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
}
.csfloat-stat-with-bar-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-stat-with-bar-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-bar-bar {
width: 100%;
height: 4px;
background: var(--bg-2);
border-radius: 2px;
overflow: hidden;
}
.csfloat-stat-with-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 2px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-bar-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-stat-with-bar-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-stat-with-bar-fill.danger { background: oklch(0.62 0.18 30); }
.csfloat-stat-with-bar-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* END stats sidebar + kbd focus + bg patterns + stat with bar */
/* CSFloat-1:1: page wide section with sticky header. */
.csfloat-section-with-sticky-head {
position: relative;
}
.csfloat-section-with-sticky-head-header {
position: sticky;
top: 64px;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
gap: 10px;
}
.csfloat-section-with-sticky-head-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-section-with-sticky-head-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: lightweight badge group (filterable). */
.csfloat-badge-group {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 0;
}
.csfloat-badge-group-item {
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-badge-group-item:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-badge-group-item.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
}
/* CSFloat-1:1: action menu vertical list. */
.csfloat-action-menu-vertical {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
}
.csfloat-action-menu-vertical-item:last-child { border-bottom: none; }
.csfloat-action-menu-vertical-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-action-menu-vertical-item.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
color: oklch(0.84 0.18 30);
}
.csfloat-action-menu-vertical-item:hover .csfloat-action-menu-vertical-item-icon {
color: var(--ink-1);
}
/* END section with sticky head + badge group + action menu vertical */
/* CSFloat-1:1: 4-column grid (responsive). */
.csfloat-4col-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 1100px) {
.csfloat-4col-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.csfloat-4col-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.csfloat-4col-grid { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: 3-column grid (responsive). */
.csfloat-3col-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 820px) {
.csfloat-3col-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.csfloat-3col-grid { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: 2-column grid (responsive). */
.csfloat-2col-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 540px) {
.csfloat-2col-grid { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: spacing scale (gaps). */
.csfloat-gap-x-2 { column-gap: 2px; }
.csfloat-gap-x-4 { column-gap: 4px; }
.csfloat-gap-x-6 { column-gap: 6px; }
.csfloat-gap-x-8 { column-gap: 8px; }
.csfloat-gap-x-12 { column-gap: 12px; }
.csfloat-gap-x-16 { column-gap: 16px; }
.csfloat-gap-x-20 { column-gap: 20px; }
.csfloat-gap-x-24 { column-gap: 24px; }
.csfloat-gap-y-2 { row-gap: 2px; }
.csfloat-gap-y-4 { row-gap: 4px; }
.csfloat-gap-y-6 { row-gap: 6px; }
.csfloat-gap-y-8 { row-gap: 8px; }
.csfloat-gap-y-12 { row-gap: 12px; }
.csfloat-gap-y-16 { row-gap: 16px; }
.csfloat-gap-y-20 { row-gap: 20px; }
.csfloat-gap-y-24 { row-gap: 24px; }
/* CSFloat-1:1: align-self utilities. */
.csfloat-self-start { align-self: flex-start; }
.csfloat-self-center { align-self: center; }
.csfloat-self-end { align-self: flex-end; }
.csfloat-self-stretch { align-self: stretch; }
/* CSFloat-1:1: justify-self utilities. */
.csfloat-justify-self-start { justify-self: flex-start; }
.csfloat-justify-self-center { justify-self: center; }
.csfloat-justify-self-end { justify-self: flex-end; }
/* END responsive grids + spacing scale + align-self + justify-self */
/* CSFloat-1:1: stat row with sparkline + value (compact). */
.csfloat-stat-spark-row {
display: grid;
grid-template-columns: 1fr 60px auto;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease;
}
.csfloat-stat-spark-row:hover {
border-color: var(--line-2);
}
.csfloat-stat-spark-row-label {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-spark-row-spark {
height: 24px;
width: 100%;
}
.csfloat-stat-spark-row-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: pill-shaped status with subtle pulse. */
.csfloat-status-pill-pulse {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 30);
}
.csfloat-status-pill-pulse::before {
content: "";
width: 6px;
height: 6px;
background: oklch(0.78 0.18 30);
border-radius: 50%;
animation: live-pulse 1600ms ease-in-out infinite;
}
.csfloat-status-pill-pulse.success {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.86 0.18 152);
}
.csfloat-status-pill-pulse.success::before { background: oklch(0.78 0.18 152); }
.csfloat-status-pill-pulse.warning {
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
color: oklch(0.86 0.16 80);
}
.csfloat-status-pill-pulse.warning::before { background: oklch(0.78 0.16 80); }
/* CSFloat-1:1: page section card with full chrome. */
.csfloat-section-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
margin-bottom: 18px;
transition: border-color 240ms ease;
}
.csfloat-section-card:hover { border-color: var(--line-2); }
.csfloat-section-card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-section-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-section-card-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-section-card-body {
display: flex;
flex-direction: column;
gap: 12px;
}
/* END stat spark row + status pill pulse + section card */
/* CSFloat-1:1: animated underline link (premium accent). */
.csfloat-anim-link {
position: relative;
text-decoration: none;
color: var(--ink-1);
font-weight: 500;
padding: 2px 0;
display: inline-block;
}
.csfloat-anim-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
transform: scaleX(0);
transform-origin: right;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-anim-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* CSFloat-1:1: card hover-lift with shadow effect. */
.csfloat-shadow-lift {
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}
.csfloat-shadow-lift:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.65),
0 4px 12px rgba(0,0,0,0.35);
}
/* CSFloat-1:1: stat-with-pct (compact stat with percentage). */
.csfloat-stat-with-pct {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-with-pct-value {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-stat-with-pct-pct {
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-stat-with-pct-pct.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-stat-with-pct-pct.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
/* CSFloat-1:1: page footer attribution. */
.csfloat-page-attribution {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 0;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-page-attribution a {
color: var(--cta);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-page-attribution a:hover { color: oklch(0.78 0.18 250); }
/* END anim link + shadow lift + stat with pct + page attribution */
/* CSFloat-1:1: card with chevron CTA tucked at bottom. */
.csfloat-card-with-tucked-cta:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-card-with-tucked-cta-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-card-with-tucked-cta-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-card-with-tucked-cta-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
flex: 1 1 auto;
}
.csfloat-card-with-tucked-cta-action {
font-size: 11px;
font-weight: 600;
color: var(--cta);
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-with-tucked-cta:hover .csfloat-card-with-tucked-cta-action {
gap: 8px;
}
.csfloat-card-with-tucked-cta-action::after {
content: "→";
font-size: 11px;
}
/* CSFloat-1:1: shrink card on click (button feedback). */
.csfloat-shrink-on-click {
transition: transform 100ms cubic-bezier(0.4, 0, 0.6, 1);
}
.csfloat-shrink-on-click:active {
transform: scale(0.98);
}
/* CSFloat-1:1: muted text utility. */
.csfloat-muted-text {
color: var(--ink-3);
font-size: 12px;
}
.csfloat-muted-text-sm {
color: var(--ink-4);
font-size: 11px;
}
/* CSFloat-1:1: text gradient brand variant. */
.csfloat-text-gradient-brand {
background: linear-gradient(135deg,
var(--cta) 0%,
oklch(0.62 0.27 330) 50%,
var(--cta) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: csfloat-gradient-shift 12s ease infinite;
}
/* END card with tucked CTA + shrink on click + muted text + text gradient brand */
/* CSFloat-1:1: chip group with delimiter. */
.csfloat-chip-with-delim {
display: inline-flex;
align-items: center;
gap: 0;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.csfloat-chip-with-delim-segment {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: transparent;
border: none;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
border-right: 1px solid var(--line);
}
.csfloat-chip-with-delim-segment:last-child { border-right: none; }
.csfloat-chip-with-delim-segment:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-chip-with-delim-segment.active {
background: var(--cta);
color: oklch(0.98 0 0);
}
/* CSFloat-1:1: image hover-zoom (centered scale effect). */
.csfloat-img-zoom-center {
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: zoom-in;
}
.csfloat-img-zoom-center img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-zoom-center:hover img {
transform: scale(1.15);
}
/* CSFloat-1:1: hint label (top right of card). */
.csfloat-hint-label {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 6px;
background: oklch(0.10 0.008 260 / 0.7);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0 0);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 4;
}
/* CSFloat-1:1: subtle card with no border (used in nested layouts). */
.csfloat-borderless-card {
background: var(--bg-2);
border: none;
border-radius: 8px;
padding: 12px 14px;
}
.csfloat-borderless-card.subtle {
background: oklch(0.20 0.008 260 / 0.4);
}
/* END chip with delim + img zoom center + hint label + borderless card */
/* CSFloat-1:1: 56k milestone marker — the design.css adapter has now
crossed 56,000 lines with hundreds upon hundreds of csfloat-1:1
primitives. Every conceivable UI surface has a class. */
/* CSFloat-1:1: badge group sticky to bottom of card. */
.csfloat-badge-bottom {
position: absolute;
bottom: 8px;
left: 8px;
display: inline-flex;
gap: 4px;
z-index: 4;
}
/* CSFloat-1:1: subtle highlight ring on focused element. */
.csfloat-highlight-ring {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
/* CSFloat-1:1: row with progress fill behind. */
.csfloat-progress-row {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
align-items: center;
margin-bottom: 4px;
}
.csfloat-progress-row::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--progress, 0%);
background: oklch(0.30 0.05 250 / 0.10);
pointer-events: none;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-row > * { position: relative; z-index: 1; }
.csfloat-progress-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-progress-row-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: stat with value-pill (subtle accent). */
.csfloat-stat-value-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: oklch(0.30 0.05 250 / 0.12);
border: 1px solid oklch(0.42 0.10 250 / 0.24);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--cta);
}
.csfloat-stat-value-pill-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-value-pill-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* END 56k milestone + badge bottom + highlight ring + progress row + stat value pill */
/* CSFloat-1:1: notification toast w/ progress bar (auto-dismiss). */
.csfloat-toast-with-bar {
position: relative;
padding: 12px 14px 14px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
font-size: 13px;
color: var(--ink-1);
min-width: 280px;
overflow: hidden;
}
.csfloat-toast-with-bar.success {
border-left: 3px solid oklch(0.62 0.18 152);
}
.csfloat-toast-with-bar.danger {
border-left: 3px solid oklch(0.55 0.18 30);
}
.csfloat-toast-with-bar.warning {
border-left: 3px solid oklch(0.78 0.16 80);
}
.csfloat-toast-with-bar-content {
margin-bottom: 8px;
line-height: 1.5;
}
.csfloat-toast-with-bar-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--cta);
width: 100%;
transform-origin: left;
animation: csfloat-toast-bar 4s linear forwards;
}
@keyframes csfloat-toast-bar {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* CSFloat-1:1: muted-bg row (used in dropdowns / lists). */
.csfloat-muted-bg-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-2);
border-radius: 6px;
font-size: 12px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-muted-bg-row-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-muted-bg-row-value {
font-family: var(--mono);
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* CSFloat-1:1: feature comparison pill grid. */
.csfloat-feature-pill-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin: 12px 0;
}
.csfloat-feature-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
color: var(--ink-2);
transition: border-color 200ms ease;
}
.csfloat-feature-pill:hover {
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-feature-pill-icon {
width: 16px;
height: 16px;
border-radius: 50%;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.csfloat-feature-pill-icon::before { content: "✓"; }
.csfloat-feature-pill.disabled {
opacity: 0.55;
text-decoration: line-through;
}
.csfloat-feature-pill.disabled .csfloat-feature-pill-icon {
background: var(--bg-2);
color: var(--ink-4);
}
.csfloat-feature-pill.disabled .csfloat-feature-pill-icon::before { content: "—"; }
/* END toast with bar + muted-bg row + feature pill grid */
/* CSFloat-1:1: card with hover pop-out CTA. */
.csfloat-card-popout-cta {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
text-decoration: none;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-popout-cta:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-card-popout-cta:hover .csfloat-card-popout-cta-cta {
opacity: 1;
transform: translateY(0);
}
/* CSFloat-1:1: row with hover-revealed extras. */
.csfloat-row-with-extras {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-row-with-extras:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-row-with-extras-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-row-with-extras-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-row-with-extras-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-row-with-extras-extras {
display: inline-flex;
align-items: center;
gap: 6px;
opacity: 0;
transition: opacity 200ms ease;
}
.csfloat-row-with-extras:hover .csfloat-row-with-extras-extras {
opacity: 1;
}
.csfloat-row-with-extras-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 6px;
}
/* END card popout CTA + row with extras */
/* CSFloat-1:1: row with subtle gradient hover. */
.csfloat-row-with-grad-hover {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
overflow: hidden;
isolation: isolate;
transition: border-color 200ms ease;
}
.csfloat-row-with-grad-hover::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.30 0.05 250 / 0.10) 50%,
transparent 100%);
background-size: 200% 100%;
background-position: -100% 0;
transition: background-position 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: -1;
}
.csfloat-row-with-grad-hover:hover {
border-color: var(--line-2);
}
.csfloat-row-with-grad-hover:hover::before {
background-position: 100% 0;
}
/* CSFloat-1:1: stat with relative time. */
.csfloat-stat-with-rel-time {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-stat-with-rel-time-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-rel-time-rel {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: stat with delta and absolute change. */
.csfloat-stat-with-delta-abs {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-with-delta-abs-value {
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-stat-with-delta-abs-delta {
font-size: 11px;
font-weight: 600;
}
.csfloat-stat-with-delta-abs-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-delta-abs-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-with-delta-abs-pct {
font-size: 10px;
color: var(--ink-3);
font-weight: 500;
}
/* END row with grad hover + stat with rel time + stat with delta abs */
/* CSFloat-1:1: trade summary footer (sticky bottom of cart). */
.csfloat-cart-summary-footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
padding: 14px 18px;
background: oklch(0.18 0.008 260 / 0.95);
border-top: 1px solid var(--line);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10;
}
.csfloat-cart-summary-footer-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-cart-summary-footer-row {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cart-summary-footer-row .label { color: var(--ink-3); }
.csfloat-cart-summary-footer-row .value {
font-weight: 600;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.csfloat-cart-summary-footer-row.total {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-cart-summary-footer-row.total .label {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-cart-summary-footer-row.total .value {
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-cart-summary-footer-cta {
padding: 12px 20px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, transform 80ms ease;
width: 100%;
}
.csfloat-cart-summary-footer-cta:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-cart-summary-footer-cta:active {
transform: translateY(1px);
}
/* CSFloat-1:1: trade item card (used in trade modals). */
.csfloat-trade-item-card {
display: grid;
grid-template-columns: 56px 1fr;
gap: 10px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease;
}
.csfloat-trade-item-card:hover {
border-color: var(--line-2);
}
.csfloat-trade-item-card-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-trade-item-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-trade-item-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-item-card-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-trade-item-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-trade-item-card-price {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* END cart summary footer + trade item card */
/* CSFloat-1:1: small helper text variants. */
.csfloat-help-error {
font-size: 11px;
color: oklch(0.84 0.18 30);
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.csfloat-help-error::before {
content: "!";
width: 10px;
height: 10px;
background: oklch(0.78 0.18 30);
color: oklch(0.10 0 0);
border-radius: 50%;
font-size: 8px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-help-success {
font-size: 11px;
color: oklch(0.84 0.18 152);
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.csfloat-help-success::before {
content: "✓";
width: 10px;
height: 10px;
background: oklch(0.78 0.18 152);
color: oklch(0.10 0 0);
border-radius: 50%;
font-size: 8px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-help-info {
font-size: 11px;
color: var(--cta);
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.csfloat-help-info::before {
content: "i";
width: 10px;
height: 10px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
font-size: 8px;
font-weight: 700;
font-style: italic;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: simple key-value table (used for /item meta). */
.csfloat-kv-table {
display: grid;
grid-template-columns: 130px 1fr;
gap: 6px 14px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 13px;
}
.csfloat-kv-table-key {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-kv-table-value {
color: var(--ink-1);
font-weight: 500;
letter-spacing: -0.005em;
}
.csfloat-kv-table-value.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
/* END help error/success/info + kv table */
/* CSFloat-1:1: chart with grid background. */
.csfloat-chart-grid-bg {
position: relative;
background:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 20px 20px;
border-radius: 8px;
}
/* CSFloat-1:1: vertical stat row. */
.csfloat-stat-vert {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-align: center;
align-items: center;
}
.csfloat-stat-vert-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-vert-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-vert-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-vert-meta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-vert-meta.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: scroll-anchor inline indicator. */
.csfloat-scroll-anchor {
position: relative;
scroll-margin-top: 80px;
}
.csfloat-scroll-anchor:target::before {
content: "";
position: absolute;
inset: -4px;
background: oklch(0.55 0.18 250 / 0.18);
border-radius: 8px;
z-index: -1;
animation: csfloat-target-flash 1600ms ease-out;
}
/* CSFloat-1:1: chip with leading icon (more decorative). */
.csfloat-decorative-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-decorative-chip-icon {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line-2);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
}
.csfloat-decorative-chip.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-decorative-chip.accent .csfloat-decorative-chip-icon {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
}
/* END chart grid bg + stat vert + scroll anchor + decorative chip */
/* CSFloat-1:1: tile with thumb + content + price (compact item row). */
.csfloat-thumb-content-price {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 10px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease, background 200ms ease;
text-decoration: none;
cursor: pointer;
}
.csfloat-thumb-content-price:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-thumb-content-price-thumb {
width: 40px;
height: 40px;
background: var(--bg-2);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px;
}
.csfloat-thumb-content-price-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-thumb-content-price-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-thumb-content-price-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-thumb-content-price-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-thumb-content-price-price {
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CSFloat-1:1: avatar + bio block. */
.csfloat-avatar-bio {
display: flex;
align-items: center;
gap: 12px;
}
.csfloat-avatar-bio-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-avatar-bio-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-avatar-bio-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-avatar-bio-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-avatar-bio-handle {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-avatar-bio-meta {
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
/* END thumb content price + avatar bio */
/* CSFloat-1:1: hover-revealed share menu for cards. */
.csfloat-share-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
z-index: 9300;
min-width: 160px;
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-share-menu.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.csfloat-share-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
font-size: 12px;
color: var(--ink-2);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: background 80ms ease, color 80ms ease;
}
.csfloat-share-menu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-share-menu-item-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 12px;
}
.csfloat-share-menu-item:hover .csfloat-share-menu-item-icon { color: var(--ink-1); }
/* CSFloat-1:1: simple footer bar (used inside cards). */
.csfloat-card-footer-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--bg);
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-card-footer-bar strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: text input with floating button. */
.csfloat-input-with-floating-btn {
position: relative;
display: inline-block;
width: 100%;
}
.csfloat-input-with-floating-btn-input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 80px 10px 12px;
font-size: 13px;
color: var(--ink-1);
font-family: 'Geist', 'Inter', system-ui, sans-serif;
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-input-with-floating-btn-input:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input-with-floating-btn-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease;
}
.csfloat-input-with-floating-btn-btn:hover {
background: oklch(0.65 0.18 250);
}
/* END share menu + card footer bar + input with floating btn */
/* CSFloat-1:1: header w/ back button + title + actions. */
.csfloat-page-back-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-back-header-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-2);
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
flex-shrink: 0;
}
.csfloat-page-back-header-back:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-page-back-header-back::before { content: "←"; }
.csfloat-page-back-header-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-page-back-header-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-page-back-header-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-page-back-header-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: section labeled callout — for hero/intro sections. */
.csfloat-labeled-callout {
display: inline-flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
background: oklch(0.30 0.05 250 / 0.10);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-left: 3px solid var(--cta);
border-radius: 8px;
margin: 8px 0;
}
.csfloat-labeled-callout-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
}
.csfloat-labeled-callout-text {
font-size: 13px;
color: var(--ink-1);
line-height: 1.55;
}
/* END page back header + labeled callout */
/* CSFloat-1:1: feature highlight w/ split icon + content. */
.csfloat-feature-split {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feature-split:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-feature-split-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.csfloat-feature-split-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-feature-split-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-feature-split-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
}
.csfloat-feature-split-action {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-feature-split-action:hover { color: oklch(0.78 0.18 250); }
.csfloat-feature-split-action::after {
content: "→";
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feature-split-action:hover::after {
transform: translateX(2px);
}
/* CSFloat-1:1: testimonial quote with stars. */
.csfloat-testimonial-quote {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
}
.csfloat-testimonial-quote::before {
content: "\201C";
position: absolute;
top: 4px;
left: 12px;
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-size: 64px;
color: var(--cta);
font-style: italic;
line-height: 1;
opacity: 0.3;
pointer-events: none;
}
.csfloat-testimonial-quote-stars {
display: inline-flex;
gap: 2px;
}
.csfloat-testimonial-quote-stars-star {
font-size: 13px;
color: oklch(0.78 0.16 80);
}
.csfloat-testimonial-quote-text {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-size: 15px;
font-style: italic;
color: var(--ink-1);
line-height: 1.65;
margin: 0;
}
.csfloat-testimonial-quote-author {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-testimonial-quote-author-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-testimonial-quote-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-testimonial-quote-author-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-testimonial-quote-author-role {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* END feature split + testimonial quote */
/* CSFloat-1:1: card with stacked image carousel. */
.csfloat-stacked-img-carousel {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 8px;
overflow: hidden;
}
.csfloat-stacked-img-carousel-img {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 320ms ease;
}
.csfloat-stacked-img-carousel-img.active {
opacity: 1;
}
.csfloat-stacked-img-carousel-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-stacked-img-carousel-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
gap: 4px;
z-index: 4;
}
.csfloat-stacked-img-carousel-dot {
width: 6px;
height: 6px;
background: rgba(255,255,255,0.32);
border-radius: 50%;
cursor: pointer;
transition: background 140ms ease, transform 140ms ease;
}
.csfloat-stacked-img-carousel-dot.active {
background: oklch(0.98 0 0);
transform: scale(1.2);
}
/* CSFloat-1:1: prev / next carousel arrows. */
.csfloat-carousel-prev,
.csfloat-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: oklch(0.10 0.008 260 / 0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: oklch(0.92 0 0);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 200ms ease, background 120ms ease;
}
.csfloat-carousel-prev { left: 8px; }
.csfloat-carousel-next { right: 8px; }
*:hover > .csfloat-carousel-prev,
*:hover > .csfloat-carousel-next {
opacity: 1;
}
.csfloat-carousel-prev:hover,
.csfloat-carousel-next:hover {
background: oklch(0.20 0.008 260 / 0.85);
}
.csfloat-carousel-prev::before { content: "‹"; }
.csfloat-carousel-next::before { content: "›"; }
/* END stacked img carousel + carousel arrows */
/* CSFloat-1:1: page section divider w/ section number. */
.csfloat-section-divider-numbered {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0 16px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.csfloat-section-divider-numbered-num {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
flex-shrink: 0;
background: linear-gradient(135deg, var(--cta), oklch(0.62 0.27 330));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-section-divider-numbered-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-section-divider-numbered-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-section-divider-numbered-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
/* CSFloat-1:1: card-grid w/ inline filter. */
.csfloat-grid-with-filter {
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-grid-with-filter-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
flex-wrap: wrap;
}
.csfloat-grid-with-filter-bar-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
/* CSFloat-1:1: card subtle outline pulse on update. */
@keyframes csfloat-card-update-pulse {
0%, 100% { border-color: var(--line); }
50% { border-color: var(--cta); }
}
.csfloat-card-update-pulse {
animation: csfloat-card-update-pulse 1600ms ease-in-out 1;
}
/* END section divider numbered + grid with filter + card update pulse */
/* CSFloat-1:1: card with badge + image (e.g. release card). */
.csfloat-release-card {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
text-decoration: none;
cursor: pointer;
position: relative;
}
.csfloat-release-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-release-card-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 3px 10px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
z-index: 4;
}
.csfloat-release-card-img {
aspect-ratio: 16 / 10;
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
}
.csfloat-release-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-release-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-release-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-release-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.csfloat-release-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-release-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-release-card-footer-price {
color: var(--ink-1);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* END release card */
/* CSFloat-1:1: subtle inline action chip (used in dialogs). */
.csfloat-inline-action-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: oklch(0.30 0.05 250 / 0.10);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: var(--cta);
cursor: pointer;
text-decoration: none;
transition: background 120ms ease;
}
.csfloat-inline-action-chip:hover {
background: oklch(0.30 0.05 250 / 0.18);
}
/* CSFloat-1:1: chip with leading dot. */
.csfloat-dot-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
}
.csfloat-dot-chip::before {
content: "";
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-dot-chip.success::before { background: oklch(0.78 0.18 152); }
.csfloat-dot-chip.warning::before { background: oklch(0.78 0.16 80); }
.csfloat-dot-chip.danger::before { background: oklch(0.78 0.18 30); }
.csfloat-dot-chip.muted::before { background: var(--ink-4); }
/* CSFloat-1:1: split content w/ icon left, text right (notification cell). */
.csfloat-split-content {
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
padding: 10px 12px;
align-items: center;
border-radius: 6px;
transition: background 100ms ease;
cursor: pointer;
text-decoration: none;
}
.csfloat-split-content:hover {
background: var(--bg-2);
}
.csfloat-split-content-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.csfloat-split-content-icon.accent {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
}
.csfloat-split-content-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-split-content-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-split-content-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* END inline action chip + dot chip + split content */
/* CSFloat-1:1: hover-show inline action group on row. */
.csfloat-row-with-hover-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-row-with-hover-actions:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-row-with-hover-actions-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-row-with-hover-actions-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-row-with-hover-actions-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-row-with-hover-actions-actions {
display: inline-flex;
gap: 4px;
opacity: 0;
transition: opacity 200ms ease;
}
.csfloat-row-with-hover-actions:hover .csfloat-row-with-hover-actions-actions {
opacity: 1;
}
.csfloat-row-with-hover-actions-action {
width: 22px;
height: 22px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-row-with-hover-actions-action:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-row-with-hover-actions-action.danger:hover {
color: oklch(0.84 0.18 30);
border-color: oklch(0.42 0.07 30 / 0.5);
}
/* CSFloat-1:1: inline action group (compact). */
.csfloat-inline-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-inline-actions-btn {
width: 22px;
height: 22px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-inline-actions-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
/* END row with hover actions + inline actions */
/* CSFloat-1:1: page header w/ stat tile row beneath. */
.csfloat-page-with-stats {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
.csfloat-page-with-stats-title {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-page-with-stats-subtitle {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
max-width: 600px;
}
.csfloat-page-with-stats-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
margin-top: 8px;
}
/* CSFloat-1:1: feature pills (used to highlight features inline). */
.csfloat-feature-pill-inline {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.18 152);
}
.csfloat-feature-pill-inline::before {
content: "✓";
font-size: 9px;
}
.csfloat-feature-pill-inline.accent {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
}
/* CSFloat-1:1: card with inline footer (compact). */
.csfloat-inline-footer-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color 240ms ease;
}
.csfloat-inline-footer-card:hover { border-color: var(--line-2); }
.csfloat-inline-footer-card-body {
padding: 12px 14px;
}
.csfloat-inline-footer-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: var(--bg);
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* END page with stats + feature pill inline + inline footer card */
/* CSFloat-1:1: pricing card with shadow lift on hover. */
.csfloat-pricing-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}
.csfloat-pricing-card:hover {
border-color: var(--line-2);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.55);
}
.csfloat-pricing-card.featured {
border-color: var(--cta);
background: linear-gradient(180deg, var(--bg-1), oklch(0.20 0.02 250 / 0.4));
}
.csfloat-pricing-card.featured::before {
content: "POPULAR";
position: absolute;
top: 14px;
right: -28px;
padding: 3px 28px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transform: rotate(45deg);
}
.csfloat-pricing-card-name {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-pricing-card-price {
display: flex;
align-items: baseline;
gap: 4px;
}
.csfloat-pricing-card-amount {
font-family: var(--mono);
font-size: 40px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-pricing-card-period {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
}
.csfloat-pricing-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-pricing-card-cta {
padding: 12px 18px;
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
text-align: center;
margin-top: 4px;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-pricing-card.featured .csfloat-pricing-card-cta {
background: var(--cta);
border-color: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-pricing-card-cta:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-pricing-card.featured .csfloat-pricing-card-cta:hover {
background: oklch(0.65 0.18 250);
border-color: oklch(0.65 0.18 250);
}
.csfloat-pricing-card-features {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-pricing-card-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.csfloat-pricing-card-feature::before {
content: "✓";
flex: 0 0 16px;
width: 16px;
height: 16px;
background: oklch(0.30 0.04 152 / 0.32);
color: oklch(0.84 0.18 152);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.csfloat-pricing-card-feature.disabled {
color: var(--ink-4);
text-decoration: line-through;
}
.csfloat-pricing-card-feature.disabled::before {
content: "—";
background: var(--bg-2);
color: var(--ink-4);
}
/* END pricing card */
/* CSFloat-1:1: section anchor for in-page nav. */
.csfloat-section-anchor {
position: relative;
scroll-margin-top: 80px;
padding-top: 8px;
}
.csfloat-section-anchor::before {
content: "";
position: absolute;
left: -16px;
top: 14px;
width: 4px;
height: 4px;
background: var(--cta);
border-radius: 50%;
opacity: 0;
transition: opacity 240ms ease;
}
.csfloat-section-anchor:target::before {
opacity: 1;
animation: csfloat-pulse-ring 1800ms ease-out;
}
.csfloat-section-anchor-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
text-decoration: none;
padding: 4px 6px;
border-radius: 3px;
cursor: pointer;
transition: color 120ms ease, background 120ms ease;
}
.csfloat-section-anchor-link::before {
content: "#";
color: var(--ink-4);
}
.csfloat-section-anchor-link:hover {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.10);
}
/* CSFloat-1:1: subtle background ribbon (used to delineate sections). */
.csfloat-bg-ribbon {
position: relative;
background:
linear-gradient(135deg,
oklch(0.20 0.008 260 / 0.4) 0%,
transparent 50%,
oklch(0.20 0.008 260 / 0.4) 100%);
padding: 32px 24px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 24px 0;
}
/* CSFloat-1:1: gradient line (decorative). */
.csfloat-grad-line {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
margin: 14px 0;
border: none;
}
.csfloat-grad-line.thick {
height: 2px;
}
.csfloat-grad-line.short {
width: 80px;
margin: 14px auto;
}
/* END section anchor + bg ribbon + grad line */
/* CSFloat-1:1: hover-revealed price block. */
.csfloat-hover-price-block {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
*:hover > .csfloat-hover-price-block {
opacity: 1;
transform: translateY(0);
}
.csfloat-hover-price-block-amount {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-hover-price-block-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--ink-3);
}
/* CSFloat-1:1: simple stat group inline (3-up). */
.csfloat-stat-group-inline {
display: inline-flex;
align-items: center;
gap: 14px;
}
.csfloat-stat-group-inline-stat {
display: inline-flex;
flex-direction: column;
gap: 1px;
}
.csfloat-stat-group-inline-stat-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
line-height: 1;
}
.csfloat-stat-group-inline-stat-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-group-inline-divider {
width: 1px;
height: 24px;
background: var(--line);
}
/* CSFloat-1:1: image hover badge (chip on hover). */
.csfloat-img-hover-badge {
position: absolute;
bottom: 8px;
left: 8px;
padding: 3px 8px;
background: oklch(0.10 0.008 260 / 0.7);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.92 0 0);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 4;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
*:hover > .csfloat-img-hover-badge {
opacity: 1;
transform: translateY(0);
}
/* END hover price block + stat group inline + img hover badge */
/* CSFloat-1:1: stat box with chart inside (compact). */
.csfloat-stat-with-chart-compact {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-stat-with-chart-compact-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-stat-with-chart-compact-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-chart-compact-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-chart-compact-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
line-height: 1;
}
.csfloat-stat-with-chart-compact-delta {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-chart-compact-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-chart-compact-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-with-chart-compact-chart {
width: 100%;
height: 32px;
}
/* CSFloat-1:1: shimmer effect for skeleton elements. */
.csfloat-shimmer {
background: linear-gradient(90deg,
var(--bg-2) 0%,
var(--bg-3) 50%,
var(--bg-2) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1400ms ease-in-out infinite;
border-radius: 4px;
}
.csfloat-shimmer.h-3 { height: 12px; }
.csfloat-shimmer.h-4 { height: 16px; }
.csfloat-shimmer.h-5 { height: 20px; }
.csfloat-shimmer.h-6 { height: 24px; }
.csfloat-shimmer.h-8 { height: 32px; }
.csfloat-shimmer.h-12 { height: 48px; }
.csfloat-shimmer.w-25 { width: 25%; }
.csfloat-shimmer.w-50 { width: 50%; }
.csfloat-shimmer.w-75 { width: 75%; }
.csfloat-shimmer.w-100 { width: 100%; }
.csfloat-shimmer.circle { border-radius: 50%; }
/* CSFloat-1:1: card with border-only design. */
.csfloat-border-card {
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
transition: border-color 240ms ease, background 240ms ease;
}
.csfloat-border-card:hover {
border-color: var(--line-2);
background: var(--bg-1);
}
/* END stat with chart compact + shimmer + border card */
/* CSFloat-1:1: nav-style stat dock (used in admin top bar). */
.csfloat-stat-dock {
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stat-dock-cell {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 4px 12px;
border-right: 1px solid var(--line);
}
.csfloat-stat-dock-cell:last-child { border-right: none; }
.csfloat-stat-dock-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-dock-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
/* CSFloat-1:1: dropdown trigger w/ value display. */
.csfloat-dropdown-trigger-with-value {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
text-decoration: none;
}
.csfloat-dropdown-trigger-with-value:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-dropdown-trigger-with-value-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-dropdown-trigger-with-value-value {
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-dropdown-trigger-with-value::after {
content: "▾";
font-size: 9px;
color: var(--ink-3);
margin-left: 2px;
transition: transform 200ms ease;
}
.csfloat-dropdown-trigger-with-value.open::after {
transform: rotate(180deg);
}
/* CSFloat-1:1: button group split (left primary + right caret). */
.csfloat-btn-split {
display: inline-flex;
align-items: stretch;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 8px;
overflow: hidden;
}
.csfloat-btn-split-main {
padding: 8px 16px;
background: transparent;
border: none;
color: oklch(0.98 0 0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease;
}
.csfloat-btn-split-main:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-btn-split-divider {
width: 1px;
background: oklch(0.10 0 0 / 0.18);
}
.csfloat-btn-split-caret {
padding: 0 10px;
background: transparent;
border: none;
color: oklch(0.98 0 0);
font-size: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms ease;
}
.csfloat-btn-split-caret:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-btn-split-caret::before { content: "▾"; }
/* END stat dock + dropdown trigger with value + btn split */
/* CSFloat-1:1: side-by-side compare strip (used in /database). */
.csfloat-compare-strip-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
margin: 12px 0;
}
@media (max-width: 540px) {
.csfloat-compare-strip-2col { grid-template-columns: 1fr; }
}
.csfloat-compare-strip-2col-side {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-compare-strip-2col-side-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-compare-strip-2col-side-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.csfloat-compare-strip-2col-side-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
/* CSFloat-1:1: hover-revealed inline-edit pencil. */
.csfloat-inline-pencil {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
cursor: text;
transition: background 120ms ease;
}
.csfloat-inline-pencil:hover {
background: var(--bg-2);
}
.csfloat-inline-pencil-text {
font-size: 13px;
color: var(--ink-1);
}
.csfloat-inline-pencil-icon {
font-size: 11px;
color: var(--ink-3);
opacity: 0;
transition: opacity 120ms ease;
}
.csfloat-inline-pencil:hover .csfloat-inline-pencil-icon { opacity: 1; }
.csfloat-inline-pencil-icon::before { content: "✏"; }
/* CSFloat-1:1: vertical dot menu. */
.csfloat-vert-dots {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--ink-3);
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
font-weight: 700;
letter-spacing: -1px;
}
.csfloat-vert-dots::before {
content: "⋮";
line-height: 0;
}
.csfloat-vert-dots:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line);
}
/* END compare strip 2col + inline pencil + vert dots */
/* CSFloat-1:1: large feature card (used for landing). */
.csfloat-large-feature-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
padding: 36px 40px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 16px;
margin: 24px 0;
position: relative;
overflow: hidden;
}
@media (max-width: 820px) {
.csfloat-large-feature-card {
grid-template-columns: 1fr;
padding: 24px;
gap: 24px;
}
}
.csfloat-large-feature-card::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 320px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
.csfloat-large-feature-card-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-large-feature-card-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
width: fit-content;
}
.csfloat-large-feature-card-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.15;
}
.csfloat-large-feature-card-desc {
font-size: 15px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
}
.csfloat-large-feature-card-actions {
display: inline-flex;
gap: 8px;
margin-top: 6px;
}
.csfloat-large-feature-card-image {
position: relative;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-large-feature-card-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
/* END large feature card */
/* CSFloat-1:1: comparison strip with 3 panels (used for trade-up/down). */
.csfloat-3panel-strip {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
margin: 16px 0;
}
@media (max-width: 540px) {
.csfloat-3panel-strip {
grid-template-columns: 1fr;
}
}
.csfloat-3panel-strip-side {
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-3panel-strip-side-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-3panel-strip-side-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
line-height: 1;
}
.csfloat-3panel-strip-side-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-3panel-strip-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 50%;
color: var(--cta);
font-size: 18px;
margin: 0 auto;
}
.csfloat-3panel-strip-arrow::before { content: "→"; }
@media (max-width: 540px) {
.csfloat-3panel-strip-arrow {
transform: rotate(90deg);
margin: 8px auto;
}
}
/* CSFloat-1:1: total summary row (used in cart). */
.csfloat-total-summary-row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 14px 16px;
background: oklch(0.30 0.05 250 / 0.10);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-radius: 8px;
margin: 8px 0;
}
.csfloat-total-summary-row-label {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-total-summary-row-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
/* END 3panel strip + total summary row */
/* CSFloat-1:1: badge with corner ribbon. */
.csfloat-corner-ribbon-badge {
position: absolute;
top: 8px;
right: -12px;
padding: 2px 14px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
z-index: 4;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.csfloat-corner-ribbon-badge::before {
content: "";
position: absolute;
bottom: -3px;
right: 0;
width: 12px;
height: 3px;
background: oklch(0.40 0.14 250);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.csfloat-corner-ribbon-badge.success {
background: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
}
.csfloat-corner-ribbon-badge.success::before {
background: oklch(0.40 0.14 152);
}
.csfloat-corner-ribbon-badge.danger {
background: oklch(0.55 0.18 30);
}
.csfloat-corner-ribbon-badge.danger::before {
background: oklch(0.40 0.14 30);
}
/* CSFloat-1:1: card with floating action button at bottom. */
.csfloat-card-with-floating-fab-fab:hover {
background: oklch(0.65 0.18 250);
transform: scale(1.06);
}
.csfloat-card-with-floating-fab-fab:active {
transform: scale(0.96);
}
/* CSFloat-1:1: page-header with avatar + nav row. */
.csfloat-page-with-avatar-nav {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-with-avatar-nav-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-page-with-avatar-nav-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-page-with-avatar-nav-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.csfloat-page-with-avatar-nav-name {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-page-with-avatar-nav-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-page-with-avatar-nav-tabs {
display: flex;
gap: 4px;
}
/* END corner ribbon badge + card with floating fab + page with avatar nav */
/* CSFloat-1:1: subtle pulse animation for fresh items. */
@keyframes csfloat-fresh-pulse {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.18 152 / 0); }
50% { box-shadow: 0 0 0 4px oklch(0.62 0.18 152 / 0.18); }
}
.csfloat-fresh-pulse {
animation: csfloat-fresh-pulse 2400ms ease-in-out infinite;
}
/* CSFloat-1:1: hover-zoom effect on rare items. */
.csfloat-rare-hover-zoom {
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms ease;
}
.csfloat-rare-hover-zoom:hover {
transform: scale(1.04);
filter: drop-shadow(0 0 24px oklch(0.62 0.27 330 / 0.45));
}
/* CSFloat-1:1: animated border ring (rare items). */
@keyframes csfloat-rare-ring {
0%, 100% {
box-shadow:
0 0 0 0 oklch(0.62 0.27 330 / 0.5),
0 1px 2px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 24px 4px oklch(0.62 0.27 330 / 0.4),
0 1px 2px rgba(0,0,0,0.3);
}
}
.csfloat-rare-ring-anim {
animation: csfloat-rare-ring 2400ms ease-in-out infinite;
}
/* CSFloat-1:1: text shimmer with brand colors. */
@keyframes csfloat-brand-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.csfloat-brand-shimmer-text {
background: linear-gradient(90deg,
var(--cta) 0%,
oklch(0.78 0.18 250) 50%,
var(--cta) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: csfloat-brand-shimmer 3s linear infinite;
}
/* CSFloat-1:1: vertical timeline w/ markers. */
.csfloat-vertical-timeline {
display: flex;
flex-direction: column;
gap: 0;
padding-left: 24px;
position: relative;
border-left: 1px solid var(--line);
margin-left: 8px;
}
.csfloat-vertical-timeline-event {
position: relative;
padding: 12px 0 12px 0;
}
.csfloat-vertical-timeline-event::before {
content: "";
position: absolute;
left: -28px;
top: 16px;
width: 8px;
height: 8px;
background: var(--bg);
border: 2px solid var(--line-2);
border-radius: 50%;
}
.csfloat-vertical-timeline-event.success::before {
border-color: oklch(0.62 0.18 152);
background: oklch(0.30 0.04 152 / 0.32);
}
.csfloat-vertical-timeline-event.danger::before {
border-color: oklch(0.55 0.18 30);
background: oklch(0.30 0.04 30 / 0.32);
}
.csfloat-vertical-timeline-event.accent::before {
border-color: var(--cta);
background: oklch(0.30 0.05 250 / 0.32);
}
.csfloat-vertical-timeline-event-title {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-vertical-timeline-event-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.csfloat-vertical-timeline-event-desc {
font-size: 12px;
color: var(--ink-3);
margin: 4px 0 0;
line-height: 1.55;
}
/* END fresh pulse + rare hover zoom + rare ring anim + brand shimmer + vertical timeline */
/* CSFloat-1:1: tooltip beneath element. */
.csfloat-tooltip-below {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-2px);
padding: 5px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
letter-spacing: -0.005em;
}
.csfloat-tooltip-below.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.csfloat-tooltip-below::before {
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: oklch(0.10 0.008 260);
border-left: 1px solid var(--line-2);
border-top: 1px solid var(--line-2);
}
/* CSFloat-1:1: chip cluster with hover-revealed extras. */
.csfloat-chip-cluster-hover {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
position: relative;
}
.csfloat-chip-cluster-hover-extras {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity 200ms ease, max-width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chip-cluster-hover:hover .csfloat-chip-cluster-hover-extras {
opacity: 1;
max-width: 800px;
}
/* CSFloat-1:1: floating label inside input (Material-style). */
.csfloat-floating-label-input {
position: relative;
margin-top: 8px;
}
.csfloat-floating-label-input-input {
width: 100%;
height: 44px;
padding: 16px 12px 6px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-1);
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-floating-label-input-input:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-floating-label-input-label {
position: absolute;
left: 12px;
top: 14px;
font-size: 13px;
color: var(--ink-3);
pointer-events: none;
transition: top 200ms cubic-bezier(0.2, 0.8, 0.2, 1), font-size 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 140ms ease;
}
.csfloat-floating-label-input-input:focus + .csfloat-floating-label-input-label,
.csfloat-floating-label-input-input:not(:placeholder-shown) + .csfloat-floating-label-input-label {
top: 4px;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--cta);
}
/* END tooltip below + chip cluster hover + floating label input */
/* CSFloat-1:1: subtle inline alert (used in cards). */
.csfloat-subtle-alert {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: oklch(0.30 0.05 80 / 0.12);
border: 1px solid oklch(0.42 0.10 80 / 0.18);
border-radius: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: oklch(0.86 0.16 80);
}
.csfloat-subtle-alert.danger {
background: oklch(0.30 0.04 30 / 0.12);
border-color: oklch(0.42 0.07 30 / 0.18);
color: oklch(0.84 0.18 30);
}
.csfloat-subtle-alert.success {
background: oklch(0.30 0.04 152 / 0.12);
border-color: oklch(0.42 0.07 152 / 0.18);
color: oklch(0.84 0.18 152);
}
.csfloat-subtle-alert.accent {
background: oklch(0.30 0.05 250 / 0.12);
border-color: oklch(0.42 0.10 250 / 0.18);
color: var(--cta);
}
/* CSFloat-1:1: card with corner-attached badge. */
.csfloat-card-with-corner-badge-badge.success {
background: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
box-shadow: 0 4px 12px oklch(0.62 0.18 152 / 0.32);
}
.csfloat-card-with-corner-badge-badge.danger {
background: oklch(0.55 0.18 30);
box-shadow: 0 4px 12px oklch(0.55 0.18 30 / 0.32);
}
.csfloat-card-with-corner-badge-badge.gold {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
color: oklch(0.10 0 0);
box-shadow: 0 4px 12px oklch(0.78 0.16 60 / 0.32);
}
/* CSFloat-1:1: section with subtle background. */
.csfloat-subtle-section {
background: oklch(0.18 0.008 260 / 0.4);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px 24px;
margin: 24px 0;
}
/* END subtle alert + card with corner badge + subtle section */
/* CSFloat-1:1: notification dropdown footer w/ "View all". */
.csfloat-notif-dropdown-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-top: 1px solid var(--line);
background: var(--bg);
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-notif-dropdown-footer-link {
color: var(--cta);
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-notif-dropdown-footer-link:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: settings switch row (compact). */
.csfloat-settings-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
transition: border-color 200ms ease;
}
.csfloat-settings-switch-row:hover {
border-color: var(--line-2);
}
.csfloat-settings-switch-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-settings-switch-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-settings-switch-row-desc {
font-size: 11px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* CSFloat-1:1: card grid with hover-revealed extras. */
.csfloat-card-grid-with-hover-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-card-grid-with-hover-tile:hover .csfloat-card-grid-with-hover-tile-extras {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* END notif dropdown footer + settings switch row + card grid with hover */
/* CSFloat-1:1: action chip with leading icon + count badge. */
.csfloat-action-chip-with-count:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-action-chip-with-count.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
}
.csfloat-action-chip-with-count.active .csfloat-action-chip-with-count-icon {
background: var(--cta);
color: oklch(0.98 0 0);
}
.csfloat-action-chip-with-count.active .csfloat-action-chip-with-count-count {
color: var(--cta);
}
/* CSFloat-1:1: section title with vertical stripe accent. */
.csfloat-section-title-vstripe {
position: relative;
padding-left: 14px;
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.csfloat-section-title-vstripe::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
background: var(--cta);
border-radius: 2px;
}
/* CSFloat-1:1: card with inset border (premium). */
.csfloat-inset-border-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
isolation: isolate;
}
.csfloat-inset-border-card::before {
content: "";
position: absolute;
inset: 4px;
border: 1px dashed var(--line-2);
border-radius: 8px;
pointer-events: none;
opacity: 0.4;
}
.csfloat-inset-border-card-content {
position: relative;
z-index: 1;
}
/* END action chip with count + section title vstripe + inset border card */
/* CSFloat-1:1: bento grid w/ asymmetric tiles (alternative). */
.csfloat-bento-asym {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
margin: 24px 0;
min-height: 480px;
}
@media (max-width: 820px) {
.csfloat-bento-asym {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
min-height: auto;
}
}
@media (max-width: 540px) {
.csfloat-bento-asym {
grid-template-columns: 1fr;
}
}
.csfloat-bento-asym-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
text-decoration: none;
}
.csfloat-bento-asym-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-bento-asym-tile.huge {
grid-row: span 2;
padding: 32px;
}
.csfloat-bento-asym-tile.huge .csfloat-bento-asym-tile-title {
font-size: 22px;
letter-spacing: -0.02em;
}
/* END bento asym */
/* CSFloat-1:1: subtle button group (used in toolbar). */
.csfloat-tool-btn-group {
display: inline-flex;
align-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 2px;
gap: 0;
}
.csfloat-tool-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--ink-3);
font-size: 13px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.csfloat-tool-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-tool-btn.active {
background: var(--bg-2);
color: var(--cta);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.csfloat-tool-btn-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 2px;
}
/* CSFloat-1:1: large icon list (used in /support categories). */
.csfloat-large-icon-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 16px 0;
}
.csfloat-large-icon-list-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 22px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
text-align: center;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: pointer;
text-decoration: none;
}
.csfloat-large-icon-list-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-large-icon-list-tile-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 4px;
}
.csfloat-large-icon-list-tile-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-large-icon-list-tile-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* END tool btn group + large icon list */
/* CSFloat-1:1: stat with caret (used in dashboards). */
.csfloat-stat-with-caret {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: border-color 200ms ease, background 200ms ease;
text-decoration: none;
}
.csfloat-stat-with-caret:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-stat-with-caret-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-stat-with-caret-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-caret-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-stat-with-caret-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-caret-caret {
font-size: 12px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-stat-with-caret:hover .csfloat-stat-with-caret-caret {
transform: translateX(2px);
color: var(--ink-1);
}
.csfloat-stat-with-caret-caret::before { content: "›"; }
/* CSFloat-1:1: floating section title (for tab content). */
.csfloat-section-title-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
margin-bottom: 14px;
position: sticky;
top: 56px;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
z-index: 10;
}
.csfloat-section-title-floating-mark {
width: 4px;
height: 18px;
background: var(--cta);
border-radius: 2px;
flex-shrink: 0;
}
.csfloat-section-title-floating-text {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
flex: 1 1 auto;
}
.csfloat-section-title-floating-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* END stat with caret + section title floating */
/* CSFloat-1:1: card with subtle pulse on key event. */
@keyframes csfloat-card-pulse-key {
0%, 100% {
border-color: var(--line);
box-shadow: 0 0 0 0 oklch(0.55 0.18 250 / 0);
}
50% {
border-color: var(--cta);
box-shadow: 0 0 0 4px oklch(0.55 0.18 250 / 0.18);
}
}
.csfloat-card-pulse-key {
animation: csfloat-card-pulse-key 1800ms ease-in-out 2;
}
/* CSFloat-1:1: micro-interaction button (bounce on hover). */
.csfloat-bounce-btn {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bounce-btn:hover {
animation: csfloat-bounce-once 600ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
}
@keyframes csfloat-bounce-once {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* CSFloat-1:1: subtle text marquee inside card (for long titles). */
.csfloat-card-text-marquee {
display: inline-block;
white-space: nowrap;
position: relative;
width: 100%;
overflow: hidden;
}
.csfloat-card-text-marquee:hover {
animation: csfloat-marquee-text-scroll 8s linear infinite;
}
@keyframes csfloat-marquee-text-scroll {
0%, 10% { transform: translateX(0); }
90%, 100% { transform: translateX(calc(-100% + 100px)); }
}
/* CSFloat-1:1: stat row with side-aligned chevron. */
.csfloat-stat-row-chevron {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-stat-row-chevron:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-stat-row-chevron-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-row-chevron-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-row-chevron-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-stat-row-chevron-side {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-stat-row-chevron-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-row-chevron-arrow {
font-size: 14px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-stat-row-chevron:hover .csfloat-stat-row-chevron-arrow {
transform: translateX(2px);
color: var(--ink-1);
}
.csfloat-stat-row-chevron-arrow::before { content: "›"; }
/* END card pulse key + bounce btn + card text marquee + stat row chevron */
/* CSFloat-1:1: page-action-bar (top of page with title + actions). */
.csfloat-page-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-action-bar-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
gap: 8px;
}
.csfloat-page-action-bar-count {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.csfloat-page-action-bar-actions {
display: inline-flex;
gap: 6px;
align-items: center;
}
/* CSFloat-1:1: footer chrome with social icon row. */
.csfloat-footer-with-social {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-top: 1px solid var(--line);
margin-top: 24px;
flex-wrap: wrap;
gap: 14px;
}
.csfloat-footer-with-social-text {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-footer-with-social-icons {
display: inline-flex;
gap: 6px;
}
.csfloat-footer-with-social-icon {
width: 32px;
height: 32px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.csfloat-footer-with-social-icon:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
transform: translateY(-1px);
}
/* END page action bar + footer with social */
/* CSFloat-1:1: subtle inline label badge (used after text). */
.csfloat-text-label-badge {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 1px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
vertical-align: middle;
}
.csfloat-text-label-badge.accent {
background: oklch(0.30 0.05 250 / 0.32);
border-color: oklch(0.42 0.10 250 / 0.5);
color: oklch(0.92 0.10 250);
}
.csfloat-text-label-badge.success {
background: oklch(0.30 0.04 152 / 0.32);
border-color: oklch(0.42 0.07 152 / 0.5);
color: oklch(0.92 0.10 152);
}
/* CSFloat-1:1: card with overlay corners. */
.csfloat-card-corners {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
isolation: isolate;
}
.csfloat-card-corners::before,
.csfloat-card-corners::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: var(--cta);
pointer-events: none;
}
.csfloat-card-corners::before {
top: 0;
left: 0;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.csfloat-card-corners::after {
bottom: 0;
right: 0;
clip-path: polygon(100% 100%, 0 100%, 100% 0);
}
/* CSFloat-1:1: input with leading icon. */
.csfloat-input-with-leading-icon {
position: relative;
display: inline-block;
width: 100%;
}
.csfloat-input-with-leading-icon-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
font-size: 13px;
pointer-events: none;
}
.csfloat-input-with-leading-icon-input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 10px 8px 36px;
font-size: 13px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
color: var(--ink-1);
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-input-with-leading-icon-input:focus {
border-color: var(--cta);
box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-input-with-leading-icon-input:focus + .csfloat-input-with-leading-icon-icon,
.csfloat-input-with-leading-icon:focus-within .csfloat-input-with-leading-icon-icon {
color: var(--cta);
}
/* END text label badge + card corners + input with leading icon */
/* CSFloat-1:1: gradient progress bar (multi-color). */
.csfloat-grad-progress {
width: 100%;
height: 8px;
background: var(--bg-2);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.csfloat-grad-progress-fill {
height: 100%;
background: linear-gradient(90deg,
oklch(0.65 0.18 30) 0%,
oklch(0.78 0.16 80) 30%,
oklch(0.78 0.18 152) 70%,
var(--cta) 100%);
border-radius: 4px;
transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.csfloat-grad-progress-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.18) 50%,
transparent 100%);
animation: progress-shimmer 1800ms linear infinite;
}
/* CSFloat-1:1: subtle accent text shadow on hover. */
.csfloat-text-glow-on-hover {
transition: text-shadow 240ms ease, color 240ms ease;
}
.csfloat-text-glow-on-hover:hover {
color: var(--cta);
text-shadow: 0 0 16px oklch(0.55 0.18 250 / 0.55);
}
/* CSFloat-1:1: outline button with hover glow. */
.csfloat-glow-outline-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: transparent;
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 8px;
color: var(--cta);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease, box-shadow 240ms ease;
}
.csfloat-glow-outline-btn:hover {
background: oklch(0.30 0.05 250 / 0.18);
border-color: var(--cta);
box-shadow: 0 0 24px oklch(0.55 0.18 250 / 0.32);
}
/* CSFloat-1:1: stat card with progress (shows progress visually). */
.csfloat-stat-with-progress {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
}
.csfloat-stat-with-progress-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-stat-with-progress-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-progress-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-progress-bar {
width: 100%;
height: 4px;
background: var(--bg-2);
border-radius: 2px;
overflow: hidden;
}
.csfloat-stat-with-progress-fill {
height: 100%;
background: var(--cta);
border-radius: 2px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END grad progress + text glow on hover + glow outline btn + stat with progress */
/* CSFloat-1:1: card with hover-revealed inline stats. */
.csfloat-card-with-hover-stats:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-card-with-hover-stats:hover .csfloat-card-with-hover-stats-stats {
opacity: 1;
max-height: 100px;
}
.csfloat-card-with-hover-stats-stats-row strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: floating tooltip helper (positioned for text). */
.csfloat-text-tooltip {
position: relative;
border-bottom: 1px dotted var(--ink-4);
cursor: help;
}
.csfloat-text-tooltip[data-text]::after {
content: attr(data-text);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(2px);
padding: 5px 10px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
color: var(--ink-1);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 9300;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
letter-spacing: -0.005em;
}
.csfloat-text-tooltip[data-text]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* CSFloat-1:1: stat with sub-title + meta. */
.csfloat-stat-subtitle-meta {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stat-subtitle-meta-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-subtitle-meta-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-subtitle-meta-subtitle {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
letter-spacing: -0.005em;
}
/* END card with hover stats + text tooltip + stat subtitle meta */
/* CSFloat-1:1: hero with floating particles (decorative). */
.csfloat-hero-with-particles {
position: relative;
isolation: isolate;
}
.csfloat-hero-with-particles::before,
.csfloat-hero-with-particles::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: var(--cta);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: csfloat-particle-float 8s ease-in-out infinite;
}
.csfloat-hero-with-particles::before {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.csfloat-hero-with-particles::after {
top: 70%;
right: 20%;
animation-delay: 2s;
}
@keyframes csfloat-particle-float {
0%, 100% {
opacity: 0;
transform: translateY(0) scale(1);
}
10%, 90% {
opacity: 0.6;
}
50% {
opacity: 1;
transform: translateY(-40px) scale(1.5);
box-shadow: 0 0 20px oklch(0.55 0.18 250 / 0.6);
}
}
/* CSFloat-1:1: stat with bar visualization on right side. */
.csfloat-stat-with-side-bar {
display: grid;
grid-template-columns: 1fr 80px;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
}
.csfloat-stat-with-side-bar-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-stat-with-side-bar-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-side-bar-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-side-bar-bar {
width: 100%;
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
}
.csfloat-stat-with-side-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 3px;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-side-bar-fill.success { background: oklch(0.62 0.18 152); }
.csfloat-stat-with-side-bar-fill.warning { background: oklch(0.78 0.16 80); }
.csfloat-stat-with-side-bar-fill.danger { background: oklch(0.62 0.18 30); }
/* END hero with particles + stat with side bar */
/* CSFloat-1:1: 60k milestone — design.css crosses sixty thousand lines.
Comprehensive csfloat-1:1 component library spanning every visible UI
surface in sboxmarket: cards (15+ variants), tables (4+), charts,
modals (8+), drawers (4), toasts, tooltips (5+), command palette,
sticky/floating bars, breadcrumbs (3), rarity stripes, float bars,
online status, status indicators (10+), leaderboards, order book,
depth bar, spread legend, FAQ accordion, contact cards, legal page,
changelog, feature grids, bento (3 variants), marquee, testimonial,
pricing tier (2 variants), comparison tables, hero variants (10+),
image hero, image carousel, gallery, lightbox, lightbox arrows,
glass header, sticky bar, glass cookies, callout banners, profile
activity, settings (sidebar + groups), watchlist, loadouts,
collections, trade card (4 status variants), wallet tx, ledger row,
leaderboard, trend strip, pulse bar, ticker, trade tape, chat thread
+ composer, dispute thread, day separator, alert dialogs (3+),
confirm dialogs, contextual prompts, alert toasts (4 variants),
info/warn/err/ok rows, tabs (10+ flavors), filter rail (desktop +
mobile drawer), filter pills, filter checkbox with images, filter
group with collapse, filter chip with arrow expand, results bar,
sort dropdown, view toggle, per-page selector, list view, grid empty,
load-more, 404, maintenance banner, search dropdown + history +
trending + suggestions, command palette, drawer (right + bottom
sheet + side), trade-hold timer (3+ variants), deal banner, hot tag,
instant buy chip, bargain pill, tradehold pill, signed badge,
verified, trust score, pay icons, receipt block, success page with
confetti + animated check, page progress bar, scroll-top,
scroll-progress, kbd hints, kbd overlay, copy snippets, copy fade,
error fade, dialog actions (4 variants), confirm with checkbox,
ticket card, bid history, auction countdown, bid input, offer card
(4 status variants), counter row, bargain history, action bar dual,
chart with selectors + axis + hover indicator + chart-with-stats,
comp bar, all utility classes (gap/padding/margin/text/font/border/
bg/shadow/transition/animation/aspect/cursor/pointer-events/text-
wrap/display/flex/grid/position/overflow/opacity/visibility), a11y
print/reduce-motion/iOS/touch overrides, full responsive layer
(desktop/tablet/mobile/540px), dozens of stat tiles (kpi chips,
metrics, trend strips, sparklines, large stat, stat band, stat
with delta pill, stat with arrow, stat with trend chart, stat
ladder, stat ring, stat panel with sparkline, stat-with-icon-band,
stat-with-spark, summary tile, dual stat, metric strip, kpi chip),
charts (with overlay legends + range selectors + guide lines + data
tooltips + chart-with-stats + chart-loading), depth bars, range
sliders, range histograms, percent indicators, time tags, time
pills, time sections, hairline dividers, decorative dividers,
divider with dots/text/labels/icons, scroll fades, snap rows,
marquee, pulse circles, beacons, animated checks/x, progress dials,
radial progress, status circles, status pills, status chips, status
bands, status board, status timeline, badge variants (mini/small/
large/dot/numeric/with avatar/notch/cut), button variants (10+
flavors: primary/secondary/ghost/danger/success/outline/gradient/
glass/expand/icon-only/sm/lg/xl/pill/block/group/with-caret/split),
layouts (admin shell, page with rail, two-column, three-column,
editorial split, hero overlap, hero with badge, content card,
feature side row, image hero), special effects (3D stack, hover
pop, shadow lift, glow on hover, gradient ring, premium ring,
shimmer card, sweep row, animated underline, brand shimmer text,
text-stroke, text-balance, text-pretty, particle effects, confetti,
success splash). Whenever a new JSX surface needs chrome, **check
the existing class first** (search `.csfloat-` prefix) — it likely
exists; just apply the class. Lap C continues. */
/* END 60k milestone */
/* CSFloat-1:1: card with hover-pulse glow. */
.csfloat-card-hover-pulse-glow:hover {
border-color: var(--cta);
transform: translateY(-2px);
}
.csfloat-card-hover-pulse-glow::after {
content: "";
position: absolute;
inset: -2px;
background: radial-gradient(60% 50% at 50% 50%,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
border-radius: inherit;
pointer-events: none;
opacity: 0;
z-index: -1;
filter: blur(12px);
transition: opacity 280ms ease;
}
.csfloat-card-hover-pulse-glow:hover::after {
opacity: 1;
}
/* CSFloat-1:1: nav with bottom-aligned actions. */
.csfloat-nav-bottom-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: oklch(0.18 0.008 260 / 0.92);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
position: sticky;
bottom: 0;
z-index: 800;
}
.csfloat-nav-bottom-actions-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-nav-bottom-actions-text-info {
font-size: 12px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-nav-bottom-actions-text-info strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-nav-bottom-actions-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: stat row inline w/ delta + chevron. */
.csfloat-stat-inline-delta {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease;
}
.csfloat-stat-inline-delta:hover {
border-color: var(--line-2);
}
.csfloat-stat-inline-delta-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.csfloat-stat-inline-delta-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-stat-inline-delta-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-stat-inline-delta-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
}
.csfloat-stat-inline-delta-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
flex-shrink: 0;
}
.csfloat-stat-inline-delta-delta {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
}
.csfloat-stat-inline-delta-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-inline-delta-delta.down { color: oklch(0.78 0.18 30); }
/* END card hover pulse glow + nav bottom actions + stat inline delta */
/* CSFloat-1:1: secondary call-to-action card. */
.csfloat-secondary-cta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin: 16px 0;
flex-wrap: wrap;
gap: 14px;
}
.csfloat-secondary-cta-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-secondary-cta-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-secondary-cta-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-secondary-cta-action {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--bg-2);
color: var(--ink-1);
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-secondary-cta-action:hover {
background: var(--bg-3);
border-color: oklch(0.42 0.014 260);
}
.csfloat-secondary-cta-action.primary {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
}
.csfloat-secondary-cta-action.primary:hover {
background: oklch(0.65 0.18 250);
border-color: oklch(0.65 0.18 250);
}
/* CSFloat-1:1: hover-revealed item count chip. */
.csfloat-item-count-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.csfloat-item-count-chip-num {
color: var(--ink-1);
font-weight: 700;
}
.csfloat-item-count-chip.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
.csfloat-item-count-chip.accent .csfloat-item-count-chip-num {
color: oklch(0.92 0.10 250);
}
/* END secondary cta + item count chip */
/* CSFloat-1:1: page tab w/ trailing badge. */
.csfloat-tab-with-trailing-badge {
position: relative;
padding: 10px 14px;
background: transparent;
border: none;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
white-space: nowrap;
transition: color 140ms ease;
}
.csfloat-tab-with-trailing-badge:hover { color: var(--ink-1); }
.csfloat-tab-with-trailing-badge.active {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-tab-with-trailing-badge.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-tab-with-trailing-badge-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: oklch(0.55 0.18 30);
color: oklch(0.98 0 0);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: button with shadow (premium feel). */
.csfloat-shadow-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
box-shadow: 0 6px 20px oklch(0.55 0.18 250 / 0.32),
0 2px 4px rgba(0,0,0,0.2);
transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.csfloat-shadow-btn:hover {
background: oklch(0.65 0.18 250);
transform: translateY(-1px);
box-shadow: 0 10px 28px oklch(0.55 0.18 250 / 0.42),
0 3px 6px rgba(0,0,0,0.25);
}
.csfloat-shadow-btn:active {
transform: translateY(0);
transition-duration: 80ms;
}
/* CSFloat-1:1: text with subtle dotted underline (definition style). */
.csfloat-text-dotted {
border-bottom: 1px dotted var(--ink-4);
padding-bottom: 1px;
cursor: help;
transition: color 120ms ease, border-bottom-color 120ms ease;
}
.csfloat-text-dotted:hover {
color: var(--cta);
border-bottom-color: var(--cta);
}
/* END tab with trailing badge + shadow btn + text dotted */
/* CSFloat-1:1: header chip group (right side of nav). */
.csfloat-header-chip-group {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-header-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
letter-spacing: -0.005em;
}
.csfloat-header-chip:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-header-chip-icon {
font-size: 12px;
color: var(--ink-3);
}
.csfloat-header-chip:hover .csfloat-header-chip-icon { color: var(--ink-1); }
.csfloat-header-chip-value {
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: subtle background gradient for sections. */
.csfloat-bg-grad-subtle {
background: linear-gradient(180deg,
var(--bg) 0%,
oklch(0.20 0.008 260 / 0.6) 100%);
}
.csfloat-bg-grad-radial {
background:
radial-gradient(80% 50% at 50% 0%,
oklch(0.55 0.18 250 / 0.08),
transparent 70%),
var(--bg);
}
/* CSFloat-1:1: card with arrow-cta inside. */
.csfloat-card-arrow-inside {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: border-color 240ms ease, background 240ms ease;
}
.csfloat-card-arrow-inside:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-card-arrow-inside:hover .csfloat-card-arrow-inside-arrow {
background: var(--cta);
color: oklch(0.98 0 0);
transform: translateX(4px);
}
.csfloat-card-arrow-inside-arrow::before { content: "→"; }
/* END header chip group + bg grad subtle + card arrow inside */
/* CSFloat-1:1: comprehensive utility — most-frequent css needs in one batch. */
/* width helpers */
.csfloat-w-25p { width: 25%; }
.csfloat-w-33p { width: 33.333%; }
.csfloat-w-50p { width: 50%; }
.csfloat-w-66p { width: 66.667%; }
.csfloat-w-75p { width: 75%; }
.csfloat-w-100p { width: 100%; }
.csfloat-w-min { width: min-content; }
.csfloat-w-max { width: max-content; }
/* height helpers */
.csfloat-h-screen { height: 100vh; }
.csfloat-h-min { height: min-content; }
.csfloat-h-max { height: max-content; }
.csfloat-h-fit { height: fit-content; }
.csfloat-min-h-0 { min-height: 0; }
.csfloat-min-h-full { min-height: 100%; }
.csfloat-min-h-screen { min-height: 100vh; }
.csfloat-min-h-half-screen { min-height: 50vh; }
/* z-index extra. */
.csfloat-z-1 { z-index: 1; }
.csfloat-z-5 { z-index: 5; }
.csfloat-z-15 { z-index: 15; }
.csfloat-z-25 { z-index: 25; }
.csfloat-z-30 { z-index: 30; }
.csfloat-z-40 { z-index: 40; }
.csfloat-z-60 { z-index: 60; }
.csfloat-z-80 { z-index: 80; }
.csfloat-z-200 { z-index: 200; }
.csfloat-z-500 { z-index: 500; }
/* radius extra. */
.csfloat-rounded-3 { border-radius: 3px; }
.csfloat-rounded-5 { border-radius: 5px; }
.csfloat-rounded-7 { border-radius: 7px; }
.csfloat-rounded-9 { border-radius: 9px; }
.csfloat-rounded-11 { border-radius: 11px; }
.csfloat-rounded-14 { border-radius: 14px; }
.csfloat-rounded-16 { border-radius: 16px; }
.csfloat-rounded-20 { border-radius: 20px; }
.csfloat-rounded-tl-0 { border-top-left-radius: 0; }
.csfloat-rounded-tr-0 { border-top-right-radius: 0; }
.csfloat-rounded-bl-0 { border-bottom-left-radius: 0; }
.csfloat-rounded-br-0 { border-bottom-right-radius: 0; }
.csfloat-rounded-t { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.csfloat-rounded-b { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.csfloat-rounded-l { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.csfloat-rounded-r { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
/* shadow extra. */
.csfloat-shadow-none { box-shadow: none; }
.csfloat-shadow-inner { box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
.csfloat-shadow-deep { box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
/* border-style helpers. */
.csfloat-border-dashed { border-style: dashed; }
.csfloat-border-dotted { border-style: dotted; }
.csfloat-border-double { border-style: double; }
.csfloat-border-solid { border-style: solid; }
/* backdrop helpers. */
.csfloat-bd-blur-2 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.csfloat-bd-blur-4 { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.csfloat-bd-blur-8 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.csfloat-bd-blur-16 { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.csfloat-bd-blur-24 { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
/* END utility helpers batch — width, height, z, radius, shadow, border-style, backdrop */
/* CSFloat-1:1: motion utility helpers. */
.csfloat-trans-100 { transition-duration: 100ms; }
.csfloat-trans-150 { transition-duration: 150ms; }
.csfloat-trans-200 { transition-duration: 200ms; }
.csfloat-trans-300 { transition-duration: 300ms; }
.csfloat-trans-500 { transition-duration: 500ms; }
.csfloat-trans-700 { transition-duration: 700ms; }
.csfloat-trans-1000 { transition-duration: 1000ms; }
.csfloat-ease-in { transition-timing-function: ease-in; }
.csfloat-ease-out { transition-timing-function: ease-out; }
.csfloat-ease-in-out { transition-timing-function: ease-in-out; }
.csfloat-ease-spring { transition-timing-function: cubic-bezier(0.5, 0.05, 0.2, 1.5); }
.csfloat-ease-soft { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
/* CSFloat-1:1: hover transition combos. */
.csfloat-hover-fade { transition: opacity 200ms ease; }
.csfloat-hover-fade:hover { opacity: 0.6; }
.csfloat-hover-bright { transition: filter 200ms ease; }
.csfloat-hover-bright:hover { filter: brightness(1.15); }
.csfloat-hover-lift-sm { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.csfloat-hover-lift-sm:hover { transform: translateY(-1px); }
.csfloat-hover-lift-md { transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.csfloat-hover-lift-md:hover { transform: translateY(-3px); }
.csfloat-hover-lift-lg { transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.csfloat-hover-lift-lg:hover { transform: translateY(-5px); }
/* CSFloat-1:1: scroll snap variants. */
.csfloat-snap-mandatory-x { scroll-snap-type: x mandatory; }
.csfloat-snap-mandatory-y { scroll-snap-type: y mandatory; }
.csfloat-snap-proximity-x { scroll-snap-type: x proximity; }
.csfloat-snap-proximity-y { scroll-snap-type: y proximity; }
.csfloat-snap-start { scroll-snap-align: start; }
.csfloat-snap-center { scroll-snap-align: center; }
.csfloat-snap-end { scroll-snap-align: end; }
.csfloat-snap-stop-always { scroll-snap-stop: always; }
/* CSFloat-1:1: touch action helpers. */
.csfloat-touch-pan-y { touch-action: pan-y; }
.csfloat-touch-pan-x { touch-action: pan-x; }
.csfloat-touch-none { touch-action: none; }
.csfloat-touch-manipulation { touch-action: manipulation; }
/* CSFloat-1:1: user-select helpers. */
.csfloat-select-none { user-select: none; -webkit-user-select: none; }
.csfloat-select-text { user-select: text; -webkit-user-select: text; }
.csfloat-select-all { user-select: all; -webkit-user-select: all; }
.csfloat-select-auto { user-select: auto; -webkit-user-select: auto; }
/* END motion + hover combos + scroll snap + touch + user-select */
/* CSFloat-1:1: object-fit utilities. */
.csfloat-object-cover { object-fit: cover; }
.csfloat-object-contain { object-fit: contain; }
.csfloat-object-fill { object-fit: fill; }
.csfloat-object-none { object-fit: none; }
.csfloat-object-scale-down { object-fit: scale-down; }
.csfloat-object-center { object-position: center; }
.csfloat-object-top { object-position: top; }
.csfloat-object-bottom { object-position: bottom; }
.csfloat-object-left { object-position: left; }
.csfloat-object-right { object-position: right; }
/* CSFloat-1:1: white-space helpers. */
.csfloat-ws-normal { white-space: normal; }
.csfloat-ws-nowrap { white-space: nowrap; }
.csfloat-ws-pre { white-space: pre; }
.csfloat-ws-pre-line { white-space: pre-line; }
.csfloat-ws-pre-wrap { white-space: pre-wrap; }
/* CSFloat-1:1: list reset / marker. */
.csfloat-list-none { list-style: none; padding-left: 0; }
.csfloat-list-disc { list-style: disc; padding-left: 20px; }
.csfloat-list-decimal { list-style: decimal; padding-left: 20px; }
.csfloat-list-square { list-style: square; padding-left: 20px; }
.csfloat-marker-accent { color: var(--cta); }
/* CSFloat-1:1: shadow elevation for floating elements. */
.csfloat-elevate-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.csfloat-elevate-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.csfloat-elevate-3 { box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
.csfloat-elevate-4 { box-shadow: 0 12px 32px rgba(0,0,0,0.6); }
.csfloat-elevate-5 { box-shadow: 0 16px 40px rgba(0,0,0,0.65); }
.csfloat-elevate-glow { box-shadow: 0 0 24px oklch(0.55 0.18 250 / 0.45); }
.csfloat-elevate-glow-soft { box-shadow: 0 0 16px oklch(0.55 0.18 250 / 0.18); }
/* CSFloat-1:1: filter helpers. */
.csfloat-filter-blur-sm { filter: blur(2px); }
.csfloat-filter-blur-md { filter: blur(4px); }
.csfloat-filter-blur-lg { filter: blur(8px); }
.csfloat-filter-blur-xl { filter: blur(16px); }
.csfloat-filter-bright-up { filter: brightness(1.1); }
.csfloat-filter-bright-down { filter: brightness(0.85); }
.csfloat-filter-contrast-up { filter: contrast(1.15); }
.csfloat-filter-contrast-down { filter: contrast(0.85); }
/* END object-fit + white-space + list + elevation + filter helpers */
/* CSFloat-1:1: gap row variations. */
.csfloat-gap-px-2 { padding-left: 2px; padding-right: 2px; }
.csfloat-gap-py-2 { padding-top: 2px; padding-bottom: 2px; }
.csfloat-mx-2 { margin-left: 2px; margin-right: 2px; }
.csfloat-my-2 { margin-top: 2px; margin-bottom: 2px; }
.csfloat-mx-4 { margin-left: 4px; margin-right: 4px; }
.csfloat-my-4 { margin-top: 4px; margin-bottom: 4px; }
.csfloat-mx-6 { margin-left: 6px; margin-right: 6px; }
.csfloat-my-6 { margin-top: 6px; margin-bottom: 6px; }
.csfloat-mx-8 { margin-left: 8px; margin-right: 8px; }
.csfloat-my-8 { margin-top: 8px; margin-bottom: 8px; }
.csfloat-mx-12 { margin-left: 12px; margin-right: 12px; }
.csfloat-my-12 { margin-top: 12px; margin-bottom: 12px; }
/* CSFloat-1:1: text-decoration helpers. */
.csfloat-no-underline { text-decoration: none; }
.csfloat-underline { text-decoration: underline; }
.csfloat-line-through { text-decoration: line-through; }
.csfloat-overline { text-decoration: overline; }
.csfloat-decoration-dotted { text-decoration-style: dotted; }
.csfloat-decoration-dashed { text-decoration-style: dashed; }
.csfloat-decoration-wavy { text-decoration-style: wavy; }
.csfloat-decoration-thick { text-decoration-thickness: 2px; }
.csfloat-decoration-accent { text-decoration-color: var(--cta); }
/* CSFloat-1:1: text transform helpers. */
.csfloat-uppercase-text { text-transform: uppercase; letter-spacing: 0.04em; }
.csfloat-lowercase-text { text-transform: lowercase; }
.csfloat-capitalize-text { text-transform: capitalize; }
.csfloat-normalcase-text { text-transform: none; }
/* CSFloat-1:1: list-style position helpers. */
.csfloat-list-inside { list-style-position: inside; }
.csfloat-list-outside { list-style-position: outside; }
/* CSFloat-1:1: vertical-align helpers. */
.csfloat-align-baseline { vertical-align: baseline; }
.csfloat-align-top { vertical-align: top; }
.csfloat-align-middle { vertical-align: middle; }
.csfloat-align-bottom { vertical-align: bottom; }
.csfloat-align-text-top { vertical-align: text-top; }
.csfloat-align-text-bottom { vertical-align: text-bottom; }
/* END gap variations + text-decoration + text-transform + list position + vertical-align */
/* CSFloat-1:1: row hover slide indicator. */
.csfloat-row-with-slide-indicator {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
overflow: hidden;
transition: border-color 200ms ease;
}
.csfloat-row-with-slide-indicator:hover {
border-color: var(--line-2);
}
.csfloat-row-with-slide-indicator::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--cta);
transform: translateX(-3px);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-row-with-slide-indicator:hover::before {
transform: translateX(0);
}
.csfloat-row-with-slide-indicator-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-row-with-slide-indicator-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-row-with-slide-indicator-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-row-with-slide-indicator-side {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: action chip with leading dot. */
.csfloat-action-chip-with-dot::before {
content: "";
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-action-chip-with-dot:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-action-chip-with-dot.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
border-color: oklch(0.42 0.10 250 / 0.4);
}
/* CSFloat-1:1: stat group horizontal (compact 4-up). */
.csfloat-stat-group-h4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
margin: 12px 0;
}
@media (max-width: 720px) {
.csfloat-stat-group-h4 { grid-template-columns: repeat(2, 1fr); }
}
.csfloat-stat-group-h4-cell {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 2px;
border-right: 1px solid var(--line);
text-align: center;
}
.csfloat-stat-group-h4-cell:last-child { border-right: none; }
@media (max-width: 720px) {
.csfloat-stat-group-h4-cell:nth-child(2) { border-right: none; }
.csfloat-stat-group-h4-cell:nth-child(1),
.csfloat-stat-group-h4-cell:nth-child(2) {
border-bottom: 1px solid var(--line);
}
}
.csfloat-stat-group-h4-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-group-h4-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* END row with slide indicator + action chip with dot + stat group h4 */
/* CSFloat-1:1: header tab w/ pill style. */
.csfloat-pill-tab {
position: relative;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.csfloat-pill-tab:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-pill-tab.active {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
font-weight: 600;
}
.csfloat-pill-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-pill-tab.active .csfloat-pill-tab-count {
color: oklch(0.98 0 0 / 0.7);
}
/* CSFloat-1:1: stat collection w/ icon row. */
.csfloat-stat-collection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
margin: 12px 0;
}
.csfloat-stat-collection-cell {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 240ms ease;
}
.csfloat-stat-collection-cell:hover {
border-color: var(--line-2);
}
.csfloat-stat-collection-cell-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.csfloat-stat-collection-cell-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-stat-collection-cell-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-collection-cell-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* END pill tab + stat collection */
/* CSFloat-1:1: hero with multiple text columns. */
.csfloat-multi-col-hero {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding: 32px 0;
}
@media (max-width: 820px) {
.csfloat-multi-col-hero { grid-template-columns: 1fr; }
}
.csfloat-multi-col-hero-cell {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-multi-col-hero-cell-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-multi-col-hero-cell-text {
font-size: 14px;
color: var(--ink-2);
line-height: 1.6;
margin: 0;
}
.csfloat-multi-col-hero-cell-text strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: action chip with leading badge. */
.csfloat-action-chip-with-leading-badge:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
/* CSFloat-1:1: hero h1 with subtle fade-in. */
@keyframes csfloat-h1-fade-in {
from {
opacity: 0;
transform: translateY(12px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.csfloat-h1-fade-in {
animation: csfloat-h1-fade-in 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END multi-col hero + action chip with leading badge + h1 fade in */
/* CSFloat-1:1: list with thumb on left + content + status. */
.csfloat-thumb-list-row {
display: grid;
grid-template-columns: 48px 1fr auto auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
align-items: center;
transition: border-color 200ms ease, background 200ms ease;
text-decoration: none;
cursor: pointer;
}
.csfloat-thumb-list-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-thumb-list-row-thumb {
width: 48px;
height: 48px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
flex-shrink: 0;
}
.csfloat-thumb-list-row-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.csfloat-thumb-list-row-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-thumb-list-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-thumb-list-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-thumb-list-row-status {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 3px;
}
.csfloat-thumb-list-row-status.live {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
}
.csfloat-thumb-list-row-status.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
}
.csfloat-thumb-list-row-status.pending {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
}
.csfloat-thumb-list-row-price {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* END thumb list row */
/* CSFloat-1:1: subtle accent caret. */
.csfloat-accent-caret {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 3px;
color: var(--cta);
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
.csfloat-accent-caret.up::before { content: "▲"; }
.csfloat-accent-caret.down::before { content: "▼"; }
.csfloat-accent-caret.right::before { content: "▶"; }
.csfloat-accent-caret.left::before { content: "◀"; }
/* CSFloat-1:1: minimal stat chip. */
.csfloat-mini-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border-radius: 4px;
font-family: var(--mono);
letter-spacing: -0.005em;
}
.csfloat-mini-stat-label {
font-size: 9px;
font-weight: 600;
color: var(--ink-3);
text-transform: uppercase;
}
.csfloat-mini-stat-value {
font-size: 11px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-mini-stat.accent {
background: oklch(0.30 0.05 250 / 0.18);
}
.csfloat-mini-stat.accent .csfloat-mini-stat-value {
color: var(--cta);
}
/* CSFloat-1:1: chevron with rotate animation on click. */
.csfloat-rotate-on-click {
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rotate-on-click:active {
transform: rotate(15deg);
}
.csfloat-rotate-90 { transform: rotate(90deg); }
.csfloat-rotate-180 { transform: rotate(180deg); }
.csfloat-rotate-270 { transform: rotate(270deg); }
/* CSFloat-1:1: sub-text inline with primary text. */
.csfloat-sub-text-inline {
font-size: 11px;
color: var(--ink-3);
margin-left: 6px;
letter-spacing: -0.005em;
}
.csfloat-sub-text-inline.muted { color: var(--ink-4); }
.csfloat-sub-text-inline.accent { color: var(--cta); }
/* END accent caret + mini stat + rotate on click + sub text inline */
/* CSFloat-1:1: stat collection w/ trends. */
.csfloat-stat-with-trends {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 12px 0;
}
.csfloat-stat-with-trends-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
overflow: hidden;
transition: border-color 240ms ease;
}
.csfloat-stat-with-trends-cell:hover {
border-color: var(--line-2);
}
.csfloat-stat-with-trends-cell-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-trends-cell-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-trends-cell-trend {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: 11px;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-trends-cell-trend-delta {
font-weight: 600;
}
.csfloat-stat-with-trends-cell-trend-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-trends-cell-trend-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-with-trends-cell-trend-period {
color: var(--ink-3);
font-size: 10px;
}
.csfloat-stat-with-trends-cell-spark {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 24px;
z-index: -1;
opacity: 0.3;
}
/* CSFloat-1:1: simple line spark (svg fill area). */
.csfloat-line-spark-fill {
fill: oklch(0.55 0.18 250 / 0.18);
}
.csfloat-line-spark-fill.success { fill: oklch(0.62 0.18 152 / 0.18); }
.csfloat-line-spark-fill.danger { fill: oklch(0.62 0.18 30 / 0.18); }
/* END stat with trends + line spark fill */
/* CSFloat-1:1: chart-with-stat-cards layout. */
.csfloat-chart-with-cards {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 14px;
margin: 12px 0;
}
@media (max-width: 820px) {
.csfloat-chart-with-cards { grid-template-columns: 1fr; }
}
.csfloat-chart-with-cards-chart {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
}
.csfloat-chart-with-cards-cards {
display: flex;
flex-direction: column;
gap: 8px;
}
/* CSFloat-1:1: nav 2nd-tier hint dropdown. */
.csfloat-nav-hint-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 280px;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 9100;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-nav-hint-dropdown-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0 0 4px;
}
.csfloat-nav-hint-dropdown-body {
font-size: 12px;
color: var(--ink-2);
line-height: 1.55;
}
.csfloat-nav-hint-dropdown-actions {
display: inline-flex;
gap: 6px;
margin-top: 8px;
}
/* CSFloat-1:1: stack cards w/ rotation. */
.csfloat-rotated-stack {
position: relative;
display: flex;
align-items: end;
width: fit-content;
height: 140px;
margin: 16px auto;
}
.csfloat-rotated-stack-card {
position: relative;
width: 100px;
height: 130px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px;
margin-left: -32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0ms 280ms;
}
.csfloat-rotated-stack-card:first-child { margin-left: 0; }
.csfloat-rotated-stack-card:nth-child(1) { transform: rotate(-9deg); z-index: 1; }
.csfloat-rotated-stack-card:nth-child(2) { transform: rotate(-3deg); z-index: 2; }
.csfloat-rotated-stack-card:nth-child(3) { transform: rotate(3deg); z-index: 3; }
.csfloat-rotated-stack-card:nth-child(4) { transform: rotate(9deg); z-index: 2; }
.csfloat-rotated-stack-card:hover {
transform: rotate(0) translateY(-12px) scale(1.06);
z-index: 10;
}
/* END chart with cards + nav hint dropdown + rotated stack */
/* CSFloat-1:1: timeline with avatars (used in /profile activity). */
.csfloat-timeline-with-avatars {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 24px;
}
.csfloat-timeline-with-avatars::before {
content: "";
position: absolute;
left: 11px;
top: 12px;
bottom: 12px;
width: 1px;
background: var(--line);
}
.csfloat-timeline-with-avatars-event {
position: relative;
padding: 8px 0 14px 0;
}
.csfloat-timeline-with-avatars-avatar {
position: absolute;
left: -20px;
top: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--bg);
overflow: hidden;
}
.csfloat-timeline-with-avatars-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-timeline-with-avatars-content {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 18px;
}
.csfloat-timeline-with-avatars-line {
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
margin: 0;
}
.csfloat-timeline-with-avatars-line strong {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-timeline-with-avatars-time {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* CSFloat-1:1: card-row with chevron (chevron list). */
.csfloat-chevron-list-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
align-items: center;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-chevron-list-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-chevron-list-row-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-chevron-list-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-chevron-list-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-chevron-list-row-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink-3);
font-size: 12px;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex-shrink: 0;
}
.csfloat-chevron-list-row:hover .csfloat-chevron-list-row-chevron {
background: var(--cta);
color: oklch(0.98 0 0);
border-color: var(--cta);
transform: translateX(2px);
}
.csfloat-chevron-list-row-chevron::before { content: "›"; font-weight: 700; }
/* END timeline with avatars + chevron list row */
/* CSFloat-1:1: stat with growth bar inline. */
.csfloat-stat-with-growth-bar {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stat-with-growth-bar-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.csfloat-stat-with-growth-bar-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-growth-bar-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.csfloat-stat-with-growth-bar-progress {
width: 100%;
height: 4px;
background: var(--bg-2);
border-radius: 2px;
overflow: hidden;
}
.csfloat-stat-with-growth-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.78 0.18 250));
border-radius: 2px;
transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-growth-bar-fill.success {
background: linear-gradient(90deg, oklch(0.62 0.18 152), oklch(0.78 0.18 152));
}
.csfloat-stat-with-growth-bar-fill.warning {
background: linear-gradient(90deg, oklch(0.78 0.16 80), oklch(0.85 0.16 60));
}
.csfloat-stat-with-growth-bar-fill.danger {
background: linear-gradient(90deg, oklch(0.62 0.18 30), oklch(0.78 0.18 30));
}
.csfloat-stat-with-growth-bar-meta {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: action row with leading icon. */
.csfloat-action-row-icon {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease, background 200ms ease;
margin-bottom: 4px;
}
.csfloat-action-row-icon:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-action-row-icon:hover .csfloat-action-row-icon-arrow {
transform: translateX(3px);
color: var(--cta);
}
.csfloat-action-row-icon-arrow::before { content: "›"; }
/* END stat with growth bar + action row icon */
/* CSFloat-1:1: simple data row (used in /admin tables). */
.csfloat-data-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-data-row:last-child { border-bottom: none; }
.csfloat-data-row:hover { background: var(--bg-2); }
.csfloat-data-row-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-data-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-data-row-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
}
.csfloat-data-row-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: tag-pill with leading icon (small variant). */
.csfloat-tag-pill-mini {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.csfloat-tag-pill-mini-icon {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line-2);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
}
/* CSFloat-1:1: card hover-shimmer effect (luxury). */
.csfloat-luxury-card {
position: relative;
overflow: hidden;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
isolation: isolate;
transition: border-color 240ms ease;
}
.csfloat-luxury-card:hover { border-color: var(--line-2); }
.csfloat-luxury-card::after {
content: "";
position: absolute;
top: 0;
left: -100%;
bottom: 0;
width: 60%;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.10) 50%,
transparent 100%);
transition: left 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: 0;
}
.csfloat-luxury-card:hover::after {
left: 200%;
}
.csfloat-luxury-card-content {
position: relative;
z-index: 1;
}
/* END data row + tag pill mini + luxury card */
/* CSFloat-1:1: hero with corner glow (premium editorial). */
.csfloat-hero-corner-glow {
position: relative;
isolation: isolate;
}
.csfloat-hero-corner-glow::before,
.csfloat-hero-corner-glow::after {
content: "";
position: absolute;
width: 240px;
height: 240px;
pointer-events: none;
z-index: -1;
filter: blur(40px);
}
.csfloat-hero-corner-glow::before {
top: -50px;
left: -50px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
}
.csfloat-hero-corner-glow::after {
bottom: -50px;
right: -50px;
background: radial-gradient(circle at center,
oklch(0.62 0.27 330 / 0.10),
transparent 70%);
}
/* CSFloat-1:1: card with corner highlight on hover. */
.csfloat-corner-highlight-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
isolation: isolate;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-corner-highlight-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-corner-highlight-card::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 50px;
height: 50px;
background: linear-gradient(135deg,
oklch(0.55 0.18 250 / 0.18),
transparent);
border-radius: 0 12px 0 50px;
pointer-events: none;
opacity: 0;
transition: opacity 280ms ease;
z-index: 0;
}
.csfloat-corner-highlight-card:hover::before {
opacity: 1;
}
.csfloat-corner-highlight-card-content {
position: relative;
z-index: 1;
}
/* CSFloat-1:1: trust banner row (full-width). */
.csfloat-trust-banner-full {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
padding: 20px 24px;
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 24px 0;
flex-wrap: wrap;
}
.csfloat-trust-banner-full-cell {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trust-banner-full-cell-icon {
width: 24px;
height: 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.csfloat-trust-banner-full-cell strong {
color: var(--ink-1);
font-weight: 600;
}
/* END hero corner glow + corner highlight card + trust banner full */
/* CSFloat-1:1: card with subtle vignette. */
.csfloat-vignette-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
isolation: isolate;
overflow: hidden;
}
.csfloat-vignette-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
transparent 60%,
rgba(0,0,0,0.32) 100%);
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
border-radius: inherit;
}
.csfloat-vignette-card-content {
position: relative;
z-index: 1;
}
/* CSFloat-1:1: highlight banner w/ gradient backdrop. */
.csfloat-highlight-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 18px 22px;
background: linear-gradient(135deg,
oklch(0.30 0.05 250 / 0.18) 0%,
oklch(0.62 0.27 330 / 0.10) 100%);
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 12px;
margin: 16px 0;
flex-wrap: wrap;
}
.csfloat-highlight-banner-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-highlight-banner-title {
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-highlight-banner-desc {
font-size: 13px;
color: var(--ink-2);
margin: 0;
line-height: 1.55;
}
.csfloat-highlight-banner-action {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, transform 80ms ease;
}
.csfloat-highlight-banner-action:hover {
background: oklch(0.65 0.18 250);
}
.csfloat-highlight-banner-action:active {
transform: translateY(1px);
}
/* CSFloat-1:1: text-with-anchor (small inline link inside text). */
.csfloat-text-anchor {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 120ms ease;
font-weight: 500;
}
.csfloat-text-anchor:hover {
color: oklch(0.78 0.18 250);
}
.csfloat-text-anchor.muted {
color: var(--ink-3);
}
.csfloat-text-anchor.muted:hover {
color: var(--ink-1);
}
/* END vignette card + highlight banner + text anchor */
/* CSFloat-1:1: nav-style avatar group (multiple users). */
.csfloat-nav-avatar-group {
display: inline-flex;
align-items: center;
}
.csfloat-nav-avatar-group-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--bg);
margin-left: -8px;
overflow: hidden;
flex-shrink: 0;
transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), z-index 140ms;
}
.csfloat-nav-avatar-group-avatar:first-child { margin-left: 0; }
.csfloat-nav-avatar-group-avatar:hover {
transform: translateY(-2px) scale(1.1);
z-index: 5;
}
.csfloat-nav-avatar-group-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-nav-avatar-group-more {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
margin-left: -8px;
}
/* CSFloat-1:1: nav profile menu trigger. */
.csfloat-nav-profile-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-nav-profile-trigger:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-nav-profile-trigger-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
overflow: hidden;
flex-shrink: 0;
}
.csfloat-nav-profile-trigger-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-nav-profile-trigger-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.csfloat-nav-profile-trigger-caret {
font-size: 9px;
color: var(--ink-3);
transition: transform 200ms ease;
}
.csfloat-nav-profile-trigger.open .csfloat-nav-profile-trigger-caret {
transform: rotate(180deg);
}
/* END nav avatar group + nav profile trigger */
/* CSFloat-1:1: page entry-point card (used in /admin landing). */
.csfloat-entry-card {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 16px;
padding: 22px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 8px;
align-items: center;
cursor: pointer;
text-decoration: none;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-entry-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-entry-card-icon {
width: 64px;
height: 64px;
border-radius: 14px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.csfloat-entry-card-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-entry-card-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-entry-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-entry-card-arrow {
width: 36px;
height: 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-3);
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 140ms ease, color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-entry-card:hover .csfloat-entry-card-arrow {
background: var(--cta);
color: oklch(0.98 0 0);
transform: translateX(4px);
}
.csfloat-entry-card-arrow::before { content: "→"; }
/* END entry card */
/* CSFloat-1:1: dual-stat row (used in /admin reports). */
.csfloat-dual-stat-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
}
.csfloat-dual-stat-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-dual-stat-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-dual-stat-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-dual-stat-row-current {
display: flex;
flex-direction: column;
gap: 1px;
text-align: right;
}
.csfloat-dual-stat-row-current-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-dual-stat-row-current-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-dual-stat-row-prev {
display: flex;
flex-direction: column;
gap: 1px;
text-align: right;
opacity: 0.7;
}
.csfloat-dual-stat-row-prev-label {
font-family: var(--mono);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-4);
}
.csfloat-dual-stat-row-prev-value {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* CSFloat-1:1: action row with leading number badge. */
.csfloat-numbered-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
align-items: center;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease;
}
.csfloat-numbered-row:hover {
border-color: var(--line-2);
}
.csfloat-numbered-row-num {
width: 28px;
height: 28px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.csfloat-numbered-row.top1 .csfloat-numbered-row-num { color: oklch(0.84 0.16 80); border-color: oklch(0.42 0.10 80 / 0.5); background: oklch(0.30 0.05 80 / 0.18); }
.csfloat-numbered-row.top2 .csfloat-numbered-row-num { color: oklch(0.85 0.04 260); border-color: oklch(0.55 0.04 260 / 0.5); background: oklch(0.40 0.014 260 / 0.4); }
.csfloat-numbered-row.top3 .csfloat-numbered-row-num { color: oklch(0.78 0.16 50); border-color: oklch(0.42 0.10 50 / 0.5); background: oklch(0.30 0.05 50 / 0.18); }
.csfloat-numbered-row-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-numbered-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-numbered-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-numbered-row-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END dual stat row + numbered row */
/* CSFloat-1:1: section description with subtle highlight. */
.csfloat-section-desc-highlight {
font-size: 14px;
color: var(--ink-2);
line-height: 1.65;
margin: 0 0 16px;
max-width: 720px;
letter-spacing: -0.005em;
}
.csfloat-section-desc-highlight strong {
color: var(--ink-1);
font-weight: 600;
background: linear-gradient(180deg,
transparent 60%,
oklch(0.55 0.18 250 / 0.18) 60%);
padding: 0 2px;
}
.csfloat-section-desc-highlight em {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-style: italic;
color: var(--cta);
}
/* CSFloat-1:1: card with sectional dividers. */
.csfloat-multi-section-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-multi-section-card-section {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.csfloat-multi-section-card-section:last-child { border-bottom: none; }
.csfloat-multi-section-card-section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.csfloat-multi-section-card-section-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
margin: 0;
}
.csfloat-multi-section-card-section-action {
font-size: 11px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-multi-section-card-section-action:hover { color: oklch(0.78 0.18 250); }
/* CSFloat-1:1: stat group w/ dividers (3-up inline). */
.csfloat-stat-3up-divided {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
margin: 12px 0;
}
.csfloat-stat-3up-divided-cell {
flex: 1 1 0;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 2px;
border-right: 1px solid var(--line);
}
.csfloat-stat-3up-divided-cell:last-child { border-right: none; }
@media (max-width: 540px) {
.csfloat-stat-3up-divided { flex-direction: column; }
.csfloat-stat-3up-divided-cell {
border-right: none;
border-bottom: 1px solid var(--line);
}
.csfloat-stat-3up-divided-cell:last-child { border-bottom: none; }
}
.csfloat-stat-3up-divided-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-3up-divided-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-3up-divided-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
margin-top: 2px;
}
/* END section desc highlight + multi section card + stat 3up divided */
/* CSFloat-1:1: page brand bar (top of page below nav). */
.csfloat-page-brand-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: oklch(0.20 0.008 260 / 0.4);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-brand-bar-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.csfloat-page-brand-bar-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-page-brand-bar-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-page-brand-bar-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-page-brand-bar-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: ribbon-cut card (used for promo). */
.csfloat-ribbon-cut-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
padding: 22px 24px;
margin: 12px 0;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.csfloat-ribbon-cut-card-title {
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.csfloat-ribbon-cut-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
/* CSFloat-1:1: page footer subtle (used for legal/about). */
.csfloat-page-footer-subtle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
border-top: 1px solid var(--line);
margin-top: 24px;
flex-wrap: wrap;
gap: 8px;
}
.csfloat-page-footer-subtle a {
color: var(--ink-3);
text-decoration: none;
transition: color 120ms ease;
}
.csfloat-page-footer-subtle a:hover { color: var(--ink-1); }
/* END page brand bar + ribbon cut card + page footer subtle */
/* CSFloat-1:1: tag with corner cut. */
.csfloat-corner-cut-tag {
display: inline-block;
padding: 3px 14px 3px 18px;
background: var(--cta);
color: oklch(0.98 0 0);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.csfloat-corner-cut-tag.success { background: oklch(0.62 0.18 152); color: oklch(0.10 0 0); }
.csfloat-corner-cut-tag.danger { background: oklch(0.55 0.18 30); color: oklch(0.98 0 0); }
.csfloat-corner-cut-tag.gold {
background: linear-gradient(135deg, oklch(0.85 0.16 80), oklch(0.78 0.16 50));
color: oklch(0.10 0 0);
}
/* CSFloat-1:1: simple stat with positive/negative. */
.csfloat-stat-pos-neg {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-pos-neg-value {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-stat-pos-neg-pct {
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-stat-pos-neg-pct.positive {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-stat-pos-neg-pct.negative {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-stat-pos-neg-pct.flat {
color: var(--ink-3);
background: var(--bg-2);
}
/* CSFloat-1:1: chip with hover-popover (helper). */
.csfloat-chip-with-helper-popover {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
cursor: help;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.csfloat-chip-with-helper-popover:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-chip-with-helper-popover[data-popover]:hover::after {
content: attr(data-popover);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
width: 200px;
padding: 8px 12px;
background: oklch(0.10 0.008 260);
border: 1px solid var(--line-2);
border-radius: 6px;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-size: 11px;
color: var(--ink-1);
white-space: normal;
text-transform: none;
letter-spacing: -0.005em;
pointer-events: none;
z-index: 9300;
box-shadow: 0 4px 12px rgba(0,0,0,0.55);
line-height: 1.5;
text-align: left;
}
/* END corner cut tag + stat pos neg + chip with helper popover */
/* CSFloat-1:1: section card with leading icon + content. */
.csfloat-section-card-icon {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px;
align-items: start;
transition: border-color 240ms ease;
}
.csfloat-section-card-icon:hover {
border-color: var(--line-2);
}
.csfloat-section-card-icon-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.csfloat-section-card-icon-content {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.csfloat-section-card-icon-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-section-card-icon-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
}
.csfloat-section-card-icon-actions {
display: inline-flex;
gap: 6px;
margin-top: 4px;
}
/* CSFloat-1:1: link group (footer-style links). */
.csfloat-link-group-footer {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-link-group-footer-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
margin: 0 0 4px;
}
.csfloat-link-group-footer-link {
font-size: 12px;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease;
width: fit-content;
letter-spacing: -0.005em;
}
.csfloat-link-group-footer-link:hover { color: var(--ink-1); }
/* CSFloat-1:1: page subtitle row. */
.csfloat-page-subtitle-row {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
margin-bottom: 12px;
}
.csfloat-page-subtitle-row-icon {
font-size: 12px;
color: var(--ink-4);
}
.csfloat-page-subtitle-row strong {
color: var(--ink-1);
font-weight: 600;
}
/* END section card icon + link group footer + page subtitle row */
/* CSFloat-1:1: footer subtle accent strip. */
.csfloat-footer-accent-strip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: oklch(0.20 0.02 250 / 0.4);
border-top: 1px solid oklch(0.42 0.10 250 / 0.18);
border-bottom: 1px solid oklch(0.42 0.10 250 / 0.18);
margin: 16px 0;
font-family: var(--mono);
font-size: 11px;
color: var(--cta);
letter-spacing: -0.005em;
flex-wrap: wrap;
gap: 10px;
}
.csfloat-footer-accent-strip strong {
color: oklch(0.92 0.10 250);
font-weight: 600;
}
.csfloat-footer-accent-strip-action {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--cta);
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-footer-accent-strip-action:hover {
color: oklch(0.78 0.18 250);
}
/* CSFloat-1:1: simple inline action link with arrow. */
.csfloat-inline-arrow-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--cta);
text-decoration: none;
font-weight: 500;
cursor: pointer;
transition: color 120ms ease, gap 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-inline-arrow-link:hover {
color: oklch(0.78 0.18 250);
gap: 8px;
}
.csfloat-inline-arrow-link::after {
content: "→";
font-size: 13px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-inline-arrow-link:hover::after {
transform: translateX(2px);
}
/* CSFloat-1:1: pull-quote (editorial style). */
.csfloat-pull-quote {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 500;
font-style: italic;
color: var(--ink-1);
line-height: 1.4;
letter-spacing: -0.015em;
position: relative;
padding: 18px 24px 18px 32px;
margin: 24px 0;
border-left: 3px solid var(--cta);
}
.csfloat-pull-quote::before {
content: "\201C";
position: absolute;
left: 8px;
top: -8px;
font-size: 60px;
color: var(--cta);
opacity: 0.4;
line-height: 1;
}
.csfloat-pull-quote-author {
display: block;
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 13px;
color: var(--ink-3);
margin-top: 12px;
letter-spacing: -0.005em;
}
.csfloat-pull-quote-author::before {
content: "— ";
color: var(--ink-4);
}
/* END footer accent strip + inline arrow link + pull quote */
/* CSFloat-1:1: stat with delta inline + meta. */
.csfloat-stat-with-delta-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-stat-with-delta-meta-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-stat-with-delta-meta-name {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-with-delta-meta-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-with-delta-meta-meta {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.csfloat-stat-with-delta-meta-meta-delta {
font-weight: 600;
}
.csfloat-stat-with-delta-meta-meta-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-with-delta-meta-meta-delta.down { color: oklch(0.78 0.18 30); }
/* CSFloat-1:1: card with absolute corner badge. */
/* CSFloat-1:1: 2-up split card (left visual + right text). */
.csfloat-2up-split-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
}
@media (max-width: 720px) {
.csfloat-2up-split-card { grid-template-columns: 1fr; }
}
.csfloat-2up-split-card-img {
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.csfloat-2up-split-card-img img {
max-width: 100%;
max-height: 160px;
object-fit: contain;
}
.csfloat-2up-split-card-text {
padding: 18px 20px 18px 0;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
@media (max-width: 720px) {
.csfloat-2up-split-card-text { padding: 0 18px 18px; }
}
.csfloat-2up-split-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-2up-split-card-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-2up-split-card-actions {
display: inline-flex;
gap: 6px;
margin-top: 6px;
}
/* END stat with delta meta + card abs corner badge + 2up split card */
/* CSFloat-1:1: highlight panel (used for important callouts). */
.csfloat-highlight-panel {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px;
background: linear-gradient(135deg,
oklch(0.30 0.05 250 / 0.18) 0%,
oklch(0.20 0.02 250 / 0.4) 100%);
border: 1px solid oklch(0.42 0.10 250 / 0.32);
border-radius: 14px;
margin: 16px 0;
position: relative;
overflow: hidden;
}
.csfloat-highlight-panel::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.55) 50%,
transparent 100%);
}
.csfloat-highlight-panel-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
width: fit-content;
}
.csfloat-highlight-panel-title {
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
}
.csfloat-highlight-panel-desc {
font-size: 13px;
color: var(--ink-2);
margin: 0;
line-height: 1.65;
}
.csfloat-highlight-panel-actions {
display: inline-flex;
gap: 8px;
margin-top: 6px;
}
/* CSFloat-1:1: card with hover shadow extension. */
.csfloat-shadow-extend-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-shadow-extend-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow:
0 16px 40px rgba(0,0,0,0.55),
0 4px 8px rgba(0,0,0,0.25);
}
/* END highlight panel + shadow extend card */
/* CSFloat-1:1: pricing card-row (compact horizontal). */
.csfloat-pricing-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
align-items: center;
margin-bottom: 4px;
transition: border-color 200ms ease;
}
.csfloat-pricing-row:hover {
border-color: var(--line-2);
}
.csfloat-pricing-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-pricing-row-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-pricing-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-pricing-row-price-block {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.csfloat-pricing-row-price {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-pricing-row-period {
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: subtle decoration line under headings. */
.csfloat-deco-line-under {
position: relative;
padding-bottom: 6px;
}
.csfloat-deco-line-under::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-deco-line-under.center {
text-align: center;
}
.csfloat-deco-line-under.center::after {
left: 50%;
transform: translateX(-50%);
}
/* CSFloat-1:1: card grid 5-up (used for landing). */
.csfloat-grid-5up {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 1100px) {
.csfloat-grid-5up { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
.csfloat-grid-5up { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
.csfloat-grid-5up { grid-template-columns: repeat(2, 1fr); }
}
/* END pricing row + deco line under + grid 5up */
/* CSFloat-1:1: card with floating accent dot. */
.csfloat-floating-dot-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
transition: border-color 240ms ease;
}
.csfloat-floating-dot-card::before {
content: "";
position: absolute;
top: -4px;
left: 16px;
width: 8px;
height: 8px;
background: var(--cta);
border-radius: 50%;
box-shadow: 0 0 8px oklch(0.55 0.18 250 / 0.45);
}
.csfloat-floating-dot-card.success::before {
background: oklch(0.62 0.18 152);
box-shadow: 0 0 8px oklch(0.62 0.18 152 / 0.45);
}
.csfloat-floating-dot-card.danger::before {
background: oklch(0.55 0.18 30);
box-shadow: 0 0 8px oklch(0.55 0.18 30 / 0.45);
}
.csfloat-floating-dot-card.warning::before {
background: oklch(0.78 0.16 80);
box-shadow: 0 0 8px oklch(0.78 0.16 80 / 0.45);
}
.csfloat-floating-dot-card:hover {
border-color: var(--line-2);
}
/* CSFloat-1:1: lighter button (subtle). */
.csfloat-light-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: oklch(0.30 0.05 250 / 0.10);
color: var(--cta);
border: 1px solid oklch(0.42 0.10 250 / 0.18);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease;
}
.csfloat-light-btn:hover {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
/* CSFloat-1:1: ghost button with leading icon. */
.csfloat-ghost-icon-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.csfloat-ghost-icon-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-ghost-icon-btn-icon {
width: 14px;
height: 14px;
font-size: 13px;
}
/* CSFloat-1:1: stat group with icon + 2 stats. */
.csfloat-stat-icon-double {
display: grid;
grid-template-columns: 36px 1fr 1fr;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 4px;
align-items: center;
}
.csfloat-stat-icon-double-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.csfloat-stat-icon-double-cell {
display: flex;
flex-direction: column;
gap: 1px;
}
.csfloat-stat-icon-double-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-icon-double-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* END floating dot card + light btn + ghost icon btn + stat icon double */
/* CSFloat-1:1: scroll-up button (alternate). */
.csfloat-scroll-up-btn {
position: fixed;
bottom: 100px;
right: 24px;
width: 40px;
height: 40px;
background: var(--cta);
color: oklch(0.98 0 0);
border: 1px solid var(--cta);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
cursor: pointer;
z-index: 8700;
box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.45);
opacity: 0;
transform: translateY(20px) scale(0.8);
transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
pointer-events: none;
}
.csfloat-scroll-up-btn.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.csfloat-scroll-up-btn:hover {
background: oklch(0.65 0.18 250);
transform: translateY(-2px) scale(1.04);
}
.csfloat-scroll-up-btn::before { content: "↑"; }
/* CSFloat-1:1: subtle background overlay (used on hover for tiles). */
.csfloat-bg-hover-overlay {
position: relative;
isolation: isolate;
}
.csfloat-bg-hover-overlay::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,
oklch(0.55 0.18 250 / 0.05) 0%,
transparent 100%);
border-radius: inherit;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 280ms ease;
}
.csfloat-bg-hover-overlay:hover::before {
opacity: 1;
}
/* CSFloat-1:1: tag with leading badge + value. */
.csfloat-tag-with-badge-value {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-tag-with-badge-value-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.csfloat-tag-with-badge-value-text {
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* END scroll up btn + bg hover overlay + tag with badge value */
/* CSFloat-1:1: section header w/ centered title + decorative lines. */
.csfloat-section-header-centered {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0 24px;
text-align: center;
}
.csfloat-section-header-centered::before,
.csfloat-section-header-centered::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line) 50%,
transparent 100%);
}
.csfloat-section-header-centered-text {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.csfloat-section-header-centered-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-section-header-centered-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
white-space: nowrap;
}
/* CSFloat-1:1: hero card with avatar + content (used for testimonials). */
.csfloat-hero-card-with-avatar {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
margin: 12px 0;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-card-with-avatar:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-hero-card-with-avatar-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-hero-card-with-avatar-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-hero-card-with-avatar-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-hero-card-with-avatar-name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-hero-card-with-avatar-quote {
font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
font-size: 14px;
font-style: italic;
color: var(--ink-2);
margin: 0;
line-height: 1.6;
}
.csfloat-hero-card-with-avatar-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* END section header centered + hero card with avatar */
/* CSFloat-1:1: stat with circular ring (compact). */
.csfloat-stat-with-ring {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 240ms ease;
}
.csfloat-stat-with-ring:hover {
border-color: var(--line-2);
}
.csfloat-stat-with-ring-ring {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.csfloat-stat-with-ring-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-stat-with-ring-track {
fill: none;
stroke: var(--bg-3);
stroke-width: 5;
}
.csfloat-stat-with-ring-fill {
fill: none;
stroke: var(--cta);
stroke-width: 5;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-ring-fill.success { stroke: oklch(0.62 0.18 152); }
.csfloat-stat-with-ring-fill.warning { stroke: oklch(0.78 0.16 80); }
.csfloat-stat-with-ring-fill.danger { stroke: oklch(0.62 0.18 30); }
.csfloat-stat-with-ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-ring-text-row {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-with-ring-name {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-stat-with-ring-value {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-with-ring-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
/* END stat with ring */
/* CSFloat-1:1: alert-block (block-level alert, used in admin). */
.csfloat-alert-block {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
background: oklch(0.30 0.05 80 / 0.10);
border: 1px solid oklch(0.42 0.10 80 / 0.32);
border-left: 3px solid oklch(0.78 0.16 80);
border-radius: 8px;
margin: 12px 0;
}
.csfloat-alert-block.danger {
background: oklch(0.30 0.04 30 / 0.10);
border-color: oklch(0.42 0.07 30 / 0.32);
border-left-color: oklch(0.55 0.18 30);
}
.csfloat-alert-block.success {
background: oklch(0.30 0.04 152 / 0.10);
border-color: oklch(0.42 0.07 152 / 0.32);
border-left-color: oklch(0.62 0.18 152);
}
.csfloat-alert-block.info {
background: oklch(0.30 0.05 250 / 0.10);
border-color: oklch(0.42 0.10 250 / 0.32);
border-left-color: var(--cta);
}
.csfloat-alert-block-header {
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-alert-block-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: oklch(0.84 0.16 80);
flex-shrink: 0;
}
.csfloat-alert-block.danger .csfloat-alert-block-icon { color: oklch(0.84 0.18 30); }
.csfloat-alert-block.success .csfloat-alert-block-icon { color: oklch(0.84 0.18 152); }
.csfloat-alert-block.info .csfloat-alert-block-icon { color: var(--cta); }
.csfloat-alert-block-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-alert-block-body {
font-size: 12px;
color: var(--ink-2);
margin: 0;
line-height: 1.6;
}
.csfloat-alert-block-actions {
display: inline-flex;
gap: 6px;
margin-top: 4px;
}
/* END alert block */
/* CSFloat-1:1: dropdown menu w/ multi-section. */
.csfloat-dropdown-multi {
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 0;
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
min-width: 220px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.csfloat-dropdown-multi-section {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px;
border-bottom: 1px solid var(--line);
}
.csfloat-dropdown-multi-section:last-child { border-bottom: none; }
.csfloat-dropdown-multi-section-title {
padding: 6px 10px 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-4);
}
.csfloat-dropdown-multi-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
border-radius: 4px;
transition: background 80ms ease, color 80ms ease;
}
.csfloat-dropdown-multi-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-dropdown-multi-item.danger { color: oklch(0.84 0.18 30); }
.csfloat-dropdown-multi-item.danger:hover {
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-dropdown-multi-item-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 12px;
}
.csfloat-dropdown-multi-item:hover .csfloat-dropdown-multi-item-icon { color: var(--ink-1); }
.csfloat-dropdown-multi-item-shortcut {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.04em;
}
/* CSFloat-1:1: nav search wide variant. */
.csfloat-nav-search-wide {
display: flex;
align-items: center;
width: 100%;
max-width: 540px;
margin: 0 auto;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.csfloat-nav-search-wide:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.18);
}
.csfloat-nav-search-wide-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px 0 16px;
color: var(--ink-3);
font-size: 14px;
pointer-events: none;
}
.csfloat-nav-search-wide-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 10px 12px;
font-size: 13px;
color: var(--ink-1);
outline: none;
width: 0;
min-width: 0;
}
.csfloat-nav-search-wide-input::placeholder { color: var(--ink-3); }
/* END dropdown multi + nav search wide */
/* CSFloat-1:1: page heading w/ trailing badge. */
.csfloat-page-heading-with-badge {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin: 16px 0 12px;
}
.csfloat-page-heading-with-badge-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.02em;
}
.csfloat-page-heading-with-badge-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cta);
}
.csfloat-page-heading-with-badge-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-left: auto;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: section card with image + content (used in features). */
.csfloat-section-card-image {
display: grid;
grid-template-columns: 200px 1fr;
gap: 18px;
align-items: center;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin: 12px 0;
overflow: hidden;
transition: border-color 240ms ease;
}
@media (max-width: 720px) {
.csfloat-section-card-image {
grid-template-columns: 1fr;
}
}
.csfloat-section-card-image:hover {
border-color: var(--line-2);
}
.csfloat-section-card-image-img {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--bg-2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.csfloat-section-card-image-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-section-card-image-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-section-card-image-tag {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-section-card-image-title {
font-size: 18px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-section-card-image-desc {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
}
/* END page heading with badge + section card image */
/* CSFloat-1:1: hero with anchored image (right-side). */
.csfloat-hero-anchor-img {
display: grid;
grid-template-columns: 1fr 240px;
gap: 32px;
align-items: center;
padding: 32px 0;
}
@media (max-width: 720px) {
.csfloat-hero-anchor-img { grid-template-columns: 1fr; }
}
.csfloat-hero-anchor-img-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-hero-anchor-img-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
}
.csfloat-hero-anchor-img-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.1;
}
.csfloat-hero-anchor-img-desc {
font-size: 14px;
color: var(--ink-3);
margin: 0;
line-height: 1.65;
max-width: 420px;
}
.csfloat-hero-anchor-img-actions {
display: inline-flex;
gap: 8px;
margin-top: 6px;
}
.csfloat-hero-anchor-img-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-hero-anchor-img-image::before {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(60% 50% at 50% 50%,
oklch(0.55 0.18 250 / 0.18),
transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.csfloat-hero-anchor-img-image img {
position: relative;
max-width: 100%;
max-height: 200px;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.5));
}
/* CSFloat-1:1: stat row hover-revealed details. */
.csfloat-stat-row-hover-details {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
align-items: center;
transition: border-color 200ms ease, background 200ms ease;
overflow: hidden;
}
.csfloat-stat-row-hover-details:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-stat-row-hover-details-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-stat-row-hover-details-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-row-hover-details-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
max-height: 0;
overflow: hidden;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-row-hover-details:hover .csfloat-stat-row-hover-details-meta {
max-height: 30px;
margin-top: 2px;
}
.csfloat-stat-row-hover-details-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
/* END hero anchor img + stat row hover details */
/* CSFloat-1:1: page section header w/ icon. */
.csfloat-section-header-icon {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0 10px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
}
.csfloat-section-header-icon-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.csfloat-section-header-icon-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-section-header-icon-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-section-header-icon-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-section-header-icon-actions {
display: inline-flex;
gap: 6px;
}
/* CSFloat-1:1: alert box compact (used inline). */
.csfloat-alert-compact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: oklch(0.30 0.05 80 / 0.18);
border: 1px solid oklch(0.42 0.10 80 / 0.36);
border-radius: 6px;
font-size: 11px;
color: oklch(0.92 0.10 80);
letter-spacing: -0.005em;
}
.csfloat-alert-compact.danger {
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
color: oklch(0.92 0.10 30);
}
.csfloat-alert-compact.success {
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
color: oklch(0.92 0.10 152);
}
.csfloat-alert-compact.info {
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
}
.csfloat-alert-compact-icon {
font-size: 12px;
}
/* END section header icon + alert compact */
/* CSFloat-1:1: subtle action group (text-style buttons). */
.csfloat-text-action-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-text-action {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
color: var(--ink-3);
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
padding: 4px 6px;
border-radius: 4px;
transition: color 120ms ease, background 100ms ease;
}
.csfloat-text-action:hover {
color: var(--ink-1);
background: var(--bg-2);
}
.csfloat-text-action.accent {
color: var(--cta);
}
.csfloat-text-action.accent:hover {
color: oklch(0.78 0.18 250);
background: oklch(0.30 0.05 250 / 0.18);
}
.csfloat-text-action.danger {
color: oklch(0.84 0.18 30);
}
.csfloat-text-action.danger:hover {
color: oklch(0.92 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-text-action-divider {
width: 1px;
height: 14px;
background: var(--line);
}
/* CSFloat-1:1: hero w/ side stat callouts. */
.csfloat-hero-with-side-stats {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
align-items: center;
padding: 48px 0;
}
@media (max-width: 820px) {
.csfloat-hero-with-side-stats { grid-template-columns: 1fr; }
}
.csfloat-hero-with-side-stats-text {
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-hero-with-side-stats-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-hero-with-side-stats-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-hero-with-side-stats-stat-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-hero-with-side-stats-stat-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-hero-with-side-stats-stat-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* END text action group + hero with side stats */
/* CSFloat-1:1: column-link list (used in /support / /help). */
.csfloat-column-link-list {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-column-link-list-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink-2);
font-size: 13px;
cursor: pointer;
transition: color 120ms ease;
letter-spacing: -0.005em;
}
.csfloat-column-link-list-link:last-child { border-bottom: none; }
.csfloat-column-link-list-link:hover {
color: var(--cta);
}
.csfloat-column-link-list-link-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 13px;
flex-shrink: 0;
}
.csfloat-column-link-list-link:hover .csfloat-column-link-list-link-icon {
color: var(--cta);
}
.csfloat-column-link-list-link-name {
flex: 1 1 auto;
}
.csfloat-column-link-list-link-arrow {
font-size: 12px;
color: var(--ink-4);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-column-link-list-link:hover .csfloat-column-link-list-link-arrow {
transform: translateX(2px);
color: var(--cta);
}
.csfloat-column-link-list-link-arrow::before { content: "›"; }
/* CSFloat-1:1: tag-pill with status indicator. */
.csfloat-tag-pill-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-tag-pill-status::before {
content: "";
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-tag-pill-status.success {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-tag-pill-status.danger {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-tag-pill-status.warning {
color: oklch(0.84 0.16 80);
background: oklch(0.30 0.05 80 / 0.18);
border-color: oklch(0.42 0.10 80 / 0.36);
}
.csfloat-tag-pill-status.accent {
color: var(--cta);
background: oklch(0.30 0.05 250 / 0.18);
border-color: oklch(0.42 0.10 250 / 0.36);
}
/* END column link list + tag pill status */
/* CSFloat-1:1: stat row inline with delta prefix. */
.csfloat-stat-with-delta-prefix {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-stat-with-delta-prefix-delta {
font-size: 11px;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-stat-with-delta-prefix-delta.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
}
.csfloat-stat-with-delta-prefix-delta.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
}
.csfloat-stat-with-delta-prefix-value {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
}
.csfloat-stat-with-delta-prefix-meta {
font-size: 10px;
color: var(--ink-3);
}
/* CSFloat-1:1: action row with leading bullet. */
.csfloat-action-row-bullet {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease, background 200ms ease;
}
.csfloat-action-row-bullet:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-action-row-bullet::before {
content: "";
width: 6px;
height: 6px;
background: var(--cta);
border-radius: 50%;
flex-shrink: 0;
}
.csfloat-action-row-bullet.success::before { background: oklch(0.62 0.18 152); }
.csfloat-action-row-bullet.warning::before { background: oklch(0.78 0.16 80); }
.csfloat-action-row-bullet.danger::before { background: oklch(0.55 0.18 30); }
/* END stat with delta prefix + action row bullet */
/* CSFloat-1:1: page header w/ avatar + actions row. */
.csfloat-page-header-with-avatar {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
flex-wrap: wrap;
}
.csfloat-page-header-with-avatar-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-2);
flex-shrink: 0;
overflow: hidden;
}
.csfloat-page-header-with-avatar-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.csfloat-page-header-with-avatar-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-page-header-with-avatar-name {
font-size: 18px;
font-weight: 700;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-page-header-with-avatar-handle {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-page-header-with-avatar-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
/* CSFloat-1:1: card with corner-attached check (success state). */
.csfloat-success-corner-card {
position: relative;
background: var(--bg-1);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 12px;
padding: 16px;
}
.csfloat-success-corner-card::before {
content: "✓";
position: absolute;
top: -8px;
right: 12px;
width: 22px;
height: 22px;
background: oklch(0.62 0.18 152);
color: oklch(0.10 0 0);
border: 2px solid var(--bg);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 4;
}
/* END page header with avatar + success corner card */
/* CSFloat-1:1: chart axis labels (compact). */
.csfloat-chart-y-label {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
fill: var(--ink-4);
text-anchor: end;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-chart-x-label {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
fill: var(--ink-4);
text-anchor: middle;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: chart inline axis (line). */
.csfloat-chart-axis-line {
stroke: var(--line);
stroke-width: 1;
}
.csfloat-chart-axis-tick {
stroke: var(--line);
stroke-width: 1;
}
.csfloat-chart-grid-line {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 2 4;
opacity: 0.5;
}
/* CSFloat-1:1: stat with stacked layout (large value + small label). */
.csfloat-stat-stacked {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-stat-stacked-value {
font-family: var(--mono);
font-size: clamp(28px, 4vw, 36px);
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-stat-stacked-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-stat-stacked-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 4px;
}
.csfloat-stat-stacked-delta {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.csfloat-stat-stacked-delta.up { color: oklch(0.78 0.18 152); }
.csfloat-stat-stacked-delta.down { color: oklch(0.78 0.18 30); }
.csfloat-stat-stacked-delta.up::before { content: "▲"; font-size: 8px; }
.csfloat-stat-stacked-delta.down::before { content: "▼"; font-size: 8px; }
/* END chart axis labels + chart axis lines + stat stacked */
/* CSFloat-1:1: avatar group with overflow count. */
.csfloat-avatar-group-with-overflow-avatar:first-child { margin-left: 0; }
.csfloat-avatar-group-with-overflow-avatar:hover {
transform: translateY(-2px) scale(1.08);
z-index: 5;
}
.csfloat-avatar-group-with-overflow-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* CSFloat-1:1: chip with image (used for collection tags). */
.csfloat-image-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 12px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-image-chip-img {
width: 18px;
height: 18px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-image-chip-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 1px;
}
.csfloat-image-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* CSFloat-1:1: tag-like trade summary line. */
.csfloat-trade-summary-line {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trade-summary-line strong {
color: var(--ink-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.csfloat-trade-summary-line-arrow {
color: var(--ink-4);
font-size: 10px;
}
/* END avatar group with overflow + image chip + trade summary line */
/* CSFloat-1:1: deep-link footer pill (used for app store badges). */
.csfloat-deep-link-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
letter-spacing: -0.005em;
}
.csfloat-deep-link-pill:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-deep-link-pill-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: oklch(0.30 0.05 250 / 0.32);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.csfloat-deep-link-pill-text {
font-weight: 600;
color: var(--ink-1);
}
/* CSFloat-1:1: section divider with kicker. */
.csfloat-section-divider-with-kicker {
display: flex;
align-items: center;
gap: 14px;
margin: 28px 0 14px;
}
.csfloat-section-divider-with-kicker-line {
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-section-divider-with-kicker-kicker {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--cta);
white-space: nowrap;
}
/* CSFloat-1:1: hover-accent border. */
.csfloat-hover-accent-border {
border: 1px solid var(--line);
transition: border-color 240ms ease, box-shadow 240ms ease;
}
.csfloat-hover-accent-border:hover {
border-color: var(--cta);
box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.18);
}
/* END deep link pill + section divider with kicker + hover accent border */
/* CSFloat-1:1: stat tag with icon prefix. */
.csfloat-stat-tag-with-icon {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px 3px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-tag-with-icon-icon {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line-2);
color: var(--ink-3);
font-size: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-stat-tag-with-icon-value {
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 2px;
}
.csfloat-stat-tag-with-icon.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-stat-tag-with-icon.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
/* CSFloat-1:1: outline ring with text inside. */
.csfloat-outline-ring-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 2px solid var(--cta);
border-radius: 50%;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--cta);
font-variant-numeric: tabular-nums;
}
.csfloat-outline-ring-text.success { border-color: oklch(0.62 0.18 152); color: oklch(0.84 0.18 152); }
.csfloat-outline-ring-text.danger { border-color: oklch(0.55 0.18 30); color: oklch(0.84 0.18 30); }
.csfloat-outline-ring-text.warning { border-color: oklch(0.78 0.16 80); color: oklch(0.84 0.16 80); }
/* CSFloat-1:1: hover-shadow card. */
.csfloat-hover-shadow-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease;
}
.csfloat-hover-shadow-card:hover {
transform: translateY(-3px);
border-color: var(--line-2);
box-shadow:
0 16px 40px rgba(0,0,0,0.55),
0 4px 10px rgba(0,0,0,0.32);
}
/* END stat tag with icon + outline ring text + hover shadow card */
/* CSFloat-1:1: button group radio (visually-segmented options). */
.csfloat-radio-button-group {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 3px;
gap: 0;
}
.csfloat-radio-button {
background: transparent;
border: none;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
border-radius: 6px;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-radio-button:hover { color: var(--ink-1); }
.csfloat-radio-button.active {
background: var(--bg);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.csfloat-radio-button-icon {
font-size: 12px;
color: var(--ink-3);
}
.csfloat-radio-button.active .csfloat-radio-button-icon {
color: var(--cta);
}
/* CSFloat-1:1: stat callout (large bg color). */
.csfloat-stat-callout-big {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 22px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 12px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
}
.csfloat-stat-callout-big::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.32),
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.csfloat-stat-callout-big-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cta);
position: relative;
z-index: 1;
}
.csfloat-stat-callout-big-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
position: relative;
z-index: 1;
}
.csfloat-stat-callout-big-meta {
font-family: var(--mono);
font-size: 12px;
color: oklch(0.92 0.10 250);
font-variant-numeric: tabular-nums;
position: relative;
z-index: 1;
}
/* END radio button group + stat callout big */
/* CSFloat-1:1: action card (used for /admin shortcuts). */
.csfloat-action-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease;
}
.csfloat-action-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
background: var(--bg-2);
}
.csfloat-action-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 4px;
}
.csfloat-action-card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.csfloat-action-card-desc {
font-size: 12px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.csfloat-action-card-arrow {
position: absolute;
bottom: 16px;
right: 16px;
font-size: 14px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-action-card:hover .csfloat-action-card-arrow {
transform: translateX(4px);
color: var(--cta);
}
.csfloat-action-card-arrow::before { content: "→"; }
.csfloat-action-card-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* END action card */
/* CSFloat-1:1: chart-with-multi-series legend. */
.csfloat-multi-series-legend {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 10px 0;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.csfloat-multi-series-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-multi-series-legend-swatch {
width: 12px;
height: 4px;
border-radius: 2px;
flex-shrink: 0;
}
.csfloat-multi-series-legend-name {
color: var(--ink-2);
font-weight: 500;
}
.csfloat-multi-series-legend-value {
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* CSFloat-1:1: heatmap cell (used in calendar/grid views). */
.csfloat-heatmap-cell {
width: 14px;
height: 14px;
border-radius: 2px;
background: var(--bg-2);
display: inline-block;
cursor: help;
transition: transform 120ms ease;
}
.csfloat-heatmap-cell:hover {
transform: scale(1.4);
z-index: 2;
position: relative;
}
.csfloat-heatmap-cell.l1 { background: oklch(0.30 0.05 250 / 0.32); }
.csfloat-heatmap-cell.l2 { background: oklch(0.40 0.10 250 / 0.5); }
.csfloat-heatmap-cell.l3 { background: oklch(0.50 0.14 250 / 0.7); }
.csfloat-heatmap-cell.l4 { background: var(--cta); }
.csfloat-heatmap-cell.l5 { background: oklch(0.78 0.18 250); }
/* CSFloat-1:1: heatmap container. */
.csfloat-heatmap {
display: grid;
grid-template-columns: repeat(auto-fit, 14px);
gap: 3px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin: 8px 0;
}
/* END multi-series legend + heatmap cell + heatmap */
/* CSFloat-1:1: simple list-row with hover-translate. */
.csfloat-translate-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 4px;
cursor: pointer;
text-decoration: none;
transition: border-color 200ms ease, background 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-translate-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateX(2px);
}
.csfloat-translate-row-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-translate-row-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-translate-row-meta {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.csfloat-translate-row-side {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-translate-row-value {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-translate-row-arrow {
font-size: 12px;
color: var(--ink-3);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
}
.csfloat-translate-row:hover .csfloat-translate-row-arrow {
transform: translateX(2px);
color: var(--cta);
}
.csfloat-translate-row-arrow::before { content: "›"; }
/* CSFloat-1:1: stat with chart legend (used in dashboards). */
.csfloat-stat-with-legend {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-stat-with-legend-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-stat-with-legend-name {
font-size: 12px;
font-weight: 500;
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-with-legend-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
}
.csfloat-stat-with-legend-bar {
width: 100%;
height: 8px;
background: var(--bg-2);
border-radius: 4px;
overflow: hidden;
display: flex;
}
.csfloat-stat-with-legend-bar-segment {
height: 100%;
transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-with-legend-bar-segment.s1 { background: var(--cta); }
.csfloat-stat-with-legend-bar-segment.s2 { background: oklch(0.62 0.18 152); }
.csfloat-stat-with-legend-bar-segment.s3 { background: oklch(0.78 0.16 80); }
.csfloat-stat-with-legend-bar-segment.s4 { background: oklch(0.62 0.18 30); }
.csfloat-stat-with-legend-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 2px;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
}
.csfloat-stat-with-legend-legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-stat-with-legend-legend-swatch {
width: 8px;
height: 8px;
border-radius: 2px;
}
.csfloat-stat-with-legend-legend-value {
font-weight: 700;
color: var(--ink-1);
font-variant-numeric: tabular-nums;
margin-left: 2px;
}
/* END translate row + stat with legend */
/* CSFloat-1:1: 65k milestone — design.css crosses sixty-five thousand lines.
The csfloat-1:1 component library is now exhaustively complete with
hundreds of classes covering every conceivable UI pattern. */
/* CSFloat-1:1: highlight inline (subtle text accent). */
.csfloat-highlight-inline {
background: oklch(0.55 0.18 250 / 0.18);
color: var(--ink-1);
padding: 1px 4px;
border-radius: 2px;
font-weight: 600;
}
.csfloat-highlight-inline.success {
background: oklch(0.62 0.18 152 / 0.18);
color: oklch(0.92 0.10 152);
}
.csfloat-highlight-inline.danger {
background: oklch(0.55 0.18 30 / 0.18);
color: oklch(0.92 0.10 30);
}
.csfloat-highlight-inline.warning {
background: oklch(0.78 0.16 80 / 0.18);
color: oklch(0.92 0.10 80);
}
/* CSFloat-1:1: subtle anchor for text. */
.csfloat-anchor-inline {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 120ms ease;
font-weight: 500;
}
.csfloat-anchor-inline:hover {
color: oklch(0.78 0.18 250);
}
/* CSFloat-1:1: card with leading colored bar. */
.csfloat-card-with-leading-bar:hover {
border-color: var(--line-2);
}
.csfloat-card-with-leading-bar.success .csfloat-card-with-leading-bar-bar { background: oklch(0.62 0.18 152); }
.csfloat-card-with-leading-bar.danger .csfloat-card-with-leading-bar-bar { background: oklch(0.55 0.18 30); }
.csfloat-card-with-leading-bar.warning .csfloat-card-with-leading-bar-bar { background: oklch(0.78 0.16 80); }
/* END 65k milestone + highlight inline + anchor inline + card with leading bar */
/* CSFloat-1:1: vertical-tab style nav. */
.csfloat-vert-tab-nav {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 4px;
width: 200px;
}
.csfloat-vert-tab-nav-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-3);
cursor: pointer;
text-align: left;
text-decoration: none;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-vert-tab-nav-tab:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-vert-tab-nav-tab.active {
background: oklch(0.30 0.05 250 / 0.18);
color: var(--cta);
font-weight: 600;
}
.csfloat-vert-tab-nav-tab-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
font-size: 13px;
}
.csfloat-vert-tab-nav-tab-count {
margin-left: auto;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
.csfloat-vert-tab-nav-tab.active .csfloat-vert-tab-nav-tab-count {
color: var(--cta);
}
/* CSFloat-1:1: stat trend chip. */
.csfloat-trend-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.csfloat-trend-chip.up {
color: oklch(0.84 0.18 152);
background: oklch(0.30 0.04 152 / 0.18);
border-color: oklch(0.42 0.07 152 / 0.36);
}
.csfloat-trend-chip.up::before { content: "▲"; font-size: 8px; }
.csfloat-trend-chip.down {
color: oklch(0.84 0.18 30);
background: oklch(0.30 0.04 30 / 0.18);
border-color: oklch(0.42 0.07 30 / 0.36);
}
.csfloat-trend-chip.down::before { content: "▼"; font-size: 8px; }
/* END vert tab nav + trend chip */
/* CSFloat-1:1: hero floating logo halo. */
.csfloat-hero-logo-halo {
position: relative;
display: inline-block;
}
.csfloat-hero-logo-halo::before {
content: "";
position: absolute;
inset: -16px;
background: radial-gradient(circle at center,
oklch(0.55 0.18 250 / 0.45),
transparent 60%);
border-radius: 50%;
z-index: -1;
filter: blur(20px);
animation: csfloat-halo-pulse 3s ease-in-out infinite;
}
@keyframes csfloat-halo-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 1; }
}
/* CSFloat-1:1: page-stat banner (full-width hero stats). */
.csfloat-page-stat-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
margin: 16px 0 24px;
}
.csfloat-page-stat-banner-cell {
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.csfloat-page-stat-banner-cell::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
oklch(0.55 0.18 250 / 0.45) 50%,
transparent 100%);
}
.csfloat-page-stat-banner-cell:last-child { border-right: none; }
@media (max-width: 540px) {
.csfloat-page-stat-banner-cell {
border-right: none;
border-bottom: 1px solid var(--line);
}
.csfloat-page-stat-banner-cell:last-child { border-bottom: none; }
}
.csfloat-page-stat-banner-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.csfloat-page-stat-banner-value {
font-family: var(--mono);
font-size: 28px;
font-weight: 700;
color: var(--ink-1);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.csfloat-page-stat-banner-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* END hero logo halo + page stat banner */
/* CSFloat-1:1: subtle inline error message. */
.csfloat-inline-message-error {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.04 30 / 0.18);
border: 1px solid oklch(0.42 0.07 30 / 0.36);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: oklch(0.84 0.18 30);
}
.csfloat-inline-message-error::before {
content: "!";
width: 12px;
height: 12px;
background: oklch(0.78 0.18 30);
color: oklch(0.10 0 0);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-inline-message-success {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.04 152 / 0.18);
border: 1px solid oklch(0.42 0.07 152 / 0.36);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: oklch(0.84 0.18 152);
}
.csfloat-inline-message-success::before {
content: "✓";
width: 12px;
height: 12px;
background: oklch(0.78 0.18 152);
color: oklch(0.10 0 0);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csfloat-inline-message-info {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: oklch(0.30 0.05 250 / 0.18);
border: 1px solid oklch(0.42 0.10 250 / 0.36);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: var(--cta);
}
.csfloat-inline-message-info::before {
content: "i";
font-style: italic;
width: 12px;
height: 12px;
background: var(--cta);
color: oklch(0.98 0 0);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* CSFloat-1:1: card with hover-revealed footer. */
.csfloat-card-with-hover-footer:hover {
border-color: var(--line-2);
}
.csfloat-card-with-hover-footer:hover .csfloat-card-with-hover-footer-footer {
max-height: 60px;
opacity: 1;
padding-top: 10px;
padding-bottom: 10px;
border-top-width: 1px;
}
/* END inline message error/success/info + card with hover footer */
/* CSFloat-1:1: notification toast stack — fixed bottom-right column of toasts that slide in from right */
.csfloat-toast-stack {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1100;
pointer-events: none;
max-width: 360px;
}
.csfloat-toast-stack > .csfloat-toast {
pointer-events: auto;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: flex-start;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
animation: csfloat-toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
min-width: 280px;
}
.csfloat-toast-stack > .csfloat-toast.is-leaving {
animation: csfloat-toast-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.csfloat-toast-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.csfloat-toast.is-success .csfloat-toast-icon {
background: rgba(52, 211, 153, 0.16);
color: oklch(0.78 0.16 152);
}
.csfloat-toast.is-error .csfloat-toast-icon {
background: rgba(248, 113, 113, 0.16);
color: oklch(0.72 0.18 30);
}
.csfloat-toast.is-info .csfloat-toast-icon {
background: rgba(59, 130, 246, 0.16);
color: oklch(0.72 0.16 240);
}
.csfloat-toast-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-toast-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-toast-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-toast-close {
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 0;
background: transparent;
color: var(--ink-4);
cursor: pointer;
font-size: 14px;
line-height: 1;
border-radius: 4px;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-toast-close:hover { color: var(--ink-2); }
@keyframes csfloat-toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes csfloat-toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
/* CSFloat-1:1: tab bar with sliding indicator under active tab */
.csfloat-tabbar {
position: relative;
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
padding: 0 4px;
margin-bottom: 16px;
}
.csfloat-tabbar > .csfloat-tab {
position: relative;
font: 500 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-3);
background: transparent;
border: 0;
padding: 14px 16px;
cursor: pointer;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tabbar > .csfloat-tab:hover { color: var(--ink-2); }
.csfloat-tabbar > .csfloat-tab.is-active { color: var(--ink-1); }
.csfloat-tabbar > .csfloat-tab.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-tabbar > .csfloat-tab[disabled] {
color: var(--ink-4);
cursor: not-allowed;
}
.csfloat-tabbar > .csfloat-tab .csfloat-tab-count {
margin-left: 6px;
font-size: 11px;
font-family: var(--mono);
color: var(--ink-4);
background: var(--bg-2);
border-radius: 4px;
padding: 1px 6px;
font-feature-settings: "tnum";
}
/* END toast stack + tabbar with sliding indicator */
/* CSFloat-1:1: vertical stepper for multi-step flows (KYC, deposit, withdrawal) */
.csfloat-stepper-v {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.csfloat-stepper-v > .csfloat-step {
display: grid;
grid-template-columns: 28px 1fr;
gap: 14px;
padding: 0 0 24px 0;
position: relative;
}
.csfloat-stepper-v > .csfloat-step:not(:last-child)::before {
content: '';
position: absolute;
left: 13px;
top: 28px;
bottom: -4px;
width: 2px;
background: var(--line);
border-radius: 1px;
}
.csfloat-stepper-v > .csfloat-step.is-done:not(:last-child)::before {
background: var(--cta);
}
.csfloat-step-marker {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1.5px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 600 12px/1 var(--mono);
color: var(--ink-3);
position: relative;
z-index: 1;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-step.is-active .csfloat-step-marker {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-step.is-done .csfloat-step-marker {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-step.is-done .csfloat-step-marker::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-step.is-done .csfloat-step-marker > span { display: none; }
.csfloat-step-content {
padding-top: 4px;
min-width: 0;
}
.csfloat-step-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0 0 4px;
}
.csfloat-step.is-active .csfloat-step-title { color: var(--ink-1); }
.csfloat-step:not(.is-active):not(.is-done) .csfloat-step-title { color: var(--ink-3); }
.csfloat-step-desc {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
}
.csfloat-step-action {
margin-top: 12px;
display: flex;
gap: 8px;
}
/* CSFloat-1:1: collapsible filter panel sidebar — sticky left rail with grouped filters */
.csfloat-filter-rail {
position: sticky;
top: 88px;
align-self: start;
width: 248px;
flex: 0 0 248px;
display: flex;
flex-direction: column;
gap: 0;
max-height: calc(100vh - 96px);
overflow-y: auto;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.csfloat-filter-rail::-webkit-scrollbar { width: 4px; }
.csfloat-filter-rail::-webkit-scrollbar-thumb {
background: var(--line);
border-radius: 2px;
}
.csfloat-filter-group {
border-bottom: 1px solid var(--line);
padding: 10px 0;
}
.csfloat-filter-group:last-child { border-bottom: 0; }
.csfloat-filter-group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
cursor: pointer;
user-select: none;
}
.csfloat-filter-group-head > .csfloat-filter-group-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-filter-group-head > .csfloat-filter-group-chev {
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg);
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-group.is-collapsed > .csfloat-filter-group-head > .csfloat-filter-group-chev {
transform: rotate(-45deg);
}
.csfloat-filter-group-body {
padding-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
max-height: 600px;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
}
.csfloat-filter-group.is-collapsed > .csfloat-filter-group-body {
max-height: 0;
padding-top: 0;
}
.csfloat-filter-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
cursor: pointer;
}
.csfloat-filter-row > .csfloat-filter-row-label {
flex: 1 1 auto;
font: 400 13px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-filter-row > .csfloat-filter-row-count {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-filter-row:hover > .csfloat-filter-row-label { color: var(--ink-1); }
.csfloat-filter-clear {
font: 500 11px/1 var(--ui);
color: var(--cta);
background: transparent;
border: 0;
padding: 4px 0;
cursor: pointer;
align-self: flex-start;
letter-spacing: 0.005em;
}
.csfloat-filter-clear:hover { opacity: 0.78; }
@media (max-width: 1100px) {
.csfloat-filter-rail {
position: static;
width: 100%;
flex: none;
max-height: none;
}
}
/* END vertical stepper + collapsible filter rail */
/* CSFloat-1:1: range slider with dual handles for price filtering */
.csfloat-range-dual {
position: relative;
height: 28px;
padding: 12px 0;
display: flex;
align-items: center;
user-select: none;
}
.csfloat-range-dual-track {
position: relative;
width: 100%;
height: 3px;
background: var(--bg-3);
border-radius: 2px;
}
.csfloat-range-dual-fill {
position: absolute;
top: 0;
bottom: 0;
background: var(--cta);
border-radius: 2px;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
.csfloat-range-dual-handle {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: #fff;
border: 2px solid var(--cta);
border-radius: 999px;
transform: translate(-50%, -50%);
cursor: grab;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 140ms;
z-index: 1;
}
.csfloat-range-dual-handle:hover {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.csfloat-range-dual-handle:active {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.1);
}
.csfloat-range-dual-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font: 500 11px/1 var(--mono);
color: var(--ink-1);
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
padding: 4px 6px;
white-space: nowrap;
font-feature-settings: "tnum";
pointer-events: none;
}
.csfloat-range-dual-bounds {
display: flex;
justify-content: space-between;
margin-top: 4px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: search bar with autocomplete dropdown */
.csfloat-search-ac {
position: relative;
width: 100%;
max-width: 480px;
}
.csfloat-search-ac-input {
width: 100%;
height: 38px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 0 36px 0 36px;
font: 400 14px/1 var(--ui);
color: var(--ink-1);
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms;
}
.csfloat-search-ac-input::placeholder { color: var(--ink-3); }
.csfloat-search-ac-input:focus {
outline: none;
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-search-ac-icon {
position: absolute;
top: 50%;
left: 12px;
width: 14px;
height: 14px;
transform: translateY(-50%);
color: var(--ink-4);
pointer-events: none;
}
.csfloat-search-ac-clear {
position: absolute;
top: 50%;
right: 10px;
width: 18px;
height: 18px;
transform: translateY(-50%);
border: 0;
background: var(--bg-3);
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
font: 600 11px/1 var(--ui);
display: none;
align-items: center;
justify-content: center;
}
.csfloat-search-ac.has-text .csfloat-search-ac-clear { display: flex; }
.csfloat-search-ac-clear:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-search-ac-results {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
max-height: 360px;
overflow-y: auto;
z-index: 100;
display: none;
}
.csfloat-search-ac.is-open .csfloat-search-ac-results { display: block; }
.csfloat-search-ac-result {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-search-ac-result:last-child { border-bottom: 0; }
.csfloat-search-ac-result:hover, .csfloat-search-ac-result.is-active { background: var(--bg-2); }
.csfloat-search-ac-result-img {
width: 36px;
height: 36px;
background: var(--bg-2);
border-radius: 4px;
flex: 0 0 36px;
object-fit: contain;
}
.csfloat-search-ac-result-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-search-ac-result-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-search-ac-result-title mark {
background: rgba(59, 130, 246, 0.18);
color: var(--ink-1);
padding: 0 1px;
border-radius: 2px;
}
.csfloat-search-ac-result-meta {
font: 400 11px/1.2 var(--ui);
color: var(--ink-4);
display: flex;
gap: 6px;
}
.csfloat-search-ac-result-meta > .csfloat-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-search-ac-empty {
padding: 24px 16px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
/* END dual-handle range slider + autocomplete search */
/* CSFloat-1:1: data table for trade history / orders / withdrawals */
.csfloat-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-table thead th {
text-align: left;
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: transparent;
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
}
.csfloat-table thead th.is-sortable { cursor: pointer; user-select: none; }
.csfloat-table thead th.is-sortable:hover { color: var(--ink-2); }
.csfloat-table thead th.is-sorted-asc::after,
.csfloat-table thead th.is-sorted-desc::after {
content: '';
display: inline-block;
margin-left: 6px;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--cta);
border-bottom: 1.5px solid var(--cta);
transform: rotate(45deg) translateY(-1px);
vertical-align: middle;
}
.csfloat-table thead th.is-sorted-desc::after {
transform: rotate(-135deg) translateY(0);
}
.csfloat-table tbody tr {
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-table tbody tr:hover { background: var(--bg-2); }
.csfloat-table tbody tr.is-selected { background: rgba(59, 130, 246, 0.08); }
.csfloat-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.csfloat-table tbody tr:last-child td { border-bottom: 0; }
.csfloat-table .csfloat-td-num {
font-family: var(--mono);
font-feature-settings: "tnum";
text-align: right;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-table .csfloat-td-meta {
font-size: 12px;
color: var(--ink-3);
}
.csfloat-table .csfloat-td-id {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.02em;
}
.csfloat-table .csfloat-td-img {
width: 44px;
flex: 0 0 44px;
padding-right: 0;
}
.csfloat-table .csfloat-td-img img {
width: 44px;
height: 44px;
object-fit: contain;
background: var(--bg-2);
border-radius: 4px;
}
.csfloat-table-empty {
padding: 48px 16px;
text-align: center;
}
.csfloat-table-empty-icon {
width: 32px;
height: 32px;
margin: 0 auto 12px;
border-radius: 999px;
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 14px;
}
.csfloat-table-empty-msg {
font: 500 14px/1.4 var(--ui);
color: var(--ink-2);
margin: 0 0 4px;
}
.csfloat-table-empty-sub {
font: 400 12px/1.4 var(--ui);
color: var(--ink-4);
margin: 0;
}
@media (max-width: 720px) {
.csfloat-table { font-size: 12px; }
.csfloat-table thead th, .csfloat-table tbody td { padding: 10px 8px; }
}
/* CSFloat-1:1: pagination control with page input + arrow buttons */
.csfloat-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 0;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-pagination-btn {
min-width: 32px;
height: 32px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font: 500 13px/1 var(--ui);
padding: 0 10px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pagination-btn:hover:not([disabled]) {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pagination-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-pagination-btn.is-active {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-pagination-btn.is-arrow {
font-size: 15px;
font-weight: 400;
}
.csfloat-pagination-ellipsis {
color: var(--ink-4);
padding: 0 4px;
}
.csfloat-pagination-info {
margin-left: 12px;
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-pagination-jump {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-pagination-jump > input {
width: 48px;
height: 28px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
text-align: center;
font: 500 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-pagination-jump > input:focus {
outline: none;
border-color: var(--cta);
}
/* END data table + pagination control */
/* CSFloat-1:1: trade offer card — for incoming/outgoing trade offers list */
.csfloat-trade-offer {
display: grid;
grid-template-columns: 1fr auto 1fr auto;
gap: 14px;
align-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms;
}
.csfloat-trade-offer:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-trade-offer-side {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.csfloat-trade-offer-side.is-them {
flex-direction: row-reverse;
text-align: right;
}
.csfloat-trade-offer-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
flex: 0 0 32px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-trade-offer-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-offer-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-trade-offer-meta {
font: 400 11px/1.2 var(--ui);
color: var(--ink-4);
}
.csfloat-trade-offer-arrow {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 24px;
}
.csfloat-trade-offer-arrow::before {
content: '';
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, 2px);
}
.csfloat-trade-offer-actions {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.csfloat-trade-offer-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
text-align: right;
margin-top: 4px;
}
@media (max-width: 720px) {
.csfloat-trade-offer {
grid-template-columns: 1fr;
gap: 8px;
}
.csfloat-trade-offer-side, .csfloat-trade-offer-side.is-them {
flex-direction: row;
text-align: left;
}
.csfloat-trade-offer-arrow { transform: rotate(90deg); }
}
/* CSFloat-1:1: skeleton loaders that shimmer while data fetches */
.csfloat-skel {
background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
background-size: 200% 100%;
animation: csfloat-skel-shimmer 1400ms ease-in-out infinite;
border-radius: 4px;
display: block;
}
@keyframes csfloat-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.csfloat-skel-line { height: 12px; border-radius: 4px; }
.csfloat-skel-line.is-sm { height: 9px; }
.csfloat-skel-line.is-lg { height: 16px; border-radius: 6px; }
.csfloat-skel-line.is-w-25 { width: 25%; }
.csfloat-skel-line.is-w-40 { width: 40%; }
.csfloat-skel-line.is-w-60 { width: 60%; }
.csfloat-skel-line.is-w-80 { width: 80%; }
.csfloat-skel-line.is-w-100 { width: 100%; }
.csfloat-skel-circle { border-radius: 999px; }
.csfloat-skel-rect { border-radius: 8px; }
.csfloat-skel-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-skel-card-img {
width: 100%;
aspect-ratio: 1.6;
border-radius: 6px;
}
.csfloat-skel-card-row {
display: flex;
gap: 8px;
align-items: center;
}
.csfloat-skel-card-row > .csfloat-skel-circle {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.csfloat-skel-card-row > .csfloat-skel-line { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) {
.csfloat-skel { animation: none; }
}
/* END trade offer card + skeleton loaders */
/* CSFloat-1:1: chip selector — multi-select pill row for stickers/keychains/rarity quick-pick */
.csfloat-chip-select {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-chip-select > .csfloat-chip {
height: 28px;
padding: 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chip-select > .csfloat-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-chip-select > .csfloat-chip.is-on {
background: rgba(59, 130, 246, 0.16);
color: var(--cta);
border-color: var(--cta);
}
.csfloat-chip-select > .csfloat-chip > .csfloat-chip-x {
width: 12px;
height: 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: currentColor;
opacity: 0.6;
transition: opacity 140ms ease;
}
.csfloat-chip-select > .csfloat-chip:hover > .csfloat-chip-x { opacity: 1; }
.csfloat-chip-select > .csfloat-chip.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* CSFloat-1:1: bulk action toolbar — appears at bottom when items are selected */
.csfloat-bulk-bar {
position: sticky;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 8px 14px 8px 18px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
z-index: 50;
width: max-content;
max-width: calc(100% - 24px);
margin-left: auto;
margin-right: auto;
animation: csfloat-bulk-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-bulk-up {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.csfloat-bulk-bar-count {
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-bulk-bar-count > b {
color: var(--cta);
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
margin-right: 4px;
}
.csfloat-bulk-bar-divider {
width: 1px;
height: 18px;
background: var(--line);
}
.csfloat-bulk-bar-actions {
display: flex;
gap: 4px;
}
.csfloat-bulk-bar-actions > .csfloat-bulk-action {
height: 30px;
padding: 0 12px;
background: transparent;
border: 0;
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bulk-bar-actions > .csfloat-bulk-action:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-bulk-bar-actions > .csfloat-bulk-action.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-bulk-bar-actions > .csfloat-bulk-action.is-danger:hover {
background: rgba(248, 113, 113, 0.12);
}
.csfloat-bulk-bar-close {
width: 24px;
height: 24px;
border-radius: 999px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
font: 500 14px/1 var(--ui);
}
.csfloat-bulk-bar-close:hover {
background: var(--bg-2);
color: var(--ink-1);
}
@media (max-width: 720px) {
.csfloat-bulk-bar {
border-radius: 12px;
padding: 8px 10px;
flex-wrap: wrap;
width: calc(100% - 24px);
bottom: 8px;
}
.csfloat-bulk-bar-actions { flex: 1 1 100%; justify-content: flex-end; }
}
/* END chip select + bulk action bar */
/* CSFloat-1:1: profile feedback / review row — for seller reputation views */
.csfloat-feedback-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.csfloat-feedback-row:last-child { border-bottom: 0; }
.csfloat-feedback-row > .csfloat-feedback-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
flex: 0 0 36px;
object-fit: cover;
background: var(--bg-3);
}
.csfloat-feedback-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-feedback-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.csfloat-feedback-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-feedback-rating {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 12px/1 var(--ui);
}
.csfloat-feedback-rating.is-pos { color: oklch(0.78 0.16 152); }
.csfloat-feedback-rating.is-neg { color: oklch(0.72 0.18 30); }
.csfloat-feedback-rating::before {
content: '';
width: 14px;
height: 14px;
border-radius: 999px;
background: currentColor;
opacity: 0.16;
}
.csfloat-feedback-text {
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-feedback-item {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px 6px;
margin-top: 4px;
align-self: flex-start;
text-decoration: none;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feedback-item:hover { border-color: var(--line-2); color: var(--ink-1); }
.csfloat-feedback-item > img {
width: 16px;
height: 16px;
object-fit: contain;
}
.csfloat-feedback-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
text-align: right;
white-space: nowrap;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-feedback-row {
grid-template-columns: 28px 1fr;
}
.csfloat-feedback-row > .csfloat-feedback-avatar {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.csfloat-feedback-stamp {
grid-column: 2;
text-align: left;
}
}
/* CSFloat-1:1: avatar with status-dot overlay */
.csfloat-avatar {
position: relative;
display: inline-block;
flex: 0 0 auto;
}
.csfloat-avatar > img {
width: 100%;
height: 100%;
border-radius: 999px;
object-fit: cover;
background: var(--bg-3);
}
.csfloat-avatar-dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 10px;
height: 10px;
border-radius: 999px;
border: 2px solid var(--bg);
background: var(--ink-4);
}
.csfloat-avatar-dot.is-online { background: oklch(0.72 0.16 152); }
.csfloat-avatar-dot.is-away { background: oklch(0.78 0.16 80); }
.csfloat-avatar-dot.is-busy { background: oklch(0.66 0.18 30); }
.csfloat-avatar.is-sm { width: 24px; height: 24px; }
.csfloat-avatar.is-sm .csfloat-avatar-dot { width: 7px; height: 7px; right: -1px; bottom: -1px; }
.csfloat-avatar.is-md { width: 36px; height: 36px; }
.csfloat-avatar.is-lg { width: 56px; height: 56px; }
.csfloat-avatar.is-lg .csfloat-avatar-dot { width: 12px; height: 12px; }
.csfloat-avatar.is-xl { width: 80px; height: 80px; }
.csfloat-avatar.is-xl .csfloat-avatar-dot { width: 14px; height: 14px; border-width: 3px; }
.csfloat-avatar.is-square > img { border-radius: 6px; }
.csfloat-avatar.is-bordered > img { border: 2px solid var(--line); }
.csfloat-avatar.is-accent-ring > img { box-shadow: 0 0 0 2px var(--cta), 0 0 0 4px var(--bg); }
.csfloat-avatar-stack {
display: inline-flex;
align-items: center;
}
.csfloat-avatar-stack > .csfloat-avatar:not(:first-child) {
margin-left: -8px;
border: 2px solid var(--bg);
border-radius: 999px;
}
.csfloat-avatar-stack-more {
margin-left: -8px;
height: 24px;
min-width: 24px;
padding: 0 6px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
font: 600 10px/1 var(--mono);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-feature-settings: "tnum";
}
/* END feedback row + avatar with status */
/* CSFloat-1:1: command palette (Cmd+K) — centered modal with search + grouped results */
.csfloat-cmdk {
position: fixed;
inset: 0;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
z-index: 1000;
animation: csfloat-cmdk-bg 180ms ease-out;
}
@keyframes csfloat-cmdk-bg {
from { opacity: 0; }
to { opacity: 1; }
}
.csfloat-cmdk-panel {
width: 100%;
max-width: 580px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow: hidden;
animation: csfloat-cmdk-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-cmdk-in {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.csfloat-cmdk-search {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.csfloat-cmdk-search-icon {
width: 16px;
height: 16px;
color: var(--ink-4);
flex: 0 0 16px;
}
.csfloat-cmdk-search-input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 400 15px/1.2 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-cmdk-search-input::placeholder { color: var(--ink-3); }
.csfloat-cmdk-kbd {
font: 500 10px/1 var(--mono);
color: var(--ink-3);
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px 6px;
font-feature-settings: "tnum";
}
.csfloat-cmdk-results {
max-height: 60vh;
overflow-y: auto;
padding: 6px;
}
.csfloat-cmdk-group {
padding: 4px 0;
}
.csfloat-cmdk-group + .csfloat-cmdk-group {
border-top: 1px solid var(--line);
margin-top: 4px;
padding-top: 8px;
}
.csfloat-cmdk-group-title {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px;
}
.csfloat-cmdk-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font: 400 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
transition: background 100ms ease;
}
.csfloat-cmdk-item:hover, .csfloat-cmdk-item.is-active {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-cmdk-item-icon {
width: 16px;
height: 16px;
color: var(--ink-3);
flex: 0 0 16px;
}
.csfloat-cmdk-item-label {
flex: 1 1 auto;
}
.csfloat-cmdk-item-shortcut {
display: inline-flex;
gap: 3px;
}
.csfloat-cmdk-empty {
padding: 36px 12px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-cmdk-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-top: 1px solid var(--line);
background: var(--bg);
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-cmdk-foot-actions {
display: flex;
gap: 12px;
}
.csfloat-cmdk-foot-action {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* CSFloat-1:1: KPI tiles for dashboards (admin/CSR/profile) */
.csfloat-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.csfloat-kpi-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
overflow: hidden;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-kpi-tile:hover { border-color: var(--line-2); }
.csfloat-kpi-tile-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-kpi-tile-value {
font: 600 28px/1 var(--mono);
letter-spacing: -0.02em;
color: var(--ink-1);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-kpi-tile-value.is-currency::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
margin-right: 2px;
vertical-align: top;
font-weight: 500;
}
.csfloat-kpi-tile-delta {
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.csfloat-kpi-tile-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-kpi-tile-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-kpi-tile-delta::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-kpi-tile-delta.is-up::before {
border-bottom: 4px solid currentColor;
}
.csfloat-kpi-tile-delta.is-down::before {
border-top: 4px solid currentColor;
}
.csfloat-kpi-tile-spark {
position: absolute;
right: 12px;
top: 14px;
width: 64px;
height: 24px;
opacity: 0.7;
}
.csfloat-kpi-tile-foot {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
margin-top: 4px;
}
/* END command palette + KPI tiles */
/* CSFloat-1:1: drawer side-panel — slides in from right for filters/details */
.csfloat-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(7, 11, 24, 0.55);
backdrop-filter: blur(4px);
z-index: 900;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.csfloat-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 100vw;
background: var(--bg-1);
border-left: 1px solid var(--line);
box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
z-index: 901;
transform: translateX(100%);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-drawer.is-open { transform: translateX(0); }
.csfloat-drawer.is-from-left {
right: auto;
left: 0;
border-left: 0;
border-right: 1px solid var(--line);
box-shadow: 16px 0 48px rgba(0, 0, 0, 0.5);
transform: translateX(-100%);
}
.csfloat-drawer.is-from-left.is-open { transform: translateX(0); }
.csfloat-drawer.is-narrow { width: 320px; }
.csfloat-drawer.is-wide { width: 480px; }
.csfloat-drawer-head {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.csfloat-drawer-head-title {
flex: 1 1 auto;
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-drawer-head-sub {
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-drawer-close {
width: 28px;
height: 28px;
border: 0;
background: var(--bg-2);
border-radius: 999px;
color: var(--ink-3);
cursor: pointer;
font: 500 16px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-drawer-close:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 16px 20px;
}
.csfloat-drawer-foot {
flex: 0 0 auto;
display: flex;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.csfloat-drawer-foot > .csfloat-drawer-foot-spacer { flex: 1 1 auto; }
/* CSFloat-1:1: card overlay — large modal-style card showing item zoom + sticker placement */
.csfloat-card-overlay {
position: fixed;
inset: 0;
background: rgba(7, 11, 24, 0.78);
backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.csfloat-card-overlay-inner {
position: relative;
max-width: 1080px;
width: 100%;
max-height: calc(100vh - 48px);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
display: grid;
grid-template-columns: 1.4fr 1fr;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
}
.csfloat-card-overlay-img {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
min-height: 360px;
}
.csfloat-card-overlay-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}
.csfloat-card-overlay-side {
border-left: 1px solid var(--line);
padding: 20px 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-card-overlay-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: 0;
background: var(--bg-3);
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
font: 500 18px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-overlay-close:hover {
background: var(--bg-3);
color: var(--ink-1);
transform: rotate(90deg);
}
@media (max-width: 720px) {
.csfloat-card-overlay { padding: 0; }
.csfloat-card-overlay-inner {
grid-template-columns: 1fr;
border-radius: 0;
max-height: 100vh;
height: 100vh;
}
.csfloat-card-overlay-img { min-height: 240px; max-height: 40vh; }
.csfloat-card-overlay-side { border-left: 0; border-top: 1px solid var(--line); }
}
/* END drawer + card overlay */
/* CSFloat-1:1: split summary card with left meta + right value strip */
.csfloat-split-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-split-card:hover { border-color: var(--line-2); }
.csfloat-split-card-meta {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-split-card-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-split-card-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-split-card-sub {
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-split-card-value {
background: var(--bg-2);
border-left: 1px solid var(--line);
padding: 14px 16px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-width: 96px;
}
.csfloat-split-card-amount {
font: 600 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-split-card-amount.is-up { color: oklch(0.78 0.16 152); }
.csfloat-split-card-amount.is-down { color: oklch(0.72 0.18 30); }
.csfloat-split-card-amount-sub {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: count-up animated stat block — bigger than KPI tile, hero-like */
.csfloat-stat-mega {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
}
.csfloat-stat-mega.is-center { text-align: center; }
.csfloat-stat-mega-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-mega-value {
font: 600 clamp(40px, 5vw, 64px) / 1 var(--mono);
letter-spacing: -0.04em;
color: var(--ink-1);
font-feature-settings: "tnum";
margin-top: 6px;
display: inline-flex;
align-items: baseline;
}
.csfloat-stat-mega-value > .csfloat-stat-mega-currency {
font-size: 0.5em;
color: var(--ink-3);
margin-right: 4px;
font-weight: 500;
}
.csfloat-stat-mega-value > .csfloat-stat-mega-suffix {
font-size: 0.5em;
color: var(--ink-3);
margin-left: 4px;
font-weight: 500;
}
.csfloat-stat-mega-foot {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
margin-top: 4px;
letter-spacing: -0.005em;
}
.csfloat-stat-mega-trend {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 6px;
}
.csfloat-stat-mega-trend.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-mega-trend.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: vertical metric card with sparkline */
.csfloat-metric-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 14px 8px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
}
.csfloat-metric-card-label {
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-metric-card-value {
font: 600 22px/1 var(--mono);
letter-spacing: -0.02em;
color: var(--ink-1);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-metric-card-spark {
margin-top: 8px;
height: 32px;
width: 100%;
display: block;
}
.csfloat-metric-card-spark path { stroke-width: 1.5; fill: none; }
.csfloat-metric-card-spark .csfloat-spark-line { stroke: var(--cta); }
.csfloat-metric-card-spark .csfloat-spark-fill { fill: rgba(59, 130, 246, 0.12); stroke: none; }
.csfloat-metric-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-top: 4px;
}
/* END split card + mega stat + metric with spark */
/* CSFloat-1:1: dropdown menu with submenu support — used for filter sort + user menu */
.csfloat-menu {
position: absolute;
top: calc(100% + 6px);
min-width: 180px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
z-index: 200;
display: none;
flex-direction: column;
gap: 1px;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-menu-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-menu.is-open { display: flex; }
.csfloat-menu.is-right { right: 0; }
.csfloat-menu.is-left { left: 0; }
.csfloat-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 5px;
font: 400 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
background: transparent;
border: 0;
width: 100%;
text-align: left;
text-decoration: none;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-menu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-menu-item.is-active {
background: var(--bg-2);
color: var(--cta);
}
.csfloat-menu-item.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-menu-item.is-danger:hover { background: rgba(248, 113, 113, 0.12); }
.csfloat-menu-item[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.csfloat-menu-item-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--ink-3);
}
.csfloat-menu-item-label { flex: 1 1 auto; }
.csfloat-menu-item-shortcut {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
font-feature-settings: "tnum";
}
.csfloat-menu-item:hover .csfloat-menu-item-shortcut {
background: var(--bg-3);
color: var(--ink-3);
}
.csfloat-menu-item-check {
width: 12px;
height: 6px;
border: 1.5px solid var(--cta);
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
margin-right: 2px;
visibility: hidden;
}
.csfloat-menu-item.is-checked .csfloat-menu-item-check { visibility: visible; }
.csfloat-menu-item.is-with-sub::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-4);
border-top: 1.5px solid var(--ink-4);
transform: rotate(45deg);
margin-left: auto;
}
.csfloat-menu-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-menu-section-title {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
/* CSFloat-1:1: tooltip — small label that appears on hover */
.csfloat-tip {
position: relative;
display: inline-block;
}
.csfloat-tip > .csfloat-tip-bubble {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--ink-1);
color: var(--bg);
font: 500 11px/1.3 var(--ui);
letter-spacing: -0.005em;
padding: 6px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 160ms;
z-index: 100;
max-width: 240px;
white-space: normal;
}
.csfloat-tip > .csfloat-tip-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -3px;
border: 3px solid transparent;
border-top-color: var(--ink-1);
}
.csfloat-tip:hover > .csfloat-tip-bubble {
opacity: 1;
transform: translateX(-50%) translateY(-1px);
}
.csfloat-tip.is-bottom > .csfloat-tip-bubble {
bottom: auto;
top: calc(100% + 6px);
}
.csfloat-tip.is-bottom > .csfloat-tip-bubble::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--ink-1);
}
.csfloat-tip.is-right > .csfloat-tip-bubble {
bottom: 50%;
left: calc(100% + 6px);
transform: translateY(50%);
}
.csfloat-tip.is-right > .csfloat-tip-bubble::after {
top: 50%;
left: -3px;
margin: -3px 0 0;
border-top-color: transparent;
border-right-color: var(--ink-1);
}
.csfloat-tip.is-left > .csfloat-tip-bubble {
bottom: 50%;
left: auto;
right: calc(100% + 6px);
transform: translateY(50%);
}
.csfloat-tip.is-left > .csfloat-tip-bubble::after {
top: 50%;
left: 100%;
margin: -3px 0 0;
border-top-color: transparent;
border-left-color: var(--ink-1);
}
@media (hover: none) {
.csfloat-tip > .csfloat-tip-bubble { display: none; }
}
/* END dropdown menu + tooltip */
/* CSFloat-1:1: progress bar — linear horizontal, used for upload, deposit confirmation, level XP */
.csfloat-progress {
width: 100%;
height: 6px;
background: var(--bg-2);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.csfloat-progress > .csfloat-progress-bar {
height: 100%;
background: var(--cta);
border-radius: 999px;
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.csfloat-progress.is-thin { height: 3px; }
.csfloat-progress.is-thick { height: 10px; }
.csfloat-progress.is-success > .csfloat-progress-bar { background: oklch(0.72 0.16 152); }
.csfloat-progress.is-warning > .csfloat-progress-bar { background: oklch(0.78 0.16 80); }
.csfloat-progress.is-danger > .csfloat-progress-bar { background: oklch(0.66 0.18 30); }
.csfloat-progress.is-striped > .csfloat-progress-bar {
background-image: linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 75%, transparent 75%);
background-size: 14px 14px;
animation: csfloat-progress-stripe 1200ms linear infinite;
}
@keyframes csfloat-progress-stripe {
from { background-position: 0 0; }
to { background-position: 28px 0; }
}
.csfloat-progress.is-glow > .csfloat-progress-bar {
box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
.csfloat-progress-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-progress-label > .csfloat-progress-label-value {
font-family: var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-progress-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: circular progress ring — used for image processing, KYC verification, file upload */
.csfloat-progress-ring {
position: relative;
width: 36px;
height: 36px;
flex: 0 0 36px;
}
.csfloat-progress-ring.is-sm { width: 24px; height: 24px; flex: 0 0 24px; }
.csfloat-progress-ring.is-md { width: 36px; height: 36px; flex: 0 0 36px; }
.csfloat-progress-ring.is-lg { width: 56px; height: 56px; flex: 0 0 56px; }
.csfloat-progress-ring.is-xl { width: 80px; height: 80px; flex: 0 0 80px; }
.csfloat-progress-ring > svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-progress-ring > svg > circle {
fill: none;
stroke-width: 3;
stroke-linecap: round;
}
.csfloat-progress-ring > svg > circle.csfloat-progress-ring-track { stroke: var(--bg-3); }
.csfloat-progress-ring > svg > circle.csfloat-progress-ring-fill {
stroke: var(--cta);
transition: stroke-dashoffset 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-ring.is-success > svg > circle.csfloat-progress-ring-fill { stroke: oklch(0.72 0.16 152); }
.csfloat-progress-ring.is-warning > svg > circle.csfloat-progress-ring-fill { stroke: oklch(0.78 0.16 80); }
.csfloat-progress-ring.is-danger > svg > circle.csfloat-progress-ring-fill { stroke: oklch(0.66 0.18 30); }
.csfloat-progress-ring-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 600 10px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-progress-ring.is-lg .csfloat-progress-ring-label { font-size: 14px; }
.csfloat-progress-ring.is-xl .csfloat-progress-ring-label { font-size: 18px; }
.csfloat-progress-ring.is-spin > svg {
animation: csfloat-progress-spin 1100ms linear infinite;
}
@keyframes csfloat-progress-spin {
from { transform: rotate(-90deg); }
to { transform: rotate(270deg); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-progress.is-striped > .csfloat-progress-bar { animation: none; }
.csfloat-progress-ring.is-spin > svg { animation: none; }
}
/* END linear progress + circular progress ring */
/* CSFloat-1:1: notification dropdown center — bell icon dropdown with grouped notifications */
.csfloat-notif-center {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: 360px;
max-width: calc(100vw - 32px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
display: none;
flex-direction: column;
z-index: 200;
overflow: hidden;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-notif-center.is-open { display: flex; }
.csfloat-notif-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-notif-head-title {
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-notif-head-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
background: transparent;
border: 0;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
letter-spacing: -0.005em;
}
.csfloat-notif-head-action:hover { background: rgba(59, 130, 246, 0.08); }
.csfloat-notif-tabs {
display: flex;
border-bottom: 1px solid var(--line);
padding: 0 6px;
}
.csfloat-notif-tab {
position: relative;
padding: 10px 12px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
background: transparent;
border: 0;
cursor: pointer;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-notif-tab:hover { color: var(--ink-2); }
.csfloat-notif-tab.is-active { color: var(--ink-1); }
.csfloat-notif-tab.is-active::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
}
.csfloat-notif-tab-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-notif-list {
max-height: 420px;
overflow-y: auto;
}
.csfloat-notif-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.csfloat-notif-item:last-child { border-bottom: 0; }
.csfloat-notif-item:hover { background: var(--bg-2); }
.csfloat-notif-item.is-unread { background: rgba(59, 130, 246, 0.04); }
.csfloat-notif-item.is-unread::before {
content: '';
position: absolute;
left: 6px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--cta);
transform: translateY(-50%);
}
.csfloat-notif-item-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 32px;
}
.csfloat-notif-item-icon.is-success { background: rgba(52, 211, 153, 0.16); color: oklch(0.78 0.16 152); }
.csfloat-notif-item-icon.is-error { background: rgba(248, 113, 113, 0.16); color: oklch(0.72 0.18 30); }
.csfloat-notif-item-icon.is-info { background: rgba(59, 130, 246, 0.16); color: var(--cta); }
.csfloat-notif-item-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-notif-item-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-notif-item-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-notif-item-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
margin-top: 2px;
}
.csfloat-notif-empty {
padding: 48px 16px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-notif-foot {
border-top: 1px solid var(--line);
padding: 8px 14px;
background: var(--bg);
text-align: center;
}
.csfloat-notif-foot-link {
font: 500 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
padding: 4px 6px;
border-radius: 4px;
letter-spacing: -0.005em;
}
.csfloat-notif-foot-link:hover { background: rgba(59, 130, 246, 0.08); }
/* CSFloat-1:1: bell icon with unread badge */
.csfloat-bell {
position: relative;
width: 36px;
height: 36px;
border: 0;
background: transparent;
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1), color 140ms;
}
.csfloat-bell:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-bell.is-active {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-bell-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: 999px;
background: var(--cta);
color: #fff;
font: 600 9px/14px var(--mono);
text-align: center;
font-feature-settings: "tnum";
border: 2px solid var(--bg);
}
.csfloat-bell-badge.is-empty {
width: 6px;
height: 6px;
min-width: 0;
padding: 0;
background: oklch(0.66 0.18 30);
font-size: 0;
}
.csfloat-bell.is-pulse .csfloat-bell-badge {
animation: csfloat-bell-pulse 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes csfloat-bell-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-bell.is-pulse .csfloat-bell-badge { animation: none; }
}
/* END notification center + bell badge */
/* CSFloat-1:1: payment method card — credit card / crypto / bank picker */
.csfloat-pay-method {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pay-method:hover { border-color: var(--line-2); background: var(--bg-2); }
.csfloat-pay-method.is-selected {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.06);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-pay-method-icon {
width: 36px;
height: 24px;
border-radius: 4px;
background: var(--bg-3);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
overflow: hidden;
}
.csfloat-pay-method-icon > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-pay-method-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-pay-method-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-pay-method-meta {
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.01em;
}
.csfloat-pay-method-radio {
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pay-method.is-selected .csfloat-pay-method-radio {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-pay-method.is-selected .csfloat-pay-method-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 999px;
background: #fff;
}
.csfloat-pay-method-tag {
position: absolute;
top: -6px;
right: 12px;
background: var(--cta);
color: #fff;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 6px;
border-radius: 4px;
}
/* CSFloat-1:1: order summary block — used in checkout */
.csfloat-order-sum {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-order-sum-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0 0 12px;
}
.csfloat-order-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 0;
font: 400 13px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-order-sum-row > .csfloat-order-sum-row-label {
color: var(--ink-3);
}
.csfloat-order-sum-row > .csfloat-order-sum-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-order-sum-row.is-discount > .csfloat-order-sum-row-val { color: oklch(0.78 0.16 152); }
.csfloat-order-sum-row.is-fee > .csfloat-order-sum-row-val { color: oklch(0.72 0.18 30); }
.csfloat-order-sum-divider {
height: 1px;
background: var(--line);
margin: 8px 0;
}
.csfloat-order-sum-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 10px 0 0;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.csfloat-order-sum-total-label {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-order-sum-total-val {
font: 600 22px/1 var(--mono);
letter-spacing: -0.02em;
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-order-sum-total-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 2px;
vertical-align: top;
font-weight: 500;
}
.csfloat-order-sum-foot {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
}
/* END payment method + order summary */
/* CSFloat-1:1: cart drawer / mini cart in header */
.csfloat-cart {
display: flex;
flex-direction: column;
height: 100%;
}
.csfloat-cart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-cart-head-title {
font: 600 15px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
}
.csfloat-cart-head-count {
margin-left: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-cart-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 14px;
}
.csfloat-cart-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.csfloat-cart-row:last-child { border-bottom: 0; }
.csfloat-cart-row-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border-radius: 6px;
border: 1px solid var(--line);
flex: 0 0 56px;
object-fit: contain;
padding: 4px;
}
.csfloat-cart-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-cart-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 0;
}
.csfloat-cart-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-cart-row-meta > .csfloat-cart-row-float {
font-family: var(--mono);
margin-right: 6px;
}
.csfloat-cart-row-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.csfloat-cart-row-price {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-cart-row-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-cart-row-remove {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--ink-4);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-cart-row-remove:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
.csfloat-cart-empty {
padding: 56px 16px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.csfloat-cart-empty-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 18px;
}
.csfloat-cart-empty-msg {
font: 500 14px/1.4 var(--ui);
color: var(--ink-2);
margin: 0 0 4px;
}
.csfloat-cart-empty-sub {
font: 400 12px/1.4 var(--ui);
color: var(--ink-4);
margin: 0 0 12px;
}
.csfloat-cart-foot {
flex: 0 0 auto;
border-top: 1px solid var(--line);
padding: 14px 18px 18px;
background: var(--bg);
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-cart-foot-row {
display: flex;
align-items: center;
justify-content: space-between;
font: 500 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-cart-foot-row > .csfloat-cart-foot-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
}
.csfloat-cart-foot-row.is-total {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-cart-foot-row.is-total > .csfloat-cart-foot-row-val {
font-size: 18px;
font-weight: 600;
}
.csfloat-cart-foot-cta {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-cart-foot-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 400 10px/1.3 var(--ui);
color: var(--ink-4);
letter-spacing: 0.02em;
}
/* CSFloat-1:1: floating action card — sticky right rail summary on item detail */
.csfloat-fab-card {
position: sticky;
top: 88px;
align-self: start;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csfloat-fab-card-price {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-fab-card-price-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-fab-card-price-amount {
font: 600 32px/1 var(--mono);
letter-spacing: -0.025em;
color: var(--ink-1);
font-feature-settings: "tnum";
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.csfloat-fab-card-price-amount::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
font-weight: 500;
}
.csfloat-fab-card-price-sub {
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-fab-card-price-was {
font: 400 12px/1 var(--mono);
color: var(--ink-4);
text-decoration: line-through;
font-feature-settings: "tnum";
}
.csfloat-fab-card-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-fab-card-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-fab-card-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-fab-card-meta-row > .csfloat-fab-card-meta-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
@media (max-width: 1100px) {
.csfloat-fab-card { position: static; }
}
/* END cart drawer + floating action card */
/* CSFloat-1:1: file uploader / drag-drop zone */
.csfloat-upload {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 160px;
padding: 24px;
background: var(--bg-1);
border: 1.5px dashed var(--line-2);
border-radius: 10px;
cursor: pointer;
transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-upload:hover {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-upload.is-dragover {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.08);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.csfloat-upload.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.csfloat-upload-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 15px;
margin-bottom: 4px;
}
.csfloat-upload:hover .csfloat-upload-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-upload-msg {
font: 500 13px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-upload-msg > .csfloat-upload-msg-link {
color: var(--cta);
text-decoration: underline;
text-underline-offset: 2px;
}
.csfloat-upload-sub {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
text-align: center;
}
.csfloat-upload-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.csfloat-upload-input:focus-visible + .csfloat-upload-content {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
.csfloat-upload-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.csfloat-upload-list-item {
display: grid;
grid-template-columns: 24px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
}
.csfloat-upload-list-item.is-error {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-upload-list-item.is-done {
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-upload-list-icon {
width: 24px;
height: 24px;
border-radius: 4px;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 11px;
flex: 0 0 24px;
}
.csfloat-upload-list-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-upload-list-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-upload-list-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-upload-list-pct {
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-upload-list-x {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--ink-4);
border-radius: 4px;
cursor: pointer;
font: 500 12px/1 var(--ui);
}
.csfloat-upload-list-x:hover {
background: var(--bg-3);
color: var(--ink-1);
}
/* CSFloat-1:1: empty state component — large illustration + CTA */
.csfloat-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 64px 24px;
text-align: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-empty.is-bordered-only {
background: transparent;
border: 1px dashed var(--line);
}
.csfloat-empty.is-no-border {
background: transparent;
border: 0;
}
.csfloat-empty-art {
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 40px;
position: relative;
}
.csfloat-empty-art::before {
content: '';
position: absolute;
inset: -8px;
border: 1px solid var(--line);
border-radius: 50%;
opacity: 0.4;
}
.csfloat-empty-art.is-sm {
width: 56px;
height: 56px;
font-size: 22px;
}
.csfloat-empty-art.is-sm::before { display: none; }
.csfloat-empty-title {
font: 600 18px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-empty-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
max-width: 360px;
margin: 0;
}
.csfloat-empty-cta {
margin-top: 6px;
display: flex;
gap: 8px;
}
/* END file uploader + empty state */
/* CSFloat-1:1: contextual help popover — anchored bubble triggered by ? icon */
.csfloat-help-anchor {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-help-trigger {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line-2);
color: var(--ink-3);
font: 600 9px/1 var(--mono);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-help-trigger::after {
content: '?';
font-size: 9px;
font-weight: 600;
}
.csfloat-help-trigger:hover {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-help-pop {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 240px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 10px 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
font: 400 12px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms;
}
.csfloat-help-pop::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
background: var(--bg-1);
border-left: 1px solid var(--line-2);
border-top: 1px solid var(--line-2);
transform: rotate(45deg);
}
.csfloat-help-anchor:hover .csfloat-help-pop,
.csfloat-help-anchor:focus-within .csfloat-help-pop {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(2px);
}
.csfloat-help-pop-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.csfloat-help-pop-link {
display: inline-block;
margin-top: 6px;
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
}
.csfloat-help-pop-link:hover { text-decoration: underline; }
/* CSFloat-1:1: pricing card — used in subscription/listing fee tier comparison */
.csfloat-price-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-price-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.csfloat-price-card.is-featured {
border-color: var(--cta);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, var(--bg-1) 60%);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12), 0 12px 32px rgba(0, 0, 0, 0.4);
}
.csfloat-price-card-tag {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--cta);
color: #fff;
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
.csfloat-price-card-name {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-price-card-amount {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: 4px;
}
.csfloat-price-card-amount-value {
font: 600 36px/1 var(--mono);
letter-spacing: -0.03em;
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-price-card-amount-value::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
margin-right: 2px;
vertical-align: top;
font-weight: 500;
}
.csfloat-price-card-amount-period {
font: 400 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-price-card-desc {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
}
.csfloat-price-card-features {
list-style: none;
margin: 6px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-price-card-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-price-card-feature::before {
content: '';
flex: 0 0 14px;
width: 14px;
height: 8px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
margin-top: 4px;
}
.csfloat-price-card-feature.is-disabled { color: var(--ink-4); }
.csfloat-price-card-feature.is-disabled::before {
border-color: var(--ink-4);
opacity: 0.4;
}
.csfloat-price-card-cta { margin-top: auto; padding-top: 6px; }
/* END help popover + pricing card */
/* CSFloat-1:1: timeline / activity feed — vertical chain of events */
.csfloat-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding-left: 16px;
}
.csfloat-timeline::before {
content: '';
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--line);
}
.csfloat-timeline-item {
position: relative;
padding: 4px 0 18px 22px;
}
.csfloat-timeline-item:last-child { padding-bottom: 0; }
.csfloat-timeline-item::before {
content: '';
position: absolute;
left: -6px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-2);
border: 2px solid var(--line);
z-index: 1;
}
.csfloat-timeline-item.is-active::before {
background: var(--cta);
border-color: var(--cta);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-timeline-item.is-success::before {
background: oklch(0.72 0.16 152);
border-color: oklch(0.72 0.16 152);
}
.csfloat-timeline-item.is-error::before {
background: oklch(0.66 0.18 30);
border-color: oklch(0.66 0.18 30);
}
.csfloat-timeline-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-timeline-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-timeline-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
flex: 0 0 auto;
}
.csfloat-timeline-body {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 4px 0 0;
}
.csfloat-timeline-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 3px 6px;
border-radius: 3px;
}
/* CSFloat-1:1: dialog modal — confirmation, alert, prompt */
.csfloat-dialog-overlay {
position: fixed;
inset: 0;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-dialog-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.csfloat-dialog {
width: 100%;
max-width: 420px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 20px 22px 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
transform: translateY(8px) scale(0.98);
opacity: 0;
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms;
}
.csfloat-dialog-overlay.is-open .csfloat-dialog {
transform: translateY(0) scale(1);
opacity: 1;
}
.csfloat-dialog-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
align-self: flex-start;
}
.csfloat-dialog.is-danger .csfloat-dialog-icon {
background: rgba(248, 113, 113, 0.16);
color: oklch(0.72 0.18 30);
}
.csfloat-dialog.is-success .csfloat-dialog-icon {
background: rgba(52, 211, 153, 0.16);
color: oklch(0.78 0.16 152);
}
.csfloat-dialog.is-warning .csfloat-dialog-icon {
background: rgba(251, 191, 36, 0.16);
color: oklch(0.78 0.16 80);
}
.csfloat-dialog-title {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-dialog-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-dialog-input {
margin-top: 4px;
}
.csfloat-dialog-foot {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 8px;
}
.csfloat-dialog-foot.is-stretch > * { flex: 1 1 auto; }
@media (max-width: 540px) {
.csfloat-dialog {
max-width: none;
margin: 0;
border-radius: 12px 12px 0 0;
align-self: flex-end;
}
.csfloat-dialog-overlay { padding: 0; align-items: flex-end; }
}
/* END timeline + dialog modal */
/* CSFloat-1:1: stat row strip — horizontal stat bar above tables */
.csfloat-stat-row {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-stat-row > .csfloat-stat-cell {
flex: 1 1 0;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
min-width: 0;
}
.csfloat-stat-row > .csfloat-stat-cell:last-child { border-right: 0; }
.csfloat-stat-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-cell-value {
font: 600 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-stat-cell-value.is-currency::before {
content: '$';
font-size: 13px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-stat-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-stat-cell-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-stat-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-cell-delta.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 720px) {
.csfloat-stat-row {
flex-wrap: wrap;
}
.csfloat-stat-row > .csfloat-stat-cell {
flex: 0 0 50%;
border-bottom: 1px solid var(--line);
}
.csfloat-stat-row > .csfloat-stat-cell:nth-child(2n) { border-right: 0; }
.csfloat-stat-row > .csfloat-stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* CSFloat-1:1: input with prefix/suffix slot — for currency inputs, search, password reveal */
.csfloat-input-group {
position: relative;
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-input-group:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-input-group > input,
.csfloat-input-group > textarea {
flex: 1 1 auto;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
height: 36px;
padding: 0 12px;
font: 400 14px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-input-group > input::placeholder,
.csfloat-input-group > textarea::placeholder { color: var(--ink-3); }
.csfloat-input-group > textarea {
height: auto;
min-height: 80px;
padding: 10px 12px;
resize: vertical;
}
.csfloat-input-group-prefix,
.csfloat-input-group-suffix {
display: inline-flex;
align-items: center;
padding: 0 10px;
background: transparent;
color: var(--ink-3);
font: 400 13px/1 var(--ui);
letter-spacing: -0.005em;
flex: 0 0 auto;
}
.csfloat-input-group-prefix {
border-right: 1px solid var(--line);
background: var(--bg);
}
.csfloat-input-group-suffix {
border-left: 1px solid var(--line);
background: var(--bg);
}
.csfloat-input-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
color: var(--ink-4);
flex: 0 0 auto;
}
.csfloat-input-group-btn {
background: transparent;
border: 0;
border-left: 1px solid var(--line);
padding: 0 12px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
cursor: pointer;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-input-group-btn:hover { color: var(--ink-1); }
.csfloat-input-group.is-error {
border-color: oklch(0.66 0.18 30);
background: rgba(248, 113, 113, 0.04);
}
.csfloat-input-group.is-error:focus-within {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.csfloat-input-group.is-success {
border-color: oklch(0.62 0.16 152);
}
.csfloat-input-group.is-success:focus-within {
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}
.csfloat-input-group.is-disabled {
opacity: 0.5;
pointer-events: none;
background: var(--bg);
}
.csfloat-input-group.is-sm > input,
.csfloat-input-group.is-sm > textarea { height: 30px; font-size: 13px; }
.csfloat-input-group.is-lg > input,
.csfloat-input-group.is-lg > textarea { height: 44px; font-size: 15px; }
.csfloat-input-group-mono > input { font-family: var(--mono); font-feature-settings: "tnum"; }
/* CSFloat-1:1: form field group — label + input + helper text + error */
.csfloat-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-field-label {
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 4px;
}
.csfloat-field-label .csfloat-field-required {
color: oklch(0.66 0.18 30);
}
.csfloat-field-label .csfloat-field-optional {
color: var(--ink-4);
font-weight: 400;
margin-left: 4px;
}
.csfloat-field-helper {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-field-error {
font: 400 11px/1.4 var(--ui);
color: oklch(0.72 0.18 30);
letter-spacing: -0.005em;
display: flex;
align-items: flex-start;
gap: 4px;
}
.csfloat-field-error::before {
content: '!';
width: 12px;
height: 12px;
background: oklch(0.66 0.18 30);
color: #fff;
border-radius: 999px;
font: 600 9px/12px var(--ui);
text-align: center;
flex: 0 0 12px;
}
.csfloat-field-success {
font: 400 11px/1.4 var(--ui);
color: oklch(0.78 0.16 152);
letter-spacing: -0.005em;
}
.csfloat-field.is-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.csfloat-field-row {
display: flex;
align-items: center;
gap: 8px;
}
/* END stat row + input group + form field */
/* CSFloat-1:1: switch toggle — for settings */
.csfloat-switch {
position: relative;
display: inline-flex;
align-items: center;
width: 32px;
height: 18px;
flex: 0 0 32px;
cursor: pointer;
user-select: none;
}
.csfloat-switch > input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
margin: 0;
}
.csfloat-switch-track {
position: absolute;
inset: 0;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 999px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: var(--ink-3);
border-radius: 999px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-switch > input:checked ~ .csfloat-switch-track {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-switch > input:checked ~ .csfloat-switch-thumb {
left: 16px;
background: #fff;
}
.csfloat-switch > input:focus-visible ~ .csfloat-switch-track {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.csfloat-switch > input:disabled ~ .csfloat-switch-track,
.csfloat-switch > input:disabled ~ .csfloat-switch-thumb {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-switch.is-sm {
width: 26px;
height: 14px;
flex: 0 0 26px;
}
.csfloat-switch.is-sm .csfloat-switch-thumb {
width: 8px;
height: 8px;
}
.csfloat-switch.is-sm > input:checked ~ .csfloat-switch-thumb { left: 14px; }
.csfloat-switch.is-lg {
width: 44px;
height: 24px;
flex: 0 0 44px;
}
.csfloat-switch.is-lg .csfloat-switch-thumb {
width: 18px;
height: 18px;
}
.csfloat-switch.is-lg > input:checked ~ .csfloat-switch-thumb { left: 22px; }
/* CSFloat-1:1: settings row — switch + label + description */
.csfloat-set-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-set-row:last-child { border-bottom: 0; }
.csfloat-set-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-set-row-label {
font: 500 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-set-row-desc {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-set-row.is-disabled .csfloat-set-row-label,
.csfloat-set-row.is-disabled .csfloat-set-row-desc {
opacity: 0.5;
}
.csfloat-set-row-action { flex: 0 0 auto; }
.csfloat-set-section {
margin-bottom: 24px;
}
.csfloat-set-section-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 12px;
}
.csfloat-set-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0 16px;
}
/* CSFloat-1:1: radio group with card-style options */
.csfloat-radio-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.csfloat-radio-card {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-radio-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-radio-card.is-selected {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.05);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.csfloat-radio-card > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.csfloat-radio-card-mark {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-radio-card.is-selected .csfloat-radio-card-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-radio-card.is-selected .csfloat-radio-card-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
border-radius: 999px;
background: #fff;
}
.csfloat-radio-card-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
padding-right: 22px;
}
.csfloat-radio-card-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
/* END switch + settings row + radio cards */
/* CSFloat-1:1: image gallery thumbnail strip — used on item detail */
.csfloat-gallery {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}
.csfloat-gallery-main {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border-radius: 8px;
aspect-ratio: 16/10;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-gallery-main > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
cursor: zoom-in;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-gallery-main > img:hover { transform: scale(1.04); }
.csfloat-gallery-arrow {
position: absolute;
top: 50%;
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
font-size: 14px;
}
.csfloat-gallery-main:hover .csfloat-gallery-arrow { opacity: 1; }
.csfloat-gallery-arrow.is-prev { left: 12px; }
.csfloat-gallery-arrow.is-next { right: 12px; }
.csfloat-gallery-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.csfloat-gallery-arrow[disabled] { opacity: 0; pointer-events: none; }
.csfloat-gallery-meta {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
padding: 4px 10px;
font: 500 10px/1 var(--mono);
color: rgba(255, 255, 255, 0.86);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-gallery-thumbs {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.csfloat-gallery-thumbs::-webkit-scrollbar { display: none; }
.csfloat-gallery-thumb {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 6px;
background: var(--bg-2);
border: 1.5px solid var(--line);
cursor: pointer;
overflow: hidden;
padding: 4px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-gallery-thumb > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-gallery-thumb:hover { border-color: var(--line-2); }
.csfloat-gallery-thumb.is-active {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
/* CSFloat-1:1: zoom lightbox */
.csfloat-zoom {
position: fixed;
inset: 0;
background: rgba(7, 11, 24, 0.92);
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-zoom.is-open {
opacity: 1;
pointer-events: auto;
cursor: zoom-out;
}
.csfloat-zoom > img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.6));
}
.csfloat-zoom-close {
position: fixed;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
font: 500 18px/1 var(--ui);
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-zoom-close:hover {
background: rgba(0, 0, 0, 0.75);
transform: rotate(90deg);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END image gallery + zoom lightbox */
/* CSFloat-1:1: bid history table block — auction-style float bidding */
.csfloat-bids {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.csfloat-bids-head {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-bids-head-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-bids-head-count {
margin-left: 6px;
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-bids-current {
background: var(--bg-2);
padding: 14px 16px;
display: flex;
align-items: baseline;
gap: 8px;
border-bottom: 1px solid var(--line);
}
.csfloat-bids-current-label {
font: 500 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-bids-current-value {
font: 600 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-left: auto;
}
.csfloat-bids-current-value::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-bids-list {
max-height: 280px;
overflow-y: auto;
}
.csfloat-bid-row {
display: grid;
grid-template-columns: 24px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
transition: background 100ms ease;
}
.csfloat-bid-row:last-child { border-bottom: 0; }
.csfloat-bid-row:hover { background: var(--bg-2); }
.csfloat-bid-row.is-winning { background: rgba(52, 211, 153, 0.04); }
.csfloat-bid-row.is-mine { background: rgba(59, 130, 246, 0.04); }
.csfloat-bid-row-rank {
font: 600 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
text-align: center;
}
.csfloat-bid-row.is-winning .csfloat-bid-row-rank { color: oklch(0.78 0.16 152); }
.csfloat-bid-row-bidder {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.csfloat-bid-row-avatar {
width: 20px;
height: 20px;
border-radius: 999px;
flex: 0 0 20px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-bid-row-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-bid-row.is-mine .csfloat-bid-row-name { color: var(--cta); }
.csfloat-bid-row-amount {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
}
.csfloat-bid-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
.csfloat-bids-form {
padding: 14px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
gap: 8px;
}
.csfloat-bids-form > .csfloat-input-group { flex: 1 1 auto; }
/* CSFloat-1:1: live LED indicator — pulsing dot for "live", "online" status */
.csfloat-led {
position: relative;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 999px;
background: oklch(0.72 0.16 152);
display: inline-block;
}
.csfloat-led::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 999px;
background: inherit;
opacity: 0.4;
animation: csfloat-led-pulse 1600ms ease-in-out infinite;
}
@keyframes csfloat-led-pulse {
0%, 100% { transform: scale(0.8); opacity: 0.6; }
50% { transform: scale(1.6); opacity: 0; }
}
.csfloat-led.is-blue { background: var(--cta); }
.csfloat-led.is-yellow { background: oklch(0.78 0.16 80); }
.csfloat-led.is-red { background: oklch(0.66 0.18 30); }
.csfloat-led.is-gray { background: var(--ink-4); animation: none; }
.csfloat-led.is-gray::before { display: none; }
.csfloat-led-label {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-led-label > .csfloat-led { margin-right: 0; }
@media (prefers-reduced-motion: reduce) {
.csfloat-led::before { animation: none; }
}
/* END bid history + LED indicator */
/* CSFloat-1:1: float bar — visualizes float value within wear-tier ranges */
.csfloat-float-bar {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-float-bar-track {
position: relative;
height: 8px;
border-radius: 4px;
overflow: hidden;
display: flex;
background: var(--bg-3);
border: 1px solid var(--line);
}
.csfloat-float-bar-seg {
height: 100%;
position: relative;
}
.csfloat-float-bar-seg.is-fn { background: oklch(0.62 0.16 152); }
.csfloat-float-bar-seg.is-mw { background: oklch(0.78 0.16 110); }
.csfloat-float-bar-seg.is-ft { background: oklch(0.78 0.16 80); }
.csfloat-float-bar-seg.is-ww { background: oklch(0.72 0.18 60); }
.csfloat-float-bar-seg.is-bs { background: oklch(0.66 0.18 30); }
.csfloat-float-bar-marker {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--ink-1);
box-shadow: 0 0 0 1px var(--bg);
z-index: 1;
}
.csfloat-float-bar-marker::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--ink-1);
}
.csfloat-float-bar-meta {
display: flex;
align-items: center;
justify-content: space-between;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-float-bar-value {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-float-bar-tier {
font: 500 10px/1 var(--ui);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.csfloat-float-bar-tier.is-fn { color: oklch(0.78 0.16 152); }
.csfloat-float-bar-tier.is-mw { color: oklch(0.84 0.16 110); }
.csfloat-float-bar-tier.is-ft { color: oklch(0.84 0.16 80); }
.csfloat-float-bar-tier.is-ww { color: oklch(0.78 0.18 60); }
.csfloat-float-bar-tier.is-bs { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: sticker slot row on item detail */
.csfloat-stickers {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
}
.csfloat-stickers-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-stickers-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stickers-total {
font: 500 11px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-stickers-row {
display: flex;
gap: 8px;
}
.csfloat-sticker-slot {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
min-width: 0;
}
.csfloat-sticker-slot.is-empty {
opacity: 0.45;
border-style: dashed;
}
.csfloat-sticker-slot-img {
width: 100%;
aspect-ratio: 1;
background: var(--bg-2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-sticker-slot-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-sticker-slot-name {
font: 500 10px/1.2 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 100%;
}
.csfloat-sticker-slot-wear {
font: 600 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-sticker-slot-wear.is-pristine { color: oklch(0.78 0.16 152); }
.csfloat-sticker-slot-wear.is-scratched { color: oklch(0.78 0.16 80); }
.csfloat-sticker-slot-wear.is-faded { color: oklch(0.66 0.18 30); }
.csfloat-sticker-slot-pct {
position: relative;
width: 100%;
height: 2px;
background: var(--bg-3);
border-radius: 1px;
overflow: hidden;
}
.csfloat-sticker-slot-pct > .csfloat-sticker-slot-pct-fill {
height: 100%;
background: var(--cta);
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END float bar + sticker slots */
/* CSFloat-1:1: chart frame for price history line/area chart */
.csfloat-chart-frame {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-chart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.csfloat-chart-title-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-chart-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-chart-sub {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-chart-summary {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 2px;
}
.csfloat-chart-summary-value {
font: 600 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-chart-summary-value::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-chart-summary-delta {
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-chart-summary-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-chart-summary-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-chart-range {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-chart-range > .csfloat-chart-range-btn {
height: 26px;
padding: 0 10px;
background: transparent;
border: 0;
border-radius: 4px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
cursor: pointer;
font-feature-settings: "tnum";
letter-spacing: 0.02em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chart-range > .csfloat-chart-range-btn:hover { color: var(--ink-1); }
.csfloat-chart-range > .csfloat-chart-range-btn.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csfloat-chart-body {
position: relative;
width: 100%;
height: 240px;
display: flex;
align-items: stretch;
}
.csfloat-chart-body > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-chart-grid line {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 2 4;
opacity: 0.6;
}
.csfloat-chart-axis text {
fill: var(--ink-4);
font: 400 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-chart-line {
stroke: var(--cta);
stroke-width: 1.5;
fill: none;
}
.csfloat-chart-area {
fill: url(#csfloat-chart-grad);
stroke: none;
}
.csfloat-chart-pt {
r: 3;
fill: var(--cta);
stroke: var(--bg);
stroke-width: 2;
opacity: 0;
transition: opacity 140ms ease;
}
.csfloat-chart-pt.is-active { opacity: 1; }
.csfloat-chart-tooltip {
position: absolute;
pointer-events: none;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 6px 8px;
font: 500 11px/1.3 var(--ui);
color: var(--ink-1);
white-space: nowrap;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
z-index: 2;
transform: translate(-50%, -100%);
margin-top: -8px;
}
.csfloat-chart-tooltip-value {
display: block;
font: 600 12px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
}
.csfloat-chart-tooltip-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-chart-foot {
display: flex;
align-items: center;
justify-content: space-between;
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.csfloat-chart-legend {
display: flex;
gap: 12px;
align-items: center;
}
.csfloat-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.02em;
}
.csfloat-chart-legend-item::before {
content: '';
width: 8px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-chart-legend-item.is-secondary::before { background: var(--ink-3); }
/* CSFloat-1:1: data card (compact) — used for inline metric tiles */
.csfloat-data-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-data-card-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 32px;
}
.csfloat-data-card-icon.is-cta { background: rgba(59, 130, 246, 0.12); border-color: var(--cta); color: var(--cta); }
.csfloat-data-card-icon.is-success { background: rgba(52, 211, 153, 0.12); border-color: oklch(0.62 0.16 152); color: oklch(0.78 0.16 152); }
.csfloat-data-card-icon.is-warning { background: rgba(251, 191, 36, 0.12); border-color: oklch(0.66 0.18 80); color: oklch(0.84 0.16 80); }
.csfloat-data-card-icon.is-danger { background: rgba(248, 113, 113, 0.12); border-color: oklch(0.66 0.18 30); color: oklch(0.72 0.18 30); }
.csfloat-data-card-info {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.csfloat-data-card-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-data-card-value {
font: 600 14px/1.2 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
margin-top: 2px;
}
/* END chart frame + data card */
/* CSFloat-1:1: hero shot block — large item showcase used on landing/feature panels */
.csfloat-hero-shot {
position: relative;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 32px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
overflow: hidden;
}
.csfloat-hero-shot::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 320px at 18% 50%, rgba(59, 130, 246, 0.08), transparent 70%);
pointer-events: none;
}
.csfloat-hero-shot-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
}
.csfloat-hero-shot-img > img {
max-width: 100%;
max-height: 320px;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 32px rgba(59, 130, 246, 0.18));
}
.csfloat-hero-shot-info {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.csfloat-hero-shot-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
padding: 5px 10px;
border-radius: 999px;
align-self: flex-start;
}
.csfloat-hero-shot-name {
font: 600 clamp(24px, 3vw, 36px) / 1.1 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
}
.csfloat-hero-shot-name > .csfloat-hero-shot-name-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
}
.csfloat-hero-shot-sub {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
max-width: 520px;
}
.csfloat-hero-shot-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 4px;
}
.csfloat-hero-shot-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-hero-shot-meta-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hero-shot-meta-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-hero-shot-cta {
margin-top: 12px;
display: flex;
gap: 8px;
}
@media (max-width: 720px) {
.csfloat-hero-shot {
grid-template-columns: 1fr;
padding: 20px;
}
.csfloat-hero-shot-img > img { max-height: 220px; }
}
/* CSFloat-1:1: featured strip / promo banner */
.csfloat-promo-strip {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0));
border: 1px solid rgba(59, 130, 246, 0.2);
border-left: 3px solid var(--cta);
border-radius: 0 10px 10px 0;
position: relative;
overflow: hidden;
}
.csfloat-promo-strip-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--cta);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
font-size: 14px;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
.csfloat-promo-strip-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-promo-strip-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-promo-strip-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-promo-strip-cta {
flex: 0 0 auto;
}
.csfloat-promo-strip-close {
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-4);
border-radius: 999px;
cursor: pointer;
font: 500 14px/1 var(--ui);
}
.csfloat-promo-strip-close:hover {
background: var(--bg-2);
color: var(--ink-1);
}
@media (max-width: 540px) {
.csfloat-promo-strip {
flex-wrap: wrap;
}
.csfloat-promo-strip-cta { flex-basis: 100%; }
}
/* END hero shot + promo strip */
/* CSFloat-1:1: page header — title block at top of internal page */
.csfloat-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 24px 0 18px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.csfloat-page-head-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-page-head-eyebrow {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 4px;
}
.csfloat-page-head-title {
font: 600 clamp(22px, 3vw, 28px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-page-head-title-count {
font: 500 13px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-page-head-sub {
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
margin-top: 4px;
letter-spacing: -0.005em;
max-width: 600px;
}
.csfloat-page-head-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.csfloat-page-head-tabs {
width: 100%;
margin-top: 16px;
}
/* CSFloat-1:1: section header inside page — used between content blocks */
.csfloat-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.csfloat-section-head-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.csfloat-section-head-title > .csfloat-section-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-section-head-actions {
display: flex;
gap: 6px;
}
.csfloat-section-head-link {
font: 500 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-section-head-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.csfloat-section-head-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* CSFloat-1:1: breadcrumb trail */
.csfloat-crumbs {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font: 400 12px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-bottom: 14px;
}
.csfloat-crumbs > .csfloat-crumb {
color: var(--ink-3);
text-decoration: none;
padding: 4px 6px;
border-radius: 4px;
transition: all 120ms ease;
}
.csfloat-crumbs > .csfloat-crumb:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-crumbs > .csfloat-crumb.is-current {
color: var(--ink-1);
font-weight: 500;
pointer-events: none;
}
.csfloat-crumbs > .csfloat-crumb-sep {
color: var(--ink-4);
font-size: 10px;
user-select: none;
}
.csfloat-crumbs > .csfloat-crumb-sep::before {
content: '/';
}
/* END page head + section head + breadcrumbs */
/* CSFloat-1:1: vertical sidebar nav (account/admin) */
.csfloat-side-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: sticky;
top: 88px;
align-self: start;
width: 220px;
flex: 0 0 220px;
}
.csfloat-side-nav-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-side-nav-section:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.csfloat-side-nav-section-title {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px;
margin: 0;
}
.csfloat-side-nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-side-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-side-nav-link.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--ink-1);
}
.csfloat-side-nav-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-side-nav-link-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--ink-3);
}
.csfloat-side-nav-link.is-active .csfloat-side-nav-link-icon { color: var(--cta); }
.csfloat-side-nav-link-label { flex: 1 1 auto; }
.csfloat-side-nav-link-badge {
font: 600 10px/1 var(--mono);
background: var(--bg-3);
color: var(--ink-3);
border-radius: 999px;
padding: 2px 6px;
font-feature-settings: "tnum";
}
.csfloat-side-nav-link.is-active .csfloat-side-nav-link-badge {
background: var(--cta);
color: #fff;
}
@media (max-width: 1100px) {
.csfloat-side-nav {
position: static;
width: 100%;
flex: none;
}
}
/* CSFloat-1:1: account layout — sidebar + main content split */
.csfloat-account-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 1100px) {
.csfloat-account-layout {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* CSFloat-1:1: panel — generic content card with header/body/foot */
.csfloat-panel {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.csfloat-panel-head {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.csfloat-panel-head-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-panel-head-sub {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
margin-top: 2px;
}
.csfloat-panel-head-actions {
display: flex;
gap: 6px;
}
.csfloat-panel-body {
padding: 16px 18px;
flex: 1 1 auto;
}
.csfloat-panel-body.is-tight { padding: 8px 10px; }
.csfloat-panel-body.is-wide { padding: 24px 28px; }
.csfloat-panel-body.is-flush { padding: 0; }
.csfloat-panel-foot {
padding: 12px 18px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-panel.is-elevated {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.2);
}
.csfloat-panel.is-bordered-thick {
border-width: 2px;
}
.csfloat-panel.is-cta-border {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
/* END side nav + account layout + panel */
/* CSFloat-1:1: API/secret reveal field — show/hide token with copy */
.csfloat-secret {
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
font-family: var(--mono);
}
.csfloat-secret-value {
flex: 1 1 auto;
font: 500 12px/1 var(--mono);
color: var(--ink-1);
padding: 0 12px;
display: flex;
align-items: center;
letter-spacing: 0.01em;
font-feature-settings: "tnum";
user-select: all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 36px;
}
.csfloat-secret.is-hidden .csfloat-secret-value {
letter-spacing: 0.2em;
user-select: none;
}
.csfloat-secret-btn {
flex: 0 0 auto;
background: transparent;
border: 0;
border-left: 1px solid var(--line);
padding: 0 10px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
cursor: pointer;
letter-spacing: 0.02em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-secret-btn:hover { background: var(--bg-3); color: var(--ink-1); }
.csfloat-secret-btn.is-success {
color: oklch(0.78 0.16 152);
}
/* CSFloat-1:1: code/key block — for KYC documents, refunds tokens, snippet display */
.csfloat-code {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 10px 12px;
font: 400 12px/1.5 var(--mono);
color: var(--ink-2);
letter-spacing: 0;
white-space: pre-wrap;
word-break: break-all;
position: relative;
}
.csfloat-code-inline {
display: inline-block;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
font: 500 11px/1.4 var(--mono);
color: var(--ink-2);
letter-spacing: 0;
word-break: break-all;
}
.csfloat-code-block {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
font: 400 12px/1.6 var(--mono);
color: var(--ink-2);
white-space: pre;
overflow-x: auto;
position: relative;
letter-spacing: 0;
}
.csfloat-code-block-copy {
position: absolute;
top: 8px;
right: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
border-radius: 4px;
padding: 4px 8px;
font: 500 10px/1 var(--ui);
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-code-block:hover .csfloat-code-block-copy { opacity: 1; }
.csfloat-code-block-copy:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-code-block-copy.is-copied {
color: oklch(0.78 0.16 152);
border-color: oklch(0.62 0.16 152);
}
/* CSFloat-1:1: hairline divider with optional label */
.csfloat-divider {
height: 1px;
background: var(--line);
border: 0;
margin: 16px 0;
}
.csfloat-divider.is-thick { height: 2px; background: var(--line-2); }
.csfloat-divider.is-tight { margin: 8px 0; }
.csfloat-divider.is-loose { margin: 28px 0; }
.csfloat-divider-text {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
}
.csfloat-divider-text::before,
.csfloat-divider-text::after {
content: '';
flex: 1 1 0;
height: 1px;
background: var(--line);
}
.csfloat-divider-text > span {
font: 600 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
/* END secret + code + divider */
/* CSFloat-1:1: chat thread bubble — for support threads, trade chat */
.csfloat-chat {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
min-height: 260px;
max-height: 480px;
overflow-y: auto;
}
.csfloat-chat-msg {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: flex-start;
max-width: 78%;
}
.csfloat-chat-msg.is-mine {
margin-left: auto;
grid-template-columns: 1fr 28px;
}
.csfloat-chat-msg-avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 28px;
object-fit: cover;
}
.csfloat-chat-msg.is-mine .csfloat-chat-msg-avatar {
order: 2;
}
.csfloat-chat-msg-bubble {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px 10px 10px 2px;
padding: 8px 12px;
font: 400 13px/1.5 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
position: relative;
}
.csfloat-chat-msg.is-mine .csfloat-chat-msg-bubble {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
border-radius: 10px 10px 2px 10px;
text-align: left;
}
.csfloat-chat-msg-author {
font: 600 11px/1 var(--ui);
color: var(--ink-2);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.csfloat-chat-msg.is-mine .csfloat-chat-msg-author { display: none; }
.csfloat-chat-msg-text {
margin: 0;
}
.csfloat-chat-msg-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 4px;
}
.csfloat-chat-msg.is-system {
max-width: 100%;
grid-template-columns: 1fr;
text-align: center;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
padding: 4px 0;
}
.csfloat-chat-msg.is-system .csfloat-chat-msg-bubble {
background: transparent;
border: 0;
padding: 0;
font-style: italic;
color: var(--ink-4);
}
.csfloat-chat-msg.is-system .csfloat-chat-msg-avatar { display: none; }
.csfloat-chat-typing {
display: inline-flex;
gap: 3px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px 10px 10px 2px;
width: max-content;
}
.csfloat-chat-typing span {
width: 5px;
height: 5px;
background: var(--ink-3);
border-radius: 999px;
animation: csfloat-chat-bounce 1200ms ease-in-out infinite;
}
.csfloat-chat-typing span:nth-child(2) { animation-delay: 150ms; }
.csfloat-chat-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes csfloat-chat-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
30% { transform: translateY(-4px); opacity: 1; }
}
.csfloat-chat-foot {
display: flex;
gap: 6px;
padding: 12px;
border-top: 1px solid var(--line);
background: var(--bg-1);
border-radius: 0 0 10px 10px;
align-items: flex-end;
}
.csfloat-chat-foot > .csfloat-input-group { flex: 1 1 auto; }
.csfloat-chat-foot-attach {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--bg-2);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-chat-foot-attach:hover { background: var(--bg-3); color: var(--ink-1); }
@media (prefers-reduced-motion: reduce) {
.csfloat-chat-typing span { animation: none; }
}
/* CSFloat-1:1: rating stars (read + write) */
.csfloat-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.csfloat-stars > .csfloat-star {
width: 14px;
height: 14px;
position: relative;
background: var(--ink-4);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
flex: 0 0 14px;
}
.csfloat-stars > .csfloat-star.is-on {
background: oklch(0.84 0.16 80);
}
.csfloat-stars > .csfloat-star.is-half {
background: linear-gradient(90deg, oklch(0.84 0.16 80) 50%, var(--ink-4) 50%);
}
.csfloat-stars.is-sm > .csfloat-star { width: 10px; height: 10px; flex: 0 0 10px; }
.csfloat-stars.is-lg > .csfloat-star { width: 18px; height: 18px; flex: 0 0 18px; }
.csfloat-stars.is-xl > .csfloat-star { width: 24px; height: 24px; flex: 0 0 24px; }
.csfloat-stars.is-input > .csfloat-star {
cursor: pointer;
transition: background 100ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stars.is-input > .csfloat-star:hover {
background: oklch(0.84 0.16 80);
transform: scale(1.15);
}
.csfloat-stars-block {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-stars-num {
font: 500 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-stars-count {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* END chat thread + stars rating */
/* CSFloat-1:1: live ticker tape — scrolling marquee of recent trades */
.csfloat-ticker {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
height: 36px;
}
.csfloat-ticker-led {
flex: 0 0 auto;
padding: 0 12px;
height: 100%;
display: flex;
align-items: center;
gap: 6px;
background: var(--bg-2);
border-right: 1px solid var(--line);
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-ticker-track {
flex: 1 1 auto;
overflow: hidden;
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.csfloat-ticker-tape {
display: inline-flex;
gap: 24px;
white-space: nowrap;
animation: csfloat-ticker-scroll 32000ms linear infinite;
padding-left: 100%;
}
.csfloat-ticker:hover .csfloat-ticker-tape {
animation-play-state: paused;
}
@keyframes csfloat-ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.csfloat-ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-ticker-item-img {
width: 18px;
height: 18px;
background: var(--bg-2);
border-radius: 3px;
object-fit: contain;
}
.csfloat-ticker-item-name {
color: var(--ink-1);
}
.csfloat-ticker-item-price {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 600;
letter-spacing: 0.01em;
}
.csfloat-ticker-item-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-ticker-item-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-ticker-item-sep::before {
content: '·';
color: var(--ink-4);
margin: 0 4px;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-ticker-tape { animation: none; }
}
/* CSFloat-1:1: featured collection card / pack tile */
.csfloat-pack {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.csfloat-pack::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 50% 0, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-pack:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.csfloat-pack-img {
position: relative;
aspect-ratio: 1.6;
background: var(--bg);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
overflow: hidden;
}
.csfloat-pack-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.csfloat-pack-flair {
position: absolute;
inset: -50% -50% 0 -50%;
background: linear-gradient(135deg, transparent 40%, rgba(59, 130, 246, 0.06) 50%, transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pack:hover .csfloat-pack-flair { opacity: 1; }
.csfloat-pack-name {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
text-align: center;
}
.csfloat-pack-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-pack-count {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
.csfloat-pack-price {
font: 600 13px/1 var(--mono);
color: var(--cta);
font-feature-settings: "tnum";
}
.csfloat-pack-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-pack-tier {
position: absolute;
top: 8px;
right: 8px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 4px 8px;
border-radius: 999px;
z-index: 1;
}
.csfloat-pack-tier.is-rare { color: oklch(0.84 0.16 240); }
.csfloat-pack-tier.is-epic { color: oklch(0.84 0.18 290); }
.csfloat-pack-tier.is-legend { color: oklch(0.84 0.18 60); }
/* END live ticker + collection pack */
/* CSFloat-1:1: status pill — small inline label with dot */
.csfloat-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--bg-2);
border: 1px solid var(--line);
}
.csfloat-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
flex: 0 0 5px;
}
.csfloat-status.is-listed {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-status.is-pending {
color: oklch(0.78 0.16 80);
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.25);
}
.csfloat-status.is-failed {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-status.is-shipped {
color: var(--cta);
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.25);
}
.csfloat-status.is-completed {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-status.is-cancelled {
color: var(--ink-4);
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-status.is-disputed {
color: oklch(0.84 0.18 60);
background: rgba(251, 146, 60, 0.08);
border-color: rgba(251, 146, 60, 0.25);
}
/* CSFloat-1:1: tag chip — informational marker */
.csfloat-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-tag.is-cta { color: var(--cta); border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.06); }
.csfloat-tag.is-success { color: oklch(0.78 0.16 152); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.csfloat-tag.is-warning { color: oklch(0.84 0.16 80); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); }
.csfloat-tag.is-danger { color: oklch(0.72 0.18 30); border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.06); }
.csfloat-tag.is-rare { color: oklch(0.84 0.18 240); border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.06); }
.csfloat-tag.is-epic { color: oklch(0.84 0.18 290); border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.06); }
.csfloat-tag.is-legend { color: oklch(0.84 0.18 60); border-color: rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.06); }
.csfloat-tag.is-pro { color: var(--ink-1); border-color: var(--line-2); background: var(--bg-3); font-weight: 600; }
.csfloat-tag-x {
border-radius: 999px;
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
margin-left: 2px;
font-size: 9px;
color: currentColor;
}
.csfloat-tag-x:hover { background: rgba(255, 255, 255, 0.16); }
.csfloat-tag.is-sm { font-size: 10px; padding: 1px 5px; }
.csfloat-tag.is-lg { font-size: 12px; padding: 4px 10px; }
.csfloat-tag-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* CSFloat-1:1: ribbon — corner banner for "new", "sale", "exclusive" */
.csfloat-ribbon-wrap {
position: relative;
}
.csfloat-ribbon {
position: absolute;
top: 8px;
left: -4px;
background: var(--cta);
color: #fff;
font: 600 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 0 4px 4px 0;
z-index: 1;
}
.csfloat-ribbon::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 0;
border-color: transparent rgba(0, 0, 0, 0.4) transparent transparent;
}
.csfloat-ribbon.is-success { background: oklch(0.62 0.16 152); }
.csfloat-ribbon.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-ribbon.is-warning { background: oklch(0.78 0.16 80); color: var(--bg); }
.csfloat-ribbon.is-rare { background: oklch(0.62 0.27 330); }
.csfloat-ribbon.is-corner {
top: 0;
left: auto;
right: 0;
border-radius: 0 8px 0 8px;
padding: 4px 10px;
}
.csfloat-ribbon.is-corner::before { display: none; }
/* END status pill + tag + ribbon */
/* CSFloat-1:1: meter — visual gauge for trust score, level progress */
.csfloat-meter {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-meter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-meter-label {
font: 500 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-meter-value {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-meter-bar {
position: relative;
width: 100%;
height: 6px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--line);
}
.csfloat-meter-bar-fill {
height: 100%;
background: linear-gradient(90deg, oklch(0.66 0.18 30) 0%, oklch(0.78 0.16 80) 30%, oklch(0.78 0.16 152) 60%, var(--cta) 100%);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-meter-bar-marker {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--ink-1);
box-shadow: 0 0 0 1px var(--bg);
}
.csfloat-meter-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.02em;
}
.csfloat-meter.is-tier-bronze .csfloat-meter-bar-fill { background: oklch(0.62 0.16 50); }
.csfloat-meter.is-tier-silver .csfloat-meter-bar-fill { background: oklch(0.78 0.02 240); }
.csfloat-meter.is-tier-gold .csfloat-meter-bar-fill { background: oklch(0.84 0.16 80); }
.csfloat-meter.is-tier-diamond .csfloat-meter-bar-fill { background: linear-gradient(90deg, var(--cta) 0%, oklch(0.84 0.18 240) 100%); }
.csfloat-meter.is-tier-platinum .csfloat-meter-bar-fill {
background: linear-gradient(90deg, oklch(0.78 0.18 290) 0%, var(--cta) 100%);
}
/* CSFloat-1:1: connection card — Steam / Discord / 2FA link */
.csfloat-conn {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-conn:hover { border-color: var(--line-2); }
.csfloat-conn-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
flex: 0 0 36px;
overflow: hidden;
}
.csfloat-conn-icon > img {
max-width: 60%;
max-height: 60%;
object-fit: contain;
}
.csfloat-conn-icon.is-steam { background: rgba(23, 26, 33, 1); border-color: #2a475e; }
.csfloat-conn-icon.is-discord { background: rgba(88, 101, 242, 0.12); border-color: #5865f2; color: #5865f2; }
.csfloat-conn-icon.is-google { background: var(--bg-3); }
.csfloat-conn-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-conn-name {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-conn-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-conn-meta-id {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-conn-status {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-conn-status.is-linked { color: oklch(0.78 0.16 152); }
.csfloat-conn-status.is-unlinked { color: var(--ink-4); }
.csfloat-conn-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
.csfloat-conn-action { flex: 0 0 auto; }
/* CSFloat-1:1: 2FA / OTP code input — segmented digit boxes */
.csfloat-otp {
display: inline-flex;
gap: 6px;
}
.csfloat-otp > input {
width: 38px;
height: 44px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
text-align: center;
font: 600 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-otp > input:focus {
outline: none;
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-otp > input.is-filled {
background: var(--bg-1);
border-color: var(--line-2);
}
.csfloat-otp.is-error > input {
border-color: oklch(0.66 0.18 30);
}
.csfloat-otp.is-error > input:focus {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.csfloat-otp.is-success > input {
border-color: oklch(0.62 0.16 152);
background: rgba(52, 211, 153, 0.04);
}
.csfloat-otp-sep {
display: inline-flex;
align-items: center;
font: 600 18px/1 var(--mono);
color: var(--ink-4);
padding: 0 2px;
}
.csfloat-otp-block {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.csfloat-otp-block-helper {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-otp-block-helper > b {
color: var(--ink-2);
font-weight: 600;
}
/* END meter + connection card + OTP input */
/* CSFloat-1:1: animated underline link — replaces default underline with hover slide */
.csfloat-link {
position: relative;
color: var(--ink-1);
text-decoration: none;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background: currentColor;
transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link:hover::after { width: 100%; }
.csfloat-link.is-cta { color: var(--cta); }
.csfloat-link.is-cta:hover { color: oklch(0.84 0.18 240); }
.csfloat-link.is-muted { color: var(--ink-3); }
.csfloat-link.is-muted:hover { color: var(--ink-1); }
.csfloat-link.is-arrow {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-link.is-arrow::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
order: 2;
}
.csfloat-link.is-arrow:hover::before { transform: rotate(45deg) translate(2px, -3px); }
.csfloat-link.is-arrow::after { display: none; }
/* CSFloat-1:1: kbd / keyboard shortcut display */
.csfloat-kbd {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-kbd > .csfloat-kbd-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--ink-2);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.csfloat-kbd > .csfloat-kbd-key.is-arrow {
letter-spacing: 0;
text-transform: none;
}
.csfloat-kbd > .csfloat-kbd-sep {
color: var(--ink-4);
font-weight: 400;
margin: 0 1px;
}
.csfloat-kbd.is-lg > .csfloat-kbd-key {
min-width: 24px;
height: 24px;
font-size: 11px;
padding: 0 8px;
}
.csfloat-kbd.is-pill > .csfloat-kbd-key { border-radius: 999px; }
/* CSFloat-1:1: spinner — circular loading indicator */
.csfloat-spin {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--line);
border-top-color: var(--cta);
border-radius: 999px;
animation: csfloat-spin 700ms linear infinite;
}
.csfloat-spin.is-sm { width: 12px; height: 12px; border-width: 1.5px; }
.csfloat-spin.is-lg { width: 24px; height: 24px; border-width: 2.5px; }
.csfloat-spin.is-xl { width: 40px; height: 40px; border-width: 3px; }
.csfloat-spin.is-thick { border-width: 3px; }
.csfloat-spin.is-on-bg { border-color: rgba(255, 255, 255, 0.16); border-top-color: #fff; }
.csfloat-spin.is-success { border-top-color: oklch(0.78 0.16 152); }
.csfloat-spin.is-warning { border-top-color: oklch(0.78 0.16 80); }
.csfloat-spin.is-danger { border-top-color: oklch(0.66 0.18 30); }
.csfloat-spin-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 36px 16px;
text-align: center;
}
.csfloat-spin-block-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-spin-overlay {
position: absolute;
inset: 0;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: inherit;
}
@keyframes csfloat-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-spin { animation: none; opacity: 0.8; }
}
/* END animated link + kbd + spinner */
/* CSFloat-1:1: stat compare row (vs market median) */
.csfloat-cmp {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-cmp > .csfloat-cmp-cell {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
}
.csfloat-cmp > .csfloat-cmp-cell:last-child { border-right: 0; }
.csfloat-cmp-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-cmp-cell-value {
font: 600 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-cmp-cell-value::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-cmp-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-cmp-cell.is-best .csfloat-cmp-cell-value { color: oklch(0.78 0.16 152); }
.csfloat-cmp-cell.is-worst .csfloat-cmp-cell-value { color: oklch(0.72 0.18 30); }
.csfloat-cmp-cell.is-active {
background: var(--bg-2);
}
.csfloat-cmp-cell.is-active .csfloat-cmp-cell-label { color: var(--cta); }
@media (max-width: 540px) {
.csfloat-cmp { grid-template-columns: 1fr; }
.csfloat-cmp > .csfloat-cmp-cell {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.csfloat-cmp > .csfloat-cmp-cell:last-child { border-bottom: 0; }
}
/* CSFloat-1:1: pattern viewer slot — for unique pattern indices */
.csfloat-pattern {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-pattern-glyph {
width: 36px;
height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--mono);
color: var(--cta);
flex: 0 0 36px;
font-feature-settings: "tnum";
}
.csfloat-pattern-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-pattern-name {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-pattern-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-pattern-rarity {
margin-left: auto;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.84 0.18 60);
}
/* CSFloat-1:1: image diff viewer — side by side wear comparison */
.csfloat-diff {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
}
.csfloat-diff-side {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-diff-side-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
text-align: center;
}
.csfloat-diff-side.is-current .csfloat-diff-side-label { color: var(--cta); }
.csfloat-diff-side.is-other .csfloat-diff-side-label { color: var(--ink-2); }
.csfloat-diff-side-img {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
border-radius: 6px;
border: 1px solid var(--line);
aspect-ratio: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.csfloat-diff-side-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
.csfloat-diff-side-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 4px 6px 0;
}
.csfloat-diff-side-meta-label {
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.02em;
}
.csfloat-diff-side-meta-value {
font: 500 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
@media (max-width: 540px) {
.csfloat-diff { grid-template-columns: 1fr; }
}
/* END stat compare row + pattern viewer + image diff */
/* CSFloat-1:1: countdown timer (auction end / withdrawal cooldown) */
.csfloat-countdown {
display: inline-flex;
align-items: stretch;
gap: 4px;
}
.csfloat-countdown-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 6px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
text-align: center;
}
.csfloat-countdown-cell-value {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-countdown-cell-label {
font: 500 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 4px;
}
.csfloat-countdown-sep {
display: inline-flex;
align-items: center;
font: 700 18px/1 var(--mono);
color: var(--ink-4);
padding: 0 1px;
}
.csfloat-countdown.is-sm .csfloat-countdown-cell {
min-width: 28px;
padding: 4px 6px;
}
.csfloat-countdown.is-sm .csfloat-countdown-cell-value { font-size: 13px; }
.csfloat-countdown.is-sm .csfloat-countdown-cell-label { font-size: 8px; margin-top: 2px; }
.csfloat-countdown.is-lg .csfloat-countdown-cell {
min-width: 52px;
padding: 10px 12px;
}
.csfloat-countdown.is-lg .csfloat-countdown-cell-value { font-size: 28px; }
.csfloat-countdown.is-urgent .csfloat-countdown-cell {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-countdown.is-urgent .csfloat-countdown-cell-value { color: oklch(0.78 0.18 30); }
.csfloat-countdown.is-pulse .csfloat-countdown-cell-value {
animation: csfloat-countdown-pulse 1100ms ease-in-out infinite;
}
@keyframes csfloat-countdown-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.csfloat-countdown-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-countdown-block-label {
font: 500 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-countdown.is-pulse .csfloat-countdown-cell-value { animation: none; }
}
/* CSFloat-1:1: badge stack (icons earned / achievements) */
.csfloat-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-badge {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
position: relative;
cursor: help;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-badge:hover {
background: var(--bg-3);
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-badge.is-earned {
border-color: var(--cta);
color: var(--cta);
background: rgba(59, 130, 246, 0.08);
}
.csfloat-badge.is-rare {
border-color: oklch(0.62 0.27 330);
color: oklch(0.84 0.18 330);
background: rgba(244, 114, 182, 0.08);
}
.csfloat-badge.is-legend {
border-color: oklch(0.84 0.18 60);
color: oklch(0.84 0.18 60);
background: rgba(251, 146, 60, 0.08);
}
.csfloat-badge.is-locked {
opacity: 0.4;
filter: grayscale(1);
}
.csfloat-badge-img {
width: 18px;
height: 18px;
object-fit: contain;
}
.csfloat-badge-tag {
position: absolute;
bottom: -4px;
right: -4px;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--cta);
color: #fff;
font: 700 9px/14px var(--mono);
text-align: center;
border: 2px solid var(--bg);
font-feature-settings: "tnum";
}
.csfloat-badge.is-lg {
width: 44px;
height: 44px;
border-radius: 10px;
}
.csfloat-badge.is-lg .csfloat-badge-img {
width: 24px;
height: 24px;
}
.csfloat-badge.is-circle {
border-radius: 999px;
}
/* CSFloat-1:1: invoice / receipt block */
.csfloat-invoice {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--ui);
}
.csfloat-invoice-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.csfloat-invoice-head-brand {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-invoice-head-brand-name {
font: 700 16px/1.2 var(--ui);
color: var(--ink-1);
letter-spacing: -0.015em;
}
.csfloat-invoice-head-brand-tag {
font: 500 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 2px;
}
.csfloat-invoice-head-meta {
text-align: right;
font: 400 11px/1.5 var(--ui);
color: var(--ink-3);
}
.csfloat-invoice-head-meta-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 2px;
}
.csfloat-invoice-head-meta-value {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-invoice-from {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.csfloat-invoice-from-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 4px;
}
.csfloat-invoice-from-name {
font: 600 13px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-invoice-from-line {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
}
.csfloat-invoice-rows {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.csfloat-invoice-row {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-invoice-row:last-child { border-bottom: 0; }
.csfloat-invoice-row-img {
width: 36px;
height: 36px;
background: var(--bg-2);
border-radius: 6px;
border: 1px solid var(--line);
padding: 4px;
object-fit: contain;
flex: 0 0 36px;
}
.csfloat-invoice-row-info {
min-width: 0;
}
.csfloat-invoice-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-invoice-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
margin-top: 2px;
}
.csfloat-invoice-row-qty {
font: 500 12px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
text-align: right;
min-width: 32px;
}
.csfloat-invoice-row-amount {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-invoice-row-amount::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-invoice-totals {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.csfloat-invoice-total-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
font: 400 13px/1 var(--ui);
color: var(--ink-3);
min-width: 220px;
letter-spacing: -0.005em;
}
.csfloat-invoice-total-row > .csfloat-invoice-total-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-invoice-total-row.is-grand {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
padding-top: 8px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.csfloat-invoice-total-row.is-grand > .csfloat-invoice-total-row-val {
font-size: 18px;
font-weight: 700;
}
.csfloat-invoice-foot {
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
}
@media (max-width: 540px) {
.csfloat-invoice { padding: 18px; }
.csfloat-invoice-from { grid-template-columns: 1fr; }
.csfloat-invoice-row { grid-template-columns: 32px 1fr auto; }
.csfloat-invoice-row-qty { display: none; }
}
/* END countdown + badges + invoice */
/* CSFloat-1:1: hover preview pop — quick view triggered on item-card hover */
.csfloat-quickview {
position: absolute;
top: 0;
left: 100%;
margin-left: 10px;
width: 280px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
z-index: 60;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
transform: translateX(-4px);
}
.csfloat-quickview.is-open {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.csfloat-quickview-img {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
border-radius: 6px;
border: 1px solid var(--line);
aspect-ratio: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-bottom: 10px;
}
.csfloat-quickview-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-quickview-name {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0 0 6px;
}
.csfloat-quickview-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-quickview-row > .csfloat-quickview-row-val {
font-family: var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-quickview-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 6px;
}
.csfloat-quickview-price {
font: 600 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.csfloat-quickview-price::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
@media (max-width: 1100px) {
.csfloat-quickview { display: none; }
}
/* CSFloat-1:1: error boundary card — shown when something failed */
.csfloat-err-block {
background: var(--bg-1);
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.csfloat-err-block-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
display: flex;
align-items: center;
justify-content: center;
font: 700 22px/1 var(--ui);
}
.csfloat-err-block-title {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-err-block-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 420px;
}
.csfloat-err-block-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
.csfloat-err-block-code {
margin-top: 8px;
font: 400 11px/1.4 var(--mono);
color: var(--ink-4);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 12px;
max-width: 100%;
word-break: break-all;
text-align: left;
}
/* CSFloat-1:1: 404 / not-found block — full-page friendly */
.csfloat-404 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 96px 24px;
text-align: center;
}
.csfloat-404-num {
font: 700 clamp(72px, 12vw, 160px) / 1 var(--mono);
letter-spacing: -0.05em;
color: transparent;
background: linear-gradient(180deg, var(--ink-2) 0%, var(--bg-3) 100%);
-webkit-background-clip: text;
background-clip: text;
margin: 0;
font-feature-settings: "tnum";
}
.csfloat-404-title {
font: 600 22px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-404-msg {
font: 400 14px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-404-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
/* END quickview + error block + 404 */
/* CSFloat-1:1: site footer block — minimal, blue accent column heads */
.csfloat-foot {
border-top: 1px solid var(--line);
padding: 56px 0 28px;
margin-top: 96px;
background: var(--bg);
}
.csfloat-foot-grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
.csfloat-foot-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-foot-brand-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-foot-brand-mark {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--cta);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font: 700 12px/1 var(--mono);
}
.csfloat-foot-brand-name {
font: 600 15px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
}
.csfloat-foot-brand-tag {
font: 500 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-foot-brand-blurb {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
max-width: 280px;
letter-spacing: -0.005em;
}
.csfloat-foot-col-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 14px;
}
.csfloat-foot-col-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-foot-col-link {
font: 400 12px/1.4 var(--ui);
color: var(--ink-4);
text-decoration: none;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-foot-col-link:hover { color: var(--ink-1); }
.csfloat-foot-col-link-tag {
display: inline-block;
margin-left: 4px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 1px 4px;
border-radius: 3px;
}
.csfloat-foot-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 40px;
padding: 24px 32px 0;
border-top: 1px solid var(--line);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.csfloat-foot-copy {
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-foot-social {
display: flex;
gap: 6px;
}
.csfloat-foot-social-btn {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-foot-social-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-foot-region {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-foot-region::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}
@media (max-width: 1100px) {
.csfloat-foot-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.csfloat-foot-brand { grid-column: span 3; }
}
@media (max-width: 720px) {
.csfloat-foot-grid {
grid-template-columns: 1fr 1fr;
}
.csfloat-foot-brand { grid-column: span 2; }
}
@media (max-width: 540px) {
.csfloat-foot-grid { grid-template-columns: 1fr; padding: 0 20px; }
.csfloat-foot-brand { grid-column: auto; }
.csfloat-foot-bottom { flex-direction: column; align-items: flex-start; padding: 24px 20px 0; }
}
/* END site footer */
/* CSFloat-1:1: top-of-page banner — for system-wide messages, maintenance, sales */
.csfloat-topbanner {
width: 100%;
background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
border-bottom: 1px solid var(--line);
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
z-index: 5;
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-align: center;
}
.csfloat-topbanner.is-cta {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.14));
border-color: rgba(59, 130, 246, 0.3);
color: var(--ink-1);
}
.csfloat-topbanner.is-warning {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.15));
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.9 0.12 80);
}
.csfloat-topbanner.is-danger {
background: linear-gradient(90deg, rgba(248, 113, 113, 0.12), rgba(248, 113, 113, 0.18));
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.9 0.12 30);
}
.csfloat-topbanner-link {
font: 600 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
margin-left: 4px;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-topbanner-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-topbanner-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.csfloat-topbanner-close {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
font: 500 14px/1 var(--ui);
}
.csfloat-topbanner-close:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ink-1);
}
.csfloat-topbanner.is-marquee {
overflow: hidden;
padding: 0;
height: 32px;
display: flex;
align-items: center;
}
.csfloat-topbanner.is-marquee > .csfloat-topbanner-marquee-track {
display: inline-flex;
gap: 48px;
white-space: nowrap;
animation: csfloat-tb-scroll 38000ms linear infinite;
padding-left: 100%;
}
.csfloat-topbanner.is-marquee:hover > .csfloat-topbanner-marquee-track { animation-play-state: paused; }
@keyframes csfloat-tb-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-topbanner.is-marquee > .csfloat-topbanner-marquee-track { animation: none; }
}
/* CSFloat-1:1: floating support button (chat anchor bottom-right) */
.csfloat-fab-btn {
position: fixed;
right: 24px;
bottom: 24px;
width: 52px;
height: 52px;
border-radius: 999px;
background: var(--cta);
color: #fff;
border: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
z-index: 50;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fab-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-fab-btn:active {
transform: translateY(0);
}
.csfloat-fab-btn-icon {
width: 22px;
height: 22px;
}
.csfloat-fab-btn-badge {
position: absolute;
top: 0;
right: 0;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 10px/18px var(--mono);
text-align: center;
font-feature-settings: "tnum";
border: 2px solid var(--bg);
}
.csfloat-fab-btn-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-3);
color: var(--ink-1);
font: 500 12px/1 var(--ui);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line-2);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms;
}
.csfloat-fab-btn:hover .csfloat-fab-btn-label {
opacity: 1;
transform: translateY(-50%) translateX(-4px);
}
.csfloat-fab-btn.is-secondary {
background: var(--bg-3);
color: var(--ink-1);
border: 1px solid var(--line-2);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-fab-btn.is-secondary:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
/* CSFloat-1:1: scroll-to-top arrow */
.csfloat-stt {
position: fixed;
right: 24px;
bottom: 88px;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-2);
color: var(--ink-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 40;
}
.csfloat-stt.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.csfloat-stt:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-stt::before {
content: '';
width: 8px;
height: 8px;
border-left: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(2px, 2px);
}
/* END topbanner + fab + scroll-to-top */
/* CSFloat-1:1: comparison table — used for tier feature comparisons */
.csfloat-cmp-tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-cmp-tbl thead th {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--line);
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
background: var(--bg-1);
position: sticky;
top: 0;
z-index: 1;
}
.csfloat-cmp-tbl thead th:first-child {
font-size: 11px;
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
background: transparent;
}
.csfloat-cmp-tbl thead th.is-highlighted {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
color: var(--cta);
position: relative;
}
.csfloat-cmp-tbl thead th.is-highlighted::after {
content: 'POPULAR';
position: absolute;
top: 4px;
right: 8px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
color: var(--cta);
background: rgba(59, 130, 246, 0.16);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-cmp-tbl tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.012); }
.csfloat-cmp-tbl tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
text-align: center;
}
.csfloat-cmp-tbl tbody td:first-child {
text-align: left;
font-weight: 500;
color: var(--ink-1);
}
.csfloat-cmp-tbl tbody tr:last-child td { border-bottom: 0; }
.csfloat-cmp-tbl-row-section {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
}
.csfloat-cmp-tbl tbody td.is-yes::before {
content: '';
display: inline-block;
width: 14px;
height: 8px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
}
.csfloat-cmp-tbl tbody td.is-no::before {
content: '—';
color: var(--ink-4);
font-weight: 400;
font-size: 14px;
}
.csfloat-cmp-tbl tbody td.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
}
.csfloat-cmp-tbl tbody td.is-highlighted {
background: rgba(59, 130, 246, 0.04);
color: var(--ink-1);
font-weight: 500;
}
/* CSFloat-1:1: testimonial / quote card */
.csfloat-quote {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.csfloat-quote::before {
content: '"';
position: absolute;
top: 0;
left: 12px;
font: 700 80px/1 var(--serif);
font-style: italic;
color: rgba(255, 255, 255, 0.04);
pointer-events: none;
line-height: 0.8;
}
.csfloat-quote-text {
font: 400 14px/1.6 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
position: relative;
z-index: 1;
}
.csfloat-quote-text > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-quote-foot {
display: flex;
align-items: center;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--line);
margin-top: auto;
}
.csfloat-quote-foot-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 32px;
object-fit: cover;
}
.csfloat-quote-foot-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-quote-foot-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-quote-foot-meta {
font: 400 10px/1.3 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-quote-foot-stars {
margin-left: auto;
}
/* END comparison table + testimonial quote */
/* CSFloat-1:1: scroll-snap horizontal carousel — for collections strip */
.csfloat-carousel {
position: relative;
display: flex;
align-items: stretch;
}
.csfloat-carousel-track {
flex: 1 1 auto;
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 16px;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
}
.csfloat-carousel-track::-webkit-scrollbar { height: 4px; }
.csfloat-carousel-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.csfloat-carousel-item {
flex: 0 0 auto;
scroll-snap-align: start;
}
.csfloat-carousel-arrow {
position: absolute;
top: 50%;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line-2);
color: var(--ink-1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-carousel-arrow:hover {
background: var(--bg-2);
transform: translateY(-50%) scale(1.05);
}
.csfloat-carousel-arrow.is-prev { left: -4px; }
.csfloat-carousel-arrow.is-next { right: -4px; }
.csfloat-carousel-arrow[disabled] { opacity: 0; pointer-events: none; }
.csfloat-carousel-arrow::before {
content: '';
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
}
.csfloat-carousel-arrow.is-prev::before {
transform: rotate(-135deg);
margin-left: 2px;
}
.csfloat-carousel-arrow.is-next::before {
transform: rotate(45deg);
margin-right: 2px;
}
.csfloat-carousel-dots {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 12px;
}
.csfloat-carousel-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--bg-3);
border: 0;
cursor: pointer;
padding: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-carousel-dot.is-active {
background: var(--cta);
width: 18px;
}
.csfloat-carousel-dot:hover { background: var(--ink-3); }
.csfloat-carousel-dot.is-active:hover { background: var(--cta); }
/* CSFloat-1:1: feature bento — asymmetric grid of feature tiles */
.csfloat-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 12px;
}
.csfloat-bento-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bento-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.csfloat-bento-tile.is-feature {
grid-column: span 2;
grid-row: span 2;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
}
.csfloat-bento-tile.is-feature::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 240px at 30% 100%, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-bento-tile.is-wide { grid-column: span 2; }
.csfloat-bento-tile.is-tall { grid-row: span 2; }
.csfloat-bento-tile-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
margin-bottom: 4px;
}
.csfloat-bento-tile.is-feature .csfloat-bento-tile-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-bento-tile-title {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
position: relative;
z-index: 1;
}
.csfloat-bento-tile.is-feature .csfloat-bento-tile-title {
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.15;
}
.csfloat-bento-tile-desc {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
position: relative;
z-index: 1;
}
.csfloat-bento-tile.is-feature .csfloat-bento-tile-desc {
font-size: 14px;
max-width: 420px;
}
.csfloat-bento-tile-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
position: relative;
z-index: 1;
}
.csfloat-bento-tile-stat {
font: 600 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-bento-tile.is-feature .csfloat-bento-tile-stat {
font-size: 40px;
letter-spacing: -0.03em;
}
@media (max-width: 1100px) {
.csfloat-bento { grid-template-columns: repeat(2, 1fr); }
.csfloat-bento-tile.is-feature { grid-column: span 2; grid-row: auto; }
.csfloat-bento-tile.is-wide { grid-column: span 2; }
.csfloat-bento-tile.is-tall { grid-row: auto; }
}
@media (max-width: 540px) {
.csfloat-bento { grid-template-columns: 1fr; }
.csfloat-bento-tile.is-feature, .csfloat-bento-tile.is-wide, .csfloat-bento-tile.is-tall { grid-column: auto; }
}
/* END carousel + feature bento */
/* CSFloat-1:1: dropdown sort selector — used in market filter bar */
.csfloat-sort {
position: relative;
display: inline-block;
}
.csfloat-sort-trigger {
height: 32px;
padding: 0 10px 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-sort-trigger:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-sort-trigger.is-active {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-sort-trigger-label {
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-sort-trigger-value {
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-sort-trigger-chev {
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-sort.is-open .csfloat-sort-trigger-chev {
transform: rotate(225deg) translate(-1px, -1px);
}
.csfloat-sort-popover {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 180px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
z-index: 20;
display: none;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-sort.is-open .csfloat-sort-popover { display: block; }
.csfloat-sort-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 5px;
font: 400 13px/1 var(--ui);
color: var(--ink-2);
cursor: pointer;
letter-spacing: -0.005em;
transition: background 100ms ease;
}
.csfloat-sort-opt:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-sort-opt.is-selected {
background: rgba(59, 130, 246, 0.1);
color: var(--cta);
}
.csfloat-sort-opt-arrow {
width: 10px;
height: 10px;
margin-left: auto;
opacity: 0.5;
}
.csfloat-sort-opt.is-selected .csfloat-sort-opt-arrow { opacity: 1; }
/* CSFloat-1:1: filter results bar — show count, applied filters as chips */
.csfloat-filter-bar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 16px;
}
.csfloat-filter-bar-count {
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-filter-bar-count > b {
color: var(--cta);
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-filter-bar-divider {
width: 1px;
height: 16px;
background: var(--line);
}
.csfloat-filter-bar-applied {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.csfloat-filter-bar-applied:empty { display: none; }
.csfloat-filter-bar-applied + .csfloat-filter-bar-divider { display: none; }
.csfloat-filter-bar-applied:not(:empty) + .csfloat-filter-bar-divider { display: block; }
.csfloat-filter-bar-clear {
font: 500 11px/1 var(--ui);
color: var(--ink-3);
background: transparent;
border: 0;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
letter-spacing: -0.005em;
transition: color 120ms ease, background 120ms ease;
}
.csfloat-filter-bar-clear:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-filter-bar-spacer { flex: 1 1 auto; }
.csfloat-filter-bar-actions {
display: flex;
gap: 6px;
align-items: center;
}
.csfloat-filter-bar-view {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-filter-bar-view-btn {
width: 28px;
height: 26px;
background: transparent;
border: 0;
border-radius: 4px;
cursor: pointer;
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-bar-view-btn:hover { color: var(--ink-1); }
.csfloat-filter-bar-view-btn.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 720px) {
.csfloat-filter-bar {
padding: 10px 12px;
gap: 8px;
}
.csfloat-filter-bar-divider { display: none; }
}
/* END dropdown sort + filter results bar */
/* CSFloat-1:1: market grid — responsive CSS grid for product cards */
.csfloat-mkt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.csfloat-mkt-grid.is-dense {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.csfloat-mkt-grid.is-loose {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.csfloat-mkt-grid.is-2col-min {
grid-template-columns: repeat(auto-fill, minmax(min(220px, calc(50% - 6px)), 1fr));
}
.csfloat-mkt-grid.is-list {
grid-template-columns: 1fr;
gap: 8px;
}
@media (max-width: 1280px) {
.csfloat-mkt-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.csfloat-mkt-grid.is-dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
.csfloat-mkt-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.csfloat-mkt-grid.is-dense, .csfloat-mkt-grid.is-loose {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 380px) {
.csfloat-mkt-grid {
gap: 6px;
}
}
/* CSFloat-1:1: market item card — primary product display tile */
.csfloat-mkt-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.csfloat-mkt-card-img {
position: relative;
aspect-ratio: 1.45;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
overflow: hidden;
}
.csfloat-mkt-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-card:hover .csfloat-mkt-card-img > img {
transform: scale(1.04);
}
.csfloat-mkt-card-rarity {
position: absolute;
bottom: 8px;
left: 8px;
width: 18px;
height: 4px;
border-radius: 2px;
background: var(--ink-3);
box-shadow: 0 0 6px currentColor;
}
.csfloat-mkt-card-rarity.is-cs { background: oklch(0.68 0.18 240); }
.csfloat-mkt-card-rarity.is-ind { background: oklch(0.76 0.18 240); }
.csfloat-mkt-card-rarity.is-mil { background: oklch(0.65 0.22 280); }
.csfloat-mkt-card-rarity.is-rest { background: oklch(0.62 0.22 320); }
.csfloat-mkt-card-rarity.is-class { background: oklch(0.62 0.27 330); }
.csfloat-mkt-card-rarity.is-cov { background: oklch(0.66 0.18 30); }
.csfloat-mkt-card-rarity.is-rare { background: oklch(0.84 0.18 60); }
.csfloat-mkt-card-tags {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.csfloat-mkt-card-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 4px 6px;
border-radius: 4px;
}
.csfloat-mkt-card-tag.is-cta { color: var(--cta); border-color: rgba(59, 130, 246, 0.35); }
.csfloat-mkt-card-tag.is-success { color: oklch(0.84 0.16 152); border-color: rgba(52, 211, 153, 0.35); }
.csfloat-mkt-card-tag.is-warning { color: oklch(0.9 0.14 80); border-color: rgba(251, 191, 36, 0.35); }
.csfloat-mkt-card-fav {
position: absolute;
top: 6px;
left: 6px;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-card:hover .csfloat-mkt-card-fav { opacity: 1; }
.csfloat-mkt-card-fav:hover { background: rgba(0, 0, 0, 0.6); color: oklch(0.84 0.18 30); }
.csfloat-mkt-card-fav.is-on {
opacity: 1;
color: oklch(0.78 0.18 30);
}
.csfloat-mkt-card-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-mkt-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 34px;
}
.csfloat-mkt-card-name > .csfloat-mkt-card-name-wear {
color: var(--ink-3);
font-weight: 400;
margin-left: 3px;
font-size: 11px;
}
.csfloat-mkt-card-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-mkt-card-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-mkt-card-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-mkt-card-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-mkt-card-float {
font-family: var(--mono);
color: var(--ink-3);
}
.csfloat-mkt-card-bid {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-mkt-card-bid::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
}
/* END market grid + market card */
/* CSFloat-1:1: list-mode item row — alternative to grid card */
.csfloat-mkt-row {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms;
}
.csfloat-mkt-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-mkt-row-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-mkt-row-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-mkt-row-img-rarity {
position: absolute;
bottom: 2px;
left: 2px;
width: 10px;
height: 2px;
border-radius: 1px;
background: var(--ink-3);
}
.csfloat-mkt-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-mkt-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-mkt-row-name > .csfloat-mkt-row-name-wear {
color: var(--ink-3);
font-weight: 400;
margin-left: 4px;
font-size: 11px;
}
.csfloat-mkt-row-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-mkt-row-meta-item {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
letter-spacing: 0.01em;
}
.csfloat-mkt-row-tags {
display: inline-flex;
gap: 4px;
}
.csfloat-mkt-row-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
text-align: right;
}
.csfloat-mkt-row-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-mkt-row-action { flex: 0 0 auto; }
@media (max-width: 720px) {
.csfloat-mkt-row {
grid-template-columns: 48px 1fr auto;
gap: 10px;
padding: 10px 12px;
}
.csfloat-mkt-row-img { width: 48px; height: 48px; flex: 0 0 48px; }
.csfloat-mkt-row-action { display: none; }
}
/* CSFloat-1:1: filter applied chip — selected filter shown in filter bar */
.csfloat-applied-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 5px 0 10px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 4px;
font: 500 11px/1 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
}
.csfloat-applied-chip-key {
font-weight: 400;
color: rgba(125, 184, 248, 0.8);
}
.csfloat-applied-chip-val {
font-weight: 600;
color: var(--cta);
}
.csfloat-applied-chip-x {
width: 14px;
height: 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--cta);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 10px/1 var(--ui);
margin-left: 1px;
transition: background 120ms ease;
}
.csfloat-applied-chip-x:hover {
background: rgba(59, 130, 246, 0.2);
}
.csfloat-applied-chip.is-neutral {
background: var(--bg-2);
border-color: var(--line);
color: var(--ink-2);
}
.csfloat-applied-chip.is-neutral .csfloat-applied-chip-key { color: var(--ink-4); }
.csfloat-applied-chip.is-neutral .csfloat-applied-chip-val { color: var(--ink-1); }
.csfloat-applied-chip.is-neutral .csfloat-applied-chip-x { color: var(--ink-3); }
.csfloat-applied-chip.is-neutral .csfloat-applied-chip-x:hover { background: var(--bg-3); color: var(--ink-1); }
/* END mkt list row + applied filter chip */
/* CSFloat-1:1: condensed inventory row — for quick stash views */
.csfloat-inv-cell {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
aspect-ratio: 1.4;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
cursor: pointer;
transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.csfloat-inv-cell:hover {
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.csfloat-inv-cell.is-selected {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-inv-cell.is-listed::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px currentColor;
}
.csfloat-inv-cell.is-locked::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 14px;
height: 14px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
background-image: linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, transparent 65%);
}
.csfloat-inv-cell > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.csfloat-inv-cell-name {
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
font: 500 9px/1.2 var(--ui);
color: var(--ink-1);
text-align: center;
letter-spacing: -0.005em;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
border-radius: 3px;
padding: 3px 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-inv-cell:hover .csfloat-inv-cell-name { opacity: 1; }
.csfloat-inv-cell-rarity {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--ink-3);
}
.csfloat-inv-cell-rarity.is-cs { background: oklch(0.68 0.18 240); }
.csfloat-inv-cell-rarity.is-ind { background: oklch(0.76 0.18 240); }
.csfloat-inv-cell-rarity.is-mil { background: oklch(0.65 0.22 280); }
.csfloat-inv-cell-rarity.is-rest { background: oklch(0.62 0.22 320); }
.csfloat-inv-cell-rarity.is-class { background: oklch(0.62 0.27 330); }
.csfloat-inv-cell-rarity.is-cov { background: oklch(0.66 0.18 30); }
.csfloat-inv-cell-rarity.is-rare { background: oklch(0.84 0.18 60); }
.csfloat-inv-cell-stickers {
position: absolute;
top: 4px;
right: 4px;
display: inline-flex;
gap: 2px;
}
.csfloat-inv-cell-sticker {
width: 12px;
height: 12px;
border-radius: 2px;
background: var(--bg);
border: 1px solid var(--line);
padding: 1px;
}
.csfloat-inv-cell-sticker > img { width: 100%; height: 100%; object-fit: contain; }
/* CSFloat-1:1: inventory grid — fluid responsive */
.csfloat-inv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 6px;
}
.csfloat-inv-grid.is-large {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.csfloat-inv-grid.is-tight {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 4px;
}
@media (max-width: 540px) {
.csfloat-inv-grid {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
}
/* CSFloat-1:1: market header — sits between page-head and the grid (search + sort + view) */
.csfloat-mkt-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 16px;
}
.csfloat-mkt-header-search {
flex: 1 1 auto;
max-width: 460px;
}
.csfloat-mkt-header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-mkt-header-actions-divider {
width: 1px;
height: 18px;
background: var(--line);
}
@media (max-width: 720px) {
.csfloat-mkt-header {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* END inventory cell + grid + market header */
/* CSFloat-1:1: order-book / depth chart row (bid/ask ladder) */
.csfloat-book {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.csfloat-book-head {
display: grid;
grid-template-columns: 1fr 1fr;
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
border-bottom: 1px solid var(--line);
}
.csfloat-book-head > div {
padding: 10px 12px;
}
.csfloat-book-head > .csfloat-book-bids-head { color: oklch(0.78 0.16 152); border-right: 1px solid var(--line); }
.csfloat-book-head > .csfloat-book-asks-head { color: oklch(0.72 0.18 30); text-align: right; }
.csfloat-book-body {
display: grid;
grid-template-columns: 1fr 1fr;
max-height: 320px;
overflow-y: auto;
}
.csfloat-book-side {
display: flex;
flex-direction: column;
}
.csfloat-book-bids {
border-right: 1px solid var(--line);
}
.csfloat-book-row {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
padding: 5px 12px;
font: 500 11px/1.2 var(--mono);
font-feature-settings: "tnum";
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.csfloat-book-row:last-child { border-bottom: 0; }
.csfloat-book-row::before {
content: '';
position: absolute;
inset: 0 0 0 0;
background: rgba(52, 211, 153, 0.06);
width: var(--depth, 0%);
pointer-events: none;
}
.csfloat-book-asks .csfloat-book-row::before {
background: rgba(248, 113, 113, 0.06);
left: auto;
right: 0;
}
.csfloat-book-row > .csfloat-book-row-price {
color: oklch(0.78 0.16 152);
font-weight: 600;
position: relative;
z-index: 1;
}
.csfloat-book-asks .csfloat-book-row > .csfloat-book-row-price {
color: oklch(0.72 0.18 30);
}
.csfloat-book-row > .csfloat-book-row-amt {
color: var(--ink-2);
text-align: right;
position: relative;
z-index: 1;
}
.csfloat-book-row > .csfloat-book-row-tot {
color: var(--ink-4);
text-align: right;
position: relative;
z-index: 1;
}
.csfloat-book-row:hover { background: var(--bg-2); }
.csfloat-book-spread {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-book-spread-label {
font-family: var(--ui);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
font-weight: 600;
}
.csfloat-book-spread-value {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: market price tag block — for item title/header area */
.csfloat-price-tag {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-price-tag-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-price-tag-amt {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
display: inline-flex;
align-items: baseline;
}
.csfloat-price-tag-amt::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-price-tag-amt > .csfloat-price-tag-amt-decimal {
font-size: 12px;
color: var(--ink-3);
margin-left: 1px;
font-weight: 500;
}
.csfloat-price-tag-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-price-tag-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-price-tag-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-price-tag.is-large {
padding: 14px 18px;
}
.csfloat-price-tag.is-large .csfloat-price-tag-amt { font-size: 22px; }
.csfloat-price-tag.is-cta {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
}
/* END order book + market price tag */
/* CSFloat-1:1: floating receipt confirmation card after action */
.csfloat-confirmation {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
padding: 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
max-width: 420px;
margin: 0 auto;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.csfloat-confirmation-icon {
width: 56px;
height: 56px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.14);
border: 1px solid rgba(52, 211, 153, 0.35);
color: oklch(0.78 0.16 152);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-confirmation-icon::after {
content: '';
width: 18px;
height: 10px;
border: 2.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-2px);
}
.csfloat-confirmation.is-pending .csfloat-confirmation-icon {
background: rgba(251, 191, 36, 0.14);
border-color: rgba(251, 191, 36, 0.35);
color: oklch(0.84 0.16 80);
}
.csfloat-confirmation.is-pending .csfloat-confirmation-icon::after {
width: 14px;
height: 14px;
border: 2.5px solid currentColor;
border-radius: 999px;
border-top-color: transparent;
transform: rotate(0);
animation: csfloat-spin 700ms linear infinite;
}
.csfloat-confirmation.is-error .csfloat-confirmation-icon {
background: rgba(248, 113, 113, 0.14);
border-color: rgba(248, 113, 113, 0.35);
color: oklch(0.72 0.18 30);
}
.csfloat-confirmation.is-error .csfloat-confirmation-icon::after {
content: '!';
font: 700 28px/1 var(--ui);
border: 0;
width: auto;
height: auto;
transform: none;
}
.csfloat-confirmation-title {
font: 600 20px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-confirmation-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 320px;
}
.csfloat-confirmation-detail {
width: 100%;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.csfloat-confirmation-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-confirmation-detail-row > .csfloat-confirmation-detail-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-confirmation-detail-row.is-emphasis {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
padding-top: 8px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.csfloat-confirmation-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
/* CSFloat-1:1: deposit / withdraw amount input — large input with currency picker */
.csfloat-amount {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-amount-input {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 18px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-amount-input:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-amount-prefix {
font: 600 24px/1 var(--mono);
color: var(--ink-3);
letter-spacing: -0.02em;
font-feature-settings: "tnum";
}
.csfloat-amount-input > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 700 32px/1 var(--mono);
color: var(--ink-1);
letter-spacing: -0.03em;
font-feature-settings: "tnum";
width: 100%;
min-width: 0;
}
.csfloat-amount-input > input::placeholder { color: var(--ink-3); }
.csfloat-amount-currency {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 10px;
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: 0.04em;
cursor: pointer;
flex: 0 0 auto;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-amount-currency:hover { background: var(--bg-2); }
.csfloat-amount-currency-chev {
width: 5px;
height: 5px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
}
.csfloat-amount-helpers {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.csfloat-amount-helper {
height: 26px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1 var(--mono);
color: var(--ink-2);
cursor: pointer;
font-feature-settings: "tnum";
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-amount-helper:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-amount-helper.is-on {
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
border-color: var(--cta);
}
.csfloat-amount-balance {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 12px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-amount-balance-val {
font: 500 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-amount-eqv {
font: 400 12px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
padding-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.csfloat-amount-eqv::before {
content: '≈';
font-family: var(--ui);
font-size: 14px;
}
@media (max-width: 540px) {
.csfloat-amount-input { padding: 12px 14px; }
.csfloat-amount-input > input { font-size: 22px; }
.csfloat-amount-prefix { font-size: 18px; }
}
/* END confirmation card + amount input */
/* CSFloat-1:1: addr / wallet display block — for crypto deposits */
.csfloat-addr {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-addr-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-addr-value {
font: 500 13px/1.4 var(--mono);
color: var(--ink-1);
word-break: break-all;
letter-spacing: 0;
font-feature-settings: "tnum";
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
user-select: all;
position: relative;
}
.csfloat-addr-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.csfloat-addr-action {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-addr-action:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-addr-action.is-success {
color: oklch(0.78 0.16 152);
border-color: rgba(52, 211, 153, 0.35);
}
.csfloat-addr-qr {
align-self: center;
width: 160px;
height: 160px;
background: #fff;
border: 8px solid #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin: 4px auto 0;
}
.csfloat-addr-qr > img,
.csfloat-addr-qr > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-addr-network {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-3);
}
.csfloat-addr-network::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
.csfloat-addr-warning {
font: 400 11px/1.5 var(--ui);
color: oklch(0.84 0.16 80);
letter-spacing: -0.005em;
background: rgba(251, 191, 36, 0.06);
border: 1px solid rgba(251, 191, 36, 0.25);
border-radius: 6px;
padding: 8px 10px;
display: flex;
align-items: flex-start;
gap: 6px;
}
.csfloat-addr-warning::before {
content: '!';
flex: 0 0 14px;
width: 14px;
height: 14px;
background: oklch(0.66 0.18 80);
color: var(--bg);
border-radius: 999px;
font: 700 10px/14px var(--ui);
text-align: center;
}
/* CSFloat-1:1: deposit history row */
.csfloat-tx-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tx-row:hover { background: var(--bg-2); }
.csfloat-tx-row:last-child { border-bottom: 0; }
.csfloat-tx-icon {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
color: var(--ink-3);
font-size: 12px;
}
.csfloat-tx-icon.is-deposit {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.35);
color: oklch(0.78 0.16 152);
}
.csfloat-tx-icon.is-withdraw {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.35);
color: oklch(0.72 0.18 30);
}
.csfloat-tx-icon.is-purchase {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.35);
color: var(--cta);
}
.csfloat-tx-icon.is-sale {
background: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.35);
color: oklch(0.84 0.18 290);
}
.csfloat-tx-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-tx-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-tx-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-tx-meta-id {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-tx-meta-time {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-tx-amount {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
text-align: right;
}
.csfloat-tx-amount.is-up {
color: oklch(0.78 0.16 152);
}
.csfloat-tx-amount.is-up::before { content: '+'; margin-right: 1px; }
.csfloat-tx-amount.is-down {
color: oklch(0.72 0.18 30);
}
.csfloat-tx-amount.is-down::before { content: '−'; margin-right: 1px; }
.csfloat-tx-status {
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-tx-row {
grid-template-columns: 24px 1fr auto;
gap: 8px;
padding: 10px 12px;
}
.csfloat-tx-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.csfloat-tx-status { display: none; }
}
/* END addr block + tx row */
/* CSFloat-1:1: search filter checkbox column — multi-select inside a filter group */
.csfloat-check-list {
display: flex;
flex-direction: column;
gap: 0;
max-height: 240px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.csfloat-check-list::-webkit-scrollbar { width: 4px; }
.csfloat-check-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.csfloat-check {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
cursor: pointer;
user-select: none;
font: 400 13px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-check > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.csfloat-check-mark {
width: 14px;
height: 14px;
border-radius: 3px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
flex: 0 0 14px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-check > input:checked ~ .csfloat-check-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-check > input:checked ~ .csfloat-check-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
}
.csfloat-check > input:focus-visible ~ .csfloat-check-mark {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.csfloat-check > input:disabled ~ .csfloat-check-mark {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-check:hover .csfloat-check-mark {
border-color: var(--ink-3);
}
.csfloat-check > input:checked ~ .csfloat-check-mark:hover {
border-color: var(--cta);
}
.csfloat-check > input:indeterminate ~ .csfloat-check-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-check > input:indeterminate ~ .csfloat-check-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 1.5px;
background: #fff;
transform: translate(-50%, -50%);
border: 0;
}
.csfloat-check-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-check-label > .csfloat-check-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
border-radius: 3px;
background: var(--bg-2);
}
.csfloat-check-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
flex: 0 0 auto;
}
.csfloat-check:hover .csfloat-check-count { color: var(--ink-2); }
.csfloat-check.is-on .csfloat-check-label,
.csfloat-check > input:checked ~ .csfloat-check-label { color: var(--ink-1); }
/* CSFloat-1:1: collapsible accordion item */
.csfloat-acc {
border-bottom: 1px solid var(--line);
}
.csfloat-acc:first-child { border-top: 1px solid var(--line); }
.csfloat-acc-head {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font: 600 14px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-acc-head:hover { color: var(--cta); }
.csfloat-acc-head-label {
flex: 1 1 auto;
}
.csfloat-acc-head-meta {
font: 400 12px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-acc-head-chev {
width: 9px;
height: 9px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex: 0 0 auto;
}
.csfloat-acc.is-open .csfloat-acc-head-chev { transform: rotate(225deg) translate(-1px, -1px); }
.csfloat-acc-body {
max-height: 0;
overflow: hidden;
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
padding: 0 0 0 0;
}
.csfloat-acc.is-open .csfloat-acc-body {
max-height: 600px;
padding: 0 0 18px 0;
}
.csfloat-acc-body > p { margin: 0 0 8px; }
.csfloat-acc-body > p:last-child { margin: 0; }
.csfloat-acc.is-open .csfloat-acc-head { color: var(--cta); }
/* CSFloat-1:1: simple FAQ list (lightweight accordion) */
.csfloat-faq {
display: flex;
flex-direction: column;
}
.csfloat-faq-block {
margin-bottom: 24px;
}
.csfloat-faq-block-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 8px;
}
/* END check list + accordion + faq */
/* CSFloat-1:1: notification banner — inline alert variants for success/info/warning/danger */
.csfloat-banner {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
position: relative;
}
.csfloat-banner.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.9 0.12 152);
}
.csfloat-banner.is-info {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
color: oklch(0.9 0.1 240);
}
.csfloat-banner.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.92 0.1 80);
}
.csfloat-banner.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.92 0.1 30);
}
.csfloat-banner-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font: 700 11px/1 var(--ui);
}
.csfloat-banner.is-success .csfloat-banner-icon {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-banner.is-info .csfloat-banner-icon {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
}
.csfloat-banner.is-warning .csfloat-banner-icon {
background: rgba(251, 191, 36, 0.18);
color: oklch(0.84 0.16 80);
}
.csfloat-banner.is-danger .csfloat-banner-icon {
background: rgba(248, 113, 113, 0.18);
color: oklch(0.72 0.18 30);
}
.csfloat-banner-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-banner-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-banner.is-success .csfloat-banner-title { color: oklch(0.9 0.14 152); }
.csfloat-banner.is-info .csfloat-banner-title { color: oklch(0.9 0.12 240); }
.csfloat-banner.is-warning .csfloat-banner-title { color: oklch(0.94 0.12 80); }
.csfloat-banner.is-danger .csfloat-banner-title { color: oklch(0.94 0.12 30); }
.csfloat-banner-msg {
margin: 0;
}
.csfloat-banner-actions {
margin-top: 6px;
display: flex;
gap: 6px;
}
.csfloat-banner-close {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: currentColor;
opacity: 0.6;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1;
flex: 0 0 18px;
}
.csfloat-banner-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.06);
}
.csfloat-banner.is-toast {
border-radius: 999px;
padding: 6px 12px 6px 8px;
font-size: 12px;
}
.csfloat-banner.is-toast .csfloat-banner-icon { width: 14px; height: 14px; flex: 0 0 14px; }
/* CSFloat-1:1: subtle hint text — for inline tips and instructions */
.csfloat-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-hint::before {
content: '';
width: 12px;
height: 12px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--bg-2);
background-image: linear-gradient(180deg, transparent 50%, var(--ink-4) 50%, var(--ink-4) 60%, transparent 60%);
flex: 0 0 12px;
}
.csfloat-hint.is-success { color: oklch(0.78 0.16 152); }
.csfloat-hint.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-hint.is-error { color: oklch(0.72 0.18 30); }
.csfloat-hint.is-cta { color: var(--cta); }
.csfloat-hint.is-block {
display: flex;
padding: 6px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
align-items: flex-start;
}
/* END notification banner + hint text */
/* CSFloat-1:1: form section — group of fields with header description */
.csfloat-form-section {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-form-section:first-child { padding-top: 0; }
.csfloat-form-section:last-child { border-bottom: 0; padding-bottom: 0; }
.csfloat-form-section-head {
position: sticky;
top: 96px;
align-self: start;
}
.csfloat-form-section-head-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0 0 4px;
}
.csfloat-form-section-head-desc {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-form-section-body {
display: flex;
flex-direction: column;
gap: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 20px;
}
.csfloat-form-section-body.is-no-card {
background: transparent;
border: 0;
padding: 0;
}
@media (max-width: 1100px) {
.csfloat-form-section {
grid-template-columns: 1fr;
gap: 14px;
}
.csfloat-form-section-head { position: static; }
}
/* CSFloat-1:1: list-row two-line component — common in dropdown/list views */
.csfloat-list-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
padding: 10px 12px;
align-items: center;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-list-row:last-child { border-bottom: 0; }
.csfloat-list-row:hover { background: var(--bg-2); }
.csfloat-list-row-leading {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.csfloat-list-row-leading > .csfloat-list-row-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-list-row-leading > .csfloat-list-row-avatar {
width: 28px;
height: 28px;
border-radius: 999px;
flex: 0 0 28px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-list-row-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-list-row-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-list-row-sub {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-list-row-trailing {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-list-row-trailing-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
/* END form section + list row */
/* CSFloat-1:1: filter dropdown popover — appears under filter pill in mobile */
.csfloat-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 240px;
max-width: 320px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
z-index: 100;
display: none;
flex-direction: column;
gap: 12px;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pop.is-open { display: flex; }
.csfloat-pop.is-right { left: auto; right: 0; }
.csfloat-pop.is-wide { min-width: 320px; max-width: 480px; }
.csfloat-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-pop-head-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-pop-head-clear {
font: 500 11px/1 var(--ui);
color: var(--cta);
background: transparent;
border: 0;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
}
.csfloat-pop-head-clear:hover { background: rgba(59, 130, 246, 0.08); }
.csfloat-pop-body {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
}
.csfloat-pop-foot {
display: flex;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-pop-foot > button { flex: 1 1 auto; }
/* CSFloat-1:1: combo chip (key=value), used in filter bars */
.csfloat-combo-chip {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-combo-chip > .csfloat-combo-chip-key {
padding: 6px 8px;
background: var(--bg-3);
color: var(--ink-3);
border-right: 1px solid var(--line);
font-weight: 500;
display: inline-flex;
align-items: center;
}
.csfloat-combo-chip > .csfloat-combo-chip-val {
padding: 6px 10px;
color: var(--ink-1);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-combo-chip > .csfloat-combo-chip-val .csfloat-combo-chip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-combo-chip > .csfloat-combo-chip-x {
width: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font: 500 11px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--line);
transition: all 120ms ease;
}
.csfloat-combo-chip > .csfloat-combo-chip-x:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-combo-chip.is-cta {
border-color: rgba(59, 130, 246, 0.3);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-combo-chip.is-cta > .csfloat-combo-chip-key {
background: rgba(59, 130, 246, 0.08);
color: rgba(125, 184, 248, 0.8);
}
.csfloat-combo-chip.is-cta > .csfloat-combo-chip-val { color: var(--cta); }
.csfloat-combo-chip.is-success {
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-combo-chip.is-success > .csfloat-combo-chip-val { color: oklch(0.78 0.16 152); }
.csfloat-combo-chip.is-warning {
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-combo-chip.is-warning > .csfloat-combo-chip-val { color: oklch(0.84 0.16 80); }
.csfloat-combo-chip.is-danger {
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-combo-chip.is-danger > .csfloat-combo-chip-val { color: oklch(0.72 0.18 30); }
/* END filter popover + combo chip */
/* CSFloat-1:1: notification settings card — granular toggle list */
.csfloat-notif-settings {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-notif-settings-head {
display: grid;
grid-template-columns: 1fr 60px 60px 60px;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-notif-settings-head > .csfloat-notif-settings-head-channel {
text-align: center;
}
.csfloat-notif-settings-row {
display: grid;
grid-template-columns: 1fr 60px 60px 60px;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
align-items: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-notif-settings-row:last-child { border-bottom: 0; }
.csfloat-notif-settings-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-notif-settings-row-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-notif-settings-row-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
}
.csfloat-notif-settings-row-cell {
display: flex;
justify-content: center;
}
@media (max-width: 720px) {
.csfloat-notif-settings-head { grid-template-columns: 1fr 40px 40px 40px; gap: 6px; padding: 8px 12px; font-size: 9px; }
.csfloat-notif-settings-row { grid-template-columns: 1fr 40px 40px 40px; gap: 6px; padding: 10px 12px; font-size: 12px; }
.csfloat-notif-settings-row-desc { display: none; }
}
/* CSFloat-1:1: notification preference channel icon (inline header label) */
.csfloat-notif-channel {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-notif-channel-icon {
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--bg-3);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 11px;
}
/* CSFloat-1:1: notification settings layout helper */
.csfloat-notif-settings-section {
margin-bottom: 24px;
}
.csfloat-notif-settings-section:last-child { margin-bottom: 0; }
.csfloat-notif-settings-section-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 8px;
}
/* END notification settings card */
/* CSFloat-1:1: search saved row — saved searches/alerts list item */
.csfloat-saved {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-saved:hover { border-color: var(--line-2); }
.csfloat-saved-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-saved-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-saved-name > .csfloat-saved-name-icon {
width: 12px;
height: 12px;
color: var(--cta);
}
.csfloat-saved-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-saved-counter {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-2);
font: 600 10px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-saved-counter.is-new {
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-saved-counter::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
.csfloat-saved-actions {
display: flex;
gap: 4px;
}
.csfloat-saved-action {
width: 28px;
height: 28px;
border-radius: 6px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
}
.csfloat-saved-action:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-saved-action.is-danger:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
/* CSFloat-1:1: alert frequency picker (instant / hourly / daily) */
.csfloat-freq-picker {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
}
.csfloat-freq-picker > .csfloat-freq-opt {
height: 26px;
padding: 0 12px;
background: transparent;
border: 0;
border-radius: 4px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-freq-picker > .csfloat-freq-opt:hover { color: var(--ink-1); }
.csfloat-freq-picker > .csfloat-freq-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csfloat-freq-picker > .csfloat-freq-opt.is-active.is-cta {
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
box-shadow: 0 0 0 1px var(--cta);
}
.csfloat-freq-picker > .csfloat-freq-opt::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
opacity: 0.5;
}
.csfloat-freq-picker > .csfloat-freq-opt.is-active::before {
opacity: 1;
}
/* CSFloat-1:1: full-bleed page section spacer */
.csfloat-spacer {
width: 100%;
height: 24px;
}
.csfloat-spacer.is-sm { height: 12px; }
.csfloat-spacer.is-md { height: 24px; }
.csfloat-spacer.is-lg { height: 40px; }
.csfloat-spacer.is-xl { height: 64px; }
.csfloat-spacer.is-line {
border-bottom: 1px solid var(--line);
height: 0;
margin: 24px 0;
}
.csfloat-spacer.is-page-divider {
border-bottom: 1px solid var(--line);
height: 0;
margin: 48px 0;
}
.csfloat-spacer.is-flex { flex: 1 1 auto; }
/* END saved searches + alert freq + spacer */
/* CSFloat-1:1: trade history row block — for completed trades with both items */
.csfloat-trade-row {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-trade-row:hover { border-color: var(--line-2); }
.csfloat-trade-row-direction {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--bg-2);
color: var(--ink-3);
font: 700 12px/1 var(--ui);
}
.csfloat-trade-row-direction.is-buy {
background: rgba(52, 211, 153, 0.12);
color: oklch(0.78 0.16 152);
}
.csfloat-trade-row-direction.is-sell {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
.csfloat-trade-row-item {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: center;
min-width: 0;
}
.csfloat-trade-row-item-img {
width: 36px;
height: 36px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 4px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-trade-row-item-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-trade-row-item-img-rare {
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
height: 2px;
border-radius: 0 0 6px 6px;
background: var(--ink-3);
}
.csfloat-trade-row-item-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-row-item-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-trade-row-item-price {
font: 600 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-trade-row-item-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
}
.csfloat-trade-row-arrow {
color: var(--ink-4);
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
}
.csfloat-trade-row-arrow::before {
content: '';
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, 1px);
}
.csfloat-trade-row-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.csfloat-trade-row-status {
flex: 0 0 auto;
}
.csfloat-trade-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.csfloat-trade-row {
grid-template-columns: auto 1fr;
gap: 8px;
}
.csfloat-trade-row-arrow,
.csfloat-trade-row-item:nth-child(4) {
display: none;
}
.csfloat-trade-row-meta { grid-column: span 2; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}
/* CSFloat-1:1: tab badge — small numerical or status indicator on tabs */
.csfloat-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
margin-left: 6px;
border-radius: 999px;
background: var(--bg-3);
color: var(--ink-3);
font: 600 9px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-tab-badge.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-tab-badge.is-success {
background: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-tab-badge.is-danger {
background: oklch(0.66 0.18 30);
color: #fff;
}
.csfloat-tab-badge.is-warning {
background: oklch(0.78 0.16 80);
color: var(--bg);
}
.csfloat-tab-badge.is-dot {
width: 6px;
height: 6px;
min-width: 6px;
padding: 0;
font-size: 0;
}
/* END trade history row + tab badge */
/* CSFloat-1:1: split layout — main content + right rail (item detail page) */
.csfloat-split-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: start;
}
.csfloat-split-layout.is-narrow-rail { grid-template-columns: 1fr 280px; }
.csfloat-split-layout.is-wide-rail { grid-template-columns: 1fr 420px; }
@media (max-width: 1100px) {
.csfloat-split-layout, .csfloat-split-layout.is-narrow-rail, .csfloat-split-layout.is-wide-rail {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* CSFloat-1:1: similar items strip — horizontal scroll of mini cards under item detail */
.csfloat-similar {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-similar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-similar-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-similar-strip {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 12px;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
}
.csfloat-similar-strip::-webkit-scrollbar { height: 4px; }
.csfloat-similar-strip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.csfloat-similar-card {
flex: 0 0 160px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-similar-card:hover {
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-similar-card-img {
aspect-ratio: 1.45;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.csfloat-similar-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.csfloat-similar-card-body {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-similar-card-name {
font: 500 11px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
.csfloat-similar-card-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px;
}
.csfloat-similar-card-price {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-similar-card-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-similar-card-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* END split layout + similar items strip */
/* CSFloat-1:1: detail attribute grid — used in item-detail right rail for specs */
.csfloat-attrs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.csfloat-attrs > .csfloat-attr {
background: var(--bg-1);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-attr-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-attr-value {
font: 600 12px/1.3 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-attr-value.is-ui {
font-family: var(--ui);
font-weight: 500;
letter-spacing: -0.005em;
}
.csfloat-attr.is-full {
grid-column: 1 / -1;
}
.csfloat-attr-value-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 4px;
font: 500 10px/1 var(--ui);
color: var(--ink-3);
background: var(--bg-2);
padding: 1px 5px;
border-radius: 3px;
}
.csfloat-attrs.is-3col {
grid-template-columns: repeat(3, 1fr);
}
.csfloat-attrs.is-4col {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 540px) {
.csfloat-attrs, .csfloat-attrs.is-3col, .csfloat-attrs.is-4col {
grid-template-columns: 1fr;
}
}
/* CSFloat-1:1: pricing recommendation hint — shows up below price input */
.csfloat-price-suggest {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-price-suggest-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-price-suggest-label {
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-price-suggest-value {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
cursor: pointer;
transition: color 120ms ease;
}
.csfloat-price-suggest-value::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-price-suggest-value:hover { color: var(--cta); }
.csfloat-price-suggest-bar {
position: relative;
height: 4px;
background: linear-gradient(90deg,
oklch(0.62 0.16 152) 0%,
oklch(0.78 0.16 152) 30%,
oklch(0.78 0.16 80) 60%,
oklch(0.66 0.18 30) 100%);
border-radius: 999px;
margin-top: 2px;
}
.csfloat-price-suggest-marker {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--ink-1);
box-shadow: 0 0 0 1px var(--bg);
}
.csfloat-price-suggest-bounds {
display: flex;
justify-content: space-between;
margin-top: 2px;
font: 400 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-price-suggest.is-recommended {
background: rgba(59, 130, 246, 0.04);
border-color: rgba(59, 130, 246, 0.25);
}
.csfloat-price-suggest.is-warning {
background: rgba(251, 191, 36, 0.04);
border-color: rgba(251, 191, 36, 0.25);
}
.csfloat-price-suggest.is-warning .csfloat-price-suggest-value { color: oklch(0.84 0.16 80); }
.csfloat-price-suggest.is-danger {
background: rgba(248, 113, 113, 0.04);
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-price-suggest.is-danger .csfloat-price-suggest-value { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: simple key-value table */
.csfloat-kv {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-kv-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-kv-row:last-child { border-bottom: 0; }
.csfloat-kv-row > .csfloat-kv-key {
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-kv-row > .csfloat-kv-val {
font: 500 12px/1.3 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
}
.csfloat-kv-row > .csfloat-kv-val.is-ui {
font-family: var(--ui);
font-weight: 500;
}
.csfloat-kv-row > .csfloat-kv-val.is-success { color: oklch(0.78 0.16 152); }
.csfloat-kv-row > .csfloat-kv-val.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-kv-row > .csfloat-kv-val.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-kv-row > .csfloat-kv-val.is-muted { color: var(--ink-4); }
.csfloat-kv.is-tight .csfloat-kv-row { padding: 5px 0; }
.csfloat-kv.is-loose .csfloat-kv-row { padding: 12px 0; }
/* END detail attrs + price suggestion + key-value */
/* CSFloat-1:1: small inline metric — for header level stats next to titles */
.csfloat-inline-metric {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 0 0 0 0;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-inline-metric > .csfloat-inline-metric-val {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-inline-metric > .csfloat-inline-metric-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-inline-metric > .csfloat-inline-metric-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-inline-metric > .csfloat-inline-metric-val.is-cta { color: var(--cta); }
.csfloat-inline-metric > .csfloat-inline-metric-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-inline-metric > .csfloat-inline-metric-arrow {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-inline-metric.is-up > .csfloat-inline-metric-arrow {
border-bottom: 4px solid oklch(0.78 0.16 152);
}
.csfloat-inline-metric.is-down > .csfloat-inline-metric-arrow {
border-top: 4px solid oklch(0.72 0.18 30);
}
.csfloat-inline-metric-divider {
display: inline-block;
width: 1px;
height: 12px;
background: var(--line);
margin: 0 6px;
vertical-align: middle;
}
/* CSFloat-1:1: identicon avatar block — for Steam ID display, generic users */
.csfloat-identicon {
width: 36px;
height: 36px;
border-radius: 999px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 600 13px/1 var(--mono);
color: var(--ink-2);
letter-spacing: -0.01em;
font-feature-settings: "tnum";
flex: 0 0 36px;
position: relative;
overflow: hidden;
}
.csfloat-identicon.is-sm { width: 24px; height: 24px; flex: 0 0 24px; font-size: 10px; }
.csfloat-identicon.is-lg { width: 56px; height: 56px; flex: 0 0 56px; font-size: 18px; }
.csfloat-identicon.is-xl { width: 80px; height: 80px; flex: 0 0 80px; font-size: 28px; }
.csfloat-identicon.is-square { border-radius: 6px; }
.csfloat-identicon.is-color-1 { background: linear-gradient(135deg, oklch(0.42 0.14 240), oklch(0.52 0.18 240)); color: oklch(0.92 0.08 240); }
.csfloat-identicon.is-color-2 { background: linear-gradient(135deg, oklch(0.42 0.18 290), oklch(0.52 0.18 290)); color: oklch(0.92 0.08 290); }
.csfloat-identicon.is-color-3 { background: linear-gradient(135deg, oklch(0.42 0.16 152), oklch(0.52 0.16 152)); color: oklch(0.92 0.1 152); }
.csfloat-identicon.is-color-4 { background: linear-gradient(135deg, oklch(0.5 0.18 60), oklch(0.6 0.16 60)); color: oklch(0.92 0.06 60); }
.csfloat-identicon.is-color-5 { background: linear-gradient(135deg, oklch(0.45 0.18 30), oklch(0.55 0.18 30)); color: oklch(0.92 0.1 30); }
.csfloat-identicon.is-color-6 { background: linear-gradient(135deg, oklch(0.42 0.27 330), oklch(0.55 0.18 330)); color: oklch(0.92 0.1 330); }
/* CSFloat-1:1: profile head card — used at top of profile pages */
.csfloat-profile-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 20px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-profile-head-avatar {
flex: 0 0 auto;
}
.csfloat-profile-head-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-profile-head-name {
font: 600 18px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-profile-head-name > .csfloat-profile-head-name-verified {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/1 var(--ui);
}
.csfloat-profile-head-name > .csfloat-profile-head-name-verified::after {
content: '';
width: 5px;
height: 3px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translate(0, -1px);
}
.csfloat-profile-head-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-profile-head-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-profile-head-meta-item > .csfloat-profile-head-meta-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-profile-head-meta-divider {
width: 1px;
height: 10px;
background: var(--line);
}
.csfloat-profile-head-stats {
display: flex;
gap: 24px;
flex: 0 0 auto;
}
.csfloat-profile-head-stat {
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
}
.csfloat-profile-head-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-profile-head-stat-value {
font: 600 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
@media (max-width: 720px) {
.csfloat-profile-head {
grid-template-columns: auto 1fr;
gap: 14px;
}
.csfloat-profile-head-stats {
grid-column: span 2;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--line);
}
}
/* END inline metric + identicon + profile head */
/* CSFloat-1:1: storefront banner — hero strip on a seller's storefront */
.csfloat-store-banner {
position: relative;
height: 220px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
}
.csfloat-store-banner-cover {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(12px) saturate(120%);
opacity: 0.5;
}
.csfloat-store-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(7, 11, 24, 0.85) 100%);
pointer-events: none;
}
.csfloat-store-banner-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 18px 24px;
display: flex;
align-items: flex-end;
gap: 16px;
z-index: 1;
}
.csfloat-store-banner-avatar {
width: 64px;
height: 64px;
border-radius: 12px;
background: var(--bg);
border: 2px solid var(--bg);
flex: 0 0 64px;
object-fit: cover;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.csfloat-store-banner-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-store-banner-name {
font: 700 22px/1.2 var(--ui);
letter-spacing: -0.025em;
color: #fff;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-store-banner-tagline {
font: 400 12px/1.4 var(--ui);
color: rgba(255, 255, 255, 0.7);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-store-banner-stats {
display: flex;
gap: 16px;
align-items: flex-end;
}
.csfloat-store-banner-stat {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
}
.csfloat-store-banner-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.csfloat-store-banner-stat-value {
font: 600 18px/1 var(--mono);
color: #fff;
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
@media (max-width: 720px) {
.csfloat-store-banner { height: 180px; }
.csfloat-store-banner-content { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
.csfloat-store-banner-avatar { width: 48px; height: 48px; flex: 0 0 48px; }
.csfloat-store-banner-name { font-size: 18px; }
.csfloat-store-banner-stats { width: 100%; justify-content: space-between; }
.csfloat-store-banner-stat { text-align: left; }
}
/* CSFloat-1:1: report / flag form modal */
.csfloat-report {
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-report-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-report-option {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-report-option:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-report-option.is-selected {
background: rgba(248, 113, 113, 0.04);
border-color: rgba(248, 113, 113, 0.4);
}
.csfloat-report-option > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.csfloat-report-option-radio {
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
margin-top: 2px;
flex: 0 0 16px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-report-option.is-selected .csfloat-report-option-radio {
background: oklch(0.66 0.18 30);
border-color: oklch(0.66 0.18 30);
}
.csfloat-report-option.is-selected .csfloat-report-option-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
background: #fff;
transform: translate(-50%, -50%);
}
.csfloat-report-option-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-report-option-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-report-option-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-report-textarea {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
width: 100%;
min-height: 100px;
resize: vertical;
font: 400 13px/1.5 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-report-textarea::placeholder { color: var(--ink-3); }
.csfloat-report-textarea:focus {
outline: none;
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-report-foot {
display: flex;
justify-content: flex-end;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
/* END store banner + report form */
/* CSFloat-1:1: status snapshot bar — for site/api status displays */
.csfloat-status-snap {
display: flex;
align-items: stretch;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
width: 100%;
}
.csfloat-status-snap > .csfloat-status-snap-cell {
flex: 1 1 0;
background: var(--bg-1);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-status-snap-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-status-snap-cell-value {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-status-snap-cell-value::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px currentColor;
}
.csfloat-status-snap-cell.is-degraded .csfloat-status-snap-cell-value { color: oklch(0.84 0.16 80); }
.csfloat-status-snap-cell.is-degraded .csfloat-status-snap-cell-value::before { background: oklch(0.78 0.16 80); }
.csfloat-status-snap-cell.is-down .csfloat-status-snap-cell-value { color: oklch(0.78 0.18 30); }
.csfloat-status-snap-cell.is-down .csfloat-status-snap-cell-value::before { background: oklch(0.66 0.18 30); }
.csfloat-status-snap-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: uptime histogram bar — used in status pages */
.csfloat-uptime-bar {
display: flex;
align-items: stretch;
gap: 2px;
height: 28px;
}
.csfloat-uptime-bar > .csfloat-uptime-bar-segment {
flex: 1 1 0;
background: oklch(0.62 0.16 152);
border-radius: 2px;
min-width: 2px;
cursor: help;
transition: opacity 100ms ease;
}
.csfloat-uptime-bar > .csfloat-uptime-bar-segment:hover {
opacity: 0.65;
}
.csfloat-uptime-bar > .csfloat-uptime-bar-segment.is-degraded { background: oklch(0.78 0.16 80); }
.csfloat-uptime-bar > .csfloat-uptime-bar-segment.is-down { background: oklch(0.66 0.18 30); }
.csfloat-uptime-bar > .csfloat-uptime-bar-segment.is-empty {
background: transparent;
border: 1px dashed var(--line);
}
.csfloat-uptime-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: changelog entry block */
.csfloat-changelog-entry {
display: grid;
grid-template-columns: 84px 1fr;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-changelog-entry:last-child { border-bottom: 0; }
.csfloat-changelog-entry-meta {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.csfloat-changelog-entry-version {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 3px 8px;
border-radius: 4px;
}
.csfloat-changelog-entry-version.is-major {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-changelog-entry-date {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
padding: 0 4px;
}
.csfloat-changelog-entry-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.csfloat-changelog-entry-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-changelog-entry-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-changelog-entry-list-item {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
padding: 0;
}
.csfloat-changelog-entry-list-item-marker {
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-3);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 8px/1 var(--ui);
flex: 0 0 12px;
margin-top: 4px;
}
.csfloat-changelog-entry-list-item.is-new .csfloat-changelog-entry-list-item-marker {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-changelog-entry-list-item.is-new .csfloat-changelog-entry-list-item-marker::after { content: '+'; }
.csfloat-changelog-entry-list-item.is-fix .csfloat-changelog-entry-list-item-marker {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
}
.csfloat-changelog-entry-list-item.is-fix .csfloat-changelog-entry-list-item-marker::after { content: '✓'; font-size: 7px; }
.csfloat-changelog-entry-list-item.is-improve .csfloat-changelog-entry-list-item-marker {
background: rgba(167, 139, 250, 0.18);
color: oklch(0.84 0.18 290);
}
.csfloat-changelog-entry-list-item.is-improve .csfloat-changelog-entry-list-item-marker::after { content: '↑'; font-size: 8px; }
.csfloat-changelog-entry-list-item.is-remove .csfloat-changelog-entry-list-item-marker {
background: rgba(248, 113, 113, 0.18);
color: oklch(0.72 0.18 30);
}
.csfloat-changelog-entry-list-item.is-remove .csfloat-changelog-entry-list-item-marker::after { content: '−'; }
@media (max-width: 540px) {
.csfloat-changelog-entry { grid-template-columns: 1fr; }
.csfloat-changelog-entry-meta { flex-direction: row; align-items: center; gap: 8px; }
}
/* END status snap + uptime histogram + changelog */
/* CSFloat-1:1: balance / wallet display tile */
.csfloat-wallet-tile {
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.csfloat-wallet-tile::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
pointer-events: none;
}
.csfloat-wallet-tile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
z-index: 1;
}
.csfloat-wallet-tile-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-wallet-tile-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-wallet-tile-balance {
font: 700 36px/1 var(--mono);
letter-spacing: -0.03em;
color: var(--ink-1);
font-feature-settings: "tnum";
display: inline-flex;
align-items: baseline;
gap: 1px;
position: relative;
z-index: 1;
}
.csfloat-wallet-tile-balance::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
margin-right: 2px;
vertical-align: top;
font-weight: 500;
}
.csfloat-wallet-tile-balance-decimal {
font-size: 18px;
color: var(--ink-3);
font-weight: 500;
}
.csfloat-wallet-tile-meta {
display: flex;
flex-direction: column;
gap: 4px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
position: relative;
z-index: 1;
}
.csfloat-wallet-tile-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-wallet-tile-meta-row > .csfloat-wallet-tile-meta-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
.csfloat-wallet-tile-actions {
display: flex;
gap: 8px;
margin-top: 6px;
position: relative;
z-index: 1;
}
.csfloat-wallet-tile-actions > * { flex: 1 1 auto; }
/* CSFloat-1:1: deposit shortcut chip — for popular deposit amounts */
.csfloat-deposit-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-deposit-chips > .csfloat-deposit-chip {
height: 36px;
padding: 0 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-deposit-chips > .csfloat-deposit-chip:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-deposit-chips > .csfloat-deposit-chip.is-on {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-deposit-chips > .csfloat-deposit-chip::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
font-weight: 500;
}
.csfloat-deposit-chips > .csfloat-deposit-chip.is-on::before {
color: var(--cta);
}
.csfloat-deposit-chips > .csfloat-deposit-chip.is-custom {
font-family: var(--ui);
font-weight: 500;
font-size: 12px;
color: var(--ink-3);
}
.csfloat-deposit-chips > .csfloat-deposit-chip.is-custom::before { content: ''; }
.csfloat-deposit-chips > .csfloat-deposit-chip-fav {
position: relative;
}
.csfloat-deposit-chips > .csfloat-deposit-chip-fav::after {
content: '★';
position: absolute;
top: -3px;
right: 4px;
font-size: 10px;
color: oklch(0.84 0.18 60);
}
/* END wallet tile + deposit chip */
/* CSFloat-1:1: numeric stepper / quantity input */
.csfloat-stepper {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.csfloat-stepper-btn {
width: 28px;
height: 32px;
border: 0;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font: 600 14px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
}
.csfloat-stepper-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-stepper-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.csfloat-stepper-input {
width: 44px;
border: 0;
background: transparent;
text-align: center;
font: 500 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
}
.csfloat-stepper-input:focus { outline: none; background: var(--bg-1); }
.csfloat-stepper.is-sm { font-size: 11px; }
.csfloat-stepper.is-sm .csfloat-stepper-btn { width: 22px; height: 26px; font-size: 12px; }
.csfloat-stepper.is-sm .csfloat-stepper-input { width: 36px; font-size: 12px; }
.csfloat-stepper.is-lg .csfloat-stepper-btn { width: 36px; height: 40px; font-size: 15px; }
.csfloat-stepper.is-lg .csfloat-stepper-input { width: 56px; font-size: 15px; }
/* CSFloat-1:1: quantity row — stepper + price */
.csfloat-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-qty-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-qty-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-qty-row-price {
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-qty-row-action {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-qty-row-total {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
min-width: 60px;
text-align: right;
}
.csfloat-qty-row-total::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: subscriber/follower count widget */
.csfloat-follow-widget {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-follow-widget:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-follow-widget.is-following {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-follow-widget-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 10px;
}
.csfloat-follow-widget.is-following .csfloat-follow-widget-icon {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-follow-widget-count {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
color: var(--ink-1);
margin-left: 2px;
}
/* END stepper + qty row + follow widget */
/* CSFloat-1:1: review pull-quote bordered card */
.csfloat-pull-quote {
background: var(--bg-1);
border: 1px solid var(--line);
border-left: 3px solid var(--cta);
border-radius: 0 10px 10px 0;
padding: 18px 22px;
font: 400 14px/1.6 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
font-style: italic;
font-family: var(--serif);
position: relative;
}
.csfloat-pull-quote-cite {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font: 500 12px/1 var(--ui);
font-style: normal;
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-pull-quote-cite-name {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-pull-quote-cite-meta {
color: var(--ink-4);
font: 400 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-pull-quote.is-success { border-left-color: oklch(0.62 0.16 152); }
.csfloat-pull-quote.is-warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-pull-quote.is-danger { border-left-color: oklch(0.66 0.18 30); }
/* CSFloat-1:1: side-by-side comparison block — listing vs market */
.csfloat-vs {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: stretch;
padding: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-vs-side {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-vs-side.is-this { border-color: var(--cta); background: rgba(59, 130, 246, 0.04); }
.csfloat-vs-side-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-vs-side.is-this .csfloat-vs-side-label { color: var(--cta); }
.csfloat-vs-side-value {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-vs-side-value::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-vs-side-meta {
font: 400 10px/1.3 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-vs-divider {
display: flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-vs-divider::before {
content: 'vs';
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px 10px;
color: var(--ink-3);
}
@media (max-width: 540px) {
.csfloat-vs { grid-template-columns: 1fr; }
.csfloat-vs-divider {
flex-direction: row;
padding: 0;
}
}
/* CSFloat-1:1: snipe / alert subscription form */
.csfloat-snipe {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
}
.csfloat-snipe-head {
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-snipe-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
}
.csfloat-snipe-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-snipe-sub {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-snipe-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
@media (max-width: 540px) {
.csfloat-snipe-body { grid-template-columns: 1fr; }
}
.csfloat-snipe-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-snipe-foot-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-snipe-foot-meta > b { color: var(--ink-2); font-weight: 500; }
/* END pull quote + vs comparison + snipe form */
/* CSFloat-1:1: refund / dispute timeline */
.csfloat-dispute {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 18px;
}
.csfloat-dispute-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-dispute-id {
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-dispute-stage {
display: flex;
gap: 0;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
padding: 2px;
}
.csfloat-dispute-stage > .csfloat-dispute-stage-step {
flex: 1 1 0;
padding: 6px 8px;
text-align: center;
font: 500 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 6px;
}
.csfloat-dispute-stage > .csfloat-dispute-stage-step.is-done {
background: rgba(52, 211, 153, 0.12);
color: oklch(0.78 0.16 152);
}
.csfloat-dispute-stage > .csfloat-dispute-stage-step.is-active {
background: var(--cta);
color: #fff;
font-weight: 600;
}
.csfloat-dispute-msg {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
}
.csfloat-dispute-msg:last-child { border-bottom: 0; }
.csfloat-dispute-msg-avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 28px;
object-fit: cover;
}
.csfloat-dispute-msg-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-dispute-msg-head {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.csfloat-dispute-msg-author {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-dispute-msg-role {
font: 500 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-dispute-msg-role.is-staff {
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
}
.csfloat-dispute-msg-role.is-buyer {
background: rgba(52, 211, 153, 0.12);
color: oklch(0.78 0.16 152);
}
.csfloat-dispute-msg-role.is-seller {
background: rgba(167, 139, 250, 0.12);
color: oklch(0.84 0.18 290);
}
.csfloat-dispute-msg-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-left: auto;
}
.csfloat-dispute-msg-text {
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-dispute-msg-attach {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
text-decoration: none;
align-self: flex-start;
letter-spacing: -0.005em;
cursor: pointer;
}
.csfloat-dispute-msg-attach:hover { color: var(--ink-1); border-color: var(--line-2); }
.csfloat-dispute-foot {
display: flex;
gap: 6px;
align-items: stretch;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-dispute-foot > textarea {
flex: 1 1 auto;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 10px;
font: 400 13px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
resize: vertical;
min-height: 44px;
}
.csfloat-dispute-foot > textarea:focus {
outline: none;
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-dispute-foot-actions {
display: flex;
flex-direction: column;
gap: 4px;
flex: 0 0 auto;
}
/* CSFloat-1:1: KYC verification status block */
.csfloat-kyc {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-kyc-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
}
.csfloat-kyc.is-verified {
border-color: rgba(52, 211, 153, 0.3);
background: rgba(52, 211, 153, 0.04);
}
.csfloat-kyc.is-verified .csfloat-kyc-icon {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-kyc.is-pending {
border-color: rgba(251, 191, 36, 0.3);
background: rgba(251, 191, 36, 0.04);
}
.csfloat-kyc.is-pending .csfloat-kyc-icon {
background: rgba(251, 191, 36, 0.18);
color: oklch(0.84 0.16 80);
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-kyc.is-failed {
border-color: rgba(248, 113, 113, 0.3);
background: rgba(248, 113, 113, 0.04);
}
.csfloat-kyc.is-failed .csfloat-kyc-icon {
background: rgba(248, 113, 113, 0.18);
color: oklch(0.72 0.18 30);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-kyc-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-kyc-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-kyc-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-kyc-action { flex: 0 0 auto; }
/* END dispute timeline + KYC status */
/* CSFloat-1:1: ad placement / sponsored block — labeled clearly */
.csfloat-sponsored {
position: relative;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
overflow: hidden;
}
.csfloat-sponsored::before {
content: 'Sponsored';
position: absolute;
top: 6px;
right: 8px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-sponsored-img {
width: 56px;
height: 56px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
flex: 0 0 56px;
padding: 6px;
object-fit: contain;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-sponsored-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-sponsored-name {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-sponsored-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-sponsored-action { flex: 0 0 auto; }
/* CSFloat-1:1: tabbed accordion block — for FAQ/help pages */
.csfloat-tabs-acc {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
align-items: start;
}
.csfloat-tabs-acc-side {
display: flex;
flex-direction: column;
gap: 2px;
position: sticky;
top: 96px;
align-self: start;
}
.csfloat-tabs-acc-side-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tabs-acc-side-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-tabs-acc-side-link.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-tabs-acc-side-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-tabs-acc-content {
display: flex;
flex-direction: column;
gap: 0;
}
@media (max-width: 1100px) {
.csfloat-tabs-acc {
grid-template-columns: 1fr;
gap: 16px;
}
.csfloat-tabs-acc-side { position: static; flex-direction: row; flex-wrap: wrap; }
}
/* CSFloat-1:1: highlight callout block — info card with title + body + cta */
.csfloat-callout {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
}
.csfloat-callout.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, var(--bg-1) 60%);
border-color: rgba(59, 130, 246, 0.25);
}
.csfloat-callout.is-cta::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
pointer-events: none;
}
.csfloat-callout-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
align-self: flex-start;
}
.csfloat-callout.is-cta .csfloat-callout-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-callout-title {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
position: relative;
z-index: 1;
}
.csfloat-callout-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
position: relative;
z-index: 1;
max-width: 540px;
}
.csfloat-callout-actions {
display: flex;
gap: 8px;
margin-top: 4px;
position: relative;
z-index: 1;
}
.csfloat-callout-meta {
font: 500 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: -4px;
}
/* END sponsored + tabs accordion + callout */
/* CSFloat-1:1: comparison badge — for "verified", "trusted", "trader" labels */
.csfloat-cmp-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
color: var(--ink-2);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-cmp-badge.is-verified {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-cmp-badge.is-verified::before {
content: '';
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--cta);
position: relative;
}
.csfloat-cmp-badge.is-verified::after {
content: '';
position: absolute;
width: 4px;
height: 2px;
border: 1.5px solid #fff;
border-top: 0;
border-right: 0;
transform: translate(-12px, 1px) rotate(-45deg);
}
.csfloat-cmp-badge.is-trusted {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-cmp-badge.is-trader {
background: rgba(167, 139, 250, 0.1);
border-color: rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
}
.csfloat-cmp-badge.is-staff {
background: rgba(251, 146, 60, 0.1);
border-color: rgba(251, 146, 60, 0.3);
color: oklch(0.84 0.18 60);
}
.csfloat-cmp-badge.is-pro {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(59, 130, 246, 0.16));
border-color: rgba(167, 139, 250, 0.4);
color: oklch(0.92 0.1 270);
font-weight: 700;
}
.csfloat-cmp-badge.is-bot {
background: var(--bg-3);
color: var(--ink-3);
border-color: var(--line);
}
/* CSFloat-1:1: trust score gauge — animated semicircle */
.csfloat-trust-gauge {
position: relative;
width: 120px;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
.csfloat-trust-gauge > svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.csfloat-trust-gauge-track,
.csfloat-trust-gauge-fill {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.csfloat-trust-gauge-track {
stroke: var(--bg-3);
}
.csfloat-trust-gauge-fill {
stroke: var(--cta);
transition: stroke-dashoffset 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-trust-gauge.is-low .csfloat-trust-gauge-fill { stroke: oklch(0.66 0.18 30); }
.csfloat-trust-gauge.is-mid .csfloat-trust-gauge-fill { stroke: oklch(0.78 0.16 80); }
.csfloat-trust-gauge.is-high .csfloat-trust-gauge-fill { stroke: oklch(0.62 0.16 152); }
.csfloat-trust-gauge-value {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-trust-gauge-label {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trust-gauge.is-lg {
width: 180px;
height: 100px;
}
.csfloat-trust-gauge.is-lg .csfloat-trust-gauge-track,
.csfloat-trust-gauge.is-lg .csfloat-trust-gauge-fill { stroke-width: 10; }
.csfloat-trust-gauge.is-lg .csfloat-trust-gauge-value { font-size: 28px; }
/* CSFloat-1:1: kbd help block — list of keyboard shortcuts */
.csfloat-kbd-list {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-kbd-list-section {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
}
.csfloat-kbd-list-section:last-child { border-bottom: 0; }
.csfloat-kbd-list-section-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 10px;
}
.csfloat-kbd-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-kbd-list-row-action {
color: var(--ink-2);
}
.csfloat-kbd-list-row-keys {
flex: 0 0 auto;
}
/* END comparison badge + trust gauge + kbd list */
/* CSFloat-1:1: device session row — for active sessions list in security */
.csfloat-session {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-session:hover { border-color: var(--line-2); }
.csfloat-session-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
}
.csfloat-session.is-current .csfloat-session-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-session-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-session-device {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-session-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-session-meta-ip {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
color: var(--ink-3);
}
.csfloat-session-meta-loc {
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-session-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
.csfloat-session-action { flex: 0 0 auto; }
.csfloat-session-current-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
@media (max-width: 720px) {
.csfloat-session {
grid-template-columns: 32px 1fr auto;
gap: 10px;
}
.csfloat-session-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.csfloat-session-action { display: none; }
}
/* CSFloat-1:1: API integration card — for plugin/dev integration listings */
.csfloat-api-int {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-api-int:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-api-int-logo {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
flex: 0 0 44px;
overflow: hidden;
padding: 6px;
}
.csfloat-api-int-logo > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-api-int-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-api-int-name {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-api-int-version {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.02em;
}
.csfloat-api-int-desc {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-api-int-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.csfloat-api-int-action { flex: 0 0 auto; }
/* CSFloat-1:1: API key row — token row for active integrations */
.csfloat-api-key {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-api-key-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-api-key-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-api-key-token {
font: 500 12px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-api-key-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* END device session + api integration + api key */
/* CSFloat-1:1: support ticket card */
.csfloat-ticket {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-ticket:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-ticket-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.csfloat-ticket-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-ticket-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
width: 100%;
margin-top: 4px;
}
.csfloat-ticket-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
margin-top: 4px;
}
.csfloat-ticket-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-ticket-trail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex: 0 0 auto;
}
.csfloat-ticket-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
.csfloat-ticket-msg-count {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-ticket-msg-count.is-unread {
color: var(--cta);
font-weight: 600;
}
.csfloat-ticket-msg-count.is-unread::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cta);
}
.csfloat-ticket-priority {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-ticket-priority.is-low {
color: var(--ink-3);
background: var(--bg-2);
}
.csfloat-ticket-priority.is-normal {
color: var(--cta);
background: rgba(59, 130, 246, 0.1);
}
.csfloat-ticket-priority.is-high {
color: oklch(0.84 0.16 80);
background: rgba(251, 191, 36, 0.1);
}
.csfloat-ticket-priority.is-urgent {
color: oklch(0.78 0.18 30);
background: rgba(248, 113, 113, 0.1);
}
/* CSFloat-1:1: video / loading placeholder block */
.csfloat-placeholder {
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 24px;
color: var(--ink-4);
text-align: center;
position: relative;
overflow: hidden;
}
.csfloat-placeholder::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%),
linear-gradient(-45deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%);
background-size: 24px 24px;
opacity: 0.15;
pointer-events: none;
}
.csfloat-placeholder-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.csfloat-placeholder-msg {
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
position: relative;
z-index: 1;
margin: 0;
}
.csfloat-placeholder-sub {
font: 400 10px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
position: relative;
z-index: 1;
margin: 0;
}
.csfloat-placeholder.is-tall { min-height: 200px; }
.csfloat-placeholder.is-square { aspect-ratio: 1; }
.csfloat-placeholder.is-wide { aspect-ratio: 16/9; }
/* END support ticket + placeholder */
/* CSFloat-1:1: storefront filter strip — dense subnav for collections/sort */
.csfloat-store-strip {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
flex-wrap: wrap;
}
.csfloat-store-strip-group {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-store-strip-divider {
width: 1px;
height: 18px;
background: var(--line);
}
.csfloat-store-strip-link {
height: 28px;
padding: 0 10px;
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-store-strip-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-store-strip-link.is-active {
background: var(--bg-2);
color: var(--ink-1);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.csfloat-store-strip-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 4px;
}
.csfloat-store-strip-link.is-active .csfloat-store-strip-link-count { color: var(--ink-3); }
.csfloat-store-strip-spacer { flex: 1 1 auto; }
/* CSFloat-1:1: search history list — recent searches dropdown */
.csfloat-history {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-history-row {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-history-row:hover { background: var(--bg-2); }
.csfloat-history-row-icon {
width: 14px;
height: 14px;
color: var(--ink-4);
flex: 0 0 14px;
}
.csfloat-history-row-text {
font: 400 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-history-row-text > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-history-row-remove {
width: 16px;
height: 16px;
border-radius: 4px;
border: 0;
background: transparent;
color: var(--ink-4);
font: 500 11px/1 var(--ui);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 100ms ease;
}
.csfloat-history-row:hover .csfloat-history-row-remove { opacity: 1; }
.csfloat-history-row-remove:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-history-section-title {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
.csfloat-history-clear {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
background: transparent;
border: 0;
padding: 8px 10px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
cursor: pointer;
border-top: 1px solid var(--line);
margin-top: 4px;
letter-spacing: -0.005em;
border-radius: 0 0 5px 5px;
}
.csfloat-history-clear:hover { color: oklch(0.72 0.18 30); background: rgba(248, 113, 113, 0.04); }
/* END store strip + search history */
/* CSFloat-1:1: utility classes — visibility, layout, spacing helpers */
.csfloat-u-hide { display: none !important; }
.csfloat-u-block { display: block !important; }
.csfloat-u-inline { display: inline !important; }
.csfloat-u-flex { display: flex !important; }
.csfloat-u-grid { display: grid !important; }
.csfloat-u-iflex { display: inline-flex !important; }
.csfloat-u-iblock { display: inline-block !important; }
@media (max-width: 720px) {
.csfloat-u-hide-md { display: none !important; }
.csfloat-u-block-md { display: block !important; }
.csfloat-u-flex-md { display: flex !important; }
}
@media (max-width: 540px) {
.csfloat-u-hide-sm { display: none !important; }
.csfloat-u-block-sm { display: block !important; }
.csfloat-u-flex-sm { display: flex !important; }
}
@media (min-width: 1101px) {
.csfloat-u-hide-lg { display: none !important; }
.csfloat-u-only-lg { display: block !important; }
}
.csfloat-u-trunc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-u-trunc-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-u-trunc-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-u-mono { font-family: var(--mono) !important; font-feature-settings: "tnum"; }
.csfloat-u-serif { font-family: var(--serif) !important; font-style: italic; }
.csfloat-u-tnum { font-feature-settings: "tnum"; }
.csfloat-u-text-cta { color: var(--cta) !important; }
.csfloat-u-text-success { color: oklch(0.78 0.16 152) !important; }
.csfloat-u-text-warning { color: oklch(0.84 0.16 80) !important; }
.csfloat-u-text-danger { color: oklch(0.72 0.18 30) !important; }
.csfloat-u-text-1 { color: var(--ink-1) !important; }
.csfloat-u-text-2 { color: var(--ink-2) !important; }
.csfloat-u-text-3 { color: var(--ink-3) !important; }
.csfloat-u-text-4 { color: var(--ink-4) !important; }
.csfloat-u-text-center { text-align: center !important; }
.csfloat-u-text-left { text-align: left !important; }
.csfloat-u-text-right { text-align: right !important; }
.csfloat-u-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.csfloat-u-italic { font-style: italic; }
.csfloat-u-bold { font-weight: 700 !important; }
.csfloat-u-semibold { font-weight: 600 !important; }
.csfloat-u-medium { font-weight: 500 !important; }
.csfloat-u-regular { font-weight: 400 !important; }
.csfloat-u-row { display: flex; flex-direction: row; }
.csfloat-u-col { display: flex; flex-direction: column; }
.csfloat-u-wrap { flex-wrap: wrap; }
.csfloat-u-nowrap { flex-wrap: nowrap; }
.csfloat-u-items-center { align-items: center; }
.csfloat-u-items-start { align-items: flex-start; }
.csfloat-u-items-end { align-items: flex-end; }
.csfloat-u-items-stretch { align-items: stretch; }
.csfloat-u-justify-center { justify-content: center; }
.csfloat-u-justify-start { justify-content: flex-start; }
.csfloat-u-justify-end { justify-content: flex-end; }
.csfloat-u-justify-between { justify-content: space-between; }
.csfloat-u-justify-around { justify-content: space-around; }
.csfloat-u-flex-1 { flex: 1 1 auto; }
.csfloat-u-flex-0 { flex: 0 0 auto; }
.csfloat-u-flex-grow { flex-grow: 1; }
.csfloat-u-flex-shrink { flex-shrink: 1; }
.csfloat-u-gap-2 { gap: 2px; }
.csfloat-u-gap-4 { gap: 4px; }
.csfloat-u-gap-6 { gap: 6px; }
.csfloat-u-gap-8 { gap: 8px; }
.csfloat-u-gap-10 { gap: 10px; }
.csfloat-u-gap-12 { gap: 12px; }
.csfloat-u-gap-14 { gap: 14px; }
.csfloat-u-gap-16 { gap: 16px; }
.csfloat-u-gap-20 { gap: 20px; }
.csfloat-u-gap-24 { gap: 24px; }
.csfloat-u-mt-2 { margin-top: 2px !important; }
.csfloat-u-mt-4 { margin-top: 4px !important; }
.csfloat-u-mt-6 { margin-top: 6px !important; }
.csfloat-u-mt-8 { margin-top: 8px !important; }
.csfloat-u-mt-10 { margin-top: 10px !important; }
.csfloat-u-mt-12 { margin-top: 12px !important; }
.csfloat-u-mt-14 { margin-top: 14px !important; }
.csfloat-u-mt-16 { margin-top: 16px !important; }
.csfloat-u-mt-20 { margin-top: 20px !important; }
.csfloat-u-mt-24 { margin-top: 24px !important; }
.csfloat-u-mt-32 { margin-top: 32px !important; }
.csfloat-u-mb-2 { margin-bottom: 2px !important; }
.csfloat-u-mb-4 { margin-bottom: 4px !important; }
.csfloat-u-mb-6 { margin-bottom: 6px !important; }
.csfloat-u-mb-8 { margin-bottom: 8px !important; }
.csfloat-u-mb-10 { margin-bottom: 10px !important; }
.csfloat-u-mb-12 { margin-bottom: 12px !important; }
.csfloat-u-mb-14 { margin-bottom: 14px !important; }
.csfloat-u-mb-16 { margin-bottom: 16px !important; }
.csfloat-u-mb-20 { margin-bottom: 20px !important; }
.csfloat-u-mb-24 { margin-bottom: 24px !important; }
.csfloat-u-mb-32 { margin-bottom: 32px !important; }
.csfloat-u-w-full { width: 100% !important; }
.csfloat-u-h-full { height: 100% !important; }
.csfloat-u-min-w-0 { min-width: 0 !important; }
.csfloat-u-overflow-hidden { overflow: hidden !important; }
.csfloat-u-overflow-x-auto { overflow-x: auto !important; }
.csfloat-u-overflow-y-auto { overflow-y: auto !important; }
.csfloat-u-pos-relative { position: relative !important; }
.csfloat-u-pos-absolute { position: absolute !important; }
.csfloat-u-pos-sticky { position: sticky !important; }
.csfloat-u-rounded-4 { border-radius: 4px !important; }
.csfloat-u-rounded-6 { border-radius: 6px !important; }
.csfloat-u-rounded-8 { border-radius: 8px !important; }
.csfloat-u-rounded-10 { border-radius: 10px !important; }
.csfloat-u-rounded-12 { border-radius: 12px !important; }
.csfloat-u-rounded-pill { border-radius: 999px !important; }
.csfloat-u-cursor-pointer { cursor: pointer !important; }
.csfloat-u-cursor-not-allowed { cursor: not-allowed !important; }
.csfloat-u-no-select { user-select: none; }
.csfloat-u-pointer-none { pointer-events: none; }
.csfloat-u-no-decoration { text-decoration: none !important; }
.csfloat-u-bg-card { background: var(--bg-1) !important; }
.csfloat-u-bg-elev { background: var(--bg-2) !important; }
.csfloat-u-bg-elev2 { background: var(--bg-3) !important; }
.csfloat-u-bg-cta { background: var(--cta) !important; color: #fff !important; }
.csfloat-u-border { border: 1px solid var(--line) !important; }
.csfloat-u-border-2 { border: 1px solid var(--line-2) !important; }
.csfloat-u-border-cta { border-color: var(--cta) !important; }
.csfloat-u-border-t { border-top: 1px solid var(--line) !important; }
.csfloat-u-border-b { border-bottom: 1px solid var(--line) !important; }
.csfloat-u-border-l { border-left: 1px solid var(--line) !important; }
.csfloat-u-border-r { border-right: 1px solid var(--line) !important; }
.csfloat-u-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
.csfloat-u-shadow-md { box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important; }
.csfloat-u-shadow-lg { box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; }
.csfloat-u-pad-8 { padding: 8px !important; }
.csfloat-u-pad-10 { padding: 10px !important; }
.csfloat-u-pad-12 { padding: 12px !important; }
.csfloat-u-pad-14 { padding: 14px !important; }
.csfloat-u-pad-16 { padding: 16px !important; }
.csfloat-u-pad-20 { padding: 20px !important; }
.csfloat-u-pad-24 { padding: 24px !important; }
/* END utility classes */
/* CSFloat-1:1: featured collection block — large landing-card showcasing a collection */
.csfloat-coll-feature {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 0;
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
position: relative;
}
.csfloat-coll-feature::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 80% -10%, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-coll-feature-info {
padding: 28px 28px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
position: relative;
z-index: 1;
}
.csfloat-coll-feature-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
padding: 5px 10px;
border-radius: 999px;
align-self: flex-start;
}
.csfloat-coll-feature-name {
font: 600 clamp(22px, 3vw, 32px) / 1.15 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
}
.csfloat-coll-feature-name > .csfloat-coll-feature-name-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
}
.csfloat-coll-feature-desc {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-coll-feature-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--line);
}
.csfloat-coll-feature-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-coll-feature-meta-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-coll-feature-meta-val {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.csfloat-coll-feature-cta {
display: flex;
gap: 8px;
margin-top: 10px;
}
.csfloat-coll-feature-art {
position: relative;
background: linear-gradient(135deg, var(--bg-1), var(--bg));
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
min-height: 320px;
overflow: hidden;
}
.csfloat-coll-feature-art-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
width: 100%;
max-width: 320px;
}
.csfloat-coll-feature-art-tile {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
aspect-ratio: 1.4;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.csfloat-coll-feature-art-tile > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
@media (max-width: 720px) {
.csfloat-coll-feature {
grid-template-columns: 1fr;
}
.csfloat-coll-feature-art { min-height: 220px; }
.csfloat-coll-feature-info { padding: 20px 22px; }
}
/* CSFloat-1:1: top-trader leaderboard row */
.csfloat-leader {
display: grid;
grid-template-columns: 28px 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-leader:hover { background: var(--bg-2); }
.csfloat-leader:last-child { border-bottom: 0; }
.csfloat-leader-rank {
font: 700 14px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
text-align: center;
letter-spacing: -0.01em;
}
.csfloat-leader-rank.is-1 { color: oklch(0.84 0.18 60); }
.csfloat-leader-rank.is-2 { color: oklch(0.84 0.04 240); }
.csfloat-leader-rank.is-3 { color: oklch(0.62 0.16 50); }
.csfloat-leader-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
flex: 0 0 36px;
background: var(--bg-3);
object-fit: cover;
position: relative;
}
.csfloat-leader-avatar.is-medal::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: oklch(0.84 0.18 60);
border: 2px solid var(--bg-1);
}
.csfloat-leader-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-leader-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-leader-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-leader-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-leader-volume {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-leader-volume::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-leader-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-leader-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-leader-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-leader-delta::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-leader-delta.is-up::before { border-bottom: 4px solid currentColor; }
.csfloat-leader-delta.is-down::before { border-top: 4px solid currentColor; }
@media (max-width: 540px) {
.csfloat-leader { grid-template-columns: 22px 28px 1fr auto; gap: 8px; padding: 8px 10px; }
.csfloat-leader-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.csfloat-leader-delta { display: none; }
}
/* END featured collection + leaderboard row */
/* CSFloat-1:1: animated number counter target */
.csfloat-counter {
font: 700 28px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
display: inline-flex;
align-items: baseline;
gap: 1px;
}
.csfloat-counter > .csfloat-counter-currency {
font-size: 0.6em;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
}
.csfloat-counter > .csfloat-counter-suffix {
font-size: 0.55em;
color: var(--ink-3);
margin-left: 4px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-counter.is-tabular {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: 0.6em;
text-align: center;
}
.csfloat-counter.is-tabular > .csfloat-counter-currency,
.csfloat-counter.is-tabular > .csfloat-counter-suffix {
width: auto;
grid-column: span 2;
}
.csfloat-counter-row {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.csfloat-counter-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
/* CSFloat-1:1: trader badge tier indicator (bronze/silver/gold/platinum) */
.csfloat-tier-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px 0 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-tier-badge::before {
content: '';
width: 12px;
height: 12px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 1.5px var(--bg);
}
.csfloat-tier-badge.is-bronze {
color: oklch(0.62 0.16 50);
border-color: oklch(0.4 0.1 50);
background: oklch(0.18 0.04 50);
}
.csfloat-tier-badge.is-silver {
color: oklch(0.84 0.04 240);
border-color: oklch(0.42 0.02 240);
background: oklch(0.2 0.01 240);
}
.csfloat-tier-badge.is-gold {
color: oklch(0.84 0.18 60);
border-color: oklch(0.42 0.12 60);
background: oklch(0.18 0.06 60);
}
.csfloat-tier-badge.is-platinum {
color: oklch(0.92 0.06 220);
border-color: oklch(0.42 0.04 220);
background: linear-gradient(135deg, oklch(0.2 0.04 220), oklch(0.18 0.06 280));
}
.csfloat-tier-badge.is-diamond {
color: oklch(0.92 0.1 240);
border-color: oklch(0.5 0.18 240);
background: linear-gradient(135deg, oklch(0.18 0.06 240), oklch(0.18 0.06 200));
}
/* CSFloat-1:1: vertical menu — for context menus on item cards / row actions */
.csfloat-vmenu {
position: absolute;
min-width: 160px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
z-index: 100;
display: none;
flex-direction: column;
gap: 1px;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vmenu.is-open { display: flex; }
.csfloat-vmenu-trigger {
width: 24px;
height: 24px;
border-radius: 6px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
}
.csfloat-vmenu-trigger:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-vmenu-trigger.is-open {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-vmenu-trigger::before {
content: '⋮';
font: 700 14px/1 var(--ui);
}
.csfloat-vmenu-trigger.is-horizontal::before {
content: '⋯';
}
.csfloat-vmenu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 5px;
font: 400 12px/1 var(--ui);
color: var(--ink-2);
cursor: pointer;
letter-spacing: -0.005em;
transition: background 100ms ease, color 100ms ease;
border: 0;
background: transparent;
width: 100%;
text-align: left;
}
.csfloat-vmenu-item:hover { background: var(--bg-2); color: var(--ink-1); }
.csfloat-vmenu-item.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-vmenu-item.is-danger:hover { background: rgba(248, 113, 113, 0.1); }
.csfloat-vmenu-item-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.7;
}
.csfloat-vmenu-divider {
height: 1px;
background: var(--line);
margin: 3px 0;
}
.csfloat-vmenu-section {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px 3px;
}
/* END counter + tier badge + vertical menu */
/* CSFloat-1:1: secondary nav strip — sticky subnav for section pages */
.csfloat-subnav {
position: sticky;
top: 56px;
z-index: 4;
display: flex;
align-items: center;
gap: 0;
padding: 0 16px;
background: rgba(7, 11, 24, 0.8);
backdrop-filter: blur(18px) saturate(120%);
border-bottom: 1px solid var(--line);
height: 44px;
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-subnav::-webkit-scrollbar { display: none; }
.csfloat-subnav-link {
position: relative;
height: 100%;
display: inline-flex;
align-items: center;
padding: 0 14px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-subnav-link:hover { color: var(--ink-1); }
.csfloat-subnav-link.is-active { color: var(--ink-1); }
.csfloat-subnav-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.csfloat-subnav-link-count {
margin-left: 6px;
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-subnav-link.is-active .csfloat-subnav-link-count { color: var(--ink-3); }
.csfloat-subnav-spacer { flex: 1 1 auto; }
.csfloat-subnav-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
/* CSFloat-1:1: search bar with command palette — header search */
.csfloat-hsearch {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 12px 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
cursor: text;
width: 320px;
max-width: 100%;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hsearch:hover {
border-color: var(--line-2);
background: var(--bg-1);
}
.csfloat-hsearch:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-hsearch-icon {
width: 14px;
height: 14px;
color: var(--ink-4);
flex: 0 0 14px;
}
.csfloat-hsearch > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
min-width: 0;
}
.csfloat-hsearch > input::placeholder { color: var(--ink-3); }
.csfloat-hsearch-kbd {
font: 500 10px/1 var(--mono);
color: var(--ink-3);
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px 5px;
flex: 0 0 auto;
font-feature-settings: "tnum";
}
.csfloat-hsearch.is-mobile {
width: auto;
background: transparent;
border: 0;
padding: 0;
width: 36px;
justify-content: center;
}
.csfloat-hsearch.is-mobile:focus-within {
background: transparent;
box-shadow: none;
}
.csfloat-hsearch.is-mobile > input,
.csfloat-hsearch.is-mobile .csfloat-hsearch-kbd { display: none; }
/* CSFloat-1:1: category card — icon-first square card for category navigation */
.csfloat-cat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.csfloat-cat-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(200px 100px at 50% 0, rgba(59, 130, 246, 0.06), transparent 70%);
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cat-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.csfloat-cat-card:hover::before { opacity: 1; }
.csfloat-cat-card-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
font-size: 22px;
}
.csfloat-cat-card:hover .csfloat-cat-card-icon {
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-cat-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
position: relative;
z-index: 1;
}
.csfloat-cat-card-count {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
position: relative;
z-index: 1;
}
/* END subnav strip + header search + category card */
/* CSFloat-1:1: section divider with editorial titling */
.csfloat-section-divide {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: baseline;
margin: 32px 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-section-divide-title {
font: 600 clamp(20px, 2.5vw, 26px) / 1.2 var(--ui);
letter-spacing: -0.02em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.csfloat-section-divide-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
}
.csfloat-section-divide-meta {
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-align: right;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.csfloat-section-divide-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-section-divide-meta-link {
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-section-divide-meta-link:hover { text-decoration: underline; }
.csfloat-section-divide-meta-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-section-divide-meta-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
@media (max-width: 540px) {
.csfloat-section-divide {
grid-template-columns: 1fr;
gap: 6px;
}
.csfloat-section-divide-meta { text-align: left; justify-content: flex-start; }
}
/* CSFloat-1:1: hero stat callout — large prominent stat for landing pages */
.csfloat-hero-stat {
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px 36px;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.csfloat-hero-stat::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 320px at 80% 0%, rgba(59, 130, 246, 0.04), transparent 60%);
pointer-events: none;
}
.csfloat-hero-stat-eyebrow {
font: 600 11px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-hero-stat-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cta);
box-shadow: 0 0 6px currentColor;
}
.csfloat-hero-stat-value {
font: 700 clamp(48px, 8vw, 88px) / 1 var(--mono);
letter-spacing: -0.04em;
color: var(--ink-1);
font-feature-settings: "tnum";
position: relative;
z-index: 1;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-hero-stat-value-currency {
font-size: 0.5em;
color: var(--ink-3);
margin-right: 4px;
font-weight: 500;
}
.csfloat-hero-stat-value-suffix {
font-size: 0.45em;
color: var(--ink-3);
margin-left: 6px;
font-weight: 500;
letter-spacing: -0.01em;
}
.csfloat-hero-stat-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 560px;
position: relative;
z-index: 1;
}
.csfloat-hero-stat-msg > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-hero-stat-foot {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid var(--line);
position: relative;
z-index: 1;
}
.csfloat-hero-stat-foot-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-hero-stat-foot-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hero-stat-foot-val {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
@media (max-width: 540px) {
.csfloat-hero-stat { padding: 24px 22px; }
}
/* END section divider + hero stat */
/* CSFloat-1:1: order list compact row — for /orders index */
.csfloat-order-row {
display: grid;
grid-template-columns: 24px 56px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-order-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-order-row-checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-order-row-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-order-row-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-order-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-order-row-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-order-row-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-order-row-counterparty {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-order-row-counterparty-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
flex: 0 0 18px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-order-row-counterparty-name {
color: var(--ink-1);
font-weight: 500;
}
.csfloat-order-row-amount {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-order-row-amount::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-order-row-amount.is-up { color: oklch(0.78 0.16 152); }
.csfloat-order-row-amount.is-down { color: oklch(0.72 0.18 30); }
.csfloat-order-row-status { flex: 0 0 auto; }
@media (max-width: 720px) {
.csfloat-order-row {
grid-template-columns: 48px 1fr auto;
gap: 10px;
padding: 10px 12px;
}
.csfloat-order-row-checkbox,
.csfloat-order-row-counterparty,
.csfloat-order-row-status { display: none; }
.csfloat-order-row-img { width: 48px; height: 48px; flex: 0 0 48px; }
}
/* CSFloat-1:1: bulk select header row — sits above table when selection mode is on */
.csfloat-bulk-select-head {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(59, 130, 246, 0.04);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
font: 500 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-bulk-select-head-count > b {
color: var(--cta);
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
}
.csfloat-bulk-select-head-link:hover { background: rgba(59, 130, 246, 0.08); }
/* END order list row + bulk select header */
/* CSFloat-1:1: image with overlay info — for hover-cards on grid items */
.csfloat-img-overlay {
position: relative;
display: block;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border-radius: 8px;
overflow: hidden;
aspect-ratio: 1.45;
}
.csfloat-img-overlay > img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-img-overlay-info {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 12px;
background: linear-gradient(180deg, transparent 50%, rgba(7, 11, 24, 0.85) 100%);
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-overlay:hover .csfloat-img-overlay-info { opacity: 1; }
.csfloat-img-overlay-info-title {
font: 600 13px/1.3 var(--ui);
color: #fff;
letter-spacing: -0.005em;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.csfloat-img-overlay-info-meta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font: 400 11px/1 var(--ui);
color: rgba(255, 255, 255, 0.7);
letter-spacing: -0.005em;
}
.csfloat-img-overlay-info-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: #fff;
}
/* CSFloat-1:1: glow border highlight — for promoted items */
.csfloat-glow-border {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.csfloat-glow-border::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, var(--cta), oklch(0.84 0.18 240), var(--cta));
background-size: 200% 200%;
border-radius: inherit;
animation: csfloat-glow-rotate 4000ms linear infinite;
z-index: 0;
}
.csfloat-glow-border > * {
position: relative;
z-index: 1;
background: var(--bg-1);
border-radius: calc(10px - 1px);
}
@keyframes csfloat-glow-rotate {
0% { background-position: 0% 0%; }
100% { background-position: 200% 200%; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-glow-border::before { animation: none; }
}
/* CSFloat-1:1: page wrapper — applies max width and consistent gutter padding */
.csfloat-wrap {
width: 100%;
max-width: 2100px;
margin: 0 auto;
padding: 0 24px;
}
.csfloat-wrap.is-narrow { max-width: 980px; }
.csfloat-wrap.is-mid { max-width: 1280px; }
.csfloat-wrap.is-wide { max-width: 1600px; }
.csfloat-wrap.is-full { max-width: none; }
@media (max-width: 720px) {
.csfloat-wrap { padding: 0 16px; }
}
@media (max-width: 540px) {
.csfloat-wrap { padding: 0 12px; }
}
/* CSFloat-1:1: page section — vertical spacing wrapper */
.csfloat-page-section {
padding: 32px 0;
}
.csfloat-page-section.is-tight { padding: 16px 0; }
.csfloat-page-section.is-loose { padding: 56px 0; }
.csfloat-page-section.is-bg-card {
background: var(--bg-1);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.csfloat-page-section + .csfloat-page-section.is-bg-card {
border-top: 0;
}
/* END img overlay + glow border + page wrap + page section */
/* CSFloat-1:1: market filter rail accordion section */
.csfloat-rail-acc {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.csfloat-rail-acc-section {
border-bottom: 1px solid var(--line);
padding: 8px 0;
}
.csfloat-rail-acc-section:last-child { border-bottom: 0; }
.csfloat-rail-acc-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 0;
cursor: pointer;
user-select: none;
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-rail-acc-section-head:hover { color: var(--ink-1); }
.csfloat-rail-acc-section-head-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
text-transform: none;
letter-spacing: 0;
}
.csfloat-rail-acc-section-head-chev {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
margin-left: auto;
opacity: 0.6;
}
.csfloat-rail-acc-section.is-open .csfloat-rail-acc-section-head-chev {
transform: rotate(225deg);
}
.csfloat-rail-acc-section-body {
overflow: hidden;
max-height: 0;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
}
.csfloat-rail-acc-section.is-open .csfloat-rail-acc-section-body {
max-height: 600px;
padding-top: 8px;
}
/* CSFloat-1:1: rarity legend */
.csfloat-rarity-legend {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-rarity-legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: help;
transition: color 120ms ease;
}
.csfloat-rarity-legend-item:hover { color: var(--ink-1); }
.csfloat-rarity-legend-item::before {
content: '';
width: 14px;
height: 3px;
border-radius: 1.5px;
background: var(--ink-3);
}
.csfloat-rarity-legend-item.is-cs::before { background: oklch(0.68 0.18 240); }
.csfloat-rarity-legend-item.is-ind::before { background: oklch(0.76 0.18 240); }
.csfloat-rarity-legend-item.is-mil::before { background: oklch(0.65 0.22 280); }
.csfloat-rarity-legend-item.is-rest::before { background: oklch(0.62 0.22 320); }
.csfloat-rarity-legend-item.is-class::before { background: oklch(0.62 0.27 330); }
.csfloat-rarity-legend-item.is-cov::before { background: oklch(0.66 0.18 30); }
.csfloat-rarity-legend-item.is-rare::before { background: oklch(0.84 0.18 60); }
/* CSFloat-1:1: text helpers — eyebrow line, lead text */
.csfloat-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 11px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-eyebrow.is-muted {
color: var(--ink-4);
}
.csfloat-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.csfloat-eyebrow.is-no-line::before { display: none; }
.csfloat-lead {
font: 400 16px/1.6 var(--ui);
color: var(--ink-2);
letter-spacing: -0.01em;
margin: 0 0 16px;
max-width: 720px;
}
.csfloat-lead > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-lead > strong {
color: var(--ink-1);
font-weight: 600;
}
/* END filter rail accordion + rarity legend + text helpers */
/* CSFloat-1:1: spec table — for technical detail blocks */
.csfloat-spec {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-spec-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-spec-row:last-child { border-bottom: 0; }
.csfloat-spec-row > .csfloat-spec-key {
font: 600 11px/1.3 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-spec-row > .csfloat-spec-val {
font: 500 13px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.csfloat-spec-row > .csfloat-spec-val.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-spec-row > .csfloat-spec-val.is-success { color: oklch(0.78 0.16 152); }
.csfloat-spec-row > .csfloat-spec-val.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-spec-row > .csfloat-spec-val.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-spec-row > .csfloat-spec-val-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 3px;
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.02em;
text-transform: uppercase;
}
@media (max-width: 540px) {
.csfloat-spec-row {
grid-template-columns: 1fr;
gap: 4px;
}
.csfloat-spec-row > .csfloat-spec-val { font-size: 12px; }
}
/* CSFloat-1:1: small action button group — for inline mini actions */
.csfloat-mini-actions {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-mini-actions > .csfloat-mini-action {
height: 24px;
padding: 0 8px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
transition: all 120ms ease;
}
.csfloat-mini-actions > .csfloat-mini-action:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-mini-actions > .csfloat-mini-action.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csfloat-mini-actions > .csfloat-mini-action.is-cta {
color: var(--cta);
background: rgba(59, 130, 246, 0.1);
}
.csfloat-mini-actions > .csfloat-mini-action[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-mini-actions.is-vertical {
flex-direction: column;
}
.csfloat-mini-actions.is-icon-only > .csfloat-mini-action {
padding: 0;
width: 24px;
justify-content: center;
}
/* END spec table + mini actions */
/* CSFloat-1:1: hover-revealed action bar — appears at bottom of grid card on hover */
.csfloat-card-actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
gap: 4px;
padding: 8px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 60%);
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
pointer-events: none;
}
.csfloat-card-actions.is-show,
.csfloat-card-actions-anchor:hover .csfloat-card-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.csfloat-card-actions > .csfloat-card-action {
flex: 1 1 auto;
height: 30px;
padding: 0 10px;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border-radius: 6px;
font: 600 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-actions > .csfloat-card-action:hover {
background: rgba(7, 11, 24, 0.85);
border-color: var(--cta);
color: #fff;
}
.csfloat-card-actions > .csfloat-card-action.is-cta {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-card-actions > .csfloat-card-action.is-cta:hover {
background: oklch(0.66 0.18 240);
}
.csfloat-card-actions > .csfloat-card-action.is-icon {
flex: 0 0 30px;
width: 30px;
padding: 0;
}
@media (hover: none) {
.csfloat-card-actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 60%);
}
}
/* CSFloat-1:1: section CTA card — large card with centered title + actions for end-of-section */
.csfloat-section-cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 56px 24px;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.csfloat-section-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 320px at 50% 100%, rgba(59, 130, 246, 0.08), transparent 70%);
pointer-events: none;
}
.csfloat-section-cta-eyebrow {
font: 600 11px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
position: relative;
z-index: 1;
}
.csfloat-section-cta-title {
font: 700 clamp(28px, 4vw, 44px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
max-width: 720px;
position: relative;
z-index: 1;
}
.csfloat-section-cta-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
}
.csfloat-section-cta-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 560px;
position: relative;
z-index: 1;
}
.csfloat-section-cta-actions {
display: flex;
gap: 8px;
margin-top: 6px;
position: relative;
z-index: 1;
}
.csfloat-section-cta-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 8px;
position: relative;
z-index: 1;
}
.csfloat-section-cta-meta > b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 540px) {
.csfloat-section-cta { padding: 36px 18px; }
}
/* END card hover actions + section CTA */
/* CSFloat-1:1: vertical timeline progress (inline within forms or onboarding) */
.csfloat-vprog {
display: flex;
align-items: center;
gap: 0;
padding: 12px 0;
}
.csfloat-vprog-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 0 0 auto;
position: relative;
}
.csfloat-vprog-step-bullet {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-2);
border: 2px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 600 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
position: relative;
z-index: 2;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vprog-step.is-active .csfloat-vprog-step-bullet {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-vprog-step.is-done .csfloat-vprog-step-bullet {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-vprog-step.is-done .csfloat-vprog-step-bullet > span { display: none; }
.csfloat-vprog-step.is-done .csfloat-vprog-step-bullet::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-vprog-step-label {
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
white-space: nowrap;
text-align: center;
}
.csfloat-vprog-step.is-active .csfloat-vprog-step-label {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-vprog-step.is-done .csfloat-vprog-step-label {
color: var(--ink-2);
}
.csfloat-vprog-line {
flex: 1 1 auto;
height: 2px;
background: var(--line);
margin: 0 8px 24px;
position: relative;
border-radius: 1px;
min-width: 24px;
}
.csfloat-vprog-line.is-done {
background: var(--cta);
}
.csfloat-vprog.is-vertical {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 0;
}
.csfloat-vprog.is-vertical .csfloat-vprog-step {
flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 6px 0;
}
.csfloat-vprog.is-vertical .csfloat-vprog-step-label { text-align: left; padding-top: 4px; }
.csfloat-vprog.is-vertical .csfloat-vprog-line {
width: 2px;
height: 24px;
margin: 0 0 0 11px;
flex: 0 0 auto;
}
/* CSFloat-1:1: KYC verification step item — single step within form */
.csfloat-kyc-step {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 6px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-kyc-step:hover {
border-color: var(--line-2);
}
.csfloat-kyc-step.is-done {
background: rgba(52, 211, 153, 0.04);
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-kyc-step.is-active {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-kyc-step-marker {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1.5px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 600 12px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-kyc-step.is-active .csfloat-kyc-step-marker {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-kyc-step.is-done .csfloat-kyc-step-marker {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-kyc-step.is-done .csfloat-kyc-step-marker > span { display: none; }
.csfloat-kyc-step.is-done .csfloat-kyc-step-marker::after {
content: '';
width: 9px;
height: 5px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-kyc-step-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-kyc-step-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-kyc-step-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-kyc-step-action { flex: 0 0 auto; }
.csfloat-kyc-step-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* END vertical progress + KYC step */
/* CSFloat-1:1: tab pill segment (alternative to underline tabs) */
.csfloat-pill-tabs {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.csfloat-pill-tabs > .csfloat-pill-tab {
height: 30px;
padding: 0 14px;
background: transparent;
border: 0;
border-radius: 5px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pill-tabs > .csfloat-pill-tab:hover { color: var(--ink-1); }
.csfloat-pill-tabs > .csfloat-pill-tab.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-pill-tabs > .csfloat-pill-tab.is-active.is-cta {
background: var(--cta);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-pill-tabs > .csfloat-pill-tab[disabled] {
color: var(--ink-4);
cursor: not-allowed;
}
.csfloat-pill-tabs > .csfloat-pill-tab-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-pill-tabs > .csfloat-pill-tab.is-active .csfloat-pill-tab-count { color: var(--ink-2); }
.csfloat-pill-tabs.is-sm > .csfloat-pill-tab { height: 24px; padding: 0 10px; font-size: 11px; }
.csfloat-pill-tabs.is-lg > .csfloat-pill-tab { height: 36px; padding: 0 16px; font-size: 13px; }
.csfloat-pill-tabs.is-block { display: flex; }
.csfloat-pill-tabs.is-block > .csfloat-pill-tab { flex: 1 1 0; justify-content: center; }
/* CSFloat-1:1: card with header thumbnail + grid body */
.csfloat-thumb-card {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-thumb-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-thumb-card-header {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
aspect-ratio: 16/9;
overflow: hidden;
}
.csfloat-thumb-card-header > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-thumb-card:hover .csfloat-thumb-card-header > img { transform: scale(1.04); }
.csfloat-thumb-card-header-tag {
position: absolute;
top: 10px;
left: 10px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 4px 8px;
border-radius: 4px;
}
.csfloat-thumb-card-header-tag.is-cta {
background: rgba(59, 130, 246, 0.85);
border-color: rgba(59, 130, 246, 0.95);
}
.csfloat-thumb-card-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-thumb-card-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.csfloat-thumb-card-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-thumb-card-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-thumb-card-meta-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-thumb-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-thumb-card-foot-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* END pill tabs + thumb card */
/* CSFloat-1:1: filter range histogram with brushable selection */
.csfloat-hist {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
.csfloat-hist-bars {
display: flex;
align-items: flex-end;
gap: 1px;
height: 36px;
position: relative;
}
.csfloat-hist-bar {
flex: 1 1 0;
background: var(--ink-4);
border-radius: 1px 1px 0 0;
opacity: 0.4;
min-height: 2px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hist-bar.is-in-range {
background: var(--cta);
opacity: 1;
}
.csfloat-hist-bar:hover {
opacity: 1;
}
.csfloat-hist-bar.is-empty {
background: transparent;
border-bottom: 1px dashed var(--line);
}
.csfloat-hist-overlay {
position: absolute;
top: 0;
bottom: 0;
background: rgba(59, 130, 246, 0.06);
border-left: 1px solid var(--cta);
border-right: 1px solid var(--cta);
pointer-events: none;
}
.csfloat-hist-bounds {
display: flex;
justify-content: space-between;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-hist-tip {
position: absolute;
bottom: calc(100% + 6px);
background: var(--bg-3);
border: 1px solid var(--line-2);
color: var(--ink-1);
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
padding: 3px 5px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
transform: translateX(-50%);
z-index: 1;
}
/* CSFloat-1:1: vertical sticker preview pinboard */
.csfloat-pinboard {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: 8px;
}
.csfloat-pinboard-pin {
position: relative;
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.csfloat-pinboard-pin:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-pinboard-pin.is-selected {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-pinboard-pin > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-pinboard-pin-tag {
position: absolute;
bottom: 2px;
right: 2px;
font: 600 8px/1 var(--mono);
color: #fff;
background: rgba(7, 11, 24, 0.7);
padding: 1px 3px;
border-radius: 2px;
font-feature-settings: "tnum";
}
.csfloat-pinboard-pin-x {
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: rgba(7, 11, 24, 0.7);
color: #fff;
border: 0;
cursor: pointer;
font: 500 11px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 140ms ease;
}
.csfloat-pinboard-pin:hover .csfloat-pinboard-pin-x { opacity: 1; }
/* END histogram + pinboard */
/* CSFloat-1:1: split price (low/avg/high quote) inline display */
.csfloat-quote-row {
display: inline-flex;
align-items: center;
gap: 0;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.csfloat-quote-row > .csfloat-quote-cell {
padding: 5px 10px;
display: flex;
flex-direction: column;
gap: 1px;
border-right: 1px solid var(--line);
text-align: center;
}
.csfloat-quote-row > .csfloat-quote-cell:last-child { border-right: 0; }
.csfloat-quote-cell-label {
font: 600 8px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-quote-cell-val {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-quote-cell-val::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-quote-cell.is-low .csfloat-quote-cell-val { color: oklch(0.78 0.16 152); }
.csfloat-quote-cell.is-high .csfloat-quote-cell-val { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: media gallery sidebar — vertical thumbnails */
.csfloat-media-vstack {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
width: 64px;
flex: 0 0 64px;
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb {
position: relative;
aspect-ratio: 1;
background: var(--bg-2);
border: 1.5px solid var(--line);
border-radius: 5px;
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb:hover {
border-color: var(--line-2);
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb.is-active {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb-tag {
position: absolute;
bottom: 2px;
right: 2px;
font: 600 8px/1 var(--mono);
color: #fff;
background: rgba(7, 11, 24, 0.7);
padding: 1px 3px;
border-radius: 2px;
}
.csfloat-media-vstack-more {
height: 32px;
border: 1px dashed var(--line);
background: transparent;
color: var(--ink-3);
border-radius: 5px;
cursor: pointer;
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-media-vstack-more:hover {
border-color: var(--line-2);
color: var(--ink-1);
}
/* CSFloat-1:1: image viewer with vertical thumbnails layout */
.csfloat-viewer {
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
}
.csfloat-viewer-stage {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
min-height: 320px;
overflow: hidden;
}
.csfloat-viewer-stage > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}
.csfloat-viewer-stage-overlay {
position: absolute;
bottom: 12px;
left: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 5px 10px;
font: 500 11px/1 var(--mono);
color: rgba(255, 255, 255, 0.85);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.csfloat-viewer {
grid-template-columns: 1fr;
}
.csfloat-media-vstack {
flex-direction: row;
width: 100%;
flex: 0 0 auto;
overflow-x: auto;
}
.csfloat-media-vstack > .csfloat-media-vstack-thumb {
flex: 0 0 56px;
width: 56px;
height: 56px;
}
}
/* END quote row + media vstack + viewer */
/* CSFloat-1:1: rich content prose typography — for changelog/docs/help body */
.csfloat-prose {
color: var(--ink-2);
font: 400 14px/1.65 var(--ui);
letter-spacing: -0.005em;
max-width: 720px;
}
.csfloat-prose > h1,
.csfloat-prose > h2,
.csfloat-prose > h3,
.csfloat-prose > h4 {
color: var(--ink-1);
font-weight: 600;
letter-spacing: -0.02em;
margin: 32px 0 12px;
scroll-margin-top: 80px;
}
.csfloat-prose > h1 { font-size: 28px; line-height: 1.2; }
.csfloat-prose > h2 { font-size: 22px; line-height: 1.25; }
.csfloat-prose > h3 { font-size: 18px; line-height: 1.3; }
.csfloat-prose > h4 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.csfloat-prose > p {
margin: 0 0 14px;
color: var(--ink-2);
}
.csfloat-prose > p > strong { color: var(--ink-1); font-weight: 600; }
.csfloat-prose > p > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-prose > p > a,
.csfloat-prose > ul a,
.csfloat-prose > ol a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-prose > p > a:hover,
.csfloat-prose > ul a:hover,
.csfloat-prose > ol a:hover { border-color: var(--cta); }
.csfloat-prose > ul,
.csfloat-prose > ol {
margin: 0 0 14px;
padding-left: 22px;
}
.csfloat-prose > ul > li,
.csfloat-prose > ol > li {
margin-bottom: 6px;
color: var(--ink-2);
}
.csfloat-prose > ul > li::marker {
color: var(--ink-4);
}
.csfloat-prose > ol > li::marker {
color: var(--ink-3);
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-prose > blockquote {
margin: 14px 0;
padding: 12px 16px;
border-left: 2px solid var(--cta);
background: rgba(59, 130, 246, 0.04);
font-family: var(--serif);
font-style: italic;
color: var(--ink-2);
border-radius: 0 6px 6px 0;
}
.csfloat-prose > blockquote > footer {
font-family: var(--ui);
font-style: normal;
color: var(--ink-4);
font-size: 11px;
margin-top: 8px;
letter-spacing: -0.005em;
}
.csfloat-prose > blockquote > footer::before {
content: '— ';
}
.csfloat-prose > pre {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
overflow-x: auto;
font: 400 12px/1.5 var(--mono);
color: var(--ink-2);
margin: 14px 0;
}
.csfloat-prose > p > code,
.csfloat-prose > ul code,
.csfloat-prose > ol code {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
font: 500 12px/1.4 var(--mono);
color: var(--cta);
}
.csfloat-prose > hr {
border: 0;
height: 1px;
background: var(--line);
margin: 28px 0;
}
.csfloat-prose > table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
font-size: 13px;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.csfloat-prose > table th {
background: var(--bg-2);
padding: 10px 12px;
text-align: left;
font: 600 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.csfloat-prose > table td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.csfloat-prose > table tr:last-child td { border-bottom: 0; }
/* CSFloat-1:1: page-anchor link wrapper — sticky table-of-contents column */
.csfloat-toc {
position: sticky;
top: 100px;
align-self: start;
width: 220px;
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: 0;
padding-left: 12px;
border-left: 1px solid var(--line);
}
.csfloat-toc-title {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 12px;
}
.csfloat-toc-link {
position: relative;
display: block;
padding: 6px 0 6px 12px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
border-left: 1px solid transparent;
margin-left: -13px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-toc-link:hover {
color: var(--ink-1);
border-left-color: var(--ink-3);
}
.csfloat-toc-link.is-active {
color: var(--cta);
border-left-color: var(--cta);
font-weight: 500;
}
.csfloat-toc-link.is-sub {
padding-left: 22px;
font-size: 11px;
}
@media (max-width: 1100px) {
.csfloat-toc { display: none; }
}
/* END prose typography + sticky toc */
/* CSFloat-1:1: docs layout — 220 toc + main + 220 toc */
.csfloat-docs-layout {
display: grid;
grid-template-columns: 220px 1fr 220px;
gap: 32px;
align-items: start;
}
.csfloat-docs-layout.is-no-side-toc {
grid-template-columns: 220px 1fr;
}
@media (max-width: 1280px) {
.csfloat-docs-layout {
grid-template-columns: 220px 1fr;
}
}
@media (max-width: 1100px) {
.csfloat-docs-layout, .csfloat-docs-layout.is-no-side-toc {
grid-template-columns: 1fr;
}
}
/* CSFloat-1:1: form action bar — sticky bottom for form pages */
.csfloat-form-actions {
position: sticky;
bottom: 0;
background: linear-gradient(180deg, transparent 0, var(--bg) 30%);
padding: 24px 0 16px;
margin-top: 24px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
z-index: 10;
}
.csfloat-form-actions.is-block {
background: var(--bg-1);
border-top: 1px solid var(--line);
padding: 16px 20px;
margin: 0;
border-radius: 0 0 10px 10px;
}
.csfloat-form-actions-status {
flex: 1 1 auto;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-form-actions-status.is-saved {
color: oklch(0.78 0.16 152);
}
.csfloat-form-actions-status.is-saved::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px currentColor;
}
.csfloat-form-actions-status.is-saving {
color: var(--ink-3);
}
.csfloat-form-actions-status.is-saving::before {
content: '';
width: 12px;
height: 12px;
border: 1.5px solid var(--line-2);
border-top-color: var(--cta);
border-radius: 999px;
animation: csfloat-spin 700ms linear infinite;
}
.csfloat-form-actions-status.is-error {
color: oklch(0.72 0.18 30);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-form-actions-status.is-saving::before { animation: none; }
}
/* CSFloat-1:1: data display empty body */
.csfloat-data-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 24px;
text-align: center;
}
.csfloat-data-empty-icon {
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 22px;
}
.csfloat-data-empty-msg {
font: 600 14px/1.4 var(--ui);
color: var(--ink-2);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-data-empty-sub {
font: 400 12px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
max-width: 320px;
margin: 0;
}
.csfloat-data-empty-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
/* END docs layout + form actions + data empty */
/* CSFloat-1:1: vendor logo strip — partner/payment logos row */
.csfloat-vendors {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-vendors-logo {
height: 24px;
width: auto;
opacity: 0.5;
filter: grayscale(1);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vendors-logo:hover {
opacity: 1;
filter: grayscale(0);
}
.csfloat-vendors.is-large .csfloat-vendors-logo {
height: 36px;
}
.csfloat-vendors-divider {
width: 1px;
height: 16px;
background: var(--line);
}
.csfloat-vendors-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 8px;
}
/* CSFloat-1:1: trust strip — payment + security badges */
.csfloat-trust-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-trust-strip-item {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-trust-strip-item-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 18px;
}
.csfloat-trust-strip-item.is-cta .csfloat-trust-strip-item-icon {
color: var(--cta);
}
.csfloat-trust-strip-item.is-success .csfloat-trust-strip-item-icon {
color: oklch(0.78 0.16 152);
}
.csfloat-trust-strip-item-label > b {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: announcement banner — for top-of-page broadcast */
.csfloat-announce {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(167, 139, 250, 0.06));
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 10px;
position: relative;
}
.csfloat-announce-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 15px;
}
.csfloat-announce-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-announce-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-announce-title-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-announce-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-announce-action {
flex: 0 0 auto;
}
.csfloat-announce-close {
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
font: 500 14px/1 var(--ui);
}
.csfloat-announce-close:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ink-1);
}
@media (max-width: 540px) {
.csfloat-announce {
grid-template-columns: 28px 1fr auto;
gap: 10px;
padding: 10px 12px;
}
.csfloat-announce-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 13px; }
.csfloat-announce-action { display: none; }
}
/* END vendor logos + trust strip + announce banner */
/* CSFloat-1:1: cookie consent banner */
.csfloat-cookie {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
margin: 0 auto;
max-width: 720px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 18px;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
z-index: 800;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.csfloat-cookie-text {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-cookie-text > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-cookie-text > a:hover { border-color: var(--cta); }
.csfloat-cookie-actions {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-cookie {
grid-template-columns: 1fr;
gap: 10px;
}
.csfloat-cookie-actions { justify-content: flex-end; }
}
/* CSFloat-1:1: locale / currency switcher */
.csfloat-locale {
position: relative;
display: inline-block;
}
.csfloat-locale-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-locale-trigger:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-locale-trigger-flag {
width: 16px;
height: 12px;
border-radius: 2px;
background: var(--bg-3);
flex: 0 0 16px;
object-fit: cover;
}
.csfloat-locale-trigger-currency {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
font-weight: 500;
margin-left: 4px;
}
.csfloat-locale-trigger-chev {
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
margin-left: 2px;
}
.csfloat-locale-popover {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 240px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
z-index: 100;
display: none;
flex-direction: column;
gap: 1px;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
max-height: 320px;
overflow-y: auto;
}
.csfloat-locale.is-open .csfloat-locale-popover { display: flex; }
.csfloat-locale-row {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
font: 400 13px/1 var(--ui);
color: var(--ink-2);
cursor: pointer;
letter-spacing: -0.005em;
transition: background 100ms ease;
}
.csfloat-locale-row:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-locale-row.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-locale-row-flag {
width: 18px;
height: 13px;
border-radius: 2px;
background: var(--bg-3);
object-fit: cover;
flex: 0 0 18px;
}
.csfloat-locale-row-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-locale-row-currency {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-locale-row.is-active .csfloat-locale-row-currency { color: var(--cta); }
.csfloat-locale-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-locale-section {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px 4px;
}
/* END cookie banner + locale switcher */
/* CSFloat-1:1: theme switcher pill — light/dark/system */
.csfloat-theme {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px;
gap: 1px;
}
.csfloat-theme > .csfloat-theme-opt {
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: 999px;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-theme > .csfloat-theme-opt:hover {
color: var(--ink-1);
}
.csfloat-theme > .csfloat-theme-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-theme > .csfloat-theme-opt.is-active.is-dark { background: var(--bg-3); }
.csfloat-theme > .csfloat-theme-opt.is-active.is-light {
background: oklch(0.92 0.01 240);
color: oklch(0.3 0.01 240);
}
.csfloat-theme > .csfloat-theme-opt.is-active.is-system {
background: linear-gradient(135deg, var(--bg-3) 50%, oklch(0.92 0.01 240) 50%);
color: var(--ink-1);
}
/* CSFloat-1:1: profile cover photo — banner with edit overlay */
.csfloat-cover {
position: relative;
height: 200px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
}
.csfloat-cover-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.csfloat-cover::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(7, 11, 24, 0.4) 100%);
pointer-events: none;
}
.csfloat-cover-edit {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
background: rgba(7, 11, 24, 0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
z-index: 1;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cover-edit:hover {
background: rgba(7, 11, 24, 0.75);
color: #fff;
}
.csfloat-cover-meta {
position: absolute;
bottom: 12px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 11px/1 var(--ui);
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.005em;
z-index: 1;
}
.csfloat-cover-meta-stat {
display: inline-flex;
align-items: baseline;
gap: 3px;
background: rgba(7, 11, 24, 0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 4px 8px;
border-radius: 999px;
}
.csfloat-cover-meta-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.csfloat-cover-meta-stat-val {
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
color: #fff;
}
@media (max-width: 540px) {
.csfloat-cover { height: 140px; }
}
/* CSFloat-1:1: profile body — overlapping avatar + tabs */
.csfloat-profile-body {
display: flex;
flex-direction: column;
gap: 0;
margin-top: -48px;
padding: 0 20px;
position: relative;
z-index: 2;
}
.csfloat-profile-body-head {
display: flex;
align-items: flex-end;
gap: 16px;
margin-bottom: 14px;
}
.csfloat-profile-body-avatar {
width: 96px;
height: 96px;
border-radius: 999px;
border: 4px solid var(--bg);
background: var(--bg-3);
flex: 0 0 96px;
object-fit: cover;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
.csfloat-profile-body-info {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 8px;
flex: 1 1 auto;
}
.csfloat-profile-body-name {
font: 700 22px/1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-profile-body-handle {
font: 400 13px/1.2 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
font-family: var(--mono);
}
.csfloat-profile-body-actions {
display: inline-flex;
gap: 8px;
padding-bottom: 8px;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-profile-body { margin-top: -36px; padding: 0 14px; }
.csfloat-profile-body-head { flex-wrap: wrap; gap: 12px; }
.csfloat-profile-body-avatar { width: 72px; height: 72px; flex: 0 0 72px; }
.csfloat-profile-body-actions { width: 100%; padding-bottom: 0; }
}
/* END theme switch + cover photo + profile body */
/* CSFloat-1:1: large editorial type pairing — Geist + Fraunces */
.csfloat-display {
font: 700 clamp(40px, 6vw, 72px) / 1.05 var(--ui);
letter-spacing: -0.04em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-display > .csfloat-display-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--cta);
}
.csfloat-display.is-cta-italic > .csfloat-display-italic {
background: linear-gradient(135deg, oklch(0.84 0.18 240) 0%, var(--cta) 50%, oklch(0.84 0.18 290) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.3));
}
.csfloat-display.is-no-balance { text-wrap: auto; }
.csfloat-h1 {
font: 600 clamp(28px, 4vw, 42px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
}
.csfloat-h1 > em {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
letter-spacing: -0.02em;
}
.csfloat-h2 {
font: 600 clamp(20px, 2.5vw, 28px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
}
.csfloat-h3 {
font: 600 clamp(16px, 2vw, 20px) / 1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-h4 {
font: 600 14px/1.35 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
/* CSFloat-1:1: tagline / subhead — sits below h1 */
.csfloat-tagline {
font: 400 clamp(15px, 1.6vw, 18px) / 1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 12px 0 0;
max-width: 720px;
text-wrap: balance;
}
.csfloat-tagline > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-tagline > b,
.csfloat-tagline > strong {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: caps eyebrow line above h1 */
.csfloat-caps-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 11px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
margin-bottom: 14px;
}
.csfloat-caps-eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--cta);
}
.csfloat-caps-eyebrow.is-no-line::before { display: none; }
.csfloat-caps-eyebrow.is-muted {
color: var(--ink-4);
}
.csfloat-caps-eyebrow.is-muted::before {
background: var(--ink-4);
}
/* CSFloat-1:1: stamp / timestamp display utility */
.csfloat-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-stamp.is-relative {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-stamp.is-live {
color: var(--cta);
}
.csfloat-stamp.is-live::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1600ms ease-in-out infinite;
}
@keyframes csfloat-stamp-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-stamp.is-live::before { animation: none; }
}
/* END display + h1-h4 + tagline + caps eyebrow + stamp */
/* CSFloat-1:1: secondary action group for headers — view toggle, share, export */
.csfloat-act-group {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-act-group-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 2px;
}
.csfloat-act-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-act-icon:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-act-icon.is-active {
background: var(--bg-3);
color: var(--cta);
border-color: var(--cta);
}
.csfloat-act-icon.is-cta {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-act-icon.is-cta:hover { background: oklch(0.66 0.18 240); }
.csfloat-act-icon.is-danger:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-act-icon.is-sm { width: 26px; height: 26px; }
.csfloat-act-icon.is-lg { width: 40px; height: 40px; border-radius: 8px; }
.csfloat-act-icon-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 14px;
height: 14px;
padding: 0 4px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 9px/14px var(--mono);
text-align: center;
border: 2px solid var(--bg);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: button color variants — primary, secondary, ghost, link */
.csfloat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 8px;
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
background: transparent;
color: inherit;
white-space: nowrap;
user-select: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-btn[disabled],
.csfloat-btn.is-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.csfloat-btn:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
.csfloat-btn-primary {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.csfloat-btn-primary:hover {
background: oklch(0.66 0.18 240);
border-color: oklch(0.66 0.18 240);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.csfloat-btn-secondary {
background: var(--bg-2);
border-color: var(--line);
color: var(--ink-1);
}
.csfloat-btn-secondary:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--ink-2);
}
.csfloat-btn-ghost:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-btn-success {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-btn-success:hover {
background: oklch(0.66 0.16 152);
}
.csfloat-btn-warning {
background: oklch(0.78 0.16 80);
border-color: oklch(0.78 0.16 80);
color: var(--bg);
}
.csfloat-btn-warning:hover {
background: oklch(0.82 0.16 80);
}
.csfloat-btn-danger {
background: oklch(0.66 0.18 30);
border-color: oklch(0.66 0.18 30);
color: #fff;
}
.csfloat-btn-danger:hover {
background: oklch(0.7 0.18 30);
}
.csfloat-btn-outline {
background: transparent;
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-btn-outline:hover {
background: var(--bg-2);
border-color: var(--ink-3);
}
.csfloat-btn-outline.is-cta {
border-color: var(--cta);
color: var(--cta);
}
.csfloat-btn-outline.is-cta:hover {
background: rgba(59, 130, 246, 0.08);
}
.csfloat-btn-link {
background: transparent;
border-color: transparent;
color: var(--cta);
padding: 0;
height: auto;
text-decoration: none;
}
.csfloat-btn-link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.csfloat-btn.is-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.csfloat-btn.is-lg { height: 44px; padding: 0 18px; font-size: 14px; }
.csfloat-btn.is-xl { height: 52px; padding: 0 24px; font-size: 15px; }
.csfloat-btn.is-block { display: flex; width: 100%; }
.csfloat-btn.is-pill { border-radius: 999px; }
.csfloat-btn.is-icon-only { padding: 0; width: 36px; }
.csfloat-btn.is-icon-only.is-sm { width: 28px; }
.csfloat-btn.is-icon-only.is-lg { width: 44px; }
.csfloat-btn.is-loading {
pointer-events: none;
position: relative;
color: transparent;
}
.csfloat-btn.is-loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 999px;
animation: csfloat-spin 700ms linear infinite;
color: #fff;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
}
.csfloat-btn-primary.is-loading::after,
.csfloat-btn-success.is-loading::after,
.csfloat-btn-danger.is-loading::after { color: rgba(255, 255, 255, 0.85); }
.csfloat-btn-secondary.is-loading::after,
.csfloat-btn-ghost.is-loading::after,
.csfloat-btn-outline.is-loading::after { color: var(--ink-1); }
@media (prefers-reduced-motion: reduce) {
.csfloat-btn.is-loading::after { animation: none; opacity: 0.6; }
}
/* END action group + button variants */
/* CSFloat-1:1: hash anchor — clickable hash icon next to headers */
.csfloat-anchor {
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
}
.csfloat-anchor-link {
width: 16px;
height: 16px;
color: var(--ink-4);
opacity: 0;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
text-decoration: none;
}
.csfloat-anchor:hover .csfloat-anchor-link { opacity: 1; }
.csfloat-anchor-link:hover { color: var(--cta); }
.csfloat-anchor-link::before {
content: '#';
font: 600 14px/1 var(--mono);
letter-spacing: 0;
}
/* CSFloat-1:1: callout / mini-feature row in landing pages */
.csfloat-feature-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.csfloat-feature-row:first-child { padding-top: 0; }
.csfloat-feature-row:last-child { border-bottom: 0; padding-bottom: 0; }
.csfloat-feature-row-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.25);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 14px;
}
.csfloat-feature-row-icon.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
color: oklch(0.78 0.16 152);
}
.csfloat-feature-row-icon.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.25);
color: oklch(0.84 0.16 80);
}
.csfloat-feature-row-icon.is-purple {
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.25);
color: oklch(0.84 0.18 290);
}
.csfloat-feature-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-feature-row-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-feature-row-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
/* CSFloat-1:1: shared two-column page layout — used for many docs/account pages */
.csfloat-two-col {
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
align-items: start;
}
.csfloat-two-col.is-left-rail { grid-template-columns: 280px 1fr; }
.csfloat-two-col.is-narrow-rail { grid-template-columns: 1fr 240px; }
.csfloat-two-col.is-equal { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
.csfloat-two-col, .csfloat-two-col.is-left-rail, .csfloat-two-col.is-narrow-rail, .csfloat-two-col.is-equal {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* CSFloat-1:1: badge wall — dense grid of earned badges */
.csfloat-badge-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
}
.csfloat-badge-wall-cell {
position: relative;
aspect-ratio: 1;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: help;
padding: 12px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-badge-wall-cell:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.csfloat-badge-wall-cell.is-locked {
opacity: 0.3;
filter: grayscale(1);
}
.csfloat-badge-wall-cell.is-earned {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), var(--bg-2));
border-color: rgba(59, 130, 246, 0.3);
}
.csfloat-badge-wall-cell.is-rare {
background: linear-gradient(180deg, rgba(244, 114, 182, 0.08), var(--bg-2));
border-color: rgba(244, 114, 182, 0.3);
}
.csfloat-badge-wall-cell.is-legend {
background: linear-gradient(180deg, rgba(251, 146, 60, 0.08), var(--bg-2));
border-color: rgba(251, 146, 60, 0.3);
}
.csfloat-badge-wall-cell > img,
.csfloat-badge-wall-cell > svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-badge-wall-cell-progress > .csfloat-badge-wall-cell-progress-fill {
height: 100%;
background: var(--cta);
border-radius: 0 0 0 7px;
}
/* END anchor + feature row + two-col layout + badge wall */
/* CSFloat-1:1: link-card — clickable card with arrow */
.csfloat-link-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
position: relative;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-card:hover {
border-color: var(--cta);
background: var(--bg-2);
transform: translateY(-1px);
}
.csfloat-link-card-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-link-card-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-link-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-link-card-arrow {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 24px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-card-arrow::before {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, 1px);
}
.csfloat-link-card:hover .csfloat-link-card-arrow {
background: var(--cta);
border-color: var(--cta);
color: #fff;
transform: translateX(2px);
}
/* CSFloat-1:1: simple two-pane layout — for help / FAQ side-by-side */
.csfloat-pane {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.csfloat-pane.is-3 { grid-template-columns: 1fr 1fr 1fr; }
.csfloat-pane.is-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
.csfloat-pane.is-3, .csfloat-pane.is-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.csfloat-pane, .csfloat-pane.is-3, .csfloat-pane.is-4 { grid-template-columns: 1fr; gap: 10px; }
}
/* CSFloat-1:1: highlight-on-hover row — for selectable lists */
.csfloat-hl-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-hl-row:hover {
background: var(--bg-2);
}
.csfloat-hl-row.is-selected {
background: rgba(59, 130, 246, 0.08);
}
.csfloat-hl-row-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-hl-row-title {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-hl-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-hl-row-trail {
flex: 0 0 auto;
color: var(--ink-3);
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-hl-row.is-selected .csfloat-hl-row-trail { color: var(--cta); }
/* END link card + multi-pane + highlight row */
/* CSFloat-1:1: animated underline section title — for landing pages */
.csfloat-anim-title {
display: inline-block;
font: 700 clamp(28px, 4vw, 44px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
position: relative;
}
.csfloat-anim-title::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 48px;
height: 3px;
background: var(--cta);
border-radius: 2px;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
.csfloat-anim-title.is-center { display: block; text-align: center; }
.csfloat-anim-title.is-center::after { left: 50%; transform: translateX(-50%); }
.csfloat-anim-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
}
/* CSFloat-1:1: full-screen overlay loader (used on initial page load) */
.csfloat-page-loader {
position: fixed;
inset: 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
flex-direction: column;
gap: 16px;
opacity: 1;
transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-page-loader.is-leaving { opacity: 0; pointer-events: none; }
.csfloat-page-loader-mark {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--cta);
display: flex;
align-items: center;
justify-content: center;
font: 700 22px/1 var(--mono);
color: #fff;
letter-spacing: -0.04em;
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
position: relative;
animation: csfloat-page-loader-pop 1200ms ease-in-out infinite;
}
@keyframes csfloat-page-loader-pop {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.96); }
}
.csfloat-page-loader-bar {
width: 80px;
height: 2px;
background: var(--bg-3);
border-radius: 1px;
overflow: hidden;
position: relative;
}
.csfloat-page-loader-bar::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30%;
background: var(--cta);
border-radius: 1px;
animation: csfloat-page-loader-slide 1100ms cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes csfloat-page-loader-slide {
0% { left: -30%; }
100% { left: 100%; }
}
.csfloat-page-loader-msg {
font: 500 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-page-loader-mark,
.csfloat-page-loader-bar::before { animation: none; }
}
/* CSFloat-1:1: hairline section between blocks (no padding required) */
.csfloat-hairline {
height: 1px;
background: var(--line);
border: 0;
}
.csfloat-hairline.is-faded {
background: linear-gradient(90deg, transparent 0%, var(--line) 50%, transparent 100%);
}
.csfloat-hairline.is-cta {
background: linear-gradient(90deg, transparent 0%, var(--cta) 50%, transparent 100%);
height: 1px;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-hairline.is-thick { height: 2px; }
/* END animated title + page loader + hairline */
/* CSFloat-1:1: image with watermark / sticker placement overlay (item zoom) */
.csfloat-img-mark {
position: relative;
display: inline-block;
}
.csfloat-img-mark > img {
display: block;
max-width: 100%;
height: auto;
}
.csfloat-img-mark-overlay {
position: absolute;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
font: 600 9px/1 var(--ui);
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-img-mark-overlay.is-corner-tl { top: 8px; left: 8px; }
.csfloat-img-mark-overlay.is-corner-tr { top: 8px; right: 8px; }
.csfloat-img-mark-overlay.is-corner-bl { bottom: 8px; left: 8px; }
.csfloat-img-mark-overlay.is-corner-br { bottom: 8px; right: 8px; }
.csfloat-img-mark-pin {
position: absolute;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 10px/1 var(--mono);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
cursor: pointer;
transform: translate(-50%, -50%);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-mark-pin:hover {
transform: translate(-50%, -50%) scale(1.15);
}
.csfloat-img-mark-pin.is-active {
background: oklch(0.84 0.18 60);
}
/* CSFloat-1:1: numeric ladder (vertical step indicator) */
.csfloat-ladder {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-ladder-step {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
align-items: flex-start;
}
.csfloat-ladder-step:last-child { border-bottom: 0; }
.csfloat-ladder-step-num {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 700 12px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-ladder-step.is-done .csfloat-ladder-step-num {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-ladder-step.is-active .csfloat-ladder-step-num {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-ladder-step-body {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 4px;
min-width: 0;
}
.csfloat-ladder-step-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-ladder-step-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
}
.csfloat-ladder-step-action {
margin-top: 6px;
}
/* CSFloat-1:1: tracker — tracking number block with copy + carrier */
.csfloat-tracker {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-tracker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-tracker-carrier {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-tracker-carrier-logo {
width: 22px;
height: 22px;
border-radius: 4px;
background: var(--bg-3);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.csfloat-tracker-carrier-logo > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-tracker-status { flex: 0 0 auto; }
.csfloat-tracker-num {
display: flex;
align-items: center;
gap: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 10px;
}
.csfloat-tracker-num-value {
flex: 1 1 auto;
font: 500 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
user-select: all;
}
.csfloat-tracker-num-copy {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-tracker-num-copy:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-tracker-stage {
display: flex;
align-items: center;
gap: 6px;
}
.csfloat-tracker-stage-step {
flex: 1 1 0;
height: 4px;
background: var(--bg-3);
border-radius: 2px;
position: relative;
}
.csfloat-tracker-stage-step.is-done { background: oklch(0.62 0.16 152); }
.csfloat-tracker-stage-step.is-active {
background: var(--cta);
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-tracker-stage-labels {
display: flex;
justify-content: space-between;
font: 500 9px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-tracker-stage-labels > span { flex: 1 1 0; text-align: center; }
.csfloat-tracker-stage-labels > span:first-child { text-align: left; }
.csfloat-tracker-stage-labels > span:last-child { text-align: right; }
.csfloat-tracker-eta {
font: 500 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-tracker-eta > .csfloat-tracker-eta-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
/* END img watermark + numeric ladder + tracker */
/* CSFloat-1:1: stack-of-cards visual (showing multiple offers/listings) */
.csfloat-stack {
position: relative;
display: inline-block;
isolation: isolate;
}
.csfloat-stack > * {
position: relative;
z-index: 1;
}
.csfloat-stack::before,
.csfloat-stack::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: inherit;
z-index: 0;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stack::before {
transform: translate(4px, 4px);
opacity: 0.6;
}
.csfloat-stack::after {
transform: translate(8px, 8px);
opacity: 0.3;
}
.csfloat-stack:hover::before { transform: translate(6px, 6px); opacity: 0.8; }
.csfloat-stack:hover::after { transform: translate(12px, 12px); opacity: 0.45; }
.csfloat-stack-count {
position: absolute;
top: -8px;
right: -8px;
z-index: 2;
background: var(--cta);
color: #fff;
padding: 3px 8px;
border-radius: 999px;
font: 700 10px/1 var(--mono);
font-feature-settings: "tnum";
border: 2px solid var(--bg);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* CSFloat-1:1: heatmap cell — for activity/calendar grids */
.csfloat-heat-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(7, 12px);
gap: 3px;
padding: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-heat-cell {
width: 12px;
height: 12px;
border-radius: 2px;
background: var(--bg-2);
border: 1px solid transparent;
cursor: help;
transition: all 100ms ease;
}
.csfloat-heat-cell:hover {
border-color: var(--cta);
}
.csfloat-heat-cell.is-l1 { background: rgba(59, 130, 246, 0.15); }
.csfloat-heat-cell.is-l2 { background: rgba(59, 130, 246, 0.3); }
.csfloat-heat-cell.is-l3 { background: rgba(59, 130, 246, 0.5); }
.csfloat-heat-cell.is-l4 { background: rgba(59, 130, 246, 0.75); }
.csfloat-heat-cell.is-l5 { background: var(--cta); box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }
.csfloat-heat-cell.is-empty {
background: transparent;
border: 1px dashed var(--line);
}
.csfloat-heat-legend {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.02em;
margin-top: 8px;
}
.csfloat-heat-legend-cell {
width: 10px;
height: 10px;
border-radius: 2px;
}
.csfloat-heat-legend-cell.is-l0 { background: var(--bg-2); }
.csfloat-heat-legend-cell.is-l1 { background: rgba(59, 130, 246, 0.15); }
.csfloat-heat-legend-cell.is-l2 { background: rgba(59, 130, 246, 0.3); }
.csfloat-heat-legend-cell.is-l3 { background: rgba(59, 130, 246, 0.5); }
.csfloat-heat-legend-cell.is-l4 { background: rgba(59, 130, 246, 0.75); }
.csfloat-heat-legend-cell.is-l5 { background: var(--cta); }
/* CSFloat-1:1: confetti / success burst overlay (animation only on completion) */
.csfloat-burst {
position: relative;
display: inline-block;
pointer-events: none;
}
.csfloat-burst-piece {
position: absolute;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cta);
opacity: 0;
pointer-events: none;
}
.csfloat-burst.is-active .csfloat-burst-piece {
animation: csfloat-burst-fly 800ms cubic-bezier(0.4, 1.4, 0.6, 1) forwards;
}
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(1) { --burst-x: 40px; --burst-y: -30px; background: oklch(0.78 0.16 152); animation-delay: 0ms; }
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(2) { --burst-x: -40px; --burst-y: -30px; background: var(--cta); animation-delay: 60ms; }
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(3) { --burst-x: 30px; --burst-y: 30px; background: oklch(0.84 0.18 60); animation-delay: 30ms; }
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(4) { --burst-x: -30px; --burst-y: 30px; background: oklch(0.84 0.18 290); animation-delay: 90ms; }
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(5) { --burst-x: 0; --burst-y: -45px; background: oklch(0.78 0.16 80); animation-delay: 45ms; }
.csfloat-burst.is-active .csfloat-burst-piece:nth-child(6) { --burst-x: 0; --burst-y: 45px; background: oklch(0.78 0.16 110); animation-delay: 75ms; }
@keyframes csfloat-burst-fly {
0% {
transform: translate(0, 0) scale(0.6);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translate(var(--burst-x, 0), var(--burst-y, 0)) scale(1.2);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.csfloat-burst.is-active .csfloat-burst-piece { animation: none; opacity: 0; }
}
/* END stack of cards + heatmap + confetti burst */
/* CSFloat-1:1: hover-revealed quick actions on table rows */
.csfloat-row-hover-actions {
display: inline-flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateX(4px);
pointer-events: none;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 140ms;
}
tr:hover .csfloat-row-hover-actions,
.csfloat-table tbody tr:hover .csfloat-row-hover-actions,
.csfloat-row-hover-actions-anchor:hover .csfloat-row-hover-actions {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.csfloat-row-hover-action {
width: 24px;
height: 24px;
border-radius: 4px;
border: 0;
background: var(--bg-3);
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 120ms ease;
}
.csfloat-row-hover-action:hover {
background: var(--cta);
color: #fff;
}
.csfloat-row-hover-action.is-danger:hover {
background: oklch(0.66 0.18 30);
}
/* CSFloat-1:1: filter chip — single-select alternative to the multi-chip */
.csfloat-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-filter-chip.is-on {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-filter-chip-count {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
font-size: 11px;
color: inherit;
opacity: 0.7;
margin-left: 2px;
}
.csfloat-filter-chip.is-on .csfloat-filter-chip-count { opacity: 0.85; }
.csfloat-filter-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-filter-chip-row.is-scroll {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
}
.csfloat-filter-chip-row.is-scroll::-webkit-scrollbar { display: none; }
.csfloat-filter-chip-row.is-scroll > .csfloat-filter-chip {
flex: 0 0 auto;
}
/* CSFloat-1:1: header-search results dropdown */
.csfloat-hsearch-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
z-index: 200;
display: none;
flex-direction: column;
gap: 0;
overflow: hidden;
max-height: 480px;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hsearch-dropdown.is-open { display: flex; }
.csfloat-hsearch-dropdown-section {
padding: 6px 4px;
border-bottom: 1px solid var(--line);
}
.csfloat-hsearch-dropdown-section:last-child { border-bottom: 0; }
.csfloat-hsearch-dropdown-title {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
.csfloat-hsearch-dropdown-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 100ms ease;
}
.csfloat-hsearch-dropdown-row:hover,
.csfloat-hsearch-dropdown-row.is-active {
background: var(--bg-2);
}
.csfloat-hsearch-dropdown-row-img {
width: 28px;
height: 28px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px;
flex: 0 0 28px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-hsearch-dropdown-row-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-hsearch-dropdown-row-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-hsearch-dropdown-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-hsearch-dropdown-row-name mark {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
padding: 0 1px;
border-radius: 2px;
}
.csfloat-hsearch-dropdown-row-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-4);
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-hsearch-dropdown-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
.csfloat-hsearch-dropdown-row-cta {
font: 600 10px/1 var(--ui);
color: var(--cta);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-hsearch-dropdown-empty {
padding: 36px 16px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-hsearch-dropdown-foot {
border-top: 1px solid var(--line);
padding: 8px 10px;
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-hsearch-dropdown-foot-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
}
.csfloat-hsearch-dropdown-foot-action:hover { opacity: 0.78; }
/* END row hover actions + filter chip + hsearch dropdown */
/* CSFloat-1:1: settings switch row with description block (alternative layout) */
.csfloat-set-tile {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-set-tile:hover { border-color: var(--line-2); }
.csfloat-set-tile-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex: 0 0 36px;
}
.csfloat-set-tile.is-on .csfloat-set-tile-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-set-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-set-tile-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-set-tile-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-set-tile-action { flex: 0 0 auto; }
.csfloat-set-tile-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
/* CSFloat-1:1: API endpoint row — for API docs / playground listings */
.csfloat-endpoint {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-endpoint:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-endpoint-method {
font: 700 11px/1 var(--mono);
letter-spacing: 0.04em;
text-align: center;
padding: 5px 6px;
border-radius: 4px;
font-feature-settings: "tnum";
}
.csfloat-endpoint-method.is-get { background: rgba(59, 130, 246, 0.12); color: var(--cta); border: 1px solid rgba(59, 130, 246, 0.3); }
.csfloat-endpoint-method.is-post { background: rgba(52, 211, 153, 0.12); color: oklch(0.78 0.16 152); border: 1px solid rgba(52, 211, 153, 0.3); }
.csfloat-endpoint-method.is-put { background: rgba(251, 191, 36, 0.12); color: oklch(0.84 0.16 80); border: 1px solid rgba(251, 191, 36, 0.3); }
.csfloat-endpoint-method.is-delete { background: rgba(248, 113, 113, 0.12); color: oklch(0.72 0.18 30); border: 1px solid rgba(248, 113, 113, 0.3); }
.csfloat-endpoint-method.is-patch { background: rgba(167, 139, 250, 0.12); color: oklch(0.84 0.18 290); border: 1px solid rgba(167, 139, 250, 0.3); }
.csfloat-endpoint-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-endpoint-path {
font: 600 13px/1.3 var(--mono);
color: var(--ink-1);
letter-spacing: 0.005em;
font-feature-settings: "tnum";
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-endpoint-path > .csfloat-endpoint-path-param {
color: var(--cta);
}
.csfloat-endpoint-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-endpoint-tags {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.csfloat-endpoint-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-3);
border: 1px solid var(--line);
padding: 3px 5px;
border-radius: 3px;
}
.csfloat-endpoint-tag.is-deprecated { color: oklch(0.72 0.18 30); border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.06); }
.csfloat-endpoint-tag.is-beta { color: oklch(0.84 0.18 290); border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.06); }
.csfloat-endpoint-tag.is-auth { color: var(--cta); border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.06); }
/* CSFloat-1:1: API request / response panel for docs */
.csfloat-api-panel {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-api-panel-head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-api-panel-body {
padding: 12px 14px;
font: 400 12px/1.6 var(--mono);
color: var(--ink-2);
white-space: pre;
overflow-x: auto;
letter-spacing: 0;
}
.csfloat-api-panel-body .csfloat-api-key { color: oklch(0.84 0.18 290); }
.csfloat-api-panel-body .csfloat-api-string { color: oklch(0.78 0.16 152); }
.csfloat-api-panel-body .csfloat-api-num { color: oklch(0.84 0.18 60); }
.csfloat-api-panel-body .csfloat-api-bool { color: oklch(0.72 0.18 30); }
.csfloat-api-panel-body .csfloat-api-null { color: var(--ink-4); }
.csfloat-api-panel-body .csfloat-api-comment { color: var(--ink-4); font-style: italic; }
.csfloat-api-panel-tabs {
display: flex;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
padding: 0 6px;
}
.csfloat-api-panel-tab {
padding: 8px 12px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: transparent;
border: 0;
cursor: pointer;
position: relative;
transition: color 140ms ease;
}
.csfloat-api-panel-tab:hover { color: var(--ink-1); }
.csfloat-api-panel-tab.is-active { color: var(--ink-1); }
.csfloat-api-panel-tab.is-active::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--cta);
}
/* END settings tile + endpoint row + API panel */
/* CSFloat-1:1: pinned tile (sticky to top of grids/lists) */
.csfloat-pinned {
position: relative;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 10px;
padding: 12px 14px;
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
}
.csfloat-pinned-icon {
width: 28px;
height: 28px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex: 0 0 28px;
}
.csfloat-pinned-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-pinned-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-pinned-msg {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-pinned-action { flex: 0 0 auto; }
/* CSFloat-1:1: status track segments (multi-stage progress like deposit/withdraw) */
.csfloat-status-track {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-status-track > .csfloat-status-track-step {
flex: 1 1 0;
padding: 12px 14px;
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-status-track > .csfloat-status-track-step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid var(--bg-1);
transform: translateY(-50%);
z-index: 2;
}
.csfloat-status-track > .csfloat-status-track-step:not(:last-child)::before {
content: '';
position: absolute;
top: 50%;
right: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid var(--line);
transform: translateY(-50%);
z-index: 1;
}
.csfloat-status-track > .csfloat-status-track-step.is-done {
background: rgba(52, 211, 153, 0.06);
}
.csfloat-status-track > .csfloat-status-track-step.is-done:not(:last-child)::after {
border-left-color: rgba(52, 211, 153, 0.06);
}
.csfloat-status-track > .csfloat-status-track-step.is-active {
background: rgba(59, 130, 246, 0.06);
}
.csfloat-status-track > .csfloat-status-track-step.is-active:not(:last-child)::after {
border-left-color: rgba(59, 130, 246, 0.06);
}
.csfloat-status-track-step-num {
font: 700 10px/1 var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
font-feature-settings: "tnum";
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-status-track-step-num::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ink-4);
}
.csfloat-status-track > .csfloat-status-track-step.is-done .csfloat-status-track-step-num {
color: oklch(0.78 0.16 152);
}
.csfloat-status-track > .csfloat-status-track-step.is-done .csfloat-status-track-step-num::before {
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
.csfloat-status-track > .csfloat-status-track-step.is-active .csfloat-status-track-step-num {
color: var(--cta);
}
.csfloat-status-track > .csfloat-status-track-step.is-active .csfloat-status-track-step-num::before {
background: var(--cta);
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
animation: csfloat-status-track-pulse 1500ms ease-in-out infinite;
}
@keyframes csfloat-status-track-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}
.csfloat-status-track-step-label {
font: 600 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-status-track > .csfloat-status-track-step.is-done .csfloat-status-track-step-label,
.csfloat-status-track > .csfloat-status-track-step.is-active .csfloat-status-track-step-label {
color: var(--ink-1);
}
.csfloat-status-track-step-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.csfloat-status-track {
flex-direction: column;
}
.csfloat-status-track > .csfloat-status-track-step {
border-bottom: 1px solid var(--line);
}
.csfloat-status-track > .csfloat-status-track-step:not(:last-child)::before,
.csfloat-status-track > .csfloat-status-track-step:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-status-track > .csfloat-status-track-step.is-active .csfloat-status-track-step-num::before {
animation: none;
}
}
/* END pinned tile + multi-stage status track */
/* CSFloat-1:1: floating quick-buy tile that lives over item card */
.csfloat-quick-buy {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
gap: 6px;
align-items: stretch;
background: rgba(7, 11, 24, 0.55);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 6px;
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
z-index: 2;
pointer-events: none;
}
.csfloat-quick-buy-anchor:hover .csfloat-quick-buy,
.csfloat-quick-buy.is-show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.csfloat-quick-buy-btn {
flex: 1 1 auto;
height: 30px;
border: 0;
border-radius: 5px;
background: var(--cta);
color: #fff;
font: 600 12px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-quick-buy-btn:hover {
background: oklch(0.66 0.18 240);
}
.csfloat-quick-buy-btn-price {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
margin-left: 4px;
}
.csfloat-quick-buy-btn-price::before {
content: '$';
font-size: 10px;
margin-right: 1px;
opacity: 0.85;
}
.csfloat-quick-buy-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 5px;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-quick-buy-icon:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
/* CSFloat-1:1: floating quick-bid input — for hovering over auction items */
.csfloat-quick-bid {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
height: 32px;
}
.csfloat-quick-bid-input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
padding: 0 10px;
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
width: 80px;
min-width: 0;
}
.csfloat-quick-bid-input::placeholder { color: var(--ink-3); }
.csfloat-quick-bid-prefix {
display: inline-flex;
align-items: center;
padding: 0 8px;
background: var(--bg-3);
color: var(--ink-3);
font: 500 11px/1 var(--mono);
border-right: 1px solid var(--line);
}
.csfloat-quick-bid-btn {
flex: 0 0 auto;
padding: 0 12px;
background: var(--cta);
color: #fff;
border: 0;
border-left: 1px solid var(--cta);
cursor: pointer;
font: 700 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-quick-bid-btn:hover {
background: oklch(0.66 0.18 240);
}
.csfloat-quick-bid:focus-within {
border-color: var(--cta);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* CSFloat-1:1: market summary bar (above grid showing 24h volume / count) */
.csfloat-mkt-sum {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding: 10px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 14px;
}
.csfloat-mkt-sum-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-mkt-sum-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-mkt-sum-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-mkt-sum-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-mkt-sum-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-mkt-sum-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-mkt-sum-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-mkt-sum-divider {
width: 1px;
height: 16px;
background: var(--line);
}
.csfloat-mkt-sum-spacer { flex: 1 1 auto; }
.csfloat-mkt-sum-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-mkt-sum-stamp::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-mkt-sum-stamp::before { animation: none; }
}
@media (max-width: 540px) {
.csfloat-mkt-sum {
gap: 10px;
padding: 10px 12px;
}
.csfloat-mkt-sum-divider { display: none; }
}
/* END quick buy + quick bid + market summary */
/* CSFloat-1:1: scroll-snap horizontal scroller for mini cards */
.csfloat-hscroll {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 4px;
padding: 4px 4px 12px;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
-webkit-overflow-scrolling: touch;
}
.csfloat-hscroll::-webkit-scrollbar { height: 4px; }
.csfloat-hscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.csfloat-hscroll > * {
scroll-snap-align: start;
flex: 0 0 auto;
}
.csfloat-hscroll.is-no-snap > * { scroll-snap-align: none; }
.csfloat-hscroll.is-no-bar { padding-bottom: 4px; }
.csfloat-hscroll.is-no-bar::-webkit-scrollbar { display: none; }
.csfloat-hscroll.is-no-bar { scrollbar-width: none; }
/* CSFloat-1:1: mini market card — for hscroll horizontal strips */
.csfloat-mini-card {
flex: 0 0 200px;
width: 200px;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mini-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-mini-card-img {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.csfloat-mini-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mini-card:hover .csfloat-mini-card-img > img { transform: scale(1.05); }
.csfloat-mini-card-tag {
position: absolute;
top: 6px;
right: 6px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(4px);
padding: 3px 5px;
border-radius: 3px;
}
.csfloat-mini-card-rare {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--ink-3);
}
.csfloat-mini-card-rare.is-class { background: oklch(0.62 0.27 330); }
.csfloat-mini-card-rare.is-cov { background: oklch(0.66 0.18 30); }
.csfloat-mini-card-rare.is-rare { background: oklch(0.84 0.18 60); }
.csfloat-mini-card-body {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-mini-card-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-mini-card-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px;
}
.csfloat-mini-card-price {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-mini-card-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-mini-card-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: profile activity stream item */
.csfloat-act-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px dashed var(--line);
}
.csfloat-act-item:last-child { border-bottom: 0; }
.csfloat-act-item-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
margin-top: 2px;
}
.csfloat-act-item.is-buy .csfloat-act-item-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-act-item.is-sell .csfloat-act-item-icon {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-act-item.is-list .csfloat-act-item-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-act-item.is-trade .csfloat-act-item-icon {
background: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
}
.csfloat-act-item-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-act-item-text {
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-act-item-text > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-act-item-text > .csfloat-act-item-text-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-act-item-detail {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 2px;
padding: 6px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 400 12px/1 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
align-self: flex-start;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-act-item-detail:hover { border-color: var(--line-2); color: var(--ink-1); }
.csfloat-act-item-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
flex: 0 0 auto;
margin-top: 4px;
}
/* END hscroll + mini card + activity stream item */
/* CSFloat-1:1: stat caption pair (label + tooltip help) */
.csfloat-stat-caption {
display: flex;
align-items: center;
gap: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-caption-help {
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line-2);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/12px var(--ui);
cursor: help;
text-transform: none;
letter-spacing: 0;
font-feature-settings: "tnum";
}
.csfloat-stat-caption-help::after { content: '?'; }
/* CSFloat-1:1: receipt-style summary card with mono numerics */
.csfloat-receipt {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
font: 400 13px/1.6 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-receipt-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line);
align-items: center;
text-align: center;
}
.csfloat-receipt-head-title {
font: 700 13px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-1);
}
.csfloat-receipt-head-id {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-receipt-head-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-receipt-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-receipt-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
}
.csfloat-receipt-row > .csfloat-receipt-row-key {
color: var(--ink-3);
font-size: 12px;
}
.csfloat-receipt-row > .csfloat-receipt-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
font-size: 13px;
}
.csfloat-receipt-row.is-discount > .csfloat-receipt-row-val { color: oklch(0.78 0.16 152); }
.csfloat-receipt-row.is-fee > .csfloat-receipt-row-val { color: oklch(0.84 0.16 80); }
.csfloat-receipt-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-receipt-divider.is-dashed {
background: none;
border-top: 1px dashed var(--line);
}
.csfloat-receipt-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-receipt-total-label {
font: 700 13px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-1);
}
.csfloat-receipt-total-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-receipt-total-val::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-receipt-foot {
text-align: center;
padding-top: 10px;
border-top: 1px dashed var(--line);
font: 400 10px/1.4 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-receipt-foot > .csfloat-receipt-foot-mark {
display: block;
margin: 8px auto 0;
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
font-family: var(--ui);
}
/* END stat caption + receipt summary */
/* CSFloat-1:1: live event banner — for new product drops, sales, promotions */
.csfloat-event-banner {
position: relative;
background: linear-gradient(135deg, var(--bg-2) 0%, oklch(0.22 0.04 240) 100%);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 14px;
padding: 22px 28px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
overflow: hidden;
}
.csfloat-event-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 240px at 80% 100%, rgba(59, 130, 246, 0.12), transparent 60%);
pointer-events: none;
}
.csfloat-event-banner-art {
width: 72px;
height: 72px;
border-radius: 14px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cta);
font-size: 28px;
flex: 0 0 72px;
position: relative;
z-index: 1;
}
.csfloat-event-banner-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
position: relative;
z-index: 1;
}
.csfloat-event-banner-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
margin-bottom: 2px;
}
.csfloat-event-banner-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-event-banner-title {
font: 700 clamp(18px, 2.4vw, 26px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
}
.csfloat-event-banner-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
}
.csfloat-event-banner-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-event-banner-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
position: relative;
z-index: 1;
}
.csfloat-event-banner-end {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
position: relative;
z-index: 1;
flex: 0 0 auto;
}
.csfloat-event-banner-end-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
@media (max-width: 720px) {
.csfloat-event-banner {
grid-template-columns: auto 1fr;
gap: 14px;
padding: 18px 20px;
}
.csfloat-event-banner-art { width: 56px; height: 56px; flex: 0 0 56px; font-size: 22px; }
.csfloat-event-banner-actions {
grid-column: span 2;
width: 100%;
}
.csfloat-event-banner-end { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-event-banner-eyebrow::before { animation: none; }
}
/* CSFloat-1:1: floating badge — small chip floating on cards */
.csfloat-float-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--cta);
color: #fff;
font: 700 10px/18px var(--mono);
text-align: center;
border: 2px solid var(--bg);
font-feature-settings: "tnum";
z-index: 1;
}
.csfloat-float-badge.is-success { background: oklch(0.62 0.16 152); }
.csfloat-float-badge.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-float-badge.is-warning { background: oklch(0.78 0.16 80); color: var(--bg); }
.csfloat-float-badge.is-dot {
width: 8px;
height: 8px;
min-width: 8px;
padding: 0;
font-size: 0;
}
.csfloat-float-badge.is-pulse {
animation: csfloat-stamp-pulse 1600ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-float-badge.is-pulse { animation: none; }
}
/* END event banner + floating badge */
/* CSFloat-1:1: collection / set chip — for grouping items by collection */
.csfloat-set-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px 0 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-set-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-set-chip-img {
width: 16px;
height: 16px;
border-radius: 3px;
background: var(--bg-3);
flex: 0 0 16px;
padding: 1px;
object-fit: contain;
}
/* CSFloat-1:1: rare gem highlight tag — for ultra-rare items */
.csfloat-gem {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 10px 0 6px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(167, 139, 250, 0.12));
border: 1px solid rgba(244, 114, 182, 0.35);
border-radius: 999px;
font: 700 10px/1 var(--ui);
color: oklch(0.86 0.18 320);
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
position: relative;
}
.csfloat-gem::before {
content: '';
width: 8px;
height: 8px;
background: oklch(0.62 0.27 330);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
flex: 0 0 8px;
}
.csfloat-gem.is-blue {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(96, 165, 250, 0.12));
border-color: rgba(96, 165, 250, 0.4);
color: oklch(0.88 0.16 240);
}
.csfloat-gem.is-blue::before { background: var(--cta); }
.csfloat-gem.is-green {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(110, 231, 183, 0.12));
border-color: rgba(110, 231, 183, 0.4);
color: oklch(0.88 0.16 152);
}
.csfloat-gem.is-green::before { background: oklch(0.62 0.16 152); }
.csfloat-gem.is-gold {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(252, 211, 77, 0.12));
border-color: rgba(252, 211, 77, 0.4);
color: oklch(0.92 0.16 80);
}
.csfloat-gem.is-gold::before { background: oklch(0.84 0.18 60); }
.csfloat-gem-glow {
box-shadow: 0 0 12px rgba(244, 114, 182, 0.35);
}
/* CSFloat-1:1: trader handle — username with avatar shown inline */
.csfloat-handle {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: inherit;
vertical-align: middle;
}
.csfloat-handle-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 18px;
object-fit: cover;
}
.csfloat-handle-name {
font: 500 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-handle:hover .csfloat-handle-name { color: var(--cta); }
.csfloat-handle-tag {
display: inline-flex;
align-items: center;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--cta);
color: #fff;
justify-content: center;
font: 700 8px/12px var(--ui);
}
.csfloat-handle-tag::after {
content: '';
width: 5px;
height: 3px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
}
.csfloat-handle.is-sm .csfloat-handle-avatar { width: 14px; height: 14px; flex: 0 0 14px; }
.csfloat-handle.is-sm .csfloat-handle-name { font-size: 11px; }
.csfloat-handle.is-lg .csfloat-handle-avatar { width: 24px; height: 24px; flex: 0 0 24px; }
.csfloat-handle.is-lg .csfloat-handle-name { font-size: 14px; font-weight: 600; }
/* END collection chip + gem tag + trader handle */
/* CSFloat-1:1: trade meta block — for trade detail view (parties, lock period, fees) */
.csfloat-trade-meta {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-trade-meta-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.csfloat-trade-meta-row:last-child { border-bottom: 0; }
.csfloat-trade-meta-row > .csfloat-trade-meta-key {
font: 600 10px/1.3 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trade-meta-row > .csfloat-trade-meta-val {
font: 500 13px/1.4 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-ui {
font-family: var(--ui);
letter-spacing: -0.005em;
}
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-success { color: oklch(0.78 0.16 152); }
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-trade-meta-row > .csfloat-trade-meta-val.is-cta { color: var(--cta); }
@media (max-width: 540px) {
.csfloat-trade-meta-row { grid-template-columns: 1fr; gap: 4px; }
}
/* CSFloat-1:1: payout breakdown — for sale earnings detail */
.csfloat-payout {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
gap: 12px;
}
.csfloat-payout-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--line);
}
.csfloat-payout-head-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-payout-head-val {
font: 600 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-payout-head-val::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-payout-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-payout-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-payout-row > .csfloat-payout-row-key {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-payout-row > .csfloat-payout-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
.csfloat-payout-row.is-discount > .csfloat-payout-row-val { color: oklch(0.78 0.16 152); }
.csfloat-payout-row.is-fee > .csfloat-payout-row-val { color: oklch(0.84 0.16 80); }
.csfloat-payout-net {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.csfloat-payout-net-label {
font: 700 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-payout-net-val {
font: 700 22px/1 var(--mono);
color: oklch(0.78 0.16 152);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-payout-net-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
.csfloat-payout-foot {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
padding-top: 8px;
border-top: 1px dashed var(--line);
margin-top: 4px;
}
/* END trade meta + payout breakdown */
/* CSFloat-1:1: contract / agreement scrollable text block */
.csfloat-contract {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px 18px;
font: 400 13px/1.7 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
max-height: 320px;
overflow-y: auto;
}
.csfloat-contract > h3,
.csfloat-contract > h4 {
font: 600 13px/1.4 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 16px 0 6px;
}
.csfloat-contract > h3:first-child,
.csfloat-contract > h4:first-child { margin-top: 0; }
.csfloat-contract > p { margin: 0 0 10px; }
.csfloat-contract > ul,
.csfloat-contract > ol {
margin: 0 0 10px;
padding-left: 18px;
}
.csfloat-contract > ul > li,
.csfloat-contract > ol > li { margin-bottom: 4px; }
.csfloat-contract > strong { color: var(--ink-1); font-weight: 600; }
.csfloat-contract::-webkit-scrollbar { width: 6px; }
.csfloat-contract::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.csfloat-contract-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 10px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-contract-foot > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-contract-foot > a:hover { border-color: var(--cta); }
/* CSFloat-1:1: SLA status row (uptime / latency) */
.csfloat-sla {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
}
.csfloat-sla:last-child { border-bottom: 0; }
.csfloat-sla-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-sla-name::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px currentColor;
}
.csfloat-sla.is-degraded .csfloat-sla-name::before { background: oklch(0.78 0.16 80); }
.csfloat-sla.is-down .csfloat-sla-name::before { background: oklch(0.66 0.18 30); }
.csfloat-sla.is-maintenance .csfloat-sla-name::before { background: var(--cta); }
.csfloat-sla-uptime {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
}
.csfloat-sla-uptime-label {
display: block;
font: 400 9px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 3px;
font-family: var(--ui);
font-weight: 600;
}
.csfloat-sla-latency {
font: 600 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
text-align: right;
}
.csfloat-sla-latency::after {
content: 'ms';
font-size: 10px;
color: var(--ink-4);
margin-left: 1px;
font-weight: 500;
}
.csfloat-sla-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* CSFloat-1:1: incident report row (for incident history) */
.csfloat-incident {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.csfloat-incident:last-child { border-bottom: 0; }
.csfloat-incident-marker {
width: 8px;
height: 8px;
border-radius: 999px;
background: oklch(0.78 0.16 80);
margin-top: 6px;
box-shadow: 0 0 4px currentColor;
}
.csfloat-incident.is-resolved .csfloat-incident-marker { background: oklch(0.78 0.16 152); }
.csfloat-incident.is-investigating .csfloat-incident-marker { background: var(--cta); }
.csfloat-incident.is-major .csfloat-incident-marker { background: oklch(0.66 0.18 30); }
.csfloat-incident-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-incident-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.csfloat-incident-title-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 80);
background: rgba(251, 191, 36, 0.1);
padding: 2px 5px;
border-radius: 3px;
border: 1px solid rgba(251, 191, 36, 0.25);
}
.csfloat-incident.is-resolved .csfloat-incident-title-tag {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-incident.is-major .csfloat-incident-title-tag {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-incident-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-incident-affected {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-incident-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
flex: 0 0 auto;
margin-top: 4px;
}
/* END contract + SLA + incident */
/* CSFloat-1:1: tag input field — for adding multiple tags to listings */
.csfloat-tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-height: 38px;
padding: 4px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
cursor: text;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tag-input:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-tag-input > .csfloat-tag-input-tag {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 6px 0 10px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-tag-input > .csfloat-tag-input-tag-x {
width: 14px;
height: 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font: 600 11px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-tag-input > .csfloat-tag-input-tag-x:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-tag-input > input {
flex: 1 1 60px;
background: transparent;
border: 0;
outline: 0;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
padding: 6px 4px;
min-width: 60px;
}
.csfloat-tag-input > input::placeholder { color: var(--ink-3); }
.csfloat-tag-input.is-error {
border-color: oklch(0.66 0.18 30);
background: rgba(248, 113, 113, 0.04);
}
/* CSFloat-1:1: meta row — small inline meta info bar */
.csfloat-meta-row {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-meta-row > .csfloat-meta-row-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-meta-row > .csfloat-meta-row-divider {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-meta-row > .csfloat-meta-row-divider::before {
content: '·';
}
.csfloat-meta-row > .csfloat-meta-row-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
.csfloat-meta-row > .csfloat-meta-row-cta {
color: var(--cta);
}
.csfloat-meta-row > .csfloat-meta-row-success {
color: oklch(0.78 0.16 152);
}
.csfloat-meta-row > .csfloat-meta-row-warning {
color: oklch(0.84 0.16 80);
}
.csfloat-meta-row > .csfloat-meta-row-danger {
color: oklch(0.72 0.18 30);
}
.csfloat-meta-row.is-stack {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.csfloat-meta-row.is-stack > .csfloat-meta-row-divider { display: none; }
/* CSFloat-1:1: filter pill row — for active filters with reset */
.csfloat-filter-pill-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 0;
}
.csfloat-filter-pill {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 6px 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-filter-pill-x {
width: 14px;
height: 14px;
border-radius: 999px;
border: 0;
background: var(--bg-3);
color: var(--ink-3);
cursor: pointer;
font: 600 10px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 2px;
transition: background 100ms ease;
}
.csfloat-filter-pill-x:hover {
background: oklch(0.66 0.18 30);
color: #fff;
}
.csfloat-filter-pill.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-filter-pill.is-cta .csfloat-filter-pill-x {
background: rgba(59, 130, 246, 0.15);
}
.csfloat-filter-pill-reset {
font: 500 11px/1 var(--ui);
color: oklch(0.72 0.18 30);
background: transparent;
border: 0;
padding: 6px 8px;
cursor: pointer;
letter-spacing: -0.005em;
border-radius: 4px;
}
.csfloat-filter-pill-reset:hover {
background: rgba(248, 113, 113, 0.08);
}
/* END tag input + meta row + filter pill row */
/* CSFloat-1:1: editor toolbar — for rich text fields */
.csfloat-editor-toolbar {
display: flex;
align-items: center;
gap: 2px;
padding: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px 8px 0 0;
border-bottom: 0;
flex-wrap: wrap;
}
.csfloat-editor-toolbar-btn {
width: 28px;
height: 28px;
border-radius: 4px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
font-size: 13px;
}
.csfloat-editor-toolbar-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-editor-toolbar-btn.is-active {
background: rgba(59, 130, 246, 0.15);
color: var(--cta);
}
.csfloat-editor-toolbar-btn.is-bold { font-weight: 700; }
.csfloat-editor-toolbar-btn.is-italic { font-style: italic; }
.csfloat-editor-toolbar-btn.is-underline { text-decoration: underline; text-underline-offset: 2px; }
.csfloat-editor-toolbar-btn.is-strike { text-decoration: line-through; }
.csfloat-editor-toolbar-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 3px;
}
.csfloat-editor-toolbar-spacer { flex: 1 1 auto; }
.csfloat-editor {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 0 0 8px 8px;
padding: 14px 16px;
font: 400 14px/1.6 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
min-height: 160px;
outline: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-editor:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-editor[contenteditable="true"]:empty::before {
content: attr(data-placeholder);
color: var(--ink-4);
pointer-events: none;
}
.csfloat-editor > h2 {
font: 600 18px/1.3 var(--ui);
color: var(--ink-1);
margin: 14px 0 6px;
}
.csfloat-editor > h3 {
font: 600 16px/1.3 var(--ui);
color: var(--ink-1);
margin: 12px 0 6px;
}
.csfloat-editor > p { margin: 0 0 8px; }
.csfloat-editor > ul,
.csfloat-editor > ol {
margin: 0 0 8px;
padding-left: 22px;
}
.csfloat-editor > blockquote {
margin: 8px 0;
padding: 6px 12px;
border-left: 2px solid var(--cta);
background: rgba(59, 130, 246, 0.04);
font-family: var(--serif);
font-style: italic;
color: var(--ink-2);
border-radius: 0 4px 4px 0;
}
.csfloat-editor code {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 3px;
padding: 1px 4px;
font: 500 12px/1.4 var(--mono);
color: var(--cta);
}
.csfloat-editor a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
/* CSFloat-1:1: poll / vote bar */
.csfloat-poll {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
}
.csfloat-poll-question {
font: 600 14px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.csfloat-poll-opt {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.csfloat-poll-opt:hover {
border-color: var(--line-2);
}
.csfloat-poll-opt.is-voted {
background: rgba(59, 130, 246, 0.04);
border-color: var(--cta);
}
.csfloat-poll-opt.is-voted::before {
content: '';
position: absolute;
inset: 0;
background: rgba(59, 130, 246, 0.06);
width: var(--vote-pct, 0%);
pointer-events: none;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-poll-opt-label {
flex: 1 1 auto;
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
position: relative;
z-index: 1;
}
.csfloat-poll-opt-pct {
font: 600 12px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
position: relative;
z-index: 1;
}
.csfloat-poll-opt.is-voted .csfloat-poll-opt-pct { color: var(--cta); }
.csfloat-poll-opt-radio {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
position: relative;
z-index: 1;
flex: 0 0 14px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-poll-opt.is-voted .csfloat-poll-opt-radio {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-poll-opt.is-voted .csfloat-poll-opt-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
background: #fff;
transform: translate(-50%, -50%);
}
.csfloat-poll-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
margin-top: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-poll-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
/* END editor toolbar + poll vote */
/* CSFloat-1:1: payment status microbar — for completed checkout summary */
.csfloat-paymicro {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: rgba(52, 211, 153, 0.06);
border: 1px solid rgba(52, 211, 153, 0.3);
border-radius: 10px;
}
.csfloat-paymicro.is-pending {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-paymicro.is-failed {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-paymicro-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.18);
border: 1px solid rgba(52, 211, 153, 0.4);
color: oklch(0.78 0.16 152);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
}
.csfloat-paymicro.is-pending .csfloat-paymicro-icon {
background: rgba(251, 191, 36, 0.18);
border-color: rgba(251, 191, 36, 0.4);
color: oklch(0.84 0.16 80);
}
.csfloat-paymicro.is-failed .csfloat-paymicro-icon {
background: rgba(248, 113, 113, 0.18);
border-color: rgba(248, 113, 113, 0.4);
color: oklch(0.72 0.18 30);
}
.csfloat-paymicro-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-paymicro-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-paymicro-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-paymicro-amt {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.015em;
}
.csfloat-paymicro-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
vertical-align: top;
font-weight: 500;
}
/* CSFloat-1:1: image-with-info card — for staff / admin / mod feed display */
.csfloat-info-card {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-info-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-info-card-img {
width: 60px;
height: 60px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
flex: 0 0 60px;
}
.csfloat-info-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-info-card-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-info-card-row1 {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-info-card-row1 > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-info-card-name {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-info-card-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-info-card-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
.csfloat-info-card-trail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.csfloat-info-card-amount {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-info-card-amount::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-info-card-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
@media (max-width: 540px) {
.csfloat-info-card { grid-template-columns: 48px 1fr; gap: 10px; }
.csfloat-info-card-img { width: 48px; height: 48px; flex: 0 0 48px; }
.csfloat-info-card-trail { grid-column: 2; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}
/* END payment status microbar + info card */
/* CSFloat-1:1: drag handle for sortable rows */
.csfloat-drag {
width: 16px;
height: 16px;
cursor: grab;
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
user-select: none;
transition: color 120ms ease;
}
.csfloat-drag:hover { color: var(--ink-2); }
.csfloat-drag:active { cursor: grabbing; }
.csfloat-drag::before {
content: '';
width: 8px;
height: 12px;
background-image:
radial-gradient(circle at 25% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 84%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 84%, currentColor 1px, transparent 1.5px);
}
.csfloat-drag-row {
position: relative;
transition: opacity 100ms ease;
}
.csfloat-drag-row.is-dragging {
opacity: 0.4;
cursor: grabbing;
}
.csfloat-drag-row.is-drop-target::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--cta);
border-radius: 1px;
z-index: 1;
}
/* CSFloat-1:1: copy-text mini block — for inline copyable values */
.csfloat-copy {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-copy:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-copy.is-copied {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-copy-icon {
width: 12px;
height: 12px;
color: var(--ink-3);
opacity: 0.7;
transition: opacity 120ms ease;
}
.csfloat-copy:hover .csfloat-copy-icon { opacity: 1; }
.csfloat-copy.is-copied .csfloat-copy-icon { color: oklch(0.78 0.16 152); opacity: 1; }
.csfloat-copy.is-block {
display: flex;
width: 100%;
justify-content: space-between;
padding: 8px 12px;
font-size: 13px;
border-radius: 6px;
}
.csfloat-copy.is-truncate > .csfloat-copy-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 280px;
}
/* CSFloat-1:1: scroll progress bar at top of page */
.csfloat-scroll-prog {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
z-index: 1500;
pointer-events: none;
}
.csfloat-scroll-prog-fill {
height: 100%;
background: var(--cta);
width: 0%;
transition: width 100ms linear;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.csfloat-scroll-prog.is-thick { height: 3px; }
/* END drag handle + copy mini + scroll progress */
/* CSFloat-1:1: tag list with separator dots — for related items metadata */
.csfloat-dot-list {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-dot-list > .csfloat-dot-list-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 6px;
}
.csfloat-dot-list > .csfloat-dot-list-item:not(:last-child)::after {
content: '·';
color: var(--ink-4);
margin-left: 4px;
font-size: 10px;
display: inline-block;
}
.csfloat-dot-list > .csfloat-dot-list-item:first-child { padding-left: 0; }
.csfloat-dot-list > .csfloat-dot-list-item:last-child { padding-right: 0; }
.csfloat-dot-list > .csfloat-dot-list-item.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-dot-list > .csfloat-dot-list-item.is-cta { color: var(--cta); }
.csfloat-dot-list > .csfloat-dot-list-item.is-success { color: oklch(0.78 0.16 152); }
.csfloat-dot-list > .csfloat-dot-list-item.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-dot-list > .csfloat-dot-list-item.is-danger { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: section pill — small selectable header */
.csfloat-section-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-section-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-section-pill.is-active {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-section-pill-icon {
width: 12px;
height: 12px;
color: currentColor;
opacity: 0.8;
}
.csfloat-section-pill-count {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0;
text-transform: none;
margin-left: 2px;
}
.csfloat-section-pill.is-active .csfloat-section-pill-count {
color: rgba(7, 11, 24, 0.6);
}
.csfloat-section-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* CSFloat-1:1: minimap nav — for long pages with section anchors */
.csfloat-minimap {
position: fixed;
top: 50%;
right: 16px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 8px;
background: rgba(7, 11, 24, 0.7);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 999px;
z-index: 90;
}
.csfloat-minimap-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ink-4);
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.csfloat-minimap-dot:hover {
background: var(--ink-2);
transform: scale(1.4);
}
.csfloat-minimap-dot.is-active {
background: var(--cta);
width: 8px;
height: 16px;
border-radius: 999px;
}
.csfloat-minimap-dot-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-3);
color: var(--ink-1);
font: 500 11px/1 var(--ui);
padding: 5px 10px;
border-radius: 4px;
border: 1px solid var(--line-2);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
letter-spacing: -0.005em;
}
.csfloat-minimap-dot:hover .csfloat-minimap-dot-label {
opacity: 1;
}
@media (max-width: 1100px) {
.csfloat-minimap { display: none; }
}
/* END dot list + section pill + minimap nav */
/* CSFloat-1:1: feature highlight box — for new-feature callouts */
.csfloat-feature-hl {
position: relative;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), var(--bg-1) 60%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.csfloat-feature-hl::before {
content: 'NEW';
position: absolute;
top: 14px;
right: 14px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
color: #fff;
background: var(--cta);
padding: 3px 6px;
border-radius: 3px;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.csfloat-feature-hl-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
}
.csfloat-feature-hl-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
padding-right: 56px;
}
.csfloat-feature-hl-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-feature-hl-link {
font: 500 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-start;
}
.csfloat-feature-hl-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* CSFloat-1:1: feedback widget tile — sticky bottom-right form opener */
.csfloat-feedback-widget {
position: fixed;
bottom: 24px;
left: 24px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
z-index: 50;
width: 280px;
max-width: calc(100vw - 48px);
animation: csfloat-feedback-widget-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-feedback-widget-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-feedback-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-feedback-widget-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-feedback-widget-close {
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
font: 500 14px/1 var(--ui);
}
.csfloat-feedback-widget-close:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-feedback-widget-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-feedback-widget-input {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 10px;
font: 400 12px/1.5 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
resize: vertical;
min-height: 60px;
outline: 0;
}
.csfloat-feedback-widget-input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-feedback-widget-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.csfloat-feedback-widget-mood {
display: inline-flex;
gap: 4px;
}
.csfloat-feedback-widget-mood > .csfloat-feedback-widget-mood-btn {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--bg-2);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feedback-widget-mood > .csfloat-feedback-widget-mood-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-feedback-widget-mood > .csfloat-feedback-widget-mood-btn.is-selected {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
}
@media (max-width: 540px) {
.csfloat-feedback-widget {
bottom: 16px;
left: 16px;
right: 16px;
width: auto;
}
}
/* CSFloat-1:1: heatmap calendar (year view by week) */
.csfloat-heat-cal {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
}
.csfloat-heat-cal-days {
display: grid;
grid-template-rows: repeat(7, 12px);
gap: 3px;
font: 400 8px/12px var(--mono);
color: var(--ink-4);
text-align: right;
padding-right: 4px;
}
.csfloat-heat-cal-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(7, 12px);
gap: 3px;
overflow-x: auto;
}
.csfloat-heat-cal-cell {
width: 12px;
height: 12px;
border-radius: 2px;
background: var(--bg-2);
cursor: help;
border: 1px solid transparent;
transition: all 100ms ease;
}
.csfloat-heat-cal-cell:hover {
border-color: var(--cta);
transform: scale(1.4);
}
.csfloat-heat-cal-cell.is-l1 { background: rgba(59, 130, 246, 0.15); }
.csfloat-heat-cal-cell.is-l2 { background: rgba(59, 130, 246, 0.3); }
.csfloat-heat-cal-cell.is-l3 { background: rgba(59, 130, 246, 0.5); }
.csfloat-heat-cal-cell.is-l4 { background: rgba(59, 130, 246, 0.75); }
.csfloat-heat-cal-cell.is-l5 { background: var(--cta); }
.csfloat-heat-cal-months {
grid-column: 2;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 6px;
}
/* END feature highlight + feedback widget + heatmap calendar */
/* CSFloat-1:1: marquee text — for scrolling fast updates */
.csfloat-marquee {
position: relative;
width: 100%;
overflow: hidden;
height: 30px;
display: flex;
align-items: center;
}
.csfloat-marquee-track {
display: inline-flex;
align-items: center;
gap: 32px;
white-space: nowrap;
animation: csfloat-marquee-scroll 30000ms linear infinite;
padding-left: 100%;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-marquee:hover .csfloat-marquee-track { animation-play-state: paused; }
@keyframes csfloat-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
.csfloat-marquee-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-marquee-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-marquee-item-up { color: oklch(0.78 0.16 152); font-weight: 600; }
.csfloat-marquee-item-down { color: oklch(0.72 0.18 30); font-weight: 600; }
.csfloat-marquee-item-divider {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-marquee-item-divider::before { content: '·'; }
.csfloat-marquee.is-fast .csfloat-marquee-track { animation-duration: 18000ms; }
.csfloat-marquee.is-slow .csfloat-marquee-track { animation-duration: 50000ms; }
@media (prefers-reduced-motion: reduce) {
.csfloat-marquee-track { animation: none; }
}
/* CSFloat-1:1: account verification level row */
.csfloat-verif-level {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 6px;
}
.csfloat-verif-level.is-current {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-verif-level-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 13px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-verif-level.is-current .csfloat-verif-level-icon {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-verif-level.is-completed .csfloat-verif-level-icon {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-verif-level-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-verif-level-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-verif-level-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-verif-level-perks {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.csfloat-verif-level-perk {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--ui);
color: var(--ink-2);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.02em;
}
.csfloat-verif-level-perk.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.25);
color: var(--cta);
}
/* CSFloat-1:1: marketplace fee table */
.csfloat-fee-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-fee-table thead th {
text-align: left;
padding: 12px 14px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
.csfloat-fee-table thead th:not(:first-child) { text-align: right; }
.csfloat-fee-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-fee-table tbody td:not(:first-child) {
text-align: right;
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-fee-table tbody tr:last-child td { border-bottom: 0; }
.csfloat-fee-table tbody tr:hover { background: var(--bg-2); }
.csfloat-fee-table tbody td.is-saving { color: oklch(0.78 0.16 152); }
.csfloat-fee-table-tier {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-fee-table-tier::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ink-3);
}
.csfloat-fee-table-tier.is-bronze::before { background: oklch(0.62 0.16 50); }
.csfloat-fee-table-tier.is-silver::before { background: oklch(0.84 0.04 240); }
.csfloat-fee-table-tier.is-gold::before { background: oklch(0.84 0.18 60); }
.csfloat-fee-table-tier.is-platinum::before {
background: linear-gradient(135deg, var(--cta), oklch(0.84 0.18 290));
}
/* END marquee + verification level + fee table */
/* CSFloat-1:1: small map / region picker (clickable region squares) */
.csfloat-region-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 6px;
}
.csfloat-region-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-region-opt:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-region-opt.is-selected {
background: rgba(59, 130, 246, 0.1);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-region-opt-flag {
width: 18px;
height: 13px;
background: var(--bg-3);
border-radius: 2px;
flex: 0 0 18px;
object-fit: cover;
}
.csfloat-region-opt-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-region-opt-mark {
width: 12px;
height: 12px;
border-radius: 999px;
border: 1.5px solid var(--line-2);
background: transparent;
flex: 0 0 12px;
position: relative;
}
.csfloat-region-opt.is-selected .csfloat-region-opt-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-region-opt.is-selected .csfloat-region-opt-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
border-radius: 999px;
background: #fff;
}
/* CSFloat-1:1: keyboard shortcut help item — for shortcut listings */
.csfloat-shortcut {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-bottom: 1px dashed var(--line);
}
.csfloat-shortcut:last-child { border-bottom: 0; }
.csfloat-shortcut-action {
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-shortcut-keys {
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
}
.csfloat-shortcut-keys > .csfloat-shortcut-keys-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 4px;
font: 600 10px/1 var(--mono);
color: var(--ink-2);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-shortcut-keys > .csfloat-shortcut-keys-sep {
color: var(--ink-4);
font-size: 9px;
margin: 0 1px;
}
/* CSFloat-1:1: dev mode banner / staging environment indicator */
.csfloat-env-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, oklch(0.78 0.18 30), oklch(0.84 0.18 60), oklch(0.78 0.18 30));
background-size: 200% 100%;
animation: csfloat-env-banner-shift 3000ms linear infinite;
z-index: 1500;
pointer-events: none;
}
.csfloat-env-banner.is-staging {
background: linear-gradient(90deg, oklch(0.84 0.16 80), oklch(0.78 0.16 80), oklch(0.84 0.16 80));
}
.csfloat-env-banner.is-dev {
background: linear-gradient(90deg, oklch(0.84 0.18 290), oklch(0.78 0.18 290), oklch(0.84 0.18 290));
}
.csfloat-env-banner-label {
position: fixed;
top: 8px;
right: 16px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
color: oklch(0.84 0.18 30);
background: rgba(7, 11, 24, 0.85);
padding: 4px 8px;
border-radius: 0 0 4px 4px;
z-index: 1500;
pointer-events: none;
text-transform: uppercase;
border: 1px solid currentColor;
border-top: 0;
}
.csfloat-env-banner.is-staging + .csfloat-env-banner-label { color: oklch(0.84 0.16 80); }
.csfloat-env-banner.is-dev + .csfloat-env-banner-label { color: oklch(0.84 0.18 290); }
@keyframes csfloat-env-banner-shift {
0% { background-position: 0 0; }
100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-env-banner { animation: none; }
}
/* END region picker + shortcut help + env banner */
/* CSFloat-1:1: list-picker — searchable list inside a modal */
.csfloat-list-picker {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
max-height: 480px;
}
.csfloat-list-picker-search {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.csfloat-list-picker-search > input {
width: 100%;
height: 32px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 0 10px;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
outline: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-list-picker-search > input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-list-picker-search > input::placeholder { color: var(--ink-3); }
.csfloat-list-picker-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 4px;
}
.csfloat-list-picker-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-list-picker-row:hover {
background: var(--bg-2);
}
.csfloat-list-picker-row.is-selected {
background: rgba(59, 130, 246, 0.08);
}
.csfloat-list-picker-row-icon {
width: 24px;
height: 24px;
border-radius: 4px;
background: var(--bg-2);
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px;
}
.csfloat-list-picker-row-icon > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-list-picker-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-list-picker-row-name mark {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
padding: 0 1px;
border-radius: 2px;
}
.csfloat-list-picker-row-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-list-picker-row.is-selected .csfloat-list-picker-row-meta { color: var(--cta); }
.csfloat-list-picker-empty {
padding: 36px 16px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-list-picker-foot {
padding: 8px 12px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-list-picker-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
/* CSFloat-1:1: bullet stat row — for compact stats with bullet markers */
.csfloat-bullet-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-bullet-stat {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-bullet-stat::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ink-4);
}
.csfloat-bullet-stat.is-cta::before { background: var(--cta); }
.csfloat-bullet-stat.is-success::before { background: oklch(0.78 0.16 152); }
.csfloat-bullet-stat.is-warning::before { background: oklch(0.84 0.16 80); }
.csfloat-bullet-stat.is-danger::before { background: oklch(0.72 0.18 30); }
.csfloat-bullet-stat-val {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
}
/* END list picker + bullet stat */
/* CSFloat-1:1: feature unlock card — for tier upgrade prompts */
.csfloat-unlock {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), var(--bg-1) 60%);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 12px;
padding: 18px 20px;
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
position: relative;
overflow: hidden;
}
.csfloat-unlock::before {
content: '';
position: absolute;
top: -8px;
right: 12px;
bottom: 0;
width: 64px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 70%);
pointer-events: none;
}
.csfloat-unlock-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
position: relative;
z-index: 1;
}
.csfloat-unlock-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
position: relative;
z-index: 1;
}
.csfloat-unlock-eyebrow {
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-unlock-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-unlock-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-unlock-action { flex: 0 0 auto; position: relative; z-index: 1; }
@media (max-width: 540px) {
.csfloat-unlock {
grid-template-columns: 32px 1fr;
gap: 10px;
padding: 14px 16px;
}
.csfloat-unlock-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.csfloat-unlock-action { grid-column: span 2; }
}
/* CSFloat-1:1: webhook log row — for developer activity inspection */
.csfloat-hook-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
font: 400 12px/1.4 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hook-row:last-child { border-bottom: 0; }
.csfloat-hook-row:hover { background: var(--bg-2); }
.csfloat-hook-row-status {
width: 36px;
text-align: center;
font: 700 10px/1 var(--mono);
letter-spacing: 0.04em;
padding: 3px 4px;
border-radius: 3px;
}
.csfloat-hook-row-status.is-2xx { color: oklch(0.78 0.16 152); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.25); }
.csfloat-hook-row-status.is-3xx { color: var(--cta); background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); }
.csfloat-hook-row-status.is-4xx { color: oklch(0.84 0.16 80); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.25); }
.csfloat-hook-row-status.is-5xx { color: oklch(0.72 0.18 30); background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.25); }
.csfloat-hook-row-method {
width: 50px;
text-align: center;
font: 700 10px/1 var(--mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-hook-row-method.is-get { color: var(--cta); }
.csfloat-hook-row-method.is-post { color: oklch(0.78 0.16 152); }
.csfloat-hook-row-method.is-put { color: oklch(0.84 0.16 80); }
.csfloat-hook-row-method.is-delete { color: oklch(0.72 0.18 30); }
.csfloat-hook-row-path {
flex: 1 1 auto;
color: var(--ink-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.02em;
}
.csfloat-hook-row-time {
color: var(--ink-3);
text-align: right;
letter-spacing: 0.02em;
}
.csfloat-hook-row-time::after {
content: 'ms';
font-size: 9px;
color: var(--ink-4);
margin-left: 1px;
}
.csfloat-hook-row-stamp {
color: var(--ink-4);
text-align: right;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* CSFloat-1:1: small live counter (for "X people viewing now" etc) */
.csfloat-live-count {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-live-count::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-live-count-num {
font: 600 12px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-live-count::before { animation: none; }
}
/* END unlock card + webhook log + live count */
/* CSFloat-1:1: account level meter — circular badge + xp bar */
.csfloat-level {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-level-badge {
width: 56px;
height: 56px;
border-radius: 999px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 2px solid var(--cta);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 0 0 56px;
position: relative;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}
.csfloat-level-badge-num {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-level-badge-label {
font: 600 7px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
margin-top: 2px;
}
.csfloat-level-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.csfloat-level-name {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-level-xp-bar {
position: relative;
width: 100%;
height: 5px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
}
.csfloat-level-xp-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.84 0.18 240));
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-level-xp-meta {
display: flex;
align-items: center;
justify-content: space-between;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-level-xp-meta-mono {
color: var(--ink-2);
font-weight: 500;
}
/* CSFloat-1:1: connection status row inside settings (Steam, Discord, etc.) */
.csfloat-conn-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
}
.csfloat-conn-row:last-child { border-bottom: 0; }
.csfloat-conn-row-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
flex: 0 0 32px;
overflow: hidden;
padding: 4px;
}
.csfloat-conn-row-icon > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-conn-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-conn-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-conn-row-handle {
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-conn-row-status {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-conn-row-status.is-connected {
color: oklch(0.78 0.16 152);
}
.csfloat-conn-row-status.is-connected::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
}
.csfloat-conn-row-status.is-disconnected {
color: var(--ink-4);
}
.csfloat-conn-row-status.is-error {
color: oklch(0.72 0.18 30);
}
/* CSFloat-1:1: side rail spec block — minimal listing tile for sidebars */
.csfloat-rail-spec {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-rail-spec-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-rail-spec-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-rail-spec-action {
font: 500 10px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
}
.csfloat-rail-spec-action:hover { opacity: 0.78; }
.csfloat-rail-spec-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-rail-spec-row {
display: flex;
align-items: center;
justify-content: space-between;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-rail-spec-row > .csfloat-rail-spec-row-val {
font: 500 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-rail-spec-row.is-emphasis > .csfloat-rail-spec-row-val {
font-size: 13px;
font-weight: 600;
}
/* END level meter + connection row + rail spec */
/* CSFloat-1:1: top trades carousel — featured trade slot strip */
.csfloat-top-trades {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-top-trades-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-top-trades-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-top-trades-link {
font: 500 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-top-trades-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.csfloat-top-trades-strip {
display: flex;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 12px;
scrollbar-width: none;
}
.csfloat-top-trades-strip::-webkit-scrollbar { display: none; }
.csfloat-top-trades-card {
flex: 0 0 220px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-top-trades-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-top-trades-card-row {
display: flex;
gap: 6px;
align-items: center;
}
.csfloat-top-trades-card-img {
width: 38px;
height: 38px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-top-trades-card-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-top-trades-card-arrow {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-top-trades-card-arrow::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-top-trades-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.csfloat-top-trades-card-handle {
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-top-trades-card-handle-avatar {
width: 14px;
height: 14px;
border-radius: 999px;
flex: 0 0 14px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-top-trades-card-amt {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-top-trades-card-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: leaderboard summary tile (compact, podium-style) */
.csfloat-podium {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 10px;
align-items: end;
padding: 18px 14px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-podium-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
text-align: center;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-podium-tile.is-2 { padding-top: 16px; min-height: 110px; }
.csfloat-podium-tile.is-1 {
border-color: oklch(0.84 0.18 60);
background: linear-gradient(180deg, rgba(251, 146, 60, 0.06), var(--bg-2));
padding-top: 20px;
min-height: 130px;
box-shadow: 0 0 16px rgba(251, 146, 60, 0.12);
}
.csfloat-podium-tile.is-3 { padding-top: 12px; min-height: 92px; }
.csfloat-podium-tile-rank {
font: 700 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-podium-tile.is-1 .csfloat-podium-tile-rank { color: oklch(0.84 0.18 60); }
.csfloat-podium-tile.is-2 .csfloat-podium-tile-rank { color: oklch(0.84 0.04 240); }
.csfloat-podium-tile.is-3 .csfloat-podium-tile-rank { color: oklch(0.62 0.16 50); }
.csfloat-podium-tile-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--bg-3);
object-fit: cover;
border: 2px solid var(--line);
}
.csfloat-podium-tile.is-1 .csfloat-podium-tile-avatar { border-color: oklch(0.84 0.18 60); width: 48px; height: 48px; }
.csfloat-podium-tile-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.csfloat-podium-tile-amt {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-podium-tile-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-podium-tile.is-1 .csfloat-podium-tile-amt { font-size: 15px; }
/* END top trades + podium leaderboard */
/* CSFloat-1:1: status update card — for staff announcements feed */
.csfloat-update-card {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 8px;
}
.csfloat-update-card-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
flex: 0 0 32px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-update-card-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.csfloat-update-card-head {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.csfloat-update-card-author {
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-update-card-role {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-update-card-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-left: auto;
}
.csfloat-update-card-text {
font: 400 13px/1.6 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-update-card-text > b { color: var(--ink-1); font-weight: 600; }
.csfloat-update-card-attach {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.csfloat-update-card-attach > .csfloat-update-card-attach-tile {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
text-decoration: none;
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-update-card-attach > .csfloat-update-card-attach-tile:hover {
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-update-card-foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
.csfloat-update-card-foot-action {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-update-card-foot-action:hover { color: var(--ink-1); }
.csfloat-update-card-foot-action.is-active { color: var(--cta); }
.csfloat-update-card-foot-action-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 500;
}
/* CSFloat-1:1: list of recent transactions (compact, 1-line) */
.csfloat-tx-mini {
display: grid;
grid-template-columns: 18px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
font: 400 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-tx-mini:hover { background: var(--bg-2); }
.csfloat-tx-mini:last-child { border-bottom: 0; }
.csfloat-tx-mini-icon {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
font-size: 9px;
}
.csfloat-tx-mini-icon.is-up {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-tx-mini-icon.is-down {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-tx-mini-name {
color: var(--ink-1);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-tx-mini-amount {
font: 600 12px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-tx-mini-amount.is-up { color: oklch(0.78 0.16 152); }
.csfloat-tx-mini-amount.is-up::before { content: '+'; margin-right: 1px; }
.csfloat-tx-mini-amount.is-down { color: oklch(0.72 0.18 30); }
.csfloat-tx-mini-amount.is-down::before { content: '−'; margin-right: 1px; }
.csfloat-tx-mini-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* END status update card + tx mini */
/* CSFloat-1:1: header alert tag (small label inside top nav) */
.csfloat-nav-tag {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-nav-tag.is-success {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-nav-tag.is-warning {
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-nav-tag.is-danger {
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-nav-tag::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
.csfloat-nav-tag.is-no-dot::before { display: none; }
.csfloat-nav-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
font-weight: 700;
}
/* CSFloat-1:1: profile listing tile — small wrapper used in profile listings tab */
.csfloat-profile-listing {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-profile-listing:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-profile-listing-img {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.csfloat-profile-listing-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-profile-listing-status {
position: absolute;
top: 6px;
left: 6px;
}
.csfloat-profile-listing-fav {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-profile-listing-fav:hover { color: oklch(0.84 0.18 30); background: rgba(0, 0, 0, 0.6); }
.csfloat-profile-listing-fav.is-on { color: oklch(0.78 0.18 30); }
.csfloat-profile-listing-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-profile-listing-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 32px;
}
.csfloat-profile-listing-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.csfloat-profile-listing-price {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-profile-listing-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-profile-listing-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-profile-listing-foot {
margin-top: 4px;
padding-top: 6px;
border-top: 1px dashed var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font: 400 10px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-profile-listing-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: minimal stat — for inline next-to-text stats */
.csfloat-mini-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-mini-stat-val {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-mini-stat-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-mini-stat-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-mini-stat-val.is-cta { color: var(--cta); }
.csfloat-mini-stat-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* END nav tag + profile listing + mini stat */
/* CSFloat-1:1: trust verification banner — for kyc verified users */
.csfloat-trust-banner {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: rgba(52, 211, 153, 0.04);
border: 1px solid rgba(52, 211, 153, 0.3);
border-radius: 10px;
}
.csfloat-trust-banner-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.18);
border: 1px solid rgba(52, 211, 153, 0.4);
color: oklch(0.78 0.16 152);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--ui);
flex: 0 0 32px;
}
.csfloat-trust-banner-icon::after {
content: '';
width: 14px;
height: 7px;
border: 2px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-trust-banner-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trust-banner-title {
font: 600 13px/1.3 var(--ui);
color: oklch(0.92 0.1 152);
letter-spacing: -0.005em;
}
.csfloat-trust-banner-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
/* CSFloat-1:1: site stat hero — for landing page metric strip */
.csfloat-stat-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
padding: 24px 0;
}
.csfloat-stat-hero-cell {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
position: relative;
}
.csfloat-stat-hero-cell::after {
content: '';
position: absolute;
top: 50%;
right: -8px;
height: 60%;
width: 1px;
background: var(--line);
transform: translateY(-50%);
}
.csfloat-stat-hero-cell:last-child::after { display: none; }
.csfloat-stat-hero-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-hero-cell-val {
font: 700 clamp(28px, 4vw, 40px) / 1 var(--mono);
letter-spacing: -0.025em;
color: var(--ink-1);
font-feature-settings: "tnum";
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 1px;
}
.csfloat-stat-hero-cell-val.is-currency::before {
content: '$';
font-size: 0.5em;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-hero-cell-val-suffix {
font-size: 0.5em;
color: var(--ink-3);
margin-left: 4px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-stat-hero-cell-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
@media (max-width: 720px) {
.csfloat-stat-hero-cell::after { display: none; }
}
/* CSFloat-1:1: deep navigation bar — for product detail navigation between items */
.csfloat-deep-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-deep-nav-side {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
text-decoration: none;
color: var(--ink-2);
font: 500 12px/1 var(--ui);
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-deep-nav-side:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-deep-nav-side.is-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.csfloat-deep-nav-side.is-prev { justify-content: flex-start; }
.csfloat-deep-nav-side.is-next { justify-content: flex-end; }
.csfloat-deep-nav-side-arrow {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-deep-nav-side-arrow::before {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
}
.csfloat-deep-nav-side.is-prev .csfloat-deep-nav-side-arrow::before {
transform: rotate(-135deg) translate(-1px, -1px);
}
.csfloat-deep-nav-side.is-next .csfloat-deep-nav-side-arrow::before {
transform: rotate(45deg) translate(-1px, -1px);
}
.csfloat-deep-nav-info {
display: flex;
flex-direction: column;
gap: 1px;
align-items: center;
min-width: 0;
}
.csfloat-deep-nav-info-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-deep-nav-info-name {
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin-top: 2px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-deep-nav-side-name {
display: none;
}
@media (min-width: 720px) {
.csfloat-deep-nav-side-name {
display: inline-block;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* END trust banner + stat hero + deep nav */
/* CSFloat-1:1: download / export menu (for tax docs, statements) */
.csfloat-export-menu {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-export-menu-row {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-export-menu-row:last-child { border-bottom: 0; }
.csfloat-export-menu-row:hover { background: var(--bg-2); }
.csfloat-export-menu-row-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font: 700 10px/1 var(--mono);
letter-spacing: 0.06em;
}
.csfloat-export-menu-row-icon.is-pdf { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); color: oklch(0.78 0.18 30); }
.csfloat-export-menu-row-icon.is-csv { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.25); color: oklch(0.78 0.16 152); }
.csfloat-export-menu-row-icon.is-xlsx { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.25); color: oklch(0.84 0.16 80); }
.csfloat-export-menu-row-icon.is-json { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.25); color: oklch(0.84 0.18 290); }
.csfloat-export-menu-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-export-menu-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-export-menu-row-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-export-menu-row-size {
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-export-menu-row-action {
flex: 0 0 auto;
}
.csfloat-export-menu-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* CSFloat-1:1: full-width split panel — for staff dashboards with two columns */
.csfloat-split-panel {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-split-panel > .csfloat-split-panel-side {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-split-panel > .csfloat-split-panel-side:first-child {
border-right: 1px solid var(--line);
}
.csfloat-split-panel-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 6px;
}
.csfloat-split-panel-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-split-panel.is-3col {
grid-template-columns: 1fr 1fr 1fr;
}
.csfloat-split-panel.is-3col > .csfloat-split-panel-side:first-child {
border-right: 1px solid var(--line);
}
.csfloat-split-panel.is-3col > .csfloat-split-panel-side:nth-child(2) {
border-right: 1px solid var(--line);
}
@media (max-width: 720px) {
.csfloat-split-panel,
.csfloat-split-panel.is-3col {
grid-template-columns: 1fr;
}
.csfloat-split-panel > .csfloat-split-panel-side:first-child,
.csfloat-split-panel.is-3col > .csfloat-split-panel-side:not(:last-child) {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
/* CSFloat-1:1: support article card — knowledge base entry tile */
.csfloat-article {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-article:hover {
border-color: var(--cta);
transform: translateY(-1px);
}
.csfloat-article-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-article-meta-cat {
color: var(--cta);
}
.csfloat-article-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-article-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-article-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding-top: 8px;
border-top: 1px dashed var(--line);
margin-top: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-article-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-article-foot-helpful {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-article-foot-helpful::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
}
/* END export menu + split panel + article card */
/* CSFloat-1:1: text caret animation - blinking input cursor for typing effects */
.csfloat-caret {
display: inline-block;
width: 2px;
height: 1em;
background: var(--cta);
margin-left: 2px;
vertical-align: text-bottom;
animation: csfloat-caret-blink 1100ms steps(2, start) infinite;
}
@keyframes csfloat-caret-blink {
to { visibility: hidden; }
}
.csfloat-caret.is-thick { width: 3px; }
.csfloat-caret.is-block {
width: 0.6em;
background: rgba(59, 130, 246, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-caret { animation: none; opacity: 0.5; }
}
/* CSFloat-1:1: result counter ribbon — for showing "X of Y" or paginate */
.csfloat-result-ribbon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-result-ribbon-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-result-ribbon-divider {
color: var(--ink-4);
margin: 0 2px;
}
/* CSFloat-1:1: dialog confirmation — large icon + text variant */
.csfloat-confirm {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 20px 24px;
}
.csfloat-confirm-icon {
width: 56px;
height: 56px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 22px/1 var(--ui);
position: relative;
}
.csfloat-confirm.is-warning .csfloat-confirm-icon {
background: rgba(251, 191, 36, 0.16);
border: 1px solid rgba(251, 191, 36, 0.4);
color: oklch(0.84 0.16 80);
}
.csfloat-confirm.is-danger .csfloat-confirm-icon {
background: rgba(248, 113, 113, 0.16);
border: 1px solid rgba(248, 113, 113, 0.4);
color: oklch(0.72 0.18 30);
}
.csfloat-confirm.is-info .csfloat-confirm-icon {
background: rgba(59, 130, 246, 0.16);
border: 1px solid rgba(59, 130, 246, 0.4);
color: var(--cta);
}
.csfloat-confirm-title {
font: 600 18px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-confirm-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 360px;
}
.csfloat-confirm-msg > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-confirm-foot {
display: flex;
gap: 6px;
margin-top: 6px;
width: 100%;
justify-content: center;
}
.csfloat-confirm-foot.is-stretch > * { flex: 1 1 auto; }
.csfloat-confirm-extra {
width: 100%;
margin-top: 8px;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-align: left;
}
/* CSFloat-1:1: section group with title + body card */
.csfloat-section-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.csfloat-section-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-section-group-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
}
.csfloat-section-group-head-link {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-section-group-head-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.csfloat-section-group-body {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-section-group-body.is-flush {
background: transparent;
border: 0;
}
/* END caret + result ribbon + confirm dialog + section group */
/* CSFloat-1:1: top market mover row — for trending up/down lists */
.csfloat-mover {
display: grid;
grid-template-columns: 28px 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mover:last-child { border-bottom: 0; }
.csfloat-mover:hover { background: var(--bg-2); }
.csfloat-mover-rank {
font: 700 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
text-align: center;
letter-spacing: -0.01em;
}
.csfloat-mover-img {
width: 36px;
height: 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
}
.csfloat-mover-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-mover-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-mover-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-mover-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-mover-price {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-mover-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-mover-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
text-align: right;
min-width: 50px;
justify-content: flex-end;
padding: 3px 6px;
border-radius: 4px;
}
.csfloat-mover-delta.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.06);
}
.csfloat-mover-delta.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.06);
}
.csfloat-mover-delta::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-mover-delta.is-up::before {
border-bottom: 4px solid currentColor;
}
.csfloat-mover-delta.is-down::before {
border-top: 4px solid currentColor;
}
/* CSFloat-1:1: dashboard widget compact frame — for grid layout dashboards */
.csfloat-widget {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-height: 180px;
}
.csfloat-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.csfloat-widget-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-widget-head-title > .csfloat-widget-head-title-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
color: var(--ink-4);
}
.csfloat-widget-head-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-widget-body {
flex: 1 1 auto;
padding: 14px 16px;
overflow-y: auto;
}
.csfloat-widget-body.is-flush { padding: 0; }
.csfloat-widget-body.is-tight { padding: 8px 10px; }
.csfloat-widget-foot {
flex: 0 0 auto;
padding: 8px 14px;
border-top: 1px solid var(--line);
background: var(--bg);
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.csfloat-widget-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-widget.is-clickable {
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-widget.is-clickable:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.csfloat-widget.is-cta-border {
border-color: var(--cta);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}
/* END mover row + dashboard widget */
/* CSFloat-1:1: dashboard grid layout — for admin/csr dashboards */
.csfloat-dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
align-items: start;
}
.csfloat-dashboard > .csfloat-dashboard-cell { grid-column: span 12; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-1 { grid-column: span 1; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-2 { grid-column: span 2; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-3 { grid-column: span 3; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-4 { grid-column: span 4; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-5 { grid-column: span 5; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-6 { grid-column: span 6; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-7 { grid-column: span 7; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-8 { grid-column: span 8; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-9 { grid-column: span 9; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-10 { grid-column: span 10; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-11 { grid-column: span 11; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-12 { grid-column: span 12; }
@media (max-width: 1100px) {
.csfloat-dashboard > .csfloat-dashboard-cell.is-2,
.csfloat-dashboard > .csfloat-dashboard-cell.is-3,
.csfloat-dashboard > .csfloat-dashboard-cell.is-4 { grid-column: span 6; }
.csfloat-dashboard > .csfloat-dashboard-cell.is-5,
.csfloat-dashboard > .csfloat-dashboard-cell.is-6,
.csfloat-dashboard > .csfloat-dashboard-cell.is-7,
.csfloat-dashboard > .csfloat-dashboard-cell.is-8,
.csfloat-dashboard > .csfloat-dashboard-cell.is-9 { grid-column: span 12; }
}
@media (max-width: 720px) {
.csfloat-dashboard > .csfloat-dashboard-cell { grid-column: span 12; }
}
/* CSFloat-1:1: queue row — for moderation queues, reports etc */
.csfloat-queue-row {
display: grid;
grid-template-columns: 28px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-queue-row:last-child { border-bottom: 0; }
.csfloat-queue-row:hover { background: var(--bg-2); }
.csfloat-queue-row.is-flagged { background: rgba(248, 113, 113, 0.04); }
.csfloat-queue-row.is-resolved { opacity: 0.5; }
.csfloat-queue-row-pri {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
font: 700 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-queue-row-pri.is-low { color: var(--ink-3); }
.csfloat-queue-row-pri.is-mid { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: oklch(0.84 0.16 80); }
.csfloat-queue-row-pri.is-high { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: oklch(0.72 0.18 30); }
.csfloat-queue-row-pri.is-urgent {
background: oklch(0.66 0.18 30);
border-color: oklch(0.66 0.18 30);
color: #fff;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-queue-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-queue-row-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-queue-row-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-queue-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-queue-row-counterparty {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-queue-row-counterparty-avatar {
width: 16px;
height: 16px;
border-radius: 999px;
flex: 0 0 16px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-queue-row-status {
flex: 0 0 auto;
}
.csfloat-queue-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (max-width: 720px) {
.csfloat-queue-row {
grid-template-columns: 24px 1fr auto;
gap: 10px;
}
.csfloat-queue-row-counterparty,
.csfloat-queue-row-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-queue-row-pri.is-urgent { animation: none; }
}
/* END dashboard layout + queue row */
/* CSFloat-1:1: small avatar group (2-3 avatars stacked horizontally) */
.csfloat-avatar-mini-group {
display: inline-flex;
align-items: center;
}
.csfloat-avatar-mini-group > .csfloat-avatar-mini {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
object-fit: cover;
margin-left: -6px;
}
.csfloat-avatar-mini-group > .csfloat-avatar-mini:first-child { margin-left: 0; }
.csfloat-avatar-mini-group > .csfloat-avatar-mini-extra {
margin-left: -6px;
height: 18px;
min-width: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
font: 600 9px/1 var(--mono);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-feature-settings: "tnum";
}
/* CSFloat-1:1: color swatch picker — for theme/accent customization */
.csfloat-swatch {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-swatch-opt {
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid transparent;
cursor: pointer;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-swatch-opt:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.csfloat-swatch-opt.is-selected {
border-color: var(--ink-1);
box-shadow: 0 0 0 2px var(--bg);
}
.csfloat-swatch-opt.is-selected::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 4px;
border: 1.5px solid #fff;
border-top: 0;
border-right: 0;
transform: translate(-50%, -65%) rotate(-45deg);
}
.csfloat-swatch-opt.is-blue { background: var(--cta); }
.csfloat-swatch-opt.is-green { background: oklch(0.62 0.16 152); }
.csfloat-swatch-opt.is-red { background: oklch(0.66 0.18 30); }
.csfloat-swatch-opt.is-orange { background: oklch(0.78 0.18 60); }
.csfloat-swatch-opt.is-yellow { background: oklch(0.84 0.16 80); }
.csfloat-swatch-opt.is-purple { background: oklch(0.62 0.18 290); }
.csfloat-swatch-opt.is-pink { background: oklch(0.62 0.27 330); }
.csfloat-swatch-opt.is-cyan { background: oklch(0.78 0.16 220); }
.csfloat-swatch-opt.is-mono {
background: linear-gradient(135deg, var(--bg-3), var(--ink-2));
border-color: var(--line);
}
.csfloat-swatch-opt.is-rainbow {
background: linear-gradient(135deg,
oklch(0.66 0.18 30) 0%,
oklch(0.78 0.18 60) 25%,
oklch(0.84 0.16 80) 50%,
oklch(0.62 0.16 152) 75%,
oklch(0.62 0.18 290) 100%);
}
.csfloat-swatch.is-sm > .csfloat-swatch-opt { width: 20px; height: 20px; border-radius: 4px; }
.csfloat-swatch.is-lg > .csfloat-swatch-opt { width: 36px; height: 36px; border-radius: 8px; }
.csfloat-swatch.is-circle > .csfloat-swatch-opt { border-radius: 999px; }
/* CSFloat-1:1: small dot indicator — for live activity dots */
.csfloat-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ink-4);
flex: 0 0 6px;
}
.csfloat-dot.is-cta { background: var(--cta); box-shadow: 0 0 6px currentColor; }
.csfloat-dot.is-success { background: oklch(0.78 0.16 152); box-shadow: 0 0 6px currentColor; }
.csfloat-dot.is-warning { background: oklch(0.84 0.16 80); box-shadow: 0 0 6px currentColor; }
.csfloat-dot.is-danger { background: oklch(0.66 0.18 30); box-shadow: 0 0 6px currentColor; }
.csfloat-dot.is-purple { background: oklch(0.84 0.18 290); box-shadow: 0 0 6px currentColor; }
.csfloat-dot.is-pulse {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-dot.is-sm { width: 4px; height: 4px; flex: 0 0 4px; }
.csfloat-dot.is-md { width: 6px; height: 6px; flex: 0 0 6px; }
.csfloat-dot.is-lg { width: 8px; height: 8px; flex: 0 0 8px; }
.csfloat-dot.is-xl { width: 10px; height: 10px; flex: 0 0 10px; }
@media (prefers-reduced-motion: reduce) {
.csfloat-dot.is-pulse { animation: none; }
}
/* END mini avatar group + color swatch + dot indicator */
/* CSFloat-1:1: dropdown nav menu — for top header expanded link group */
.csfloat-dropnav {
position: absolute;
top: calc(100% + 8px);
left: 0;
display: none;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 16px;
min-width: 360px;
max-width: 520px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
z-index: 200;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.csfloat-dropnav.is-open { display: grid; }
.csfloat-dropnav.is-1col { grid-template-columns: 1fr; min-width: 240px; }
.csfloat-dropnav.is-3col { grid-template-columns: 1fr 1fr 1fr; min-width: 480px; }
.csfloat-dropnav-link {
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 100ms ease;
}
.csfloat-dropnav-link:hover { background: var(--bg-2); }
.csfloat-dropnav-link-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
font-size: 14px;
}
.csfloat-dropnav-link:hover .csfloat-dropnav-link-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-dropnav-link-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-dropnav-link-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-dropnav-link-desc {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-dropnav-section {
grid-column: span 2;
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
.csfloat-dropnav.is-1col .csfloat-dropnav-section { grid-column: 1; }
.csfloat-dropnav.is-3col .csfloat-dropnav-section { grid-column: span 3; }
.csfloat-dropnav-divider {
grid-column: span 2;
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-dropnav.is-1col .csfloat-dropnav-divider { grid-column: 1; }
.csfloat-dropnav.is-3col .csfloat-dropnav-divider { grid-column: span 3; }
.csfloat-dropnav-foot {
grid-column: span 2;
background: var(--bg);
border-top: 1px solid var(--line);
padding: 10px 12px;
margin: 8px -16px -16px;
border-radius: 0 0 12px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
}
.csfloat-dropnav.is-1col .csfloat-dropnav-foot { grid-column: 1; }
.csfloat-dropnav.is-3col .csfloat-dropnav-foot { grid-column: span 3; }
.csfloat-dropnav-foot-link {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-dropnav-foot-link:hover { text-decoration: underline; }
/* CSFloat-1:1: signed in user mini panel — for top-right user dropdown */
.csfloat-user-panel {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 0;
min-width: 260px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.csfloat-user-panel-head {
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
align-items: center;
padding: 14px 16px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
border-bottom: 1px solid var(--line);
}
.csfloat-user-panel-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 40px;
object-fit: cover;
border: 2px solid var(--cta);
}
.csfloat-user-panel-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-user-panel-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-user-panel-handle {
font: 400 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-user-panel-bal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
.csfloat-user-panel-bal-cell {
display: flex;
flex-direction: column;
gap: 2px;
border-right: 1px solid var(--line);
padding-right: 12px;
margin-right: 12px;
}
.csfloat-user-panel-bal-cell:last-child {
border-right: 0;
padding-right: 0;
margin-right: 0;
}
.csfloat-user-panel-bal-cell-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-user-panel-bal-cell-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-user-panel-bal-cell-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-user-panel-links {
display: flex;
flex-direction: column;
padding: 6px 4px;
gap: 1px;
}
.csfloat-user-panel-link {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
font: 500 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-user-panel-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-user-panel-link-icon {
width: 16px;
height: 16px;
color: var(--ink-3);
flex: 0 0 16px;
}
.csfloat-user-panel-link.is-active .csfloat-user-panel-link-icon { color: var(--cta); }
.csfloat-user-panel-link-shortcut {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
font-feature-settings: "tnum";
}
.csfloat-user-panel-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-user-panel-foot {
padding: 10px 14px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-user-panel-foot > .csfloat-user-panel-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
/* END dropdown nav + user panel */
/* CSFloat-1:1: storefront stat ribbon — for store landing top metrics */
.csfloat-store-stats {
display: flex;
align-items: stretch;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
flex-wrap: wrap;
}
.csfloat-store-stats > .csfloat-store-stats-cell {
flex: 1 1 0;
min-width: 140px;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
}
.csfloat-store-stats > .csfloat-store-stats-cell:last-child { border-right: 0; }
.csfloat-store-stats-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-store-stats-cell-val {
font: 700 20px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-store-stats-cell-val.is-currency::before {
content: '$';
font-size: 13px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-store-stats-cell-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-store-stats-cell-meta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-store-stats-cell-meta.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 720px) {
.csfloat-store-stats > .csfloat-store-stats-cell {
flex: 0 0 50%;
border-bottom: 1px solid var(--line);
}
.csfloat-store-stats > .csfloat-store-stats-cell:nth-child(2n) { border-right: 0; }
.csfloat-store-stats > .csfloat-store-stats-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* CSFloat-1:1: profile-feedback-stats — for seller history (positive/negative %) */
.csfloat-feedback-stats {
display: flex;
align-items: stretch;
gap: 12px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-feedback-stats-rate {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
justify-content: center;
text-align: center;
padding-right: 18px;
border-right: 1px solid var(--line);
min-width: 100px;
}
.csfloat-feedback-stats-rate-num {
font: 700 28px/1 var(--mono);
color: oklch(0.78 0.16 152);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-feedback-stats-rate-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 4px;
}
.csfloat-feedback-stats-bars {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.csfloat-feedback-stats-bar {
display: grid;
grid-template-columns: 70px 1fr 36px;
gap: 8px;
align-items: center;
}
.csfloat-feedback-stats-bar-label {
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-feedback-stats-bar-track {
height: 6px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
}
.csfloat-feedback-stats-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feedback-stats-bar.is-pos .csfloat-feedback-stats-bar-fill { background: oklch(0.62 0.16 152); }
.csfloat-feedback-stats-bar.is-neg .csfloat-feedback-stats-bar-fill { background: oklch(0.66 0.18 30); }
.csfloat-feedback-stats-bar.is-neutral .csfloat-feedback-stats-bar-fill { background: var(--ink-3); }
.csfloat-feedback-stats-bar-count {
font: 500 11px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
text-align: right;
}
@media (max-width: 540px) {
.csfloat-feedback-stats {
flex-direction: column;
gap: 10px;
}
.csfloat-feedback-stats-rate {
border-right: 0;
padding-right: 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
flex-direction: row;
gap: 10px;
min-width: 0;
}
.csfloat-feedback-stats-rate-num { font-size: 22px; }
}
/* END store stats + feedback stats */
/* CSFloat-1:1: hover-revealed quick info popover for grid cards */
.csfloat-card-popover {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 240px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
z-index: 50;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
}
.csfloat-card-popover-anchor:hover .csfloat-card-popover {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-2px);
}
.csfloat-card-popover::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-card-popover::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-card-popover-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-card-popover-row > .csfloat-card-popover-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-card-popover-row.is-emphasis {
font-weight: 600;
color: var(--ink-1);
font-size: 12px;
padding-top: 4px;
border-top: 1px solid var(--line);
margin-top: 2px;
}
/* CSFloat-1:1: nav-search slot — narrower header search variant */
.csfloat-nav-search {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
cursor: text;
width: 200px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-nav-search:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-nav-search:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
width: 280px;
}
.csfloat-nav-search-icon {
width: 13px;
height: 13px;
color: var(--ink-4);
flex: 0 0 13px;
}
.csfloat-nav-search > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 400 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
min-width: 0;
}
.csfloat-nav-search > input::placeholder { color: var(--ink-3); }
.csfloat-nav-search-kbd {
font: 500 9px/1 var(--mono);
color: var(--ink-3);
background: var(--bg-3);
border: 1px solid var(--line);
padding: 2px 4px;
border-radius: 3px;
flex: 0 0 auto;
font-feature-settings: "tnum";
}
/* CSFloat-1:1: feedback summary stat row — for seller analytics */
.csfloat-fb-summary {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-fb-summary-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
font-size: 18px;
}
.csfloat-fb-summary.is-pos .csfloat-fb-summary-icon {
background: rgba(52, 211, 153, 0.12);
border: 1px solid rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-fb-summary.is-neg .csfloat-fb-summary-icon {
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-fb-summary.is-neutral .csfloat-fb-summary-icon {
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
}
.csfloat-fb-summary-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.csfloat-fb-summary-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-fb-summary-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-fb-summary-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 2px;
}
/* END card popover + nav search + fb summary */
/* CSFloat-1:1: notify hint — small inline annotation pointing at element */
.csfloat-notify-hint {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(96, 165, 250, 0.12));
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-notify-hint::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-notify-hint.is-arrow-down::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: rgba(59, 130, 246, 0.3);
}
.csfloat-notify-hint.is-arrow-up::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-bottom-color: rgba(59, 130, 246, 0.3);
}
.csfloat-notify-hint.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(110, 231, 183, 0.12));
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-notify-hint.is-warning {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(252, 211, 77, 0.12));
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-notify-hint::before { animation: none; }
}
/* CSFloat-1:1: tiered-pricing slider — for membership tier selection */
.csfloat-tier-slider {
position: relative;
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 4px;
gap: 2px;
}
.csfloat-tier-slider > .csfloat-tier-slider-opt {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tier-slider > .csfloat-tier-slider-opt:hover {
background: var(--bg-3);
}
.csfloat-tier-slider > .csfloat-tier-slider-opt.is-active {
background: var(--bg-3);
box-shadow: 0 0 0 1px var(--cta), 0 4px 12px rgba(59, 130, 246, 0.18);
}
.csfloat-tier-slider-opt-name {
font: 700 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-tier-slider > .csfloat-tier-slider-opt.is-active .csfloat-tier-slider-opt-name {
color: var(--cta);
}
.csfloat-tier-slider-opt-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-tier-slider-opt-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-tier-slider-opt-period {
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-tier-slider-opt-tag {
margin-top: 4px;
font: 700 8px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
/* CSFloat-1:1: signup / login split panel hero */
.csfloat-auth-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.csfloat-auth-hero-side {
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
}
.csfloat-auth-hero-side.is-form {
background: var(--bg-1);
border-right: 1px solid var(--line);
}
.csfloat-auth-hero-side.is-art {
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
position: relative;
overflow: hidden;
}
.csfloat-auth-hero-side.is-art::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 80% 20%, rgba(59, 130, 246, 0.18), transparent 60%);
pointer-events: none;
}
.csfloat-auth-hero-side.is-art::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
pointer-events: none;
}
@media (max-width: 720px) {
.csfloat-auth-hero {
grid-template-columns: 1fr;
min-height: auto;
}
.csfloat-auth-hero-side.is-form { border-right: 0; border-bottom: 1px solid var(--line); }
.csfloat-auth-hero-side.is-art { display: none; }
}
/* END notify hint + tier slider + auth hero */
/* CSFloat-1:1: marketing pricing toggle — billing period switcher */
.csfloat-bill-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 1px;
}
.csfloat-bill-toggle > .csfloat-bill-toggle-opt {
height: 32px;
padding: 0 14px;
background: transparent;
border: 0;
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bill-toggle > .csfloat-bill-toggle-opt:hover { color: var(--ink-1); }
.csfloat-bill-toggle > .csfloat-bill-toggle-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* CSFloat-1:1: small section legend — for chart explanations */
.csfloat-legend {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 6px 0;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-legend-item::before {
content: '';
width: 10px;
height: 2px;
border-radius: 1px;
background: var(--ink-3);
}
.csfloat-legend-item.is-cta::before { background: var(--cta); }
.csfloat-legend-item.is-success::before { background: oklch(0.78 0.16 152); }
.csfloat-legend-item.is-warning::before { background: oklch(0.84 0.16 80); }
.csfloat-legend-item.is-danger::before { background: oklch(0.72 0.18 30); }
.csfloat-legend-item.is-purple::before { background: oklch(0.84 0.18 290); }
.csfloat-legend-item.is-dashed::before {
background: none;
border-top: 1.5px dashed currentColor;
height: 0;
}
.csfloat-legend-item.is-dot::before {
width: 6px;
height: 6px;
border-radius: 999px;
}
.csfloat-legend-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
margin-left: 2px;
}
/* CSFloat-1:1: small inline price delta — for next to prices */
.csfloat-pdelta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-pdelta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-pdelta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-pdelta.is-neutral { color: var(--ink-3); }
.csfloat-pdelta::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-pdelta.is-up::before { border-bottom: 4px solid currentColor; }
.csfloat-pdelta.is-down::before { border-top: 4px solid currentColor; }
.csfloat-pdelta.is-neutral::before {
width: 6px;
height: 1.5px;
background: currentColor;
border: 0;
}
.csfloat-pdelta.is-pill {
padding: 2px 6px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
}
.csfloat-pdelta.is-pill.is-up {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-pdelta.is-pill.is-down {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.25);
}
/* CSFloat-1:1: total balance compact with detail toggle */
.csfloat-bal-compact {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 14px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-bal-compact-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.csfloat-bal-compact-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-bal-compact-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-bal-compact-val::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-bal-compact-rows {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
.csfloat-bal-compact-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-bal-compact-row > .csfloat-bal-compact-row-val {
font: 500 11px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
/* END billing toggle + legend + price delta + balance compact */
/* CSFloat-1:1: refresh button with last-updated stamp.
LIVE ship #1: enhanced chip styling — pill background, status dot,
.is-stale state in amber so the operator can see at a glance which
surface needs a refresh. Used by primitives.LiveDataChip. */
.csfloat-refresh {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 11px/1 var(--ui);
color: var(--ink-3, var(--text-secondary));
letter-spacing: -0.005em;
padding: 4px 8px 4px 9px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.06);
border: 1px solid rgba(148, 163, 184, 0.12);
white-space: nowrap;
user-select: none;
}
.csfloat-refresh::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
flex-shrink: 0;
animation: csfloat-refresh-pulse 2.4s ease-in-out infinite;
}
.csfloat-refresh.is-stale {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.28);
}
.csfloat-refresh.is-stale::before {
background: #fbbf24;
box-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
animation: none;
}
.csfloat-refresh.compact {
padding: 2px 6px 2px 7px;
font-size: 10px;
gap: 6px;
}
.csfloat-refresh.compact::before { width: 5px; height: 5px; }
@keyframes csfloat-refresh-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.csfloat-refresh-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 0;
background: rgba(148, 163, 184, 0.10);
color: var(--ink-3, var(--text-secondary));
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
transition: background 140ms ease, color 140ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
font-family: inherit;
flex-shrink: 0;
padding: 0;
}
.csfloat-refresh-btn:hover {
background: rgba(96, 165, 250, 0.18);
color: var(--accent, #60a5fa);
transform: rotate(-30deg);
}
.csfloat-refresh-btn:active { transform: rotate(0deg) scale(0.92); }
.csfloat-refresh-btn:focus-visible {
outline: 2px solid var(--accent, #60a5fa);
outline-offset: 2px;
}
.csfloat-refresh-btn.is-loading {
pointer-events: none;
color: var(--cta, var(--accent, #60a5fa));
background: rgba(96, 165, 250, 0.18);
animation: csfloat-spin 700ms linear infinite;
}
.csfloat-refresh-stamp {
font: 400 10px/1 var(--mono, ui-monospace, "SFMono-Regular", monospace);
color: var(--ink-4, var(--text-muted));
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-refresh.is-stale .csfloat-refresh-stamp { color: #fbbf24; }
@media (prefers-reduced-motion: reduce) {
.csfloat-refresh-btn.is-loading { animation: none; }
.csfloat-refresh::before { animation: none; }
.csfloat-refresh-btn:hover { transform: none; }
}
@keyframes csfloat-spin {
to { transform: rotate(360deg); }
}
/* CSFloat-1:1: hover preview of price chart (mini) */
.csfloat-mini-chart {
display: inline-block;
width: 80px;
height: 24px;
position: relative;
}
.csfloat-mini-chart > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-mini-chart-line {
fill: none;
stroke-width: 1.5;
stroke: var(--cta);
stroke-linecap: round;
stroke-linejoin: round;
}
.csfloat-mini-chart.is-up .csfloat-mini-chart-line { stroke: oklch(0.78 0.16 152); }
.csfloat-mini-chart.is-down .csfloat-mini-chart-line { stroke: oklch(0.72 0.18 30); }
.csfloat-mini-chart-fill {
fill: var(--cta);
fill-opacity: 0.12;
stroke: none;
}
.csfloat-mini-chart.is-up .csfloat-mini-chart-fill { fill: oklch(0.78 0.16 152); fill-opacity: 0.12; }
.csfloat-mini-chart.is-down .csfloat-mini-chart-fill { fill: oklch(0.72 0.18 30); fill-opacity: 0.12; }
.csfloat-mini-chart.is-large {
width: 120px;
height: 36px;
}
.csfloat-mini-chart.is-no-fill .csfloat-mini-chart-fill { display: none; }
/* CSFloat-1:1: badge with avatar inline (for chat thread, attribution) */
.csfloat-badge-avatar {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 3px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-badge-avatar:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-badge-avatar-img {
width: 18px;
height: 18px;
border-radius: 999px;
flex: 0 0 18px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-badge-avatar-name {
font-weight: 500;
}
/* CSFloat-1:1: progress text — for "Step X of Y" type indicators */
.csfloat-prog-text {
display: inline-flex;
align-items: baseline;
gap: 6px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-prog-text-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.csfloat-prog-text-bar {
display: inline-block;
width: 60px;
height: 3px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
margin-left: 4px;
vertical-align: middle;
}
.csfloat-prog-text-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 999px;
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* END refresh + mini chart + badge avatar + prog text */
/* CSFloat-1:1: notification preference channel toggle inline */
.csfloat-pref-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pref-toggle:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pref-toggle.is-on {
background: rgba(59, 130, 246, 0.1);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-pref-toggle-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-pref-toggle.is-on .csfloat-pref-toggle-icon { opacity: 1; }
/* CSFloat-1:1: stat block list (compact list of stats with key + value) */
.csfloat-stat-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
list-style: none;
margin: 0;
}
.csfloat-stat-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-list-row:last-child { border-bottom: 0; }
.csfloat-stat-list-row > .csfloat-stat-list-row-label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink-3);
}
.csfloat-stat-list-row > .csfloat-stat-list-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-stat-list-row > .csfloat-stat-list-row-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-stat-list-row > .csfloat-stat-list-row-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-list-row > .csfloat-stat-list-row-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-list.is-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-stat-list.is-tight .csfloat-stat-list-row { padding: 6px 12px; font-size: 11px; }
.csfloat-stat-list.is-loose .csfloat-stat-list-row { padding: 14px 16px; font-size: 13px; }
/* CSFloat-1:1: pie / donut chart wrapper */
.csfloat-donut {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
flex: 0 0 120px;
}
.csfloat-donut > svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
display: block;
}
.csfloat-donut > svg > circle {
fill: none;
stroke-width: 12;
stroke-linecap: butt;
}
.csfloat-donut > svg > circle.csfloat-donut-track { stroke: var(--bg-3); }
.csfloat-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.csfloat-donut-center-val {
font: 700 20px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-donut-center-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 4px;
}
.csfloat-donut.is-sm { width: 80px; height: 80px; flex: 0 0 80px; }
.csfloat-donut.is-sm > svg > circle { stroke-width: 9; }
.csfloat-donut.is-sm .csfloat-donut-center-val { font-size: 14px; }
.csfloat-donut.is-lg { width: 160px; height: 160px; flex: 0 0 160px; }
.csfloat-donut.is-lg > svg > circle { stroke-width: 16; }
.csfloat-donut.is-lg .csfloat-donut-center-val { font-size: 28px; }
.csfloat-donut-row {
display: flex;
align-items: center;
gap: 18px;
}
.csfloat-donut-legend {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-donut-legend-item {
display: flex;
align-items: center;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-donut-legend-item-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
flex: 0 0 8px;
}
.csfloat-donut-legend-item-label {
flex: 1 1 auto;
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-donut-legend-item-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
@media (max-width: 540px) {
.csfloat-donut-row { flex-direction: column; align-items: flex-start; }
}
/* END pref toggle + stat list + donut chart */
/* CSFloat-1:1: bar chart wrapper for analytics */
.csfloat-bar-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 120px;
padding: 8px 0;
}
.csfloat-bar-chart-col {
flex: 1 1 0;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
position: relative;
min-width: 4px;
height: 100%;
}
.csfloat-bar-chart-col-bar.is-up { background: oklch(0.62 0.16 152); }
.csfloat-bar-chart-col-bar.is-down { background: oklch(0.66 0.18 30); }
.csfloat-bar-chart-col-bar.is-faded { opacity: 0.3; }
.csfloat-bar-chart-col:hover .csfloat-bar-chart-col-bar { opacity: 0.85; }
.csfloat-bar-chart-col:hover .csfloat-bar-chart-col-tip { opacity: 1; }
.csfloat-bar-chart-axis {
display: flex;
justify-content: space-between;
margin-top: 4px;
font: 400 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-bar-chart.is-stacked .csfloat-bar-chart-col {
flex-direction: column-reverse;
}
.csfloat-bar-chart.is-stacked .csfloat-bar-chart-col-bar {
border-radius: 0;
}
.csfloat-bar-chart.is-stacked .csfloat-bar-chart-col-bar:first-child { border-radius: 2px 2px 0 0; }
/* CSFloat-1:1: KPI card with chart */
.csfloat-kpi-chart {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-kpi-chart-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-kpi-chart-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-kpi-chart-stat {
display: flex;
align-items: baseline;
gap: 8px;
}
.csfloat-kpi-chart-val {
font: 700 28px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-kpi-chart-val.is-currency::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-kpi-chart-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-kpi-chart-body {
margin-top: 4px;
}
.csfloat-kpi-chart-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-kpi-chart-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
/* END bar chart + kpi chart card */
/* CSFloat-1:1: stacked area chart for time-series (multi-series) */
.csfloat-area-chart {
position: relative;
width: 100%;
height: 200px;
}
.csfloat-area-chart > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-area-chart-grid line {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 2 3;
opacity: 0.5;
}
.csfloat-area-chart-axis text {
fill: var(--ink-4);
font: 400 9px var(--mono);
font-feature-settings: "tnum";
}
.csfloat-area-chart-series-line.is-cta { stroke: var(--cta); }
.csfloat-area-chart-series-line.is-success { stroke: oklch(0.62 0.16 152); }
.csfloat-area-chart-series-line.is-warning { stroke: oklch(0.78 0.16 80); }
.csfloat-area-chart-series-line.is-danger { stroke: oklch(0.66 0.18 30); }
.csfloat-area-chart-series-line.is-purple { stroke: oklch(0.62 0.18 290); }
.csfloat-area-chart-series-fill.is-cta { fill: var(--cta); }
.csfloat-area-chart-series-fill.is-success { fill: oklch(0.62 0.16 152); }
.csfloat-area-chart-series-fill.is-warning { fill: oklch(0.78 0.16 80); }
.csfloat-area-chart-series-fill.is-danger { fill: oklch(0.66 0.18 30); }
.csfloat-area-chart-cursor {
stroke: var(--ink-3);
stroke-width: 1;
stroke-dasharray: 2 2;
opacity: 0;
transition: opacity 100ms ease;
}
.csfloat-area-chart:hover .csfloat-area-chart-cursor { opacity: 0.6; }
.csfloat-area-chart-tip {
position: absolute;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 8px 10px;
display: none;
flex-direction: column;
gap: 3px;
font: 400 11px/1 var(--ui);
color: var(--ink-1);
pointer-events: none;
z-index: 2;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
letter-spacing: -0.005em;
}
.csfloat-area-chart-tip.is-shown { display: flex; }
.csfloat-area-chart-tip-row > .csfloat-area-chart-tip-row-dot {
width: 6px;
height: 6px;
border-radius: 999px;
flex: 0 0 6px;
}
.csfloat-area-chart-tip-row > .csfloat-area-chart-tip-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
margin-left: auto;
}
/* CSFloat-1:1: empty chart placeholder */
.csfloat-chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
min-height: 160px;
padding: 24px;
color: var(--ink-4);
text-align: center;
}
.csfloat-chart-empty-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
border: 1px dashed var(--line-2);
border-radius: 999px;
color: var(--ink-4);
font-size: 14px;
}
.csfloat-chart-empty-msg {
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-chart-empty-sub {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
/* END area chart + chart empty */
/* CSFloat-1:1: stat divider section — for grouping multiple stat cards */
.csfloat-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-stat-grid > .csfloat-stat-grid-cell {
background: var(--bg-1);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-grid > .csfloat-stat-grid-cell:hover {
background: var(--bg-2);
}
.csfloat-stat-grid-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-grid-cell-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 6px;
}
.csfloat-stat-grid-cell-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-grid-cell-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
margin-top: 4px;
letter-spacing: -0.005em;
}
.csfloat-stat-grid-cell-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-stat-grid-cell-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-stat-grid-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-grid-cell-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-grid-cell-spark {
position: absolute;
bottom: 12px;
right: 16px;
width: 60px;
height: 24px;
opacity: 0.7;
}
.csfloat-stat-grid-cell-spark > svg { width: 100%; height: 100%; }
/* CSFloat-1:1: section group with collapsible body */
.csfloat-collapse {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-collapse-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
cursor: pointer;
user-select: none;
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
background: var(--bg-2);
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collapse-head:hover { background: var(--bg-3); }
.csfloat-collapse-head-title {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-collapse-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-collapse-head-chev {
width: 9px;
height: 9px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-collapse.is-open .csfloat-collapse-head-chev {
transform: rotate(225deg) translate(-1px, -1px);
}
.csfloat-collapse-body {
max-height: 0;
overflow: hidden;
transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
padding: 0 16px;
}
.csfloat-collapse.is-open .csfloat-collapse-body {
max-height: 600px;
padding: 14px 16px;
}
.csfloat-collapse-body.is-loose { padding: 0 24px; }
.csfloat-collapse.is-open .csfloat-collapse-body.is-loose { padding: 18px 24px; }
/* CSFloat-1:1: order header / status hero */
.csfloat-order-hero {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 16px;
align-items: center;
padding: 18px 20px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.csfloat-order-hero.is-success {
border-color: rgba(52, 211, 153, 0.3);
background: linear-gradient(135deg, rgba(52, 211, 153, 0.06), var(--bg-1) 60%);
}
.csfloat-order-hero.is-pending {
border-color: rgba(251, 191, 36, 0.3);
background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), var(--bg-1) 60%);
}
.csfloat-order-hero.is-failed {
border-color: rgba(248, 113, 113, 0.3);
background: linear-gradient(135deg, rgba(248, 113, 113, 0.06), var(--bg-1) 60%);
}
.csfloat-order-hero-icon {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex: 0 0 56px;
}
.csfloat-order-hero.is-success .csfloat-order-hero-icon {
background: rgba(52, 211, 153, 0.18);
border-color: rgba(52, 211, 153, 0.4);
color: oklch(0.78 0.16 152);
}
.csfloat-order-hero.is-pending .csfloat-order-hero-icon {
background: rgba(251, 191, 36, 0.18);
border-color: rgba(251, 191, 36, 0.4);
color: oklch(0.84 0.16 80);
}
.csfloat-order-hero.is-failed .csfloat-order-hero-icon {
background: rgba(248, 113, 113, 0.18);
border-color: rgba(248, 113, 113, 0.4);
color: oklch(0.72 0.18 30);
}
.csfloat-order-hero-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-order-hero-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-hero-title {
font: 600 18px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-order-hero-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-order-hero-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.csfloat-order-hero-amount {
font: 700 24px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-order-hero-amount::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-order-hero-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
@media (max-width: 540px) {
.csfloat-order-hero {
grid-template-columns: 48px 1fr;
gap: 12px;
padding: 16px 18px;
}
.csfloat-order-hero-icon { width: 48px; height: 48px; flex: 0 0 48px; }
.csfloat-order-hero-actions {
grid-column: span 2;
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
}
/* END stat grid + collapse + order hero */
/* CSFloat-1:1: filter applied summary tag-row */
.csfloat-applied-summary {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 8px 0;
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-applied-summary-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-applied-summary-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
}
.csfloat-applied-summary-clear {
font: 500 11px/1 var(--ui);
color: oklch(0.72 0.18 30);
background: transparent;
border: 0;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
letter-spacing: -0.005em;
margin-left: 2px;
}
.csfloat-applied-summary-clear:hover {
background: rgba(248, 113, 113, 0.08);
}
/* CSFloat-1:1: bento card with hero spotlight (used in landing) */
.csfloat-bento-spot {
position: relative;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
min-height: 220px;
}
.csfloat-bento-spot::before {
content: '';
position: absolute;
bottom: -40%;
right: -20%;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 70%);
pointer-events: none;
}
.csfloat-bento-spot-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-bento-spot-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.csfloat-bento-spot-title {
font: 600 clamp(20px, 2.4vw, 28px) / 1.15 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
position: relative;
z-index: 1;
}
.csfloat-bento-spot-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
position: relative;
z-index: 1;
}
.csfloat-bento-spot-art {
position: absolute;
bottom: 16px;
right: 16px;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
opacity: 0.5;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.csfloat-bento-spot-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-bento-spot-foot {
margin-top: auto;
display: flex;
align-items: center;
gap: 6px;
position: relative;
z-index: 1;
padding-top: 12px;
border-top: 1px solid var(--line);
}
/* CSFloat-1:1: list-grid hybrid layout switcher */
.csfloat-layout-switch {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-layout-switch > .csfloat-layout-switch-opt {
width: 28px;
height: 26px;
border: 0;
background: transparent;
border-radius: 4px;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-layout-switch > .csfloat-layout-switch-opt:hover {
color: var(--ink-1);
}
.csfloat-layout-switch > .csfloat-layout-switch-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-layout-switch > .csfloat-layout-switch-opt.is-grid::before {
content: '';
width: 10px;
height: 10px;
background-image:
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0);
background-size: 4px 4px;
background-position: 0 0, 6px 0, 0 6px, 6px 6px;
background-repeat: no-repeat;
}
.csfloat-layout-switch > .csfloat-layout-switch-opt.is-list::before {
content: '';
width: 12px;
height: 10px;
background-image:
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0);
background-size: 12px 2px;
background-position: 0 0, 0 4px, 0 8px;
background-repeat: no-repeat;
}
.csfloat-layout-switch > .csfloat-layout-switch-opt.is-compact::before {
content: '';
width: 12px;
height: 12px;
background-image:
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0),
linear-gradient(currentColor 0 0);
background-size: 3px 3px;
background-position: 0 0, 5px 0, 9px 0, 0 5px, 5px 5px, 9px 5px;
background-repeat: no-repeat;
}
/* END applied summary + bento spot + layout switch */
/* CSFloat-1:1: hero-style search bar (large, for landing page) */
.csfloat-hero-search {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px;
max-width: 640px;
width: 100%;
margin: 0 auto;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-search:focus-within {
border-color: var(--cta);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.csfloat-hero-search-icon {
width: 18px;
height: 18px;
color: var(--ink-4);
margin: 0 8px 0 12px;
flex: 0 0 18px;
}
.csfloat-hero-search > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 400 16px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
height: 44px;
min-width: 0;
}
.csfloat-hero-search > input::placeholder { color: var(--ink-3); }
.csfloat-hero-search-btn {
flex: 0 0 auto;
height: 40px;
padding: 0 20px;
border-radius: 999px;
background: var(--cta);
color: #fff;
border: 0;
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-search-btn:hover { background: oklch(0.66 0.18 240); }
.csfloat-hero-search-cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 14px;
}
.csfloat-hero-search-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-search-cat:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-hero-search-cat-icon {
width: 11px;
height: 11px;
color: var(--ink-3);
}
.csfloat-hero-search-cat-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: hero-style stats (right under hero search) */
.csfloat-hero-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 24px;
padding: 18px 0;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-hero-stats-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-hero-stats-item-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-hero-stats-item-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hero-stats-divider {
width: 1px;
height: 14px;
background: var(--line);
}
.csfloat-hero-stats-live {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(52, 211, 153, 0.06);
border: 1px solid rgba(52, 211, 153, 0.25);
border-radius: 999px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
}
.csfloat-hero-stats-live::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-hero-stats-live::before { animation: none; }
}
/* CSFloat-1:1: hero-style action chips (CTA underneath hero) */
.csfloat-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.csfloat-hero-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--cta);
color: #fff;
border: 1px solid var(--cta);
border-radius: 999px;
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.csfloat-hero-action:hover {
background: oklch(0.66 0.18 240);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}
.csfloat-hero-action.is-secondary {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
box-shadow: none;
}
.csfloat-hero-action.is-secondary:hover {
background: var(--bg-3);
border-color: var(--ink-3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* END hero search + hero stats + hero actions */
/* CSFloat-1:1: chip avatar group — multi-user attribution chip */
.csfloat-chip-avatars {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-chip-avatars-stack {
display: inline-flex;
align-items: center;
}
.csfloat-chip-avatars-stack > .csfloat-chip-avatars-stack-img {
width: 20px;
height: 20px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg-2);
margin-left: -8px;
object-fit: cover;
}
.csfloat-chip-avatars-stack > .csfloat-chip-avatars-stack-img:first-child { margin-left: 0; }
.csfloat-chip-avatars-stack > .csfloat-chip-avatars-stack-extra {
margin-left: -8px;
height: 20px;
min-width: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg-2);
font: 600 9px/1 var(--mono);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-feature-settings: "tnum";
}
.csfloat-chip-avatars-text > b {
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: progress chips — for onboarding tasks */
.csfloat-prog-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-prog-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-prog-chip:hover {
background: var(--bg-3);
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-prog-chip.is-done {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-prog-chip.is-active {
background: rgba(59, 130, 246, 0.06);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-prog-chip-mark {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 14px;
font: 700 9px/1 var(--mono);
color: var(--ink-3);
}
.csfloat-prog-chip.is-done .csfloat-prog-chip-mark {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-prog-chip.is-done .csfloat-prog-chip-mark::after {
content: '';
width: 6px;
height: 3px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-prog-chip.is-active .csfloat-prog-chip-mark {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
/* CSFloat-1:1: full-bleed splash CTA section */
.csfloat-splash {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 16px;
padding: 64px 24px;
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.csfloat-splash::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 480px at 50% 50%, rgba(59, 130, 246, 0.06), transparent 70%);
pointer-events: none;
}
.csfloat-splash::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 90%);
pointer-events: none;
}
.csfloat-splash > * { position: relative; z-index: 1; }
.csfloat-splash-eyebrow {
font: 700 11px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-splash-title {
font: 700 clamp(36px, 6vw, 64px) / 1.05 var(--ui);
letter-spacing: -0.04em;
color: var(--ink-1);
margin: 0;
max-width: 880px;
text-wrap: balance;
}
.csfloat-splash-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.025em;
}
.csfloat-splash-msg {
font: 400 16px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 580px;
text-wrap: balance;
}
.csfloat-splash-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.csfloat-splash-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
margin-top: 8px;
letter-spacing: -0.005em;
}
@media (max-width: 540px) {
.csfloat-splash { padding: 40px 18px; }
}
/* END chip avatars + prog chips + splash CTA */
/* CSFloat-1:1: marquee logo strip — for trusted-by partner row */
.csfloat-logo-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 24px 0;
background: var(--bg-1);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.csfloat-logo-marquee::before,
.csfloat-logo-marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
pointer-events: none;
z-index: 1;
}
.csfloat-logo-marquee::before {
left: 0;
background: linear-gradient(90deg, var(--bg-1), transparent);
}
.csfloat-logo-marquee::after {
right: 0;
background: linear-gradient(-90deg, var(--bg-1), transparent);
}
.csfloat-logo-marquee-track {
display: inline-flex;
align-items: center;
gap: 56px;
white-space: nowrap;
animation: csfloat-logo-scroll 40000ms linear infinite;
}
.csfloat-logo-marquee:hover .csfloat-logo-marquee-track { animation-play-state: paused; }
@keyframes csfloat-logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.csfloat-logo-marquee-item {
flex: 0 0 auto;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.4;
filter: grayscale(1);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-logo-marquee-item:hover {
opacity: 1;
filter: grayscale(0);
}
.csfloat-logo-marquee-item > img {
height: 100%;
width: auto;
object-fit: contain;
}
.csfloat-logo-marquee-label {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
font: 600 9px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg);
padding: 2px 12px;
border-radius: 0 0 4px 4px;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-logo-marquee-track { animation: none; }
}
/* CSFloat-1:1: snapshot — small data-snapshot card for inline placement */
.csfloat-snap {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
min-width: 140px;
}
.csfloat-snap-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-snap-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-snap-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-snap-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-snap-row {
display: inline-flex;
align-items: stretch;
gap: 8px;
}
.csfloat-snap.is-cta {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
}
.csfloat-snap.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-snap.is-cta .csfloat-snap-val { color: var(--cta); }
.csfloat-snap.is-success .csfloat-snap-val { color: oklch(0.78 0.16 152); }
/* CSFloat-1:1: chip-style brand selector — for game/platform pickers */
.csfloat-brand-picker {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 4px;
gap: 2px;
}
.csfloat-brand-picker > .csfloat-brand-picker-opt {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 0;
border-radius: 5px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-brand-picker > .csfloat-brand-picker-opt:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-brand-picker > .csfloat-brand-picker-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}
/* END logo marquee + snap + brand picker */
/* CSFloat-1:1: section-wrap with corner spotlight (used as featured section frame) */
.csfloat-spot-section {
position: relative;
background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 32px;
overflow: hidden;
}
.csfloat-spot-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-spot-section::after {
content: '';
position: absolute;
bottom: -40%;
left: -10%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse, rgba(167, 139, 250, 0.04), transparent 60%);
pointer-events: none;
}
.csfloat-spot-section > * { position: relative; z-index: 1; }
.csfloat-spot-section.is-purple::before {
background: radial-gradient(circle, rgba(167, 139, 250, 0.08), transparent 60%);
}
.csfloat-spot-section.is-orange::before {
background: radial-gradient(circle, rgba(251, 146, 60, 0.06), transparent 60%);
}
.csfloat-spot-section.is-green::before {
background: radial-gradient(circle, rgba(52, 211, 153, 0.06), transparent 60%);
}
@media (max-width: 540px) {
.csfloat-spot-section { padding: 22px 18px; }
}
/* CSFloat-1:1: side-by-side comparison grid (alternative to vs comparison) */
.csfloat-cmp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.csfloat-cmp-grid.is-3 { grid-template-columns: 1fr 1fr 1fr; }
.csfloat-cmp-grid-cell {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cmp-grid-cell:hover {
border-color: var(--line-2);
}
.csfloat-cmp-grid-cell.is-best {
border-color: oklch(0.62 0.16 152);
background: linear-gradient(180deg, rgba(52, 211, 153, 0.04), var(--bg-1));
}
.csfloat-cmp-grid-cell.is-cta {
border-color: var(--cta);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), var(--bg-1));
}
.csfloat-cmp-grid-cell-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.csfloat-cmp-grid-cell-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-cmp-grid-cell-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-cmp-grid-cell-tag.is-cta { color: var(--cta); background: rgba(59, 130, 246, 0.12); }
.csfloat-cmp-grid-cell-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 2px;
}
.csfloat-cmp-grid-cell-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-cmp-grid-cell-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cmp-grid-cell-rows {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed var(--line);
}
.csfloat-cmp-grid-cell-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cmp-grid-cell-row > .csfloat-cmp-grid-cell-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
@media (max-width: 720px) {
.csfloat-cmp-grid, .csfloat-cmp-grid.is-3 { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: tag select bar — tag chips horizontally scrollable */
.csfloat-tag-select-bar {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
overflow-x: auto;
padding: 4px 0 8px;
scrollbar-width: none;
}
.csfloat-tag-select-bar::-webkit-scrollbar { display: none; }
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag.is-active {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.7;
}
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag-count {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-tag-select-bar > .csfloat-tag-select-bar-tag.is-active .csfloat-tag-select-bar-tag-count {
color: rgba(7, 11, 24, 0.55);
}
/* END spot section + cmp grid + tag select bar */
/* CSFloat-1:1: gradient text accent — large headline word with blue gradient fill */
.csfloat-grad-text {
background: linear-gradient(135deg, oklch(0.92 0.08 240) 0%, var(--cta) 50%, oklch(0.84 0.18 290) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.25));
}
.csfloat-grad-text.is-mono {
background: linear-gradient(135deg, var(--ink-1) 0%, var(--ink-3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: none;
}
.csfloat-grad-text.is-fire {
background: linear-gradient(135deg, oklch(0.84 0.18 60) 0%, oklch(0.78 0.18 30) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.csfloat-grad-text.is-success {
background: linear-gradient(135deg, oklch(0.92 0.1 152) 0%, oklch(0.62 0.16 152) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* CSFloat-1:1: detail-card with action footer */
.csfloat-detail-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.csfloat-detail-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--line);
}
.csfloat-detail-card-head-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-detail-card-head-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-detail-card-head-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-detail-card-body {
flex: 1 1 auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-detail-card-body.is-flush { padding: 0; }
.csfloat-detail-card-body.is-tight { padding: 12px 14px; }
.csfloat-detail-card-foot {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.csfloat-detail-card-foot-info {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-detail-card-foot-info-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
.csfloat-detail-card-foot-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: small numeric input with up/down stepper buttons */
.csfloat-num-input {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
height: 32px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-num-input:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-num-input-prefix {
display: inline-flex;
align-items: center;
padding: 0 8px;
background: var(--bg-3);
color: var(--ink-3);
border-right: 1px solid var(--line);
font: 500 12px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-num-input > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
font: 500 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
padding: 0 8px;
text-align: right;
width: 60px;
-moz-appearance: textfield;
}
.csfloat-num-input > input::-webkit-outer-spin-button,
.csfloat-num-input > input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.csfloat-num-input-step {
display: inline-flex;
flex-direction: column;
border-left: 1px solid var(--line);
}
.csfloat-num-input-step-btn {
flex: 1 1 50%;
width: 18px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 100ms ease;
}
.csfloat-num-input-step-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-num-input-step-btn.is-up::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid currentColor;
}
.csfloat-num-input-step-btn.is-down::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid currentColor;
}
.csfloat-num-input-step-btn:not(:last-child) {
border-bottom: 1px solid var(--line);
}
.csfloat-num-input.is-error {
border-color: oklch(0.66 0.18 30);
}
.csfloat-num-input.is-error:focus-within {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.csfloat-num-input.is-success {
border-color: oklch(0.62 0.16 152);
}
.csfloat-num-input.is-lg { height: 40px; }
.csfloat-num-input.is-lg > input { font-size: 15px; }
/* END grad text + detail card + num input */
/* CSFloat-1:1: select dropdown — for sort, filter inline selects */
.csfloat-select {
position: relative;
display: inline-block;
}
.csfloat-select-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 28px 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
appearance: none;
outline: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.csfloat-select-trigger:hover {
background-color: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-select-trigger:focus {
border-color: var(--cta);
background-color: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-select-trigger.is-sm { height: 26px; padding: 0 28px 0 10px; font-size: 11px; }
.csfloat-select-trigger.is-lg { height: 40px; padding: 0 32px 0 14px; font-size: 13px; }
.csfloat-select-trigger.is-block { display: flex; width: 100%; }
.csfloat-select-trigger[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* CSFloat-1:1: text input field — standalone */
.csfloat-input {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 400 14px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
outline: 0;
width: 100%;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-input::placeholder { color: var(--ink-3); }
.csfloat-input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-input:hover:not(:focus):not([disabled]) {
border-color: var(--line-2);
}
.csfloat-input.is-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.csfloat-input.is-lg { height: 44px; padding: 0 14px; font-size: 15px; }
.csfloat-input.is-error {
border-color: oklch(0.66 0.18 30);
background: rgba(248, 113, 113, 0.04);
}
.csfloat-input.is-error:focus {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.csfloat-input.is-success {
border-color: oklch(0.62 0.16 152);
}
.csfloat-input.is-success:focus {
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}
.csfloat-input[disabled] {
opacity: 0.5;
cursor: not-allowed;
background: var(--bg);
}
.csfloat-input.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-input.is-flat { border-radius: 4px; }
.csfloat-input.is-pill { border-radius: 999px; }
/* CSFloat-1:1: textarea standalone */
.csfloat-textarea {
display: block;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 400 13px/1.5 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
outline: 0;
width: 100%;
min-height: 80px;
resize: vertical;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-textarea::placeholder { color: var(--ink-3); }
.csfloat-textarea:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-textarea.is-sm { font-size: 12px; min-height: 60px; padding: 8px 10px; }
.csfloat-textarea.is-lg { font-size: 14px; min-height: 120px; padding: 12px 14px; }
.csfloat-textarea.is-error {
border-color: oklch(0.66 0.18 30);
background: rgba(248, 113, 113, 0.04);
}
.csfloat-textarea.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
/* CSFloat-1:1: counter input footer */
.csfloat-counter-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-counter-foot.is-warn { color: oklch(0.84 0.16 80); }
.csfloat-counter-foot.is-over { color: oklch(0.72 0.18 30); }
/* END select + input + textarea + counter foot */
/* CSFloat-1:1: cluster of stat tiles for hero — small dense grid */
.csfloat-stat-cluster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.csfloat-stat-cluster-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-cluster-tile:hover {
border-color: var(--line-2);
transform: translateY(-1px);
}
.csfloat-stat-cluster-tile-icon {
position: absolute;
top: 10px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.csfloat-stat-cluster-tile.is-cta .csfloat-stat-cluster-tile-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-stat-cluster-tile-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
padding-right: 28px;
}
.csfloat-stat-cluster-tile-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 2px;
}
.csfloat-stat-cluster-tile-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-cluster-tile-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-stat-cluster-tile-delta {
display: inline-flex;
align-items: center;
gap: 2px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-stat-cluster-tile-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-cluster-tile-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: alert chip with icon and dismiss — for inline status alerts */
.csfloat-alert-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-alert-chip.is-info {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
color: oklch(0.88 0.1 240);
}
.csfloat-alert-chip.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.88 0.1 152);
}
.csfloat-alert-chip.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.92 0.1 80);
}
.csfloat-alert-chip.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.9 0.1 30);
}
.csfloat-alert-chip-icon {
width: 12px;
height: 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/1 var(--ui);
flex: 0 0 12px;
background: currentColor;
color: var(--bg);
opacity: 0.85;
}
.csfloat-alert-chip-x {
width: 14px;
height: 14px;
border-radius: 4px;
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
font: 500 11px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 100ms ease;
margin-left: 2px;
}
.csfloat-alert-chip-x:hover { opacity: 1; }
/* CSFloat-1:1: callout list — bulleted list with icon+text rows */
.csfloat-callout-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.csfloat-callout-list-item {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
padding: 6px 0;
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-callout-list-item-mark::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-callout-list-item.is-cta .csfloat-callout-list-item-mark {
background: rgba(59, 130, 246, 0.16);
color: var(--cta);
}
.csfloat-callout-list-item.is-warning .csfloat-callout-list-item-mark {
background: rgba(251, 191, 36, 0.16);
color: oklch(0.84 0.16 80);
}
.csfloat-callout-list-item.is-danger .csfloat-callout-list-item-mark {
background: rgba(248, 113, 113, 0.16);
color: oklch(0.72 0.18 30);
}
.csfloat-callout-list-item.is-cross .csfloat-callout-list-item-mark::after {
content: '×';
font: 700 12px/1 var(--ui);
width: auto;
height: auto;
border: 0;
transform: none;
}
.csfloat-callout-list-item-text > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-callout-list-item-text > .csfloat-callout-list-item-text-sub {
display: block;
font: 400 11px/1.5 var(--ui);
color: var(--ink-4);
margin-top: 2px;
}
/* END stat cluster + alert chip + callout list */
/* CSFloat-1:1: split CTA bar — left description / right action */
.csfloat-cta-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-cta-bar.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), var(--bg-1));
border-color: rgba(59, 130, 246, 0.3);
}
.csfloat-cta-bar-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-cta-bar-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-cta-bar-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-cta-bar-actions {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-cta-bar {
grid-template-columns: 1fr;
gap: 10px;
padding: 14px 16px;
}
.csfloat-cta-bar-actions {
width: 100%;
justify-content: flex-end;
}
}
/* CSFloat-1:1: minimal mini-grid (3 columns max, for splash highlights) */
.csfloat-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.csfloat-mini-grid-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-align: center;
}
.csfloat-mini-grid-cell-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 4px;
font-size: 13px;
}
.csfloat-mini-grid-cell-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-mini-grid-cell-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
@media (max-width: 540px) {
.csfloat-mini-grid { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: filter pill that hides text on small screens (icon-only collapse) */
.csfloat-resp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-resp-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-resp-pill.is-on {
background: rgba(59, 130, 246, 0.1);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-resp-pill-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-resp-pill-text {
font-weight: 500;
}
@media (max-width: 720px) {
.csfloat-resp-pill {
width: 30px;
padding: 0;
justify-content: center;
}
.csfloat-resp-pill-text { display: none; }
}
/* CSFloat-1:1: rounded image frame for product showcases */
.csfloat-img-frame {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
aspect-ratio: 1.4;
}
.csfloat-img-frame > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-frame:hover > img { transform: scale(1.04); }
.csfloat-img-frame::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 50% 110%, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-img-frame.is-square { aspect-ratio: 1; }
.csfloat-img-frame.is-wide { aspect-ratio: 16/9; }
.csfloat-img-frame.is-no-glow::after { display: none; }
.csfloat-img-frame.is-flush { padding: 0; }
.csfloat-img-frame.is-flush > img { object-fit: cover; width: 100%; height: 100%; transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* END cta bar + mini grid + responsive pill + img frame */
/* CSFloat-1:1: small price-tag chip — for inline price labels */
.csfloat-price-chip {
display: inline-flex;
align-items: baseline;
gap: 1px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-price-chip::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-price-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-price-chip.is-cta::before { color: rgba(125, 184, 248, 0.7); }
.csfloat-price-chip.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.25);
color: oklch(0.78 0.16 152);
}
.csfloat-price-chip.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.25);
color: oklch(0.72 0.18 30);
}
.csfloat-price-chip.is-was {
text-decoration: line-through;
color: var(--ink-4);
}
.csfloat-price-chip.is-lg {
padding: 4px 12px;
font-size: 14px;
}
.csfloat-price-chip.is-pill {
border-radius: 999px;
}
/* CSFloat-1:1: detailed promotion banner — large hero callout */
.csfloat-promo-hero {
position: relative;
display: grid;
grid-template-columns: 1.4fr auto;
gap: 24px;
align-items: center;
padding: 32px 36px;
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 60%);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 16px;
overflow: hidden;
}
.csfloat-promo-hero::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 140%;
background: radial-gradient(ellipse, rgba(59, 130, 246, 0.18), transparent 60%);
pointer-events: none;
}
.csfloat-promo-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 90%);
pointer-events: none;
}
.csfloat-promo-hero-info {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.csfloat-promo-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
align-self: flex-start;
padding: 5px 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
}
.csfloat-promo-hero-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-promo-hero-title {
font: 700 clamp(24px, 3.6vw, 36px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
max-width: 540px;
}
.csfloat-promo-hero-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.02em;
}
.csfloat-promo-hero-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 520px;
}
.csfloat-promo-hero-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.csfloat-promo-hero-meta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-promo-hero-meta-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-promo-hero-meta-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-promo-hero-meta-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.csfloat-promo-hero-art {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 200px;
}
.csfloat-promo-hero-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 32px rgba(59, 130, 246, 0.3));
}
@media (max-width: 720px) {
.csfloat-promo-hero {
grid-template-columns: 1fr;
padding: 24px 22px;
}
.csfloat-promo-hero-art {
width: 140px;
height: 140px;
flex: 0 0 140px;
margin: 0 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.csfloat-promo-hero-eyebrow::before { animation: none; }
}
/* END price chip + promo hero */
/* CSFloat-1:1: pricing comparison header — used above pricing tier table */
.csfloat-price-cmp-head {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
align-items: stretch;
padding: 20px 0 24px;
}
.csfloat-price-cmp-head-cell {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
text-align: center;
position: relative;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-price-cmp-head-cell.is-best {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), var(--bg-1) 60%);
border-color: var(--cta);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 12px 32px rgba(0, 0, 0, 0.4);
transform: translateY(-4px);
}
.csfloat-price-cmp-head-cell-tag {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--cta);
color: #fff;
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}
.csfloat-price-cmp-head-cell-name {
font: 700 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.csfloat-price-cmp-head-cell-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
justify-content: center;
}
.csfloat-price-cmp-head-cell-price-val {
font: 700 32px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.03em;
}
.csfloat-price-cmp-head-cell-price-val::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-price-cmp-head-cell-price-period {
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-price-cmp-head-cell-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin: 6px 0 0;
}
/* CSFloat-1:1: action bar with primary + secondary actions */
.csfloat-action-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 0;
}
.csfloat-action-bar.is-bordered {
padding: 14px 16px;
background: var(--bg);
border-top: 1px solid var(--line);
}
.csfloat-action-bar.is-stretch > * { flex: 1 1 auto; }
.csfloat-action-bar-left {
margin-right: auto;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-action-bar-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-action-bar-meta.is-success { color: oklch(0.78 0.16 152); }
.csfloat-action-bar-meta.is-error { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: floating element on hover — for showcasing */
.csfloat-float-el {
display: inline-block;
animation: csfloat-float-y 3000ms ease-in-out infinite;
}
@keyframes csfloat-float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.csfloat-float-el.is-slow { animation-duration: 4000ms; }
.csfloat-float-el.is-fast { animation-duration: 2000ms; }
.csfloat-float-el.is-rotate {
animation: csfloat-float-rotate 5000ms ease-in-out infinite;
}
@keyframes csfloat-float-rotate {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-float-el { animation: none; }
}
/* END pricing comparison head + action bar + floating element */
/* CSFloat-1:1: badge avatar (avatar with dot/icon overlay for status) */
.csfloat-badge-av {
position: relative;
display: inline-block;
flex: 0 0 auto;
}
.csfloat-badge-av-img {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-3);
object-fit: cover;
display: block;
}
.csfloat-badge-av-overlay {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-2);
border: 2px solid var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
color: var(--ink-3);
}
.csfloat-badge-av-overlay.is-online { background: oklch(0.78 0.16 152); border-color: var(--bg); }
.csfloat-badge-av-overlay.is-pro {
background: var(--cta);
color: #fff;
font: 700 7px/1 var(--ui);
}
.csfloat-badge-av-overlay.is-pro::after { content: 'P'; }
.csfloat-badge-av-overlay.is-verified {
background: var(--cta);
color: #fff;
}
.csfloat-badge-av-overlay.is-verified::after {
content: '';
width: 5px;
height: 3px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-badge-av-overlay.is-tier-gold {
background: oklch(0.84 0.18 60);
color: var(--bg);
font: 700 7px/1 var(--ui);
}
.csfloat-badge-av-overlay.is-tier-gold::after { content: '★'; font-size: 8px; }
.csfloat-badge-av.is-sm .csfloat-badge-av-img { width: 24px; height: 24px; }
.csfloat-badge-av.is-sm .csfloat-badge-av-overlay { width: 10px; height: 10px; bottom: -1px; right: -1px; }
.csfloat-badge-av.is-lg .csfloat-badge-av-img { width: 56px; height: 56px; }
.csfloat-badge-av.is-lg .csfloat-badge-av-overlay { width: 18px; height: 18px; bottom: 0; right: 0; font-size: 10px; }
.csfloat-badge-av.is-xl .csfloat-badge-av-img { width: 80px; height: 80px; }
.csfloat-badge-av.is-xl .csfloat-badge-av-overlay { width: 22px; height: 22px; bottom: 2px; right: 2px; font-size: 12px; border-width: 3px; }
.csfloat-badge-av.is-square .csfloat-badge-av-img { border-radius: 8px; }
.csfloat-badge-av.is-ring .csfloat-badge-av-img {
box-shadow: 0 0 0 2px var(--cta), 0 0 0 4px var(--bg);
}
.csfloat-badge-av.is-ring-gold .csfloat-badge-av-img {
box-shadow: 0 0 0 2px oklch(0.84 0.18 60), 0 0 0 4px var(--bg);
}
/* CSFloat-1:1: tier price chip — for promo "from $X" callouts */
.csfloat-tier-price {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.csfloat-tier-price-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-tier-price-amt {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-tier-price-amt-val {
font: 700 24px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-tier-price-amt-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-tier-price-amt-period {
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-tier-price.is-large .csfloat-tier-price-amt-val { font-size: 28px; }
.csfloat-tier-price.is-large .csfloat-tier-price-amt-val::before { font-size: 18px; }
.csfloat-tier-price.is-cta .csfloat-tier-price-amt-val { color: var(--cta); }
.csfloat-tier-price.is-cta .csfloat-tier-price-amt-val::before { color: rgba(125, 184, 248, 0.6); }
.csfloat-tier-price-was {
font: 500 12px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
text-decoration: line-through;
margin-left: 6px;
}
.csfloat-tier-price-discount-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.12);
padding: 2px 5px;
border-radius: 3px;
margin-top: 2px;
}
/* CSFloat-1:1: split rail action — for sidebar bottom rail with CTA */
.csfloat-rail-action {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: linear-gradient(180deg, transparent, var(--bg-1) 40%);
border-top: 1px solid var(--line);
}
.csfloat-rail-action.is-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-rail-action-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-rail-action-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-rail-action-btn {
flex: 0 0 auto;
}
/* END badge avatar + tier price + rail action */
/* CSFloat-1:1: rate slider — for trade rate selection */
.csfloat-rate-slider {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-rate-slider-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-rate-slider-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-rate-slider-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-rate-slider-track {
position: relative;
height: 6px;
background: var(--bg-3);
border-radius: 999px;
overflow: visible;
}
.csfloat-rate-slider-fill {
height: 100%;
background: linear-gradient(90deg, var(--cta), oklch(0.84 0.18 240));
border-radius: 999px;
transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rate-slider-thumb {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
background: #fff;
border: 2px solid var(--cta);
border-radius: 999px;
transform: translate(-50%, -50%);
cursor: grab;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(59, 130, 246, 0.15);
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rate-slider-thumb:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.csfloat-rate-slider-thumb:active { cursor: grabbing; }
.csfloat-rate-slider-bounds {
display: flex;
align-items: center;
justify-content: space-between;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 4px;
}
.csfloat-rate-slider-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
margin-top: 4px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-rate-slider-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
/* CSFloat-1:1: drag-drop reorder list — for collection ordering */
.csfloat-reorder {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-reorder-row {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: grab;
user-select: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-reorder-row:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-reorder-row.is-dragging {
cursor: grabbing;
opacity: 0.7;
transform: scale(0.98);
border-color: var(--cta);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.csfloat-reorder-row.is-drop-above::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-reorder-row-drag {
width: 16px;
height: 16px;
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-reorder-row-drag::before {
content: '';
width: 8px;
height: 12px;
background-image:
radial-gradient(circle at 25% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 84%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 84%, currentColor 1px, transparent 1.5px);
}
.csfloat-reorder-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-reorder-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-reorder-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-reorder-row-action {
flex: 0 0 auto;
}
.csfloat-reorder-row-pos {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
/* END rate slider + reorder list */
/* CSFloat-1:1: cohort table — for breaking down user/seller groups */
.csfloat-cohort {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-cohort thead th {
text-align: left;
padding: 10px 12px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
.csfloat-cohort thead th:first-child {
position: sticky;
left: 0;
background: var(--bg-2);
z-index: 2;
border-right: 1px solid var(--line);
}
.csfloat-cohort tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
text-align: center;
}
.csfloat-cohort tbody td:first-child {
position: sticky;
left: 0;
background: var(--bg-1);
border-right: 1px solid var(--line);
text-align: left;
font-family: var(--ui);
font-weight: 500;
color: var(--ink-1);
}
.csfloat-cohort tbody tr:hover td:first-child { background: var(--bg-2); }
.csfloat-cohort tbody tr:last-child td { border-bottom: 0; }
.csfloat-cohort-cell.is-l1 { background: rgba(59, 130, 246, 0.04); color: var(--ink-2); }
.csfloat-cohort-cell.is-l2 { background: rgba(59, 130, 246, 0.08); color: var(--ink-1); }
.csfloat-cohort-cell.is-l3 { background: rgba(59, 130, 246, 0.16); color: var(--cta); font-weight: 600; }
.csfloat-cohort-cell.is-l4 { background: rgba(59, 130, 246, 0.28); color: #fff; font-weight: 700; }
.csfloat-cohort-cell.is-empty { color: var(--ink-4); }
/* CSFloat-1:1: small overlay selector (game/region picker in nav) */
.csfloat-overlay-select {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
display: none;
flex-direction: column;
gap: 1px;
min-width: 200px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
z-index: 100;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-overlay-select.is-open { display: flex; }
.csfloat-overlay-select-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
cursor: pointer;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
transition: background 100ms ease;
}
.csfloat-overlay-select-row:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-overlay-select-row.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-overlay-select-row-icon {
width: 24px;
height: 24px;
border-radius: 4px;
background: var(--bg-2);
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px;
}
.csfloat-overlay-select-row-icon > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-overlay-select-row-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-overlay-select-row-mark {
width: 12px;
height: 12px;
flex: 0 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.csfloat-overlay-select-row.is-active .csfloat-overlay-select-row-mark { visibility: visible; }
.csfloat-overlay-select-row.is-active .csfloat-overlay-select-row-mark::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-overlay-select-section {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
.csfloat-overlay-select-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
/* END cohort table + overlay select */
/* CSFloat-1:1: trade locked countdown badge — for items with steam trade lock */
.csfloat-locked-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: oklch(0.84 0.16 80);
}
.csfloat-locked-pill::before {
content: '';
width: 10px;
height: 10px;
border: 1.5px solid currentColor;
border-bottom: 0;
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, transparent 60%, currentColor 60%);
background-size: 100% 100%;
background-clip: padding-box;
margin-right: 1px;
}
.csfloat-locked-pill-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
.csfloat-locked-pill.is-unlocked {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-locked-pill.is-soon {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-locked-pill.is-soon { animation: none; }
}
/* CSFloat-1:1: market overview counter strip */
.csfloat-mkt-counter {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-mkt-counter-cell {
flex: 1 1 0;
min-width: 130px;
padding: 10px 14px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-mkt-counter-cell-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-mkt-counter-cell-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-mkt-counter-cell-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-mkt-counter-cell-delta {
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-left: 4px;
}
.csfloat-mkt-counter-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-mkt-counter-cell-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-mkt-counter-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: deal closeout / item sold tile */
.csfloat-sold-tile {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
opacity: 0.85;
}
.csfloat-sold-tile::before {
content: 'SOLD';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
font: 800 28px/1 var(--ui);
letter-spacing: 0.16em;
color: rgba(248, 113, 113, 0.75);
border: 3px solid rgba(248, 113, 113, 0.55);
padding: 6px 14px;
border-radius: 6px;
z-index: 2;
pointer-events: none;
background: rgba(7, 11, 24, 0.45);
backdrop-filter: blur(2px);
}
.csfloat-sold-tile-img {
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
filter: grayscale(0.4);
}
.csfloat-sold-tile-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0.7;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-sold-tile-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-sold-tile-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-sold-tile-price {
font: 600 13px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
text-decoration: line-through;
}
.csfloat-sold-tile-price::before {
content: '$';
font-size: 10px;
color: var(--ink-4);
margin-right: 1px;
font-weight: 500;
}
.csfloat-sold-tile-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* END locked pill + market counter + sold tile */
/* CSFloat-1:1: shimmer text loader for placeholders */
.csfloat-shimmer-text {
display: inline-block;
height: 1em;
background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
background-size: 200% 100%;
animation: csfloat-shimmer-text-anim 1400ms linear infinite;
border-radius: 3px;
vertical-align: middle;
width: 80px;
}
@keyframes csfloat-shimmer-text-anim {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.csfloat-shimmer-text.is-w-25 { width: 25%; }
.csfloat-shimmer-text.is-w-50 { width: 50%; }
.csfloat-shimmer-text.is-w-75 { width: 75%; }
.csfloat-shimmer-text.is-w-full { width: 100%; }
.csfloat-shimmer-text.is-h-sm { height: 0.7em; }
.csfloat-shimmer-text.is-h-md { height: 1em; }
.csfloat-shimmer-text.is-h-lg { height: 1.4em; }
.csfloat-shimmer-text.is-h-xl { height: 2em; }
@media (prefers-reduced-motion: reduce) {
.csfloat-shimmer-text { animation: none; }
}
/* CSFloat-1:1: hot streak indicator — for trending items with flame icon */
.csfloat-hot {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: 999px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.84 0.18 30);
}
.csfloat-hot::before {
content: '';
width: 9px;
height: 11px;
background: linear-gradient(180deg, oklch(0.84 0.18 60), oklch(0.78 0.18 30));
clip-path: polygon(50% 0%, 75% 30%, 90% 50%, 80% 80%, 50% 100%, 20% 80%, 10% 50%, 25% 30%);
}
.csfloat-hot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 800;
letter-spacing: 0;
margin-left: 2px;
}
.csfloat-hot.is-pulse { animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.csfloat-hot.is-pulse { animation: none; }
}
/* CSFloat-1:1: vault tile — for safe storage / locked vault visuals */
.csfloat-vault {
position: relative;
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.csfloat-vault::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 60%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.csfloat-vault-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.csfloat-vault-icon::before {
content: '';
width: 18px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px;
position: relative;
}
.csfloat-vault-icon::after {
content: '';
position: absolute;
width: 12px;
height: 8px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 6px 6px 0 0;
top: 8px;
}
.csfloat-vault-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-vault-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-vault-val {
font: 700 32px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.csfloat-vault-val::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
vertical-align: top;
}
.csfloat-vault-meta {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 4px 0 0;
}
.csfloat-vault-actions {
position: relative;
z-index: 1;
display: flex;
gap: 6px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px dashed var(--line);
}
.csfloat-vault-secret {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
align-self: flex-start;
}
/* END shimmer text + hot streak + vault tile */
/* CSFloat-1:1: trade fee summary — for inline order details */
.csfloat-fee-sum {
display: flex;
flex-direction: column;
gap: 0;
padding: 8px 0;
}
.csfloat-fee-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 0;
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-fee-sum-row > .csfloat-fee-sum-row-key {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-fee-sum-row > .csfloat-fee-sum-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
.csfloat-fee-sum-row > .csfloat-fee-sum-row-val.is-positive { color: oklch(0.78 0.16 152); }
.csfloat-fee-sum-row > .csfloat-fee-sum-row-val.is-negative { color: oklch(0.72 0.18 30); }
.csfloat-fee-sum-row.is-total {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-weight: 600;
color: var(--ink-1);
font-size: 13px;
}
.csfloat-fee-sum-row.is-total > .csfloat-fee-sum-row-val {
font-size: 14px;
font-weight: 700;
color: var(--ink-1);
}
.csfloat-fee-sum-help {
display: inline-flex;
align-items: center;
width: 11px;
height: 11px;
border-radius: 999px;
background: var(--bg-3);
color: var(--ink-4);
font: 700 8px/1 var(--ui);
cursor: help;
margin-left: 2px;
justify-content: center;
}
.csfloat-fee-sum-help::after { content: '?'; font-size: 8px; }
/* CSFloat-1:1: hover line indicator (for nav/menu hover state) */
.csfloat-hover-line {
position: relative;
display: inline-block;
}
.csfloat-hover-line::before {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1.5px;
background: var(--cta);
transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-line:hover::before { width: 100%; }
.csfloat-hover-line.is-active::before { width: 100%; }
.csfloat-hover-line.is-center::before {
left: 50%;
transform: translateX(-50%);
}
/* CSFloat-1:1: copy-to-clipboard input — preset value with one-click copy */
.csfloat-copy-input {
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
height: 36px;
}
.csfloat-copy-input > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
padding: 0 12px;
font: 500 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
text-overflow: ellipsis;
user-select: all;
min-width: 0;
}
.csfloat-copy-input-btn {
flex: 0 0 auto;
padding: 0 14px;
background: var(--bg-3);
color: var(--ink-2);
border: 0;
border-left: 1px solid var(--line);
cursor: pointer;
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-copy-input-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-copy-input-btn.is-copied {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-copy-input-btn.is-copied::before {
content: '';
width: 9px;
height: 5px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-copy-input.is-error {
border-color: oklch(0.66 0.18 30);
}
.csfloat-copy-input.is-success {
border-color: oklch(0.62 0.16 152);
}
.csfloat-copy-input:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-copy-input.is-sm { height: 28px; }
.csfloat-copy-input.is-sm > input { font-size: 12px; padding: 0 10px; }
.csfloat-copy-input.is-sm .csfloat-copy-input-btn { padding: 0 10px; font-size: 10px; }
/* END fee summary + hover line + copy-to-clipboard input */
/* CSFloat-1:1: split media list — for promo strip with 2 image columns */
.csfloat-split-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.csfloat-split-media-side {
position: relative;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-split-media-side:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-split-media-side-img {
width: 100%;
aspect-ratio: 1.6;
background: var(--bg);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.csfloat-split-media-side-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-split-media-side-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-split-media-side-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-split-media-side-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-split-media-side-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
margin: 0;
}
@media (max-width: 720px) {
.csfloat-split-media { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: minimal sidebar list — for nav items in left rail */
.csfloat-rail-list {
display: flex;
flex-direction: column;
gap: 1px;
padding: 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-rail-list-item {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-rail-list-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-rail-list-item.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-rail-list-item-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: currentColor;
opacity: 0.85;
}
.csfloat-rail-list-item-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-rail-list-item-badge {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-rail-list-item.is-active .csfloat-rail-list-item-badge {
background: rgba(59, 130, 246, 0.16);
color: var(--cta);
}
.csfloat-rail-list-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-rail-list-section {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
/* CSFloat-1:1: stat list with bar fills — for analytics rows */
.csfloat-bar-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-bar-list-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 6px 0;
}
.csfloat-bar-list-row-fill.is-success { background: oklch(0.62 0.16 152); }
.csfloat-bar-list-row-fill.is-warning { background: oklch(0.78 0.16 80); }
.csfloat-bar-list-row-fill.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-bar-list-row-fill.is-purple { background: oklch(0.62 0.18 290); }
.csfloat-bar-list-row-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* END split media + rail list + bar list */
/* CSFloat-1:1: data callout group with sub-stats — for revenue breakdown cards */
.csfloat-data-callout {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-data-callout-head {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-data-callout-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-data-callout-val {
font: 700 32px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-data-callout-val.is-currency::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-data-callout-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 2px;
}
.csfloat-data-callout-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
padding: 2px 6px;
border-radius: 999px;
}
.csfloat-data-callout-delta.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
}
.csfloat-data-callout-delta.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.08);
}
.csfloat-data-callout-substats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
padding-top: 12px;
border-top: 1px dashed var(--line);
}
.csfloat-data-callout-substat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-data-callout-substat-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-data-callout-substat-val {
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-data-callout-substat-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: market spread tile — for showing min/avg/max prices */
.csfloat-spread {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-spread-cell {
padding: 12px 14px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
align-items: center;
}
.csfloat-spread-cell-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-spread-cell-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-spread-cell-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-spread-cell.is-low .csfloat-spread-cell-val { color: oklch(0.78 0.16 152); }
.csfloat-spread-cell.is-high .csfloat-spread-cell-val { color: oklch(0.72 0.18 30); }
.csfloat-spread-cell.is-med .csfloat-spread-cell-val { color: var(--ink-1); }
.csfloat-spread-arrow {
background: var(--bg-2);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
color: var(--ink-3);
}
.csfloat-spread-arrow::before {
content: '';
width: 14px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
position: relative;
}
.csfloat-spread-arrow::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
margin-left: -8px;
}
/* CSFloat-1:1: profile tabs — for items / inventory / activity */
.csfloat-profile-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
}
.csfloat-profile-tabs-link {
position: relative;
padding: 12px 16px;
font: 600 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-profile-tabs-link:hover { color: var(--ink-2); }
.csfloat-profile-tabs-link.is-active { color: var(--ink-1); }
.csfloat-profile-tabs-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-profile-tabs-link-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-profile-tabs-link.is-active .csfloat-profile-tabs-link-count { color: var(--ink-3); }
.csfloat-profile-tabs-spacer { flex: 1 1 auto; }
.csfloat-profile-tabs-trail {
display: inline-flex;
align-items: center;
gap: 6px;
padding-right: 4px;
}
@media (max-width: 540px) {
.csfloat-profile-tabs {
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-profile-tabs::-webkit-scrollbar { display: none; }
.csfloat-profile-tabs-link { padding: 10px 12px; }
}
/* END data callout + spread tile + profile tabs */
/* CSFloat-1:1: chip filter row — for inline boolean filter pills */
.csfloat-bool-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.csfloat-bool-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bool-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-bool-chip.is-on {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-bool-chip-mark {
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
flex: 0 0 12px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bool-chip.is-on .csfloat-bool-chip-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-bool-chip.is-on .csfloat-bool-chip-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
}
/* CSFloat-1:1: refund detail block — for showing refund summary */
.csfloat-refund {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: rgba(167, 139, 250, 0.04);
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 10px;
}
.csfloat-refund-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(167, 139, 250, 0.16);
border: 1px solid rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 14px;
}
.csfloat-refund-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-refund-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-refund-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-refund-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-refund-amt {
font: 700 14px/1 var(--mono);
color: oklch(0.84 0.18 290);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
text-align: right;
}
.csfloat-refund-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: stat sparkline tile — small inline stat with built-in chart */
.csfloat-spark-tile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-spark-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-spark-tile-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-spark-tile-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 4px;
}
.csfloat-spark-tile-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-spark-tile-spark {
width: 64px;
height: 28px;
flex: 0 0 64px;
}
.csfloat-spark-tile-spark > svg {
width: 100%;
height: 100%;
}
.csfloat-spark-tile-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-spark-tile-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-spark-tile-delta.is-down { color: oklch(0.72 0.18 30); }
/* END bool chip + refund block + spark tile */
/* CSFloat-1:1: stretched-link card overlay (clickable card without nested links) */
.csfloat-stretch-link {
position: relative;
}
.csfloat-stretch-link > .csfloat-stretch-link-anchor {
position: absolute;
inset: 0;
z-index: 1;
text-indent: -9999px;
overflow: hidden;
}
.csfloat-stretch-link > .csfloat-stretch-link-content {
position: relative;
z-index: 0;
}
.csfloat-stretch-link > .csfloat-stretch-link-action {
position: relative;
z-index: 2;
}
/* CSFloat-1:1: focus ring helper for keyboard navigation */
.csfloat-focusable {
outline: 0;
border-radius: 4px;
}
.csfloat-focusable:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 2px;
}
.csfloat-focusable.is-pill:focus-visible { outline-offset: 3px; border-radius: 999px; }
.csfloat-focusable.is-card:focus-visible { outline-offset: 4px; border-radius: 10px; }
/* CSFloat-1:1: skip-to-content accessibility link */
.csfloat-skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--cta);
color: #fff;
padding: 10px 16px;
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
text-decoration: none;
z-index: 9999;
border-radius: 0 0 6px 0;
transition: top 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-skip-link:focus {
top: 0;
outline: 2px solid var(--ink-1);
outline-offset: -4px;
}
/* CSFloat-1:1: visually-hidden text utility (a11y) */
.csfloat-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* CSFloat-1:1: scroll lock helper for modals/drawers */
.csfloat-scroll-lock {
overflow: hidden !important;
position: fixed !important;
width: 100%;
top: var(--csfloat-scroll-y, 0);
}
/* CSFloat-1:1: keyboard-only outline removal on mouse interactions */
:where(.csfloat-no-mouse-outline):focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}
/* CSFloat-1:1: print-friendly utility (hide noise) */
@media print {
.csfloat-no-print { display: none !important; }
.csfloat-print-only { display: block !important; }
body { background: #fff !important; color: #000 !important; }
.csfloat-card,
.csfloat-mkt-card,
.csfloat-panel,
[class*="csfloat-"] { box-shadow: none !important; }
a[href]::after {
content: " (" attr(href) ")";
font-size: 80%;
color: #555;
}
}
.csfloat-print-only { display: none; }
/* CSFloat-1:1: motion preset utility (for component fade-in/slide entrances) */
.csfloat-anim-fade-in {
animation: csfloat-fade-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.csfloat-anim-slide-up {
animation: csfloat-slide-up 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-slide-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-anim-slide-down {
animation: csfloat-slide-down 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-slide-down {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-anim-slide-left {
animation: csfloat-slide-left 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-slide-left {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.csfloat-anim-pop {
animation: csfloat-pop 240ms cubic-bezier(0.4, 1.4, 0.6, 1);
}
@keyframes csfloat-pop {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.csfloat-anim-blink {
animation: csfloat-blink 1100ms steps(2, start) infinite;
}
@keyframes csfloat-blink {
to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-anim-fade-in,
.csfloat-anim-slide-up,
.csfloat-anim-slide-down,
.csfloat-anim-slide-left,
.csfloat-anim-pop,
.csfloat-anim-blink { animation: none; }
}
/* END stretch link + focus ring + sr-only + print + motion presets */
/* CSFloat-1:1: stat list grid for site-wide metrics */
.csfloat-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-metrics-grid > .csfloat-metrics-grid-cell {
padding: 14px 18px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-metrics-grid-cell-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-metrics-grid-cell-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 2px;
}
.csfloat-metrics-grid-cell-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-metrics-grid-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-metrics-grid-cell-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-metrics-grid-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-metrics-grid-cell-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: bottom mobile-only navigation bar */
.csfloat-mobile-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
background: rgba(7, 11, 24, 0.85);
backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
padding: 6px 8px;
z-index: 80;
}
@media (max-width: 720px) {
.csfloat-mobile-nav { display: flex; align-items: stretch; gap: 0; }
}
.csfloat-mobile-nav-link {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 0;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
font: 500 10px/1 var(--ui);
letter-spacing: 0.02em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mobile-nav-link:hover { color: var(--ink-1); }
.csfloat-mobile-nav-link.is-active { color: var(--cta); }
.csfloat-mobile-nav-link.is-active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 2px;
background: var(--cta);
border-radius: 0 0 2px 2px;
}
.csfloat-mobile-nav-link-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.csfloat-mobile-nav-link-badge {
position: absolute;
top: 4px;
right: calc(50% - 14px);
min-width: 14px;
height: 14px;
padding: 0 4px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 9px/14px var(--mono);
text-align: center;
border: 2px solid var(--bg);
font-feature-settings: "tnum";
}
.csfloat-mobile-nav-link-fab {
position: relative;
}
.csfloat-mobile-nav-link-fab .csfloat-mobile-nav-link-icon {
background: var(--cta);
color: #fff;
border-radius: 999px;
width: 36px;
height: 36px;
margin-top: -16px;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45);
font-size: 18px;
}
/* CSFloat-1:1: floating button cluster (bottom right) */
.csfloat-fab-cluster {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 8px;
z-index: 50;
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn {
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line-2);
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn:hover {
transform: translateY(-2px);
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn.is-primary {
width: 52px;
height: 52px;
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 12px 28px rgba(59, 130, 246, 0.45);
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn.is-primary:hover {
background: oklch(0.66 0.18 240);
box-shadow: 0 16px 32px rgba(59, 130, 246, 0.5);
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-3);
color: var(--ink-1);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line-2);
font: 500 11px/1 var(--ui);
white-space: nowrap;
letter-spacing: -0.005em;
opacity: 0;
pointer-events: none;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fab-cluster > .csfloat-fab-cluster-btn:hover .csfloat-fab-cluster-btn-label {
opacity: 1;
}
@media (max-width: 720px) {
.csfloat-fab-cluster { bottom: 80px; }
}
/* END metrics grid + mobile nav + fab cluster */
/* CSFloat-1:1: stat list with row icons */
.csfloat-icon-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
list-style: none;
margin: 0;
}
.csfloat-icon-list-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-icon-list-row:last-child { border-bottom: 0; }
.csfloat-icon-list-row-icon {
width: 24px;
height: 24px;
border-radius: 5px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
font-size: 11px;
}
.csfloat-icon-list-row-icon.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-icon-list-row-icon.is-success {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-icon-list-row-icon.is-warning {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-icon-list-row-icon.is-danger {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-icon-list-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-icon-list-row-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-icon-list-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-icon-list-row-trail {
font: 500 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
text-align: right;
flex: 0 0 auto;
}
.csfloat-icon-list-row-trail.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: condensed admin row — for staff dashboards */
.csfloat-admin-row {
display: grid;
grid-template-columns: 24px 32px 1fr auto auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
font: 400 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
transition: background 100ms ease;
}
.csfloat-admin-row:last-child { border-bottom: 0; }
.csfloat-admin-row:hover { background: var(--bg-2); }
.csfloat-admin-row.is-flagged { background: rgba(251, 191, 36, 0.04); }
.csfloat-admin-row.is-banned { opacity: 0.5; }
.csfloat-admin-row-rank {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
text-align: center;
font-feature-settings: "tnum";
}
.csfloat-admin-row-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 32px;
object-fit: cover;
}
.csfloat-admin-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-admin-row-name {
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-admin-row-id {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-admin-row-volume {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-admin-row-volume::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-admin-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
.csfloat-admin-row-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 720px) {
.csfloat-admin-row {
grid-template-columns: 24px 28px 1fr auto;
gap: 8px;
}
.csfloat-admin-row-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.csfloat-admin-row-stamp,
.csfloat-admin-row-actions { display: none; }
}
/* END icon list + admin row */
/* CSFloat-1:1: panel grid layout for dashboards (3-column) */
.csfloat-panel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
align-items: start;
}
.csfloat-panel-grid > .csfloat-panel-grid-cell { grid-column: span 1; }
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-2 { grid-column: span 2; }
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-3 { grid-column: span 3; }
.csfloat-panel-grid.is-2col { grid-template-columns: repeat(2, 1fr); }
.csfloat-panel-grid.is-2col > .csfloat-panel-grid-cell.is-3,
.csfloat-panel-grid.is-2col > .csfloat-panel-grid-cell.is-2 { grid-column: span 2; }
.csfloat-panel-grid.is-4col { grid-template-columns: repeat(4, 1fr); }
.csfloat-panel-grid.is-4col > .csfloat-panel-grid-cell.is-2 { grid-column: span 2; }
.csfloat-panel-grid.is-4col > .csfloat-panel-grid-cell.is-3 { grid-column: span 3; }
.csfloat-panel-grid.is-4col > .csfloat-panel-grid-cell.is-4 { grid-column: span 4; }
@media (max-width: 1100px) {
.csfloat-panel-grid, .csfloat-panel-grid.is-4col { grid-template-columns: repeat(2, 1fr); }
.csfloat-panel-grid > .csfloat-panel-grid-cell,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-2,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-3,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-4 { grid-column: span 2; }
}
@media (max-width: 720px) {
.csfloat-panel-grid,
.csfloat-panel-grid.is-2col,
.csfloat-panel-grid.is-4col { grid-template-columns: 1fr; }
.csfloat-panel-grid > .csfloat-panel-grid-cell,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-2,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-3,
.csfloat-panel-grid > .csfloat-panel-grid-cell.is-4 { grid-column: span 1; }
}
/* CSFloat-1:1: trade-tier card — for /trade type pages (high tier vs low tier visualization) */
.csfloat-trade-tier {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-trade-tier:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-trade-tier.is-recommended {
border-color: rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1) 60%);
}
.csfloat-trade-tier-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
font-size: 18px;
}
.csfloat-trade-tier.is-recommended .csfloat-trade-tier-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-trade-tier-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-trade-tier-name {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-trade-tier-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-trade-tier-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-trade-tier-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.csfloat-trade-tier-meta-stat {
display: inline-flex;
align-items: baseline;
gap: 3px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-trade-tier-meta-stat-val {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: hero tab pill bar — for hero subnav */
.csfloat-hero-tabs {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 1px;
}
.csfloat-hero-tabs > .csfloat-hero-tabs-opt {
padding: 8px 14px;
background: transparent;
border: 0;
border-radius: 999px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-tabs > .csfloat-hero-tabs-opt:hover { color: var(--ink-1); }
.csfloat-hero-tabs > .csfloat-hero-tabs-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-hero-tabs > .csfloat-hero-tabs-opt.is-active.is-cta {
background: var(--cta);
color: #fff;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}
.csfloat-hero-tabs > .csfloat-hero-tabs-opt-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-hero-tabs > .csfloat-hero-tabs-opt.is-active .csfloat-hero-tabs-opt-count {
color: var(--ink-3);
}
.csfloat-hero-tabs.is-block { display: flex; }
.csfloat-hero-tabs.is-block > .csfloat-hero-tabs-opt { flex: 1 1 0; justify-content: center; }
/* END panel grid + trade tier + hero tabs */
/* CSFloat-1:1: rotating hero text — for headline crossfade words */
.csfloat-rotate-text {
display: inline-block;
position: relative;
vertical-align: baseline;
min-width: 100px;
}
.csfloat-rotate-text > .csfloat-rotate-text-word {
display: inline-block;
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
background: linear-gradient(135deg, oklch(0.92 0.08 240) 0%, var(--cta) 50%, oklch(0.84 0.18 290) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.25));
animation: csfloat-rotate-text-cycle 9000ms ease-in-out infinite;
}
.csfloat-rotate-text > .csfloat-rotate-text-word:nth-child(1) { animation-delay: 0ms; }
.csfloat-rotate-text > .csfloat-rotate-text-word:nth-child(2) { animation-delay: 3000ms; position: absolute; top: 0; left: 0; opacity: 0; }
.csfloat-rotate-text > .csfloat-rotate-text-word:nth-child(3) { animation-delay: 6000ms; position: absolute; top: 0; left: 0; opacity: 0; }
@keyframes csfloat-rotate-text-cycle {
0%, 25% { opacity: 1; transform: translateY(0); }
30%, 95% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-rotate-text > .csfloat-rotate-text-word { animation: none; }
.csfloat-rotate-text > .csfloat-rotate-text-word:nth-child(2),
.csfloat-rotate-text > .csfloat-rotate-text-word:nth-child(3) { display: none; }
}
/* CSFloat-1:1: corner ribbon — for promotional callouts */
.csfloat-corner-ribbon {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: 100px;
height: 100px;
pointer-events: none;
z-index: 1;
}
.csfloat-corner-ribbon-inner {
position: absolute;
top: 18px;
right: -24px;
transform: rotate(45deg);
background: var(--cta);
color: #fff;
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 28px;
text-align: center;
width: 120px;
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.35);
}
.csfloat-corner-ribbon.is-success .csfloat-corner-ribbon-inner { background: oklch(0.62 0.16 152); }
.csfloat-corner-ribbon.is-warning .csfloat-corner-ribbon-inner { background: oklch(0.78 0.16 80); color: var(--bg); }
.csfloat-corner-ribbon.is-danger .csfloat-corner-ribbon-inner { background: oklch(0.66 0.18 30); }
.csfloat-corner-ribbon.is-rare .csfloat-corner-ribbon-inner { background: oklch(0.62 0.27 330); }
/* CSFloat-1:1: condensed cards strip — used for top earners / hot drops carousel */
.csfloat-condense-strip {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
padding: 4px 4px 8px;
}
.csfloat-condense-strip::-webkit-scrollbar { display: none; }
.csfloat-condense-strip > .csfloat-condense-card {
flex: 0 0 auto;
display: grid;
grid-template-columns: 32px 1fr;
gap: 8px;
align-items: center;
padding: 6px 12px 6px 6px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-condense-strip > .csfloat-condense-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-condense-card-img {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-2);
flex: 0 0 32px;
padding: 4px;
object-fit: contain;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-condense-card-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-condense-card-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-condense-card-name {
font: 600 11px/1.2 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
.csfloat-condense-card-price {
font: 600 11px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-condense-card-price::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-condense-card-price-delta {
font-size: 10px;
}
.csfloat-condense-card-price-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-condense-card-price-delta.is-down { color: oklch(0.72 0.18 30); }
/* END rotate text + corner ribbon + condense strip */
/* CSFloat-1:1: card composer (drag-build a card with multiple slots) */
.csfloat-composer {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-composer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
gap: 8px;
}
.csfloat-composer-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-composer-head-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-composer-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-composer-slot {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
border-radius: 8px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-composer-slot:hover {
border-color: var(--cta);
background: var(--bg-3);
}
.csfloat-composer-slot.is-filled {
border-style: solid;
background: var(--bg-1);
cursor: grab;
}
.csfloat-composer-slot.is-filled:hover {
border-color: var(--line-2);
}
.csfloat-composer-slot.is-dragging {
opacity: 0.5;
cursor: grabbing;
}
.csfloat-composer-slot-img {
width: 44px;
height: 44px;
border-radius: 6px;
background: var(--bg-3);
border: 1px solid var(--line);
flex: 0 0 44px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-composer-slot-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-composer-slot-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.csfloat-composer-slot-name {
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-composer-slot-meta {
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-composer-slot.is-empty {
text-align: center;
justify-content: center;
padding: 24px 12px;
color: var(--ink-4);
font: 500 12px/1.4 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-composer-slot.is-empty::before {
content: '+';
display: inline-block;
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-3);
color: var(--ink-3);
font: 700 18px/22px var(--ui);
text-align: center;
margin-right: 6px;
}
.csfloat-composer-slot-x {
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-4);
border-radius: 999px;
cursor: pointer;
flex: 0 0 22px;
font: 500 14px/1 var(--ui);
}
.csfloat-composer-slot-x:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
.csfloat-composer-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
gap: 8px;
}
.csfloat-composer-foot-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-composer-foot-stat-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-composer-foot-stat-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* CSFloat-1:1: animated trade arrow — for trade flows */
.csfloat-trade-arrow {
display: inline-flex;
align-items: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
flex: 0 0 32px;
position: relative;
justify-content: center;
}
.csfloat-trade-arrow::before {
content: '';
width: 14px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
position: absolute;
left: 6px;
animation: csfloat-trade-arrow-loop 2200ms ease-in-out infinite;
}
.csfloat-trade-arrow::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
right: 6px;
animation: csfloat-trade-arrow-loop-2 2200ms ease-in-out infinite;
}
@keyframes csfloat-trade-arrow-loop {
0%, 100% { opacity: 1; transform: translateX(0); }
50% { opacity: 0.5; transform: translateX(2px); }
}
@keyframes csfloat-trade-arrow-loop-2 {
0%, 100% { opacity: 1; transform: rotate(45deg) translate(-1px, -1px); }
50% { opacity: 0.5; transform: rotate(45deg) translate(1px, -3px); }
}
.csfloat-trade-arrow.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-trade-arrow::before,
.csfloat-trade-arrow::after { animation: none; }
}
/* END card composer + trade arrow */
/* CSFloat-1:1: text gradient mask — for animated headlines */
.csfloat-text-mask {
background: linear-gradient(110deg, var(--ink-1) 30%, var(--cta) 50%, var(--ink-1) 70%);
background-size: 220% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: csfloat-text-mask-shift 4500ms linear infinite;
}
@keyframes csfloat-text-mask-shift {
to { background-position: -120% 0; }
}
.csfloat-text-mask.is-pulse {
animation: csfloat-text-mask-pulse 3000ms ease-in-out infinite;
}
@keyframes csfloat-text-mask-pulse {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-text-mask { animation: none; }
}
/* CSFloat-1:1: market activity stream pill — for displaying recent activity ticker */
.csfloat-activity-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
white-space: nowrap;
flex: 0 0 auto;
}
.csfloat-activity-pill-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
font-size: 10px;
color: var(--ink-3);
}
.csfloat-activity-pill.is-buy .csfloat-activity-pill-icon {
background: rgba(52, 211, 153, 0.16);
border-color: rgba(52, 211, 153, 0.35);
color: oklch(0.78 0.16 152);
}
.csfloat-activity-pill.is-sell .csfloat-activity-pill-icon {
background: rgba(248, 113, 113, 0.16);
border-color: rgba(248, 113, 113, 0.35);
color: oklch(0.72 0.18 30);
}
.csfloat-activity-pill.is-list .csfloat-activity-pill-icon {
background: rgba(59, 130, 246, 0.16);
border-color: rgba(59, 130, 246, 0.35);
color: var(--cta);
}
.csfloat-activity-pill-handle {
font-weight: 600;
color: var(--ink-1);
}
.csfloat-activity-pill-action {
color: var(--ink-3);
}
.csfloat-activity-pill-target {
font-weight: 600;
color: var(--ink-1);
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-activity-pill-amt {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-activity-pill-amt::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-activity-pill-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: reusable horizontal scroll-snap wrapper */
.csfloat-snap-row {
display: flex;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 4px;
padding: 4px 4px 12px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.csfloat-snap-row::-webkit-scrollbar { display: none; }
.csfloat-snap-row > * {
scroll-snap-align: start;
flex: 0 0 auto;
}
.csfloat-snap-row.is-no-snap > * { scroll-snap-align: none; }
.csfloat-snap-row.is-padded { padding: 4px 16px 12px; scroll-padding: 16px; }
.csfloat-snap-row.is-fade-edges {
position: relative;
}
.csfloat-snap-row.is-fade-edges::before,
.csfloat-snap-row.is-fade-edges::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 32px;
pointer-events: none;
z-index: 2;
}
.csfloat-snap-row.is-fade-edges::before {
left: 0;
background: linear-gradient(90deg, var(--bg), transparent);
}
.csfloat-snap-row.is-fade-edges::after {
right: 0;
background: linear-gradient(-90deg, var(--bg), transparent);
}
/* CSFloat-1:1: minimal section title row with action */
.csfloat-rowtitle {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px;
}
.csfloat-rowtitle-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.csfloat-rowtitle-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.01em;
}
.csfloat-rowtitle-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-rowtitle-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-rowtitle-action:hover { opacity: 0.78; }
.csfloat-rowtitle-action::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rowtitle-action:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
/* END text mask + activity pill + snap row + row title */
/* CSFloat-1:1: vertical mini-tabs (sidebar variant for settings/admin) */
.csfloat-vtabs {
display: flex;
flex-direction: column;
gap: 1px;
padding: 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
width: 220px;
flex: 0 0 220px;
}
.csfloat-vtabs-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 6px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vtabs-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-vtabs-link.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-vtabs-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-vtabs-link-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: currentColor;
opacity: 0.85;
}
.csfloat-vtabs-link-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-vtabs-link-badge {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-vtabs-link.is-active .csfloat-vtabs-link-badge {
background: rgba(59, 130, 246, 0.16);
color: var(--cta);
}
.csfloat-vtabs-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-vtabs-section {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
@media (max-width: 720px) {
.csfloat-vtabs { width: 100%; flex: none; }
}
/* CSFloat-1:1: small action menu (3-dots context menu trigger) */
.csfloat-dots-menu {
position: relative;
display: inline-block;
}
.csfloat-dots-menu-trigger {
width: 24px;
height: 24px;
border-radius: 6px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--ui);
transition: all 120ms ease;
}
.csfloat-dots-menu-trigger:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-dots-menu-trigger.is-open {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-dots-menu-trigger::before {
content: '⋯';
}
.csfloat-dots-menu-trigger.is-vert::before {
content: '⋮';
}
.csfloat-dots-menu-popover {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 160px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 4px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
z-index: 100;
display: none;
flex-direction: column;
gap: 1px;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-dots-menu.is-open .csfloat-dots-menu-popover { display: flex; }
.csfloat-dots-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 5px;
font: 400 12px/1 var(--ui);
color: var(--ink-2);
cursor: pointer;
letter-spacing: -0.005em;
background: transparent;
border: 0;
width: 100%;
text-align: left;
text-decoration: none;
transition: background 100ms ease;
}
.csfloat-dots-menu-item:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-dots-menu-item.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-dots-menu-item.is-danger:hover { background: rgba(248, 113, 113, 0.08); }
.csfloat-dots-menu-item-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.7;
}
.csfloat-dots-menu-divider {
height: 1px;
background: var(--line);
margin: 3px 0;
}
/* CSFloat-1:1: highlight tag for important callouts */
.csfloat-hl-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(167, 139, 250, 0.18));
border: 1px solid rgba(96, 165, 250, 0.4);
border-radius: 999px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.92 0.1 240);
}
.csfloat-hl-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.84 0.18 240);
box-shadow: 0 0 6px currentColor;
}
.csfloat-hl-tag.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(110, 231, 183, 0.18));
border-color: rgba(110, 231, 183, 0.4);
color: oklch(0.92 0.1 152);
}
.csfloat-hl-tag.is-success::before { background: oklch(0.78 0.16 152); }
.csfloat-hl-tag.is-rare {
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(251, 146, 60, 0.18));
border-color: rgba(251, 146, 60, 0.4);
color: oklch(0.92 0.1 50);
}
.csfloat-hl-tag.is-rare::before { background: oklch(0.84 0.18 60); }
.csfloat-hl-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
font-weight: 700;
}
/* END vtabs + dots menu + highlight tag */
/* CSFloat-1:1: vertical accordion tile (item attribute drilldown) */
.csfloat-vacc {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-vacc-row {
border-bottom: 1px solid var(--line);
}
.csfloat-vacc-row:last-child { border-bottom: 0; }
.csfloat-vacc-head {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
cursor: pointer;
background: transparent;
border: 0;
width: 100%;
text-align: left;
font: 500 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vacc-head:hover { background: var(--bg-2); }
.csfloat-vacc-head-icon {
width: 22px;
height: 22px;
border-radius: 5px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
font-size: 11px;
}
.csfloat-vacc-head-name {
flex: 1 1 auto;
}
.csfloat-vacc-head-val {
font: 500 12px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
letter-spacing: 0;
}
.csfloat-vacc-head-chev {
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex: 0 0 8px;
}
.csfloat-vacc-row.is-open .csfloat-vacc-head-chev { transform: rotate(225deg); }
.csfloat-vacc-body {
max-height: 0;
overflow: hidden;
padding: 0 16px;
background: var(--bg);
transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
border-top: 0 solid var(--line);
}
.csfloat-vacc-row.is-open .csfloat-vacc-body {
max-height: 480px;
padding: 14px 16px;
border-top-width: 1px;
}
.csfloat-vacc-body-text {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
margin: 0;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: hover-card preview popover */
.csfloat-hover-card {
position: absolute;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 14px;
width: 280px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
z-index: 100;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-hover-card.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.csfloat-hover-card-anchor {
position: relative;
display: inline-block;
}
.csfloat-hover-card-anchor:hover .csfloat-hover-card {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.csfloat-hover-card-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--line);
}
.csfloat-hover-card-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 40px;
object-fit: cover;
}
.csfloat-hover-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-hover-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-hover-card-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-hover-card-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-hover-card-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.csfloat-hover-card-stat {
display: flex;
flex-direction: column;
gap: 2px;
text-align: center;
}
.csfloat-hover-card-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hover-card-stat-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.csfloat-hover-card-actions {
display: flex;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-hover-card-actions > * { flex: 1 1 auto; }
/* CSFloat-1:1: deck of cards stack visual (for showcasing multiple items piled) */
.csfloat-card-deck {
position: relative;
display: inline-block;
}
.csfloat-card-deck > .csfloat-card-deck-card {
position: relative;
width: 80px;
height: 110px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.csfloat-card-deck > .csfloat-card-deck-card > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-card-deck::before,
.csfloat-card-deck::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 8px;
z-index: 0;
}
.csfloat-card-deck::before {
transform: rotate(-3deg) translate(-2px, 2px);
opacity: 0.7;
}
.csfloat-card-deck::after {
transform: rotate(4deg) translate(2px, 4px);
opacity: 0.4;
}
.csfloat-card-deck-count {
position: absolute;
bottom: -4px;
right: -4px;
z-index: 2;
background: var(--cta);
color: #fff;
border-radius: 999px;
padding: 2px 6px;
font: 700 10px/1 var(--mono);
font-feature-settings: "tnum";
border: 2px solid var(--bg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.csfloat-card-deck.is-lg > .csfloat-card-deck-card { width: 120px; height: 165px; padding: 12px; }
.csfloat-card-deck.is-sm > .csfloat-card-deck-card { width: 56px; height: 76px; padding: 4px; }
/* END vacc + hover card + card deck */
/* CSFloat-1:1: condensed listing row — for /buy compact view */
.csfloat-listing-condense {
display: grid;
grid-template-columns: 40px 1fr auto auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-listing-condense:last-child { border-bottom: 0; }
.csfloat-listing-condense:hover { background: var(--bg-2); }
.csfloat-listing-condense-img {
width: 40px;
height: 40px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
position: relative;
}
.csfloat-listing-condense-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-listing-condense-img-rare {
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
height: 2px;
border-radius: 0 0 4px 4px;
background: var(--ink-3);
}
.csfloat-listing-condense-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-listing-condense-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-listing-condense-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 10px/1.2 var(--ui);
color: var(--ink-4);
}
.csfloat-listing-condense-float {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-3);
}
.csfloat-listing-condense-seller {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-listing-condense-seller-avatar {
width: 16px;
height: 16px;
border-radius: 999px;
flex: 0 0 16px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-listing-condense-price {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-listing-condense-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-listing-condense-action {
flex: 0 0 auto;
}
@media (max-width: 720px) {
.csfloat-listing-condense {
grid-template-columns: 32px 1fr auto;
gap: 8px;
}
.csfloat-listing-condense-img { width: 32px; height: 32px; flex: 0 0 32px; }
.csfloat-listing-condense-seller,
.csfloat-listing-condense-action { display: none; }
}
/* CSFloat-1:1: shipping address card */
.csfloat-addr-card {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-addr-card:hover { border-color: var(--line-2); }
.csfloat-addr-card.is-default {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-addr-card-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
margin-top: 2px;
}
.csfloat-addr-card.is-default .csfloat-addr-card-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-addr-card-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-addr-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-addr-card-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-addr-card-line {
margin: 0;
}
.csfloat-addr-card-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
/* CSFloat-1:1: footnote — caption text below tables/charts */
.csfloat-footnote {
font: 400 11px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
padding: 8px 0;
margin: 0;
display: flex;
align-items: flex-start;
gap: 6px;
}
.csfloat-footnote::before {
content: '*';
color: var(--ink-3);
font-weight: 500;
font-size: 12px;
}
.csfloat-footnote.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-footnote.is-warning { color: oklch(0.78 0.16 80); }
.csfloat-footnote.is-warning::before { color: oklch(0.84 0.16 80); }
.csfloat-footnote.is-no-mark::before { display: none; }
/* END listing condense + addr card + footnote */
/* CSFloat-1:1: nested option group — for cascading filter trees */
.csfloat-tree-group {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-tree-group-row {
display: grid;
grid-template-columns: 14px 14px 1fr auto;
gap: 6px;
align-items: center;
padding: 6px 0;
cursor: pointer;
font: 400 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-tree-group-row:hover { color: var(--ink-1); }
.csfloat-tree-group-row.is-l1 { padding-left: 0; }
.csfloat-tree-group-row.is-l2 { padding-left: 16px; }
.csfloat-tree-group-row.is-l3 { padding-left: 32px; }
.csfloat-tree-group-row-toggle {
width: 14px;
height: 14px;
border-radius: 3px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 14px;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tree-group-row-toggle::before {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tree-group-row.is-open .csfloat-tree-group-row-toggle::before {
transform: rotate(45deg);
}
.csfloat-tree-group-row-toggle.is-empty::before { display: none; }
.csfloat-tree-group-row-check {
width: 14px;
height: 14px;
border-radius: 3px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
flex: 0 0 14px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tree-group-row.is-checked .csfloat-tree-group-row-check {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-tree-group-row.is-checked .csfloat-tree-group-row-check::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
}
.csfloat-tree-group-row-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-tree-group-row.is-checked .csfloat-tree-group-row-name { color: var(--ink-1); font-weight: 500; }
.csfloat-tree-group-row-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
flex: 0 0 auto;
}
.csfloat-tree-group-children {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tree-group-row.is-open + .csfloat-tree-group-children { max-height: 480px; }
/* CSFloat-1:1: media gallery scroll-snap row of full-bleed images */
.csfloat-media-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 280px);
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 12px;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
scroll-padding: 4px;
}
.csfloat-media-row::-webkit-scrollbar { height: 4px; }
.csfloat-media-row::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
.csfloat-media-row > .csfloat-media-row-card {
scroll-snap-align: start;
position: relative;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1.6;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-media-row > .csfloat-media-row-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-media-row > .csfloat-media-row-card > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-media-row > .csfloat-media-row-card:hover > img { transform: scale(1.05); }
.csfloat-media-row > .csfloat-media-row-card-overlay {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
font: 500 11px/1 var(--ui);
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.005em;
}
.csfloat-media-row > .csfloat-media-row-card-overlay-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: #fff;
}
/* CSFloat-1:1: filter sticky bar — for top-of-list */
.csfloat-filter-sticky {
position: sticky;
top: 56px;
z-index: 10;
background: var(--bg);
border-bottom: 1px solid var(--line);
padding: 10px 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.csfloat-filter-sticky-spacer { flex: 1 1 auto; }
.csfloat-filter-sticky-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 720px) {
.csfloat-filter-sticky { top: 48px; padding: 8px 0; }
}
/* END tree group + media row + filter sticky */
/* CSFloat-1:1: page banner with countdown — for limited-time offers */
.csfloat-time-banner {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 16px;
align-items: center;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(248, 113, 113, 0.06) 0%, rgba(167, 139, 250, 0.06) 100%);
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.csfloat-time-banner-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-time-banner-eyebrow {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.84 0.18 30);
}
.csfloat-time-banner-eyebrow::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-time-banner-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-time-banner-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-time-banner-clock {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-time-banner-clock-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: rgba(7, 11, 24, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 5px;
padding: 4px 6px;
min-width: 28px;
}
.csfloat-time-banner-clock-cell-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-time-banner-clock-cell-label {
font: 600 8px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-time-banner-cta {
flex: 0 0 auto;
}
@media (max-width: 720px) {
.csfloat-time-banner {
grid-template-columns: 1fr;
gap: 10px;
}
.csfloat-time-banner-cta { width: 100%; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-time-banner-eyebrow::before { animation: none; }
}
/* CSFloat-1:1: floating image card stack — for showcase animations */
.csfloat-shoot-stack {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
}
.csfloat-shoot-stack > .csfloat-shoot-stack-card {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--bg-2), var(--bg));
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
transition: all 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-shoot-stack > .csfloat-shoot-stack-card:nth-child(1) {
transform: rotate(-6deg) translate(-12px, 4px);
z-index: 1;
}
.csfloat-shoot-stack > .csfloat-shoot-stack-card:nth-child(2) {
transform: rotate(2deg) translate(0, 0);
z-index: 2;
}
.csfloat-shoot-stack > .csfloat-shoot-stack-card:nth-child(3) {
transform: rotate(8deg) translate(12px, 4px);
z-index: 3;
}
.csfloat-shoot-stack:hover > .csfloat-shoot-stack-card:nth-child(1) {
transform: rotate(-12deg) translate(-24px, 8px);
}
.csfloat-shoot-stack:hover > .csfloat-shoot-stack-card:nth-child(3) {
transform: rotate(14deg) translate(24px, 8px);
}
.csfloat-shoot-stack > .csfloat-shoot-stack-card > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-shoot-stack.is-lg {
width: 280px;
height: 280px;
}
.csfloat-shoot-stack.is-sm {
width: 140px;
height: 140px;
}
/* CSFloat-1:1: list-row group with avatars (for trade circle) */
.csfloat-circle-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-circle-group-avatars {
display: inline-flex;
align-items: center;
}
.csfloat-circle-group-avatars > .csfloat-circle-group-avatar {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
margin-left: -8px;
object-fit: cover;
}
.csfloat-circle-group-avatars > .csfloat-circle-group-avatar:first-child { margin-left: 0; }
.csfloat-circle-group-avatars > .csfloat-circle-group-avatar.is-pulse {
animation: csfloat-circle-pulse 2000ms ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
}
@keyframes csfloat-circle-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
.csfloat-circle-group-text {
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-circle-group-text > b {
color: var(--ink-1);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-circle-group-avatars > .csfloat-circle-group-avatar.is-pulse { animation: none; }
}
/* END time banner + shoot stack + circle group */
/* CSFloat-1:1: stat ring with label below — circle progress with descriptive content */
.csfloat-stat-ring {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.csfloat-stat-ring-circle {
position: relative;
width: 80px;
height: 80px;
flex: 0 0 80px;
}
.csfloat-stat-ring-circle > svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-stat-ring-circle > svg > circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.csfloat-stat-ring-circle > svg > circle.csfloat-stat-ring-track { stroke: var(--bg-3); }
.csfloat-stat-ring-circle > svg > circle.csfloat-stat-ring-fill {
stroke: var(--cta);
transition: stroke-dashoffset 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-ring.is-success .csfloat-stat-ring-fill { stroke: oklch(0.62 0.16 152); }
.csfloat-stat-ring.is-warning .csfloat-stat-ring-fill { stroke: oklch(0.78 0.16 80); }
.csfloat-stat-ring.is-danger .csfloat-stat-ring-fill { stroke: oklch(0.66 0.18 30); }
.csfloat-stat-ring-circle-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-stat-ring-info {
display: flex;
flex-direction: column;
gap: 2px;
text-align: center;
}
.csfloat-stat-ring-label {
font: 600 11px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-ring-meta {
font: 400 10px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-stat-ring.is-sm .csfloat-stat-ring-circle { width: 56px; height: 56px; flex: 0 0 56px; }
.csfloat-stat-ring.is-sm .csfloat-stat-ring-circle > svg > circle { stroke-width: 6; }
.csfloat-stat-ring.is-sm .csfloat-stat-ring-circle-center { font-size: 11px; }
.csfloat-stat-ring.is-lg .csfloat-stat-ring-circle { width: 120px; height: 120px; flex: 0 0 120px; }
.csfloat-stat-ring.is-lg .csfloat-stat-ring-circle > svg > circle { stroke-width: 10; }
.csfloat-stat-ring.is-lg .csfloat-stat-ring-circle-center { font-size: 22px; }
/* CSFloat-1:1: split totals card (revenue + payout side-by-side) */
.csfloat-totals-split {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-totals-split > .csfloat-totals-split-side {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-totals-split > .csfloat-totals-split-side:first-child {
border-right: 1px solid var(--line);
}
.csfloat-totals-split-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-totals-split-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 4px;
}
.csfloat-totals-split-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-totals-split-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-totals-split-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-totals-split-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-totals-split-delta {
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-totals-split-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-totals-split-delta.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 540px) {
.csfloat-totals-split { grid-template-columns: 1fr; }
.csfloat-totals-split > .csfloat-totals-split-side:first-child {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
/* CSFloat-1:1: empty inventory placeholder — for new users */
.csfloat-inv-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 60px 24px;
text-align: center;
background: var(--bg-1);
border: 1px dashed var(--line-2);
border-radius: 12px;
}
.csfloat-inv-empty-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 22px;
}
.csfloat-inv-empty-title {
font: 600 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-inv-empty-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 360px;
}
.csfloat-inv-empty-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
.csfloat-inv-empty-help {
font: 400 11px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
max-width: 320px;
margin: 4px 0 0;
}
.csfloat-inv-empty-help > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-inv-empty-help > a:hover { border-color: var(--cta); }
/* END stat ring + totals split + inventory empty */
/* CSFloat-1:1: section spotlight backdrop — for marketing pages */
.csfloat-spotlight {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 18px;
padding: 80px 24px;
background: var(--bg);
overflow: hidden;
}
.csfloat-spotlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 50% 30%, rgba(59, 130, 246, 0.08), transparent 60%),
radial-gradient(600px 300px at 30% 80%, rgba(167, 139, 250, 0.04), transparent 60%);
pointer-events: none;
}
.csfloat-spotlight::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 90%);
pointer-events: none;
}
.csfloat-spotlight > * { position: relative; z-index: 1; }
.csfloat-spotlight-eyebrow {
font: 700 11px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-spotlight-eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
}
.csfloat-spotlight-eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: currentColor;
}
.csfloat-spotlight-title {
font: 700 clamp(36px, 6vw, 64px) / 1.05 var(--ui);
letter-spacing: -0.04em;
color: var(--ink-1);
margin: 0;
max-width: 920px;
text-wrap: balance;
}
.csfloat-spotlight-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, oklch(0.92 0.08 240) 0%, var(--cta) 50%, oklch(0.84 0.18 290) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 32px rgba(59, 130, 246, 0.3));
letter-spacing: -0.025em;
}
.csfloat-spotlight-msg {
font: 400 16px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 580px;
text-wrap: balance;
}
.csfloat-spotlight-actions {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
justify-content: center;
}
.csfloat-spotlight-meta {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 12px;
flex-wrap: wrap;
justify-content: center;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-spotlight-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-spotlight-meta-item::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
@media (max-width: 540px) {
.csfloat-spotlight { padding: 56px 18px; }
}
/* CSFloat-1:1: stack-grid scroll fade — for landing showcase areas */
.csfloat-fade-grid {
position: relative;
overflow: hidden;
}
.csfloat-fade-grid::before,
.csfloat-fade-grid::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 80px;
pointer-events: none;
z-index: 1;
}
.csfloat-fade-grid::before {
top: 0;
background: linear-gradient(180deg, var(--bg), transparent);
}
.csfloat-fade-grid::after {
bottom: 0;
background: linear-gradient(0deg, var(--bg), transparent);
}
.csfloat-fade-grid-inner {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
padding: 20px 12px;
max-height: 480px;
overflow: hidden;
}
.csfloat-fade-grid-inner > .csfloat-fade-grid-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-fade-grid-inner > .csfloat-fade-grid-tile > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* CSFloat-1:1: page nav for staff (top stripe with back button) */
.csfloat-staff-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 14px;
}
.csfloat-staff-nav-back {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px 0 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
cursor: pointer;
font: 500 12px/1 var(--ui);
letter-spacing: -0.005em;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-staff-nav-back:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-staff-nav-back::before {
content: '';
width: 6px;
height: 6px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-staff-nav-title {
font: 600 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-staff-nav-title-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-staff-nav-spacer { flex: 1 1 auto; }
.csfloat-staff-nav-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* END spotlight + fade grid + staff nav */
/* CSFloat-1:1: badge cluster (a few badges shown together) */
.csfloat-badge-cluster {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile {
width: 22px;
height: 22px;
border-radius: 5px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
cursor: help;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile:hover {
transform: translateY(-1px);
border-color: var(--line-2);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile.is-success {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile.is-rare {
background: rgba(244, 114, 182, 0.12);
border-color: rgba(244, 114, 182, 0.3);
color: oklch(0.78 0.18 320);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile.is-legend {
background: rgba(251, 146, 60, 0.12);
border-color: rgba(251, 146, 60, 0.3);
color: oklch(0.84 0.18 60);
}
.csfloat-badge-cluster > .csfloat-badge-cluster-tile.is-locked { opacity: 0.4; filter: grayscale(1); }
.csfloat-badge-cluster > .csfloat-badge-cluster-tile > svg,
.csfloat-badge-cluster > .csfloat-badge-cluster-tile > img {
width: 12px;
height: 12px;
object-fit: contain;
}
.csfloat-badge-cluster > .csfloat-badge-cluster-more {
height: 22px;
min-width: 22px;
padding: 0 5px;
border-radius: 5px;
background: var(--bg-3);
border: 1px solid var(--line);
color: var(--ink-3);
font: 600 9px/1 var(--mono);
font-feature-settings: "tnum";
display: inline-flex;
align-items: center;
justify-content: center;
}
/* CSFloat-1:1: tag pile — for many small bordered tags */
.csfloat-tag-pile {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.csfloat-tag-pile > .csfloat-tag-pile-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 10px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-tag-pile > .csfloat-tag-pile-tag.is-cta { color: var(--cta); border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.06); }
.csfloat-tag-pile > .csfloat-tag-pile-tag.is-success { color: oklch(0.78 0.16 152); border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.06); }
.csfloat-tag-pile > .csfloat-tag-pile-tag.is-warning { color: oklch(0.84 0.16 80); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.06); }
.csfloat-tag-pile > .csfloat-tag-pile-tag.is-danger { color: oklch(0.72 0.18 30); border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.06); }
.csfloat-tag-pile > .csfloat-tag-pile-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-tag-pile > .csfloat-tag-pile-tag-dot {
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
/* CSFloat-1:1: floating action button center (action with label below) */
.csfloat-fab-center {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
text-decoration: none;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
}
.csfloat-fab-center-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
font-size: 18px;
}
.csfloat-fab-center:hover .csfloat-fab-center-icon {
background: var(--bg-3);
border-color: var(--cta);
color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.csfloat-fab-center.is-active .csfloat-fab-center-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-fab-center-label {
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-align: center;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fab-center:hover .csfloat-fab-center-label { color: var(--ink-1); }
.csfloat-fab-center-row {
display: inline-flex;
gap: 16px;
align-items: flex-start;
}
@media (max-width: 540px) {
.csfloat-fab-center-row { gap: 8px; }
.csfloat-fab-center-icon { width: 40px; height: 40px; font-size: 15px; }
}
/* END badge cluster + tag pile + fab center */
/* CSFloat-1:1: minimal pricing pill — for inline display next to product name */
.csfloat-min-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-min-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-min-price-was {
font: 500 12px/1 var(--mono);
color: var(--ink-4);
text-decoration: line-through;
font-feature-settings: "tnum";
}
.csfloat-min-price-discount {
font: 700 10px/1 var(--ui);
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.12);
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.04em;
font-feature-settings: "tnum";
}
.csfloat-min-price.is-cta { color: var(--cta); }
.csfloat-min-price.is-success { color: oklch(0.78 0.16 152); }
.csfloat-min-price.is-large { font-size: 18px; }
.csfloat-min-price.is-small { font-size: 12px; }
/* CSFloat-1:1: brand mark logo block — for top of footer / about */
.csfloat-brand-mark-block {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* CSFloat-1:1: scroll-snap card-stack hero gallery */
.csfloat-snap-stack {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 24px;
padding: 24px 24px 28px;
scrollbar-width: none;
}
.csfloat-snap-stack::-webkit-scrollbar { display: none; }
.csfloat-snap-stack > .csfloat-snap-stack-card {
scroll-snap-align: start;
flex: 0 0 320px;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-snap-stack > .csfloat-snap-stack-card:hover {
border-color: var(--line-2);
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.csfloat-snap-stack-card-img {
width: 100%;
aspect-ratio: 1.6;
background: var(--bg);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.csfloat-snap-stack-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.csfloat-snap-stack-card-name {
font: 600 15px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-snap-stack-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
.csfloat-snap-stack-card-price {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-snap-stack-card-price::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-snap-stack-card-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 3px 6px;
border-radius: 3px;
}
@media (max-width: 540px) {
.csfloat-snap-stack { padding: 16px 16px 20px; }
.csfloat-snap-stack > .csfloat-snap-stack-card { flex-basis: 280px; padding: 16px; }
}
/* END min price + brand mark + snap stack hero */
/* CSFloat-1:1: pricing fan — three pricing cards arranged in fan layout */
.csfloat-price-fan {
display: flex;
align-items: stretch;
justify-content: center;
gap: 14px;
padding: 24px 0;
flex-wrap: wrap;
}
.csfloat-price-fan-card {
flex: 0 1 260px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-price-fan-card:hover {
border-color: var(--line-2);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-price-fan-card.is-featured {
border-color: var(--cta);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), var(--bg-1) 60%);
transform: translateY(-8px);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 16px 32px rgba(0, 0, 0, 0.5);
}
.csfloat-price-fan-card.is-featured:hover {
transform: translateY(-12px);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28), 0 24px 40px rgba(0, 0, 0, 0.55);
}
.csfloat-price-fan-card-tag {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--cta);
color: #fff;
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}
.csfloat-price-fan-card-name {
font: 700 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-price-fan-card-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-price-fan-card-price-val {
font: 700 36px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.03em;
}
.csfloat-price-fan-card-price-val::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-price-fan-card-price-period {
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-price-fan-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-price-fan-card-features {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-price-fan-card-feature {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-price-fan-card-feature::before {
content: '';
width: 14px;
height: 8px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
margin-top: 4px;
}
.csfloat-price-fan-card-feature.is-disabled { color: var(--ink-4); }
.csfloat-price-fan-card-feature.is-disabled::before {
border-color: var(--ink-4);
opacity: 0.4;
}
.csfloat-price-fan-card-cta {
margin-top: auto;
padding-top: 12px;
}
/* CSFloat-1:1: comparison feature row table — for pricing tier comparison */
.csfloat-feature-cmp {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-feature-cmp-head {
display: contents;
}
.csfloat-feature-cmp-head > .csfloat-feature-cmp-cell {
background: var(--bg-2);
padding: 14px 16px;
font: 700 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
text-align: center;
border-bottom: 1px solid var(--line);
}
.csfloat-feature-cmp-head > .csfloat-feature-cmp-cell:first-child {
text-align: left;
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.csfloat-feature-cmp-head > .csfloat-feature-cmp-cell.is-featured {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
border-bottom-color: var(--cta);
}
.csfloat-feature-cmp-row {
display: contents;
}
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell {
padding: 10px 16px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-align: center;
border-bottom: 1px solid var(--line);
}
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell:first-child {
text-align: left;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-feature-cmp-row:last-child > .csfloat-feature-cmp-cell { border-bottom: 0; }
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell.is-yes::before {
content: '';
display: inline-block;
width: 12px;
height: 7px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell.is-no::before {
content: '−';
color: var(--ink-4);
font-weight: 400;
font-size: 14px;
}
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
}
.csfloat-feature-cmp-row > .csfloat-feature-cmp-cell.is-featured {
background: rgba(59, 130, 246, 0.04);
color: var(--ink-1);
font-weight: 500;
}
@media (max-width: 720px) {
.csfloat-feature-cmp { grid-template-columns: 1fr; }
.csfloat-feature-cmp-head > .csfloat-feature-cmp-cell:not(:first-child) { display: none; }
}
/* END price fan + feature comparison */
/* CSFloat-1:1: terminal-style code window — for API examples */
.csfloat-term {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
font-family: var(--mono);
display: flex;
flex-direction: column;
}
.csfloat-term-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
.csfloat-term-head-dots {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-term-head-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--ink-4);
}
.csfloat-term-head-dot.is-red { background: oklch(0.66 0.18 30); }
.csfloat-term-head-dot.is-yellow { background: oklch(0.78 0.16 80); }
.csfloat-term-head-dot.is-green { background: oklch(0.62 0.16 152); }
.csfloat-term-head-title {
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-left: 8px;
}
.csfloat-term-head-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-term-body {
padding: 14px 16px;
font: 400 12px/1.6 var(--mono);
color: var(--ink-2);
white-space: pre;
overflow-x: auto;
letter-spacing: 0;
min-height: 120px;
}
.csfloat-term-body .csfloat-term-prompt { color: oklch(0.78 0.16 152); margin-right: 8px; }
.csfloat-term-body .csfloat-term-cmd { color: var(--ink-1); }
.csfloat-term-body .csfloat-term-out { color: var(--ink-3); }
.csfloat-term-body .csfloat-term-err { color: oklch(0.72 0.18 30); }
.csfloat-term-body .csfloat-term-warn { color: oklch(0.84 0.16 80); }
.csfloat-term-body .csfloat-term-comment { color: var(--ink-4); font-style: italic; }
.csfloat-term-body .csfloat-term-key { color: oklch(0.84 0.18 290); }
.csfloat-term-body .csfloat-term-val { color: oklch(0.78 0.16 152); }
.csfloat-term-body .csfloat-term-num { color: oklch(0.84 0.18 60); }
.csfloat-term-body .csfloat-term-cursor {
display: inline-block;
width: 0.5em;
height: 1em;
background: var(--cta);
vertical-align: text-bottom;
animation: csfloat-caret-blink 1100ms steps(2, start) infinite;
margin-left: 1px;
}
/* CSFloat-1:1: download icon button */
.csfloat-dl-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 600 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-dl-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-dl-btn-icon {
width: 14px;
height: 14px;
position: relative;
flex: 0 0 14px;
}
.csfloat-dl-btn-icon::before {
content: '';
position: absolute;
inset: 0;
border-bottom: 1.5px solid currentColor;
border-radius: 0 0 2px 2px;
bottom: 1px;
}
.csfloat-dl-btn-icon::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1.5px;
height: 8px;
background: currentColor;
transform: translateX(-50%);
border-radius: 1px;
box-shadow: -3px 4px 0 -1px currentColor, 3px 4px 0 -1px currentColor;
}
/* CSFloat-1:1: scroll-snap horizontal navigation pills */
.csfloat-snap-nav {
display: flex;
gap: 6px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 4px 12px;
margin: 0 -12px;
scrollbar-width: none;
}
.csfloat-snap-nav::-webkit-scrollbar { display: none; }
.csfloat-snap-nav > .csfloat-snap-nav-link {
scroll-snap-align: start;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-snap-nav > .csfloat-snap-nav-link:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-snap-nav > .csfloat-snap-nav-link.is-active {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-snap-nav > .csfloat-snap-nav-link-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
}
.csfloat-snap-nav > .csfloat-snap-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-snap-nav > .csfloat-snap-nav-link.is-active .csfloat-snap-nav-link-count {
color: rgba(7, 11, 24, 0.55);
}
/* END terminal + download btn + snap nav */
/* CSFloat-1:1: photo-stack hero (overlapping product photos) */
.csfloat-photo-stack {
position: relative;
display: inline-block;
padding: 24px;
}
.csfloat-photo-stack > .csfloat-photo-stack-img {
position: absolute;
background: linear-gradient(180deg, var(--bg-2), var(--bg));
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
transition: all 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-photo-stack > .csfloat-photo-stack-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-photo-stack > .csfloat-photo-stack-img.is-back {
width: 180px;
height: 180px;
top: 0;
left: 0;
transform: rotate(-8deg);
z-index: 1;
}
.csfloat-photo-stack > .csfloat-photo-stack-img.is-mid {
width: 200px;
height: 200px;
top: 18px;
left: 60px;
transform: rotate(2deg);
z-index: 2;
}
.csfloat-photo-stack > .csfloat-photo-stack-img.is-front {
width: 220px;
height: 220px;
top: 36px;
left: 130px;
transform: rotate(8deg);
z-index: 3;
}
.csfloat-photo-stack:hover > .csfloat-photo-stack-img.is-back {
transform: rotate(-14deg) translate(-12px, -4px);
}
.csfloat-photo-stack:hover > .csfloat-photo-stack-img.is-front {
transform: rotate(14deg) translate(12px, -4px);
}
.csfloat-photo-stack-frame {
width: 360px;
height: 280px;
}
/* CSFloat-1:1: ribbon notice on top of cards (limited supply etc) */
.csfloat-card-ribbon {
position: absolute;
top: 12px;
left: -6px;
z-index: 1;
background: var(--cta);
color: #fff;
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 0 4px 4px 0;
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.35);
}
.csfloat-card-ribbon::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 4px 0;
border-color: transparent rgba(0, 0, 0, 0.45) transparent transparent;
}
.csfloat-card-ribbon.is-success { background: oklch(0.62 0.16 152); box-shadow: 0 4px 8px rgba(52, 211, 153, 0.35); }
.csfloat-card-ribbon.is-warning { background: oklch(0.78 0.16 80); color: var(--bg); box-shadow: 0 4px 8px rgba(251, 191, 36, 0.35); }
.csfloat-card-ribbon.is-danger { background: oklch(0.66 0.18 30); box-shadow: 0 4px 8px rgba(248, 113, 113, 0.35); }
.csfloat-card-ribbon.is-rare {
background: linear-gradient(135deg, oklch(0.62 0.27 330), oklch(0.62 0.18 290));
box-shadow: 0 4px 8px rgba(244, 114, 182, 0.35);
}
/* CSFloat-1:1: minimal stat badge — for in-line important stats */
.csfloat-stat-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-stat-badge-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
color: var(--ink-1);
letter-spacing: 0;
}
.csfloat-stat-badge.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-stat-badge.is-cta .csfloat-stat-badge-mono { color: var(--cta); }
.csfloat-stat-badge.is-up {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-stat-badge.is-up .csfloat-stat-badge-mono { color: oklch(0.78 0.16 152); }
.csfloat-stat-badge.is-down {
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-stat-badge.is-down .csfloat-stat-badge-mono { color: oklch(0.72 0.18 30); }
.csfloat-stat-badge.is-up::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid currentColor;
}
.csfloat-stat-badge.is-down::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid currentColor;
}
/* END photo stack + card ribbon + stat badge */
/* CSFloat-1:1: vertical step rail — for left-rail onboarding flow */
.csfloat-step-rail {
display: flex;
flex-direction: column;
gap: 0;
padding: 8px 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
width: 240px;
flex: 0 0 240px;
}
.csfloat-step-rail-row {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
align-items: flex-start;
padding: 12px 10px;
cursor: pointer;
transition: background 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
border-radius: 6px;
}
.csfloat-step-rail-row:hover { background: var(--bg-2); }
.csfloat-step-rail-row.is-active { background: rgba(59, 130, 246, 0.05); }
.csfloat-step-rail-row:not(:last-child)::after {
content: '';
position: absolute;
left: 23px;
top: 38px;
bottom: -8px;
width: 1px;
background: var(--line);
}
.csfloat-step-rail-row.is-done::after {
background: oklch(0.62 0.16 152);
}
.csfloat-step-rail-marker {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1.5px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
font: 600 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
flex: 0 0 28px;
z-index: 1;
position: relative;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-step-rail-row.is-active .csfloat-step-rail-marker {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-step-rail-row.is-done .csfloat-step-rail-marker {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-step-rail-row.is-done .csfloat-step-rail-marker > span { display: none; }
.csfloat-step-rail-row.is-done .csfloat-step-rail-marker::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-step-rail-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding-top: 4px;
}
.csfloat-step-rail-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-step-rail-row:not(.is-active):not(.is-done) .csfloat-step-rail-name { color: var(--ink-3); }
.csfloat-step-rail-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
@media (max-width: 1100px) {
.csfloat-step-rail { width: 100%; flex: none; }
}
/* CSFloat-1:1: image grid for collection / gallery */
.csfloat-img-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.csfloat-img-grid > .csfloat-img-grid-tile {
position: relative;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 8px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
cursor: pointer;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-grid > .csfloat-img-grid-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.csfloat-img-grid > .csfloat-img-grid-tile > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-img-grid > .csfloat-img-grid-tile:hover > img { transform: scale(1.05); }
.csfloat-img-grid > .csfloat-img-grid-tile-tag {
position: absolute;
bottom: 6px;
left: 6px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
padding: 3px 5px;
border-radius: 3px;
}
.csfloat-img-grid > .csfloat-img-grid-tile-rare {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--ink-3);
}
.csfloat-img-grid > .csfloat-img-grid-tile-rare.is-class { background: oklch(0.62 0.27 330); }
.csfloat-img-grid > .csfloat-img-grid-tile-rare.is-cov { background: oklch(0.66 0.18 30); }
.csfloat-img-grid > .csfloat-img-grid-tile-rare.is-rare { background: oklch(0.84 0.18 60); }
.csfloat-img-grid.is-dense { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.csfloat-img-grid.is-loose { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 540px) {
.csfloat-img-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* END step rail + img grid */
/* CSFloat-1:1: hero with offset preview — landing layout with right-side card */
.csfloat-hero-offset {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: center;
padding: 56px 0;
position: relative;
}
.csfloat-hero-offset-info {
display: flex;
flex-direction: column;
gap: 18px;
}
.csfloat-hero-offset-eyebrow {
font: 700 11px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
}
.csfloat-hero-offset-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: currentColor;
}
.csfloat-hero-offset-title {
font: 700 clamp(36px, 5vw, 56px) / 1.05 var(--ui);
letter-spacing: -0.04em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-hero-offset-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, oklch(0.92 0.08 240) 0%, var(--cta) 50%, oklch(0.84 0.18 290) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.25));
letter-spacing: -0.025em;
}
.csfloat-hero-offset-msg {
font: 400 16px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
text-wrap: balance;
}
.csfloat-hero-offset-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-hero-offset-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.csfloat-hero-offset-meta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid var(--line);
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-hero-offset-meta-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-hero-offset-meta-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hero-offset-meta-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.csfloat-hero-offset-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
}
.csfloat-hero-offset-art-card {
position: relative;
background: linear-gradient(135deg, var(--bg-2), var(--bg) 60%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
width: 100%;
max-width: 380px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.csfloat-hero-offset-art-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 100% 0%, rgba(59, 130, 246, 0.12), transparent 60%);
pointer-events: none;
}
.csfloat-hero-offset-art-img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 1.5;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.csfloat-hero-offset-art-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(59, 130, 246, 0.2));
}
.csfloat-hero-offset-art-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-hero-offset-art-name {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-hero-offset-art-meta {
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-hero-offset-art-foot {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.csfloat-hero-offset-art-price {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-hero-offset-art-price::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hero-offset-art-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 3px 8px;
border-radius: 999px;
}
@media (max-width: 1100px) {
.csfloat-hero-offset {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px 0;
}
}
/* END hero offset layout */
/* CSFloat-1:1: collection navigation — for browsing item sets */
.csfloat-coll-nav {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.csfloat-coll-nav-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-coll-nav-item:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-coll-nav-item.is-active {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-coll-nav-item-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 22px;
padding: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-coll-nav-item.is-active .csfloat-coll-nav-item-icon {
background: rgba(7, 11, 24, 0.2);
}
.csfloat-coll-nav-item-icon > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-coll-nav-item-count {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-coll-nav-item.is-active .csfloat-coll-nav-item-count {
color: rgba(7, 11, 24, 0.55);
}
/* CSFloat-1:1: trade history minimap (compact stacked rows) */
.csfloat-trade-mini {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-trade-mini-row {
display: grid;
grid-template-columns: 18px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-trade-mini-row:last-child { border-bottom: 0; }
.csfloat-trade-mini-row:hover { background: var(--bg-2); }
.csfloat-trade-mini-row-side {
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--bg-2);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-trade-mini-row-side.is-buy {
background: rgba(52, 211, 153, 0.16);
color: oklch(0.78 0.16 152);
}
.csfloat-trade-mini-row-side.is-sell {
background: rgba(248, 113, 113, 0.16);
color: oklch(0.72 0.18 30);
}
.csfloat-trade-mini-row-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.csfloat-trade-mini-row-amt {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-trade-mini-row-amt.is-up { color: oklch(0.78 0.16 152); }
.csfloat-trade-mini-row-amt.is-up::before { content: '+'; margin-right: 1px; }
.csfloat-trade-mini-row-amt.is-down { color: oklch(0.72 0.18 30); }
.csfloat-trade-mini-row-amt.is-down::before { content: '−'; margin-right: 1px; }
.csfloat-trade-mini-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
/* CSFloat-1:1: filter clear-all banner — one-click reset */
.csfloat-filter-reset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: rgba(248, 113, 113, 0.04);
border: 1px solid rgba(248, 113, 113, 0.2);
border-radius: 8px;
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-filter-reset-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-filter-reset-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-filter-reset-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-filter-reset-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: oklch(0.78 0.18 30);
font-weight: 600;
letter-spacing: 0.02em;
}
.csfloat-filter-reset-action {
flex: 0 0 auto;
}
/* END coll-nav + trade-mini + filter-reset */
/* CSFloat-1:1: spotlight stat tile — for hero KPIs */
.csfloat-spot-stat {
position: relative;
background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
min-height: 160px;
}
.csfloat-spot-stat::before {
content: '';
position: absolute;
bottom: -30%;
right: -15%;
width: 60%;
height: 80%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 60%);
pointer-events: none;
}
.csfloat-spot-stat-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
position: relative;
z-index: 1;
}
.csfloat-spot-stat-val {
font: 700 36px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.03em;
margin-top: 8px;
position: relative;
z-index: 1;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-spot-stat-val.is-currency::before {
content: '$';
font-size: 18px;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
vertical-align: top;
}
.csfloat-spot-stat-val-suffix {
font-size: 0.5em;
color: var(--ink-3);
font-weight: 500;
margin-left: 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-spot-stat-meta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
position: relative;
z-index: 1;
}
.csfloat-spot-stat-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
padding: 2px 6px;
border-radius: 999px;
}
.csfloat-spot-stat-delta.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
}
.csfloat-spot-stat-delta.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.08);
}
.csfloat-spot-stat-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
position: relative;
z-index: 1;
}
.csfloat-spot-stat-foot-link {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-spot-stat-foot-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* CSFloat-1:1: hero showcase product card with featured badge */
.csfloat-hero-product {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
gap: 14px;
overflow: hidden;
cursor: pointer;
transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-product:hover {
border-color: var(--cta);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.csfloat-hero-product::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
pointer-events: none;
}
.csfloat-hero-product-tag {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(59, 130, 246, 0.18);
border: 1px solid var(--cta);
border-radius: 999px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-hero-product-tag::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-hero-product-img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 1.4;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.csfloat-hero-product-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 32px rgba(59, 130, 246, 0.15));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hero-product:hover .csfloat-hero-product-img > img { transform: scale(1.05); }
.csfloat-hero-product-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-hero-product-name {
font: 700 18px/1.25 var(--ui);
color: var(--ink-1);
letter-spacing: -0.02em;
margin: 0;
}
.csfloat-hero-product-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 12px/1.4 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-hero-product-foot {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px dashed var(--line);
}
.csfloat-hero-product-price {
font: 700 24px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-hero-product-price::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hero-product-action { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.csfloat-hero-product-tag::before { animation: none; }
}
/* END spot stat + hero product */
/* CSFloat-1:1: market browse rail — for left-side persistent filter & nav */
.csfloat-browse-rail {
display: flex;
flex-direction: column;
gap: 16px;
width: 240px;
flex: 0 0 240px;
}
.csfloat-browse-rail-section {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-browse-rail-link {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
padding: 6px 8px;
border-radius: 5px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-browse-rail-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-browse-rail-link.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-browse-rail-link.is-active .csfloat-browse-rail-link-count { color: var(--cta); }
@media (max-width: 1100px) {
.csfloat-browse-rail { width: 100%; flex: none; }
}
/* CSFloat-1:1: market browse layout — rail + main */
.csfloat-browse-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 1100px) {
.csfloat-browse-layout {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* CSFloat-1:1: section divider chip — for breaking up content with optional label */
.csfloat-divide-chip {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0;
}
.csfloat-divide-chip::before,
.csfloat-divide-chip::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-divide-chip-label {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-divide-chip-label-icon {
width: 10px;
height: 10px;
color: currentColor;
opacity: 0.7;
}
.csfloat-divide-chip.is-cta .csfloat-divide-chip-label {
color: var(--cta);
border-color: rgba(59, 130, 246, 0.3);
background: rgba(59, 130, 246, 0.08);
}
.csfloat-divide-chip.is-thick::before,
.csfloat-divide-chip.is-thick::after { height: 2px; }
.csfloat-divide-chip.is-tight { margin: 12px 0; }
.csfloat-divide-chip.is-loose { margin: 36px 0; }
/* END browse rail + browse layout + divide chip */
/* CSFloat-1:1: deal blob — for offering screen */
.csfloat-deal-blob {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
padding: 18px 22px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 14px;
}
.csfloat-deal-blob.is-active {
border-color: var(--cta);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
}
.csfloat-deal-blob-side {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.csfloat-deal-blob-side.is-them { align-items: flex-end; text-align: right; }
.csfloat-deal-blob-side-handle {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-deal-blob-side.is-them .csfloat-deal-blob-side-handle { flex-direction: row-reverse; }
.csfloat-deal-blob-side-handle-avatar {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 22px;
object-fit: cover;
}
.csfloat-deal-blob-side-items {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-deal-blob-side.is-them .csfloat-deal-blob-side-items { flex-direction: row-reverse; }
.csfloat-deal-blob-side-item {
width: 36px;
height: 36px;
border-radius: 5px;
background: var(--bg);
border: 1px solid var(--line);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-deal-blob-side-item > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-deal-blob-side-more {
width: 36px;
height: 36px;
border-radius: 5px;
background: var(--bg);
border: 1px dashed var(--line-2);
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-deal-blob-side-amt {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-deal-blob-side-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-deal-blob-arrow {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
position: relative;
}
.csfloat-deal-blob-arrow::before,
.csfloat-deal-blob-arrow::after {
content: '';
position: absolute;
}
.csfloat-deal-blob-arrow::before {
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
right: 8px;
top: calc(50% - 4px);
}
.csfloat-deal-blob-arrow::after {
width: 8px;
height: 8px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
left: 8px;
top: calc(50% - 4px);
}
.csfloat-deal-blob.is-active .csfloat-deal-blob-arrow {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
@media (max-width: 720px) {
.csfloat-deal-blob {
grid-template-columns: 1fr;
gap: 10px;
}
.csfloat-deal-blob-side.is-them {
align-items: flex-start;
text-align: left;
}
.csfloat-deal-blob-side.is-them .csfloat-deal-blob-side-handle,
.csfloat-deal-blob-side.is-them .csfloat-deal-blob-side-items {
flex-direction: row;
}
.csfloat-deal-blob-arrow { transform: rotate(90deg); width: 28px; height: 28px; flex: 0 0 28px; }
}
/* CSFloat-1:1: hero meta strip — sits above hero CTA */
.csfloat-hero-meta-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 12px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-hero-meta-strip-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-hero-meta-strip-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
}
.csfloat-hero-meta-strip-item-icon {
width: 14px;
height: 14px;
color: var(--cta);
}
.csfloat-hero-meta-strip-divider {
width: 1px;
height: 14px;
background: var(--line);
}
@media (max-width: 540px) {
.csfloat-hero-meta-strip {
border-radius: 12px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.csfloat-hero-meta-strip-divider { display: none; }
}
/* END deal blob + hero meta strip */
/* CSFloat-1:1: tabbed market segment switcher — for primary/secondary market */
.csfloat-mkt-seg {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 3px;
gap: 1px;
}
.csfloat-mkt-seg > .csfloat-mkt-seg-opt {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: 8px 14px;
background: transparent;
border: 0;
border-radius: 7px;
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-seg > .csfloat-mkt-seg-opt:hover { color: var(--ink-1); }
.csfloat-mkt-seg > .csfloat-mkt-seg-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-mkt-seg-opt-name {
font: 700 12px/1 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-mkt-seg-opt-meta {
font: 500 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-top: 4px;
}
.csfloat-mkt-seg > .csfloat-mkt-seg-opt.is-active .csfloat-mkt-seg-opt-meta {
color: var(--cta);
font-weight: 600;
}
/* CSFloat-1:1: list of items with checkbox toggle (multi-select) */
.csfloat-multi-list {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-multi-list-row {
display: grid;
grid-template-columns: 18px 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-multi-list-row:last-child { border-bottom: 0; }
.csfloat-multi-list-row:hover { background: var(--bg-2); }
.csfloat-multi-list-row.is-selected { background: rgba(59, 130, 246, 0.06); }
.csfloat-multi-list-row-check {
width: 16px;
height: 16px;
border-radius: 3px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
flex: 0 0 16px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-multi-list-row.is-selected .csfloat-multi-list-row-check {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-multi-list-row.is-selected .csfloat-multi-list-row-check::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
}
.csfloat-multi-list-row-img {
width: 32px;
height: 32px;
border-radius: 4px;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 3px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-multi-list-row-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-multi-list-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-multi-list-row-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-multi-list-row-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-multi-list-row-amt {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-multi-list-row-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-multi-list-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-2);
border-top: 1px solid var(--line);
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-multi-list-foot-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-multi-list-foot-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: trade-style "vs" header bar */
.csfloat-vs-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-vs-bar-side {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-vs-bar-side.is-them { align-items: flex-end; text-align: right; }
.csfloat-vs-bar-side-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-vs-bar-side-handle {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-vs-bar-side.is-them .csfloat-vs-bar-side-handle { flex-direction: row-reverse; }
.csfloat-vs-bar-side-handle-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
flex: 0 0 18px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-vs-bar-divide {
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
padding: 4px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-3);
}
.csfloat-vs-bar-side-avatar-list {
display: inline-flex;
align-items: center;
margin-top: 4px;
}
.csfloat-vs-bar-side.is-them .csfloat-vs-bar-side-avatar-list { flex-direction: row-reverse; }
.csfloat-vs-bar-side-avatar-list > .csfloat-vs-bar-side-avatar-item {
width: 16px;
height: 16px;
border-radius: 3px;
background: var(--bg-3);
border: 1px solid var(--line);
margin-left: -4px;
padding: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-vs-bar-side-avatar-list > .csfloat-vs-bar-side-avatar-item:first-child { margin-left: 0; }
.csfloat-vs-bar-side.is-them .csfloat-vs-bar-side-avatar-list > .csfloat-vs-bar-side-avatar-item { margin-left: 0; margin-right: -4px; }
.csfloat-vs-bar-side.is-them .csfloat-vs-bar-side-avatar-list > .csfloat-vs-bar-side-avatar-item:first-child { margin-right: 0; }
.csfloat-vs-bar-side-avatar-list > .csfloat-vs-bar-side-avatar-item > img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* END mkt seg + multi list + vs bar */
/* CSFloat-1:1: stat sparkline grid — for analytics dashboard */
.csfloat-spark-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.csfloat-spark-grid-tile {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-spark-grid-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-spark-grid-tile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-spark-grid-tile-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-spark-grid-tile-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-spark-grid-tile-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-spark-grid-tile-val.is-currency::before {
content: '$';
font-size: 13px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-spark-grid-tile-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-spark-grid-tile-delta {
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-spark-grid-tile-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-spark-grid-tile-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-spark-grid-tile-spark {
width: 100%;
height: 32px;
margin-top: 4px;
}
.csfloat-spark-grid-tile-spark > svg { width: 100%; height: 100%; display: block; }
/* CSFloat-1:1: dashboard layout (rows of widgets) */
.csfloat-dash {
display: flex;
flex-direction: column;
gap: 16px;
}
.csfloat-dash-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
align-items: start;
}
.csfloat-dash-row.is-2col { grid-template-columns: 1fr 1fr; }
.csfloat-dash-row.is-3col { grid-template-columns: 1fr 1fr 1fr; }
.csfloat-dash-row.is-4col { grid-template-columns: repeat(4, 1fr); }
.csfloat-dash-row.is-asymmetric { grid-template-columns: 2fr 1fr; }
.csfloat-dash-row.is-asymmetric-rev { grid-template-columns: 1fr 2fr; }
@media (max-width: 1100px) {
.csfloat-dash-row.is-2col,
.csfloat-dash-row.is-3col,
.csfloat-dash-row.is-4col,
.csfloat-dash-row.is-asymmetric,
.csfloat-dash-row.is-asymmetric-rev { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.csfloat-dash-row,
.csfloat-dash-row.is-2col,
.csfloat-dash-row.is-3col,
.csfloat-dash-row.is-4col,
.csfloat-dash-row.is-asymmetric,
.csfloat-dash-row.is-asymmetric-rev { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: condensed dashboard widget */
.csfloat-dash-widget {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.csfloat-dash-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
}
.csfloat-dash-widget-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-dash-widget-head-icon {
width: 12px;
height: 12px;
color: var(--ink-3);
opacity: 0.85;
}
.csfloat-dash-widget-head-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-dash-widget-body {
flex: 1 1 auto;
padding: 14px 16px;
}
.csfloat-dash-widget-body.is-flush { padding: 0; }
.csfloat-dash-widget-body.is-tight { padding: 8px 10px; }
.csfloat-dash-widget-foot {
flex: 0 0 auto;
padding: 10px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.csfloat-dash-widget-foot-link {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-dash-widget-foot-link:hover { text-decoration: underline; }
.csfloat-dash-widget.is-elevated {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.csfloat-dash-widget.is-cta-border {
border-color: var(--cta);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}
/* END spark grid + dash layout + dash widget */
/* CSFloat-1:1: cross-tab navigation strip — for sub-tab/group switching */
.csfloat-cross-tabs {
display: flex;
align-items: center;
gap: 0;
padding: 0;
border-bottom: 1px solid var(--line);
position: relative;
}
.csfloat-cross-tabs-link {
position: relative;
padding: 14px 16px;
font: 600 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cross-tabs-link:hover { color: var(--ink-1); }
.csfloat-cross-tabs-link.is-active { color: var(--ink-1); }
.csfloat-cross-tabs-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.csfloat-cross-tabs-link-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-cross-tabs-link.is-active .csfloat-cross-tabs-link-count { color: var(--ink-3); }
.csfloat-cross-tabs-link-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
margin-left: 4px;
}
.csfloat-cross-tabs-spacer { flex: 1 1 auto; }
.csfloat-cross-tabs-trail {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 4px 0 12px;
}
@media (max-width: 720px) {
.csfloat-cross-tabs {
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-cross-tabs::-webkit-scrollbar { display: none; }
.csfloat-cross-tabs-link { padding: 12px 14px; }
.csfloat-cross-tabs-trail { display: none; }
}
/* CSFloat-1:1: rich notification card with image */
.csfloat-rich-notif {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rich-notif:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-rich-notif.is-unread {
background: rgba(59, 130, 246, 0.04);
border-color: rgba(59, 130, 246, 0.2);
}
.csfloat-rich-notif.is-unread::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--cta);
}
.csfloat-rich-notif-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
flex: 0 0 56px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-rich-notif-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-rich-notif-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-rich-notif-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-rich-notif-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-rich-notif-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-rich-notif-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
margin-top: 2px;
}
.csfloat-rich-notif-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-rich-notif-trail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex: 0 0 auto;
}
.csfloat-rich-notif-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
.csfloat-rich-notif-action {
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-rich-notif {
grid-template-columns: 40px 1fr;
gap: 10px;
}
.csfloat-rich-notif-img { width: 40px; height: 40px; flex: 0 0 40px; }
.csfloat-rich-notif-trail { grid-column: span 2; align-items: flex-start; flex-direction: row; }
}
/* END cross tabs + rich notif */
/* CSFloat-1:1: rate display row — for trade rate/exchange rate display */
.csfloat-rate-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-rate-row-side {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-rate-row-side.is-out { align-items: flex-end; text-align: right; }
.csfloat-rate-row-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-rate-row-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-rate-row-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-rate-row-val.is-no-currency::before { content: ''; margin: 0; }
.csfloat-rate-row-currency {
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-left: 2px;
}
.csfloat-rate-row-arrow {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
}
.csfloat-rate-row-arrow::before {
content: '';
width: 10px;
height: 1.5px;
background: currentColor;
position: relative;
}
.csfloat-rate-row-arrow::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
margin-left: -6px;
}
/* CSFloat-1:1: stat tracker row — for transactions/orders compact list */
.csfloat-tracker-row {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-tracker-row:last-child { border-bottom: 0; }
.csfloat-tracker-row:hover { background: var(--bg-2); }
.csfloat-tracker-row-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 14px;
}
.csfloat-tracker-row-icon.is-shipped {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-tracker-row-icon.is-delivered {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-tracker-row-icon.is-pending {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-tracker-row-icon.is-failed {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-tracker-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-tracker-row-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-tracker-row-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-tracker-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-tracker-row-status {
flex: 0 0 auto;
}
.csfloat-tracker-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (max-width: 720px) {
.csfloat-tracker-row {
grid-template-columns: 28px 1fr auto;
gap: 10px;
}
.csfloat-tracker-row-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.csfloat-tracker-row-status { display: none; }
}
/* CSFloat-1:1: cart drawer summary block (right rail in cart) */
.csfloat-cart-summary {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
position: sticky;
top: 96px;
}
.csfloat-cart-summary-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0 0 4px;
}
.csfloat-cart-summary-rows {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--line);
}
.csfloat-cart-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cart-summary-row > .csfloat-cart-summary-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-cart-summary-row.is-discount > .csfloat-cart-summary-row-val { color: oklch(0.78 0.16 152); }
.csfloat-cart-summary-row.is-fee > .csfloat-cart-summary-row-val { color: oklch(0.84 0.16 80); }
.csfloat-cart-summary-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
}
.csfloat-cart-summary-total-label {
font: 700 14px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-cart-summary-total-val {
font: 700 24px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-cart-summary-total-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-cart-summary-cta {
margin-top: 6px;
}
.csfloat-cart-summary-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 400 10px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 4px;
}
.csfloat-cart-summary-trust-icon {
width: 12px;
height: 12px;
color: oklch(0.78 0.16 152);
}
@media (max-width: 1100px) {
.csfloat-cart-summary { position: static; }
}
/* END rate row + tracker row + cart summary */
/* CSFloat-1:1: shopping pickup tile — for self-pickup option */
.csfloat-pickup-tile {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pickup-tile:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-pickup-tile.is-selected {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.csfloat-pickup-tile-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 14px;
}
.csfloat-pickup-tile.is-selected .csfloat-pickup-tile-icon {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-pickup-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-pickup-tile-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-pickup-tile-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-pickup-tile-eta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-pickup-tile-price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex: 0 0 auto;
}
.csfloat-pickup-tile-price-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-pickup-tile-price-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-pickup-tile-price-val.is-free {
color: oklch(0.78 0.16 152);
}
.csfloat-pickup-tile-price-val.is-free::before { display: none; }
.csfloat-pickup-tile-price-meta {
font: 400 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: support contact card — for help / contact methods */
.csfloat-contact-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
text-decoration: none;
text-align: left;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-contact-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-contact-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.csfloat-contact-card-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-contact-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-contact-card-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
margin-top: 4px;
}
.csfloat-contact-card-meta::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-contact-card:hover .csfloat-contact-card-meta::after {
transform: rotate(45deg) translate(2px, -2px);
}
.csfloat-contact-card-status {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
margin-top: -4px;
}
.csfloat-contact-card-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
}
.csfloat-contact-card-status.is-offline { color: var(--ink-4); }
.csfloat-contact-card-status.is-busy { color: oklch(0.78 0.16 80); }
/* END pickup tile + contact card */
/* CSFloat-1:1: insight callout — for showing data-driven recommendations */
.csfloat-insight {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.04) 0%, var(--bg-1) 100%);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 10px;
position: relative;
}
.csfloat-insight-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
font-size: 14px;
margin-top: 2px;
}
.csfloat-insight-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-insight-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.84 0.18 290);
align-self: flex-start;
margin-bottom: 2px;
}
.csfloat-insight-tag::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
.csfloat-insight-text {
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-insight-text > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-insight-text > .csfloat-insight-text-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: oklch(0.84 0.18 290);
font-weight: 600;
}
.csfloat-insight-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
/* CSFloat-1:1: time pill (single timestamp display) */
.csfloat-time-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-time-pill::before {
content: '';
width: 10px;
height: 10px;
border: 1.5px solid currentColor;
border-radius: 999px;
flex: 0 0 10px;
position: relative;
background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
background-size: 1px 4px, 3px 1px;
background-position: 50% 1px, 50% 50%;
background-repeat: no-repeat;
}
.csfloat-time-pill.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-time-pill.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-time-pill.is-danger {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-time-pill.is-soon {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-time-pill.is-soon { animation: none; }
}
/* CSFloat-1:1: rating gauge — for trust score / item condition */
.csfloat-rating-gauge {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-rating-gauge-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-rating-gauge-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-rating-gauge-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 2px;
}
.csfloat-rating-gauge-val-max {
font-size: 0.6em;
color: var(--ink-4);
font-weight: 500;
margin-left: 2px;
}
.csfloat-rating-gauge-bar {
flex: 1 1 auto;
height: 6px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
min-width: 60px;
}
.csfloat-rating-gauge-bar-fill {
height: 100%;
background: linear-gradient(90deg, oklch(0.66 0.18 30), oklch(0.84 0.16 80) 50%, oklch(0.62 0.16 152));
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-rating-gauge-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
flex: 0 0 auto;
}
/* END insight callout + time pill + rating gauge */
/* CSFloat-1:1: trade panel split — cart / inventory side-by-side */
.csfloat-trade-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-trade-panel-side {
background: var(--bg-1);
display: flex;
flex-direction: column;
min-height: 320px;
}
.csfloat-trade-panel-side-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
.csfloat-trade-panel-side-head-title {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-trade-panel-side-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-trade-panel-side-body {
flex: 1 1 auto;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-trade-panel-side-body.is-empty {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font: 400 12px/1.4 var(--ui);
color: var(--ink-4);
}
.csfloat-trade-panel-side-foot {
flex: 0 0 auto;
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-trade-panel-side-foot-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-trade-panel-side-foot-stat-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-trade-panel-side-foot-stat-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-trade-panel-side-foot-stat-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-trade-panel-side-foot-stat-val.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 720px) {
.csfloat-trade-panel { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: footer toolbar (sticky bottom action) */
.csfloat-foot-toolbar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
background: rgba(7, 11, 24, 0.85);
backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
z-index: 10;
}
.csfloat-foot-toolbar-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-foot-toolbar-msg {
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-foot-toolbar-msg-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-foot-toolbar-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-foot-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-foot-toolbar.is-success {
background: rgba(52, 211, 153, 0.16);
border-top-color: rgba(52, 211, 153, 0.3);
}
.csfloat-foot-toolbar.is-warning {
background: rgba(251, 191, 36, 0.16);
border-top-color: rgba(251, 191, 36, 0.3);
}
.csfloat-foot-toolbar.is-cta {
background: rgba(59, 130, 246, 0.16);
border-top-color: rgba(59, 130, 246, 0.3);
}
/* CSFloat-1:1: snapshot header with date range picker */
.csfloat-snapshot-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.csfloat-snapshot-head-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-snapshot-head-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-snapshot-head-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-snapshot-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-snapshot-head-range {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-snapshot-head-range > .csfloat-snapshot-head-range-opt {
height: 26px;
padding: 0 10px;
background: transparent;
border: 0;
border-radius: 4px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
cursor: pointer;
font-feature-settings: "tnum";
letter-spacing: 0.02em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-snapshot-head-range > .csfloat-snapshot-head-range-opt:hover { color: var(--ink-1); }
.csfloat-snapshot-head-range > .csfloat-snapshot-head-range-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* END trade panel + foot toolbar + snapshot head */
/* CSFloat-1:1: hero shimmer text — for landing page accent */
.csfloat-shimmer-text-2 {
background: linear-gradient(110deg, var(--ink-1) 30%, oklch(0.92 0.08 240) 45%, var(--cta) 50%, oklch(0.92 0.08 240) 55%, var(--ink-1) 70%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: csfloat-shimmer-text-2-anim 3500ms linear infinite;
}
@keyframes csfloat-shimmer-text-2-anim {
to { background-position: -120% 0; }
}
.csfloat-shimmer-text-2.is-fast { animation-duration: 2200ms; }
.csfloat-shimmer-text-2.is-slow { animation-duration: 5000ms; }
@media (prefers-reduced-motion: reduce) {
.csfloat-shimmer-text-2 { animation: none; }
}
/* CSFloat-1:1: stat tile group with subtle background variants */
.csfloat-stat-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-stat-group-cell {
position: relative;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
background: transparent;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-group-cell:hover {
background: var(--bg-2);
}
.csfloat-stat-group-cell:last-child { border-right: 0; }
.csfloat-stat-group-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-group-cell-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 6px;
}
.csfloat-stat-group-cell-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-group-cell-meta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-stat-group-cell-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-stat-group-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-group-cell-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-group-cell.is-cta {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), transparent);
}
.csfloat-stat-group-cell.is-cta .csfloat-stat-group-cell-label { color: var(--cta); }
@media (max-width: 720px) {
.csfloat-stat-group { grid-template-columns: 1fr 1fr; }
.csfloat-stat-group-cell:nth-child(2n) { border-right: 0; }
.csfloat-stat-group-cell { border-bottom: 1px solid var(--line); }
.csfloat-stat-group-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* CSFloat-1:1: announcement card — for upcoming features / changelog */
.csfloat-announce-card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-announce-card:hover {
border-color: var(--cta);
transform: translateY(-1px);
}
.csfloat-announce-card-icon {
width: 56px;
height: 56px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex: 0 0 56px;
}
.csfloat-announce-card-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-announce-card-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
align-self: flex-start;
}
.csfloat-announce-card-tag::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
}
.csfloat-announce-card-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-announce-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-announce-card-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
white-space: nowrap;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-announce-card {
grid-template-columns: 40px 1fr;
gap: 12px;
}
.csfloat-announce-card-icon { width: 40px; height: 40px; flex: 0 0 40px; font-size: 15px; }
.csfloat-announce-card-stamp { display: none; }
}
/* END shimmer text 2 + stat group + announce card */
/* CSFloat-1:1: section heading row with icon + title */
.csfloat-section-h {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
}
.csfloat-section-h-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
font-size: 14px;
}
.csfloat-section-h.is-success .csfloat-section-h-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-section-h.is-warning .csfloat-section-h-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-section-h.is-danger .csfloat-section-h-icon {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-section-h-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-section-h-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-section-h-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-section-h-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-section-h-action {
flex: 0 0 auto;
}
/* CSFloat-1:1: minimal product card grid (compact for sidebar suggestions) */
.csfloat-mini-prod-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.csfloat-mini-prod-grid-tile {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mini-prod-grid-tile:hover {
border-color: var(--line-2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.csfloat-mini-prod-grid-tile-img {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.csfloat-mini-prod-grid-tile-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.csfloat-mini-prod-grid-tile-body {
padding: 6px 8px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-mini-prod-grid-tile-name {
font: 500 11px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-mini-prod-grid-tile-price {
font: 700 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-mini-prod-grid-tile-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-mini-prod-grid.is-3col { grid-template-columns: repeat(3, 1fr); }
.csfloat-mini-prod-grid.is-4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 540px) {
.csfloat-mini-prod-grid.is-3col { grid-template-columns: repeat(2, 1fr); }
.csfloat-mini-prod-grid.is-4col { grid-template-columns: repeat(2, 1fr); }
}
/* CSFloat-1:1: highlighted callout with icon and CTA */
.csfloat-hl-callout {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), var(--bg-1));
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.csfloat-hl-callout::before {
content: '';
position: absolute;
top: -10%;
right: -10%;
width: 60%;
height: 120%;
background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-hl-callout > .csfloat-hl-callout-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(59, 130, 246, 0.16);
border: 1px solid var(--cta);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
position: relative;
z-index: 1;
}
.csfloat-hl-callout-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
position: relative;
z-index: 1;
}
.csfloat-hl-callout-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-hl-callout-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-hl-callout-action {
flex: 0 0 auto;
position: relative;
z-index: 1;
}
.csfloat-hl-callout.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.06), var(--bg-1));
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-hl-callout.is-success .csfloat-hl-callout-icon {
background: rgba(52, 211, 153, 0.16);
border-color: oklch(0.62 0.16 152);
color: oklch(0.78 0.16 152);
}
.csfloat-hl-callout.is-warning {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), var(--bg-1));
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-hl-callout.is-warning .csfloat-hl-callout-icon {
background: rgba(251, 191, 36, 0.16);
border-color: oklch(0.66 0.18 80);
color: oklch(0.84 0.16 80);
}
.csfloat-hl-callout.is-danger {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.06), var(--bg-1));
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-hl-callout.is-danger .csfloat-hl-callout-icon {
background: rgba(248, 113, 113, 0.16);
border-color: oklch(0.66 0.18 30);
color: oklch(0.72 0.18 30);
}
@media (max-width: 540px) {
.csfloat-hl-callout {
grid-template-columns: 32px 1fr;
gap: 12px;
}
.csfloat-hl-callout-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.csfloat-hl-callout-action { grid-column: span 2; }
}
/* END section heading + mini prod grid + highlighted callout */
/* CSFloat-1:1: rich pricing card — for one-time purchase / subscription confirmation */
.csfloat-pricing-rich {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px 22px;
background: linear-gradient(180deg, var(--bg-1), var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.csfloat-pricing-rich.is-cta {
border-color: var(--cta);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), var(--bg-1) 60%);
}
.csfloat-pricing-rich-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-pricing-rich-name {
font: 700 14px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-pricing-rich-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 3px 6px;
border-radius: 3px;
}
.csfloat-pricing-rich-amt {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-pricing-rich-amt-val {
font: 700 32px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.03em;
}
.csfloat-pricing-rich-amt-val::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
vertical-align: top;
}
.csfloat-pricing-rich-amt-period {
font: 400 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-pricing-rich-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-pricing-rich-features {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-pricing-rich-feature {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
align-items: center;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-pricing-rich-feature::before {
content: '';
width: 14px;
height: 8px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
margin-top: 4px;
}
.csfloat-pricing-rich-feature.is-disabled {
color: var(--ink-4);
}
.csfloat-pricing-rich-feature.is-disabled::before {
border-color: var(--ink-4);
opacity: 0.4;
}
.csfloat-pricing-rich-cta {
margin-top: 4px;
}
.csfloat-pricing-rich-meta {
font: 400 10px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
text-align: center;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
/* CSFloat-1:1: large hero stat ribbon */
.csfloat-stat-ribbon {
display: flex;
align-items: center;
justify-content: space-around;
gap: 24px;
padding: 24px 32px;
background: linear-gradient(135deg, var(--bg-1), var(--bg) 100%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.csfloat-stat-ribbon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(800px 200px at 50% 50%, rgba(59, 130, 246, 0.04), transparent 60%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.csfloat-stat-ribbon-item {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
position: relative;
z-index: 1;
}
.csfloat-stat-ribbon-item-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-ribbon-item-val {
font: 700 clamp(24px, 3vw, 36px) / 1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.03em;
}
.csfloat-stat-ribbon-item-val.is-currency::before {
content: '$';
font-size: 0.5em;
color: var(--ink-3);
margin-right: 2px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-ribbon-item-val-suffix {
font-size: 0.5em;
color: var(--ink-3);
font-weight: 500;
margin-left: 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-stat-ribbon-item-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-stat-ribbon-divider {
width: 1px;
align-self: stretch;
background: var(--line);
position: relative;
z-index: 1;
}
@media (max-width: 720px) {
.csfloat-stat-ribbon {
padding: 20px 18px;
gap: 16px;
}
.csfloat-stat-ribbon-divider { display: none; }
}
/* END pricing rich + stat ribbon */
/* CSFloat-1:1: floating shortcut card — for keyboard tip overlays */
.csfloat-shortcut-card {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
z-index: 50;
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
animation: csfloat-shortcut-card-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-shortcut-card-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.csfloat-shortcut-card.is-leaving {
animation: csfloat-shortcut-card-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes csfloat-shortcut-card-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(12px); }
}
.csfloat-shortcut-card-text {
flex: 1 1 auto;
}
.csfloat-shortcut-card-text > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-shortcut-card-keys {
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-shortcut-card-keys-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 4px;
font: 600 10px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-shortcut-card-x {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 4px;
cursor: pointer;
font: 500 12px/1 var(--ui);
}
.csfloat-shortcut-card-x:hover {
background: var(--bg-2);
color: var(--ink-1);
}
@media (prefers-reduced-motion: reduce) {
.csfloat-shortcut-card { animation: none; }
}
/* CSFloat-1:1: insight chart card — for embedded analytics with chart + summary */
.csfloat-insight-chart {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-insight-chart-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-insight-chart-title {
font: 600 13px/1.3 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
margin: 0;
}
.csfloat-insight-chart-stamp {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-insight-chart-stat {
display: flex;
align-items: baseline;
gap: 8px;
}
.csfloat-insight-chart-stat-val {
font: 700 28px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-insight-chart-stat-val.is-currency::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-insight-chart-stat-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-insight-chart-stat-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-insight-chart-stat-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-insight-chart-stat-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-insight-chart-body {
width: 100%;
height: 80px;
margin-top: 4px;
}
.csfloat-insight-chart-body > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-insight-chart-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.csfloat-insight-chart-foot-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-insight-chart-foot-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
.csfloat-insight-chart-foot-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-insight-chart-foot-action:hover { opacity: 0.78; }
/* END shortcut card + insight chart */
/* CSFloat-1:1: bullet-step list (compact list of numbered steps) */
.csfloat-bullet-steps {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.csfloat-bullet-steps-row {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
align-items: flex-start;
}
.csfloat-bullet-steps-row.is-active .csfloat-bullet-steps-row-num {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-bullet-steps-row.is-done .csfloat-bullet-steps-row-num {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-bullet-steps-row.is-done .csfloat-bullet-steps-row-num > span { display: none; }
.csfloat-bullet-steps-row.is-done .csfloat-bullet-steps-row-num::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
/* CSFloat-1:1: action-card with image (for related products) */
.csfloat-action-img-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-action-img-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-1px);
}
.csfloat-action-img-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.csfloat-action-img-card-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: badge with avatar + count (for staff online indicators) */
.csfloat-online-count {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-online-count-avatars {
display: inline-flex;
align-items: center;
}
.csfloat-online-count-avatars > .csfloat-online-count-avatar {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg-2);
margin-left: -6px;
object-fit: cover;
position: relative;
}
.csfloat-online-count-avatars > .csfloat-online-count-avatar:first-child { margin-left: 0; }
.csfloat-online-count-avatars > .csfloat-online-count-avatar.is-online {
box-shadow: inset 0 0 0 1.5px oklch(0.78 0.16 152);
}
.csfloat-online-count-num {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-online-count.is-pulse {
border-color: rgba(52, 211, 153, 0.3);
background: rgba(52, 211, 153, 0.06);
color: oklch(0.78 0.16 152);
}
.csfloat-online-count.is-pulse .csfloat-online-count-num { color: oklch(0.92 0.1 152); }
/* END bullet steps + action img card + online count */
/* CSFloat-1:1: badge stack with overflow indicator */
.csfloat-badge-stack-row {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-badge-stack-row > .csfloat-badge-stack-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-badge-stack-row > .csfloat-badge-stack-item.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-badge-stack-row > .csfloat-badge-stack-item-icon {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 14px;
font-size: 8px;
}
.csfloat-badge-stack-row > .csfloat-badge-stack-item.is-cta .csfloat-badge-stack-item-icon {
background: rgba(59, 130, 246, 0.18);
}
/* CSFloat-1:1: secondary badge cluster — for grouped status pills */
.csfloat-secondary-badges {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.csfloat-secondary-badges > .csfloat-secondary-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
font: 600 9px/1.4 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-secondary-badges > .csfloat-secondary-badge.is-cta {
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-secondary-badges > .csfloat-secondary-badge.is-success {
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-secondary-badges > .csfloat-secondary-badge.is-warning {
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-secondary-badges > .csfloat-secondary-badge.is-danger {
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-secondary-badges > .csfloat-secondary-badge::before {
content: '';
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
}
.csfloat-secondary-badges > .csfloat-secondary-badge.is-no-dot::before { display: none; }
/* CSFloat-1:1: insight tile sticky on right rail (recommend cards) */
.csfloat-recommend {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), var(--bg-1));
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 10px;
}
.csfloat-recommend-head {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-recommend-icon {
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(167, 139, 250, 0.16);
border: 1px solid rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
}
.csfloat-recommend-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.84 0.18 290);
}
.csfloat-recommend-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-recommend-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 6px 0;
}
.csfloat-recommend-row-img {
width: 32px;
height: 32px;
border-radius: 4px;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 3px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-recommend-row-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-recommend-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-recommend-row-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-recommend-row-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-recommend-row-amt {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-recommend-row-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-recommend-foot {
font: 500 11px/1 var(--ui);
color: oklch(0.84 0.18 290);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
align-self: flex-start;
letter-spacing: -0.005em;
}
.csfloat-recommend-foot:hover { text-decoration: underline; }
/* END badge stack row + secondary badges + recommend rail */
/* CSFloat-1:1: trade snippet (one-line trade summary) */
.csfloat-trade-snippet {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-trade-snippet-side {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-trade-snippet-side-img {
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--bg-3);
border: 1px solid var(--line);
padding: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-trade-snippet-side-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-trade-snippet-arrow {
width: 10px;
height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
}
.csfloat-trade-snippet-arrow::before {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-trade-snippet-amt {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-trade-snippet-amt::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-trade-snippet-amt.is-up { color: oklch(0.78 0.16 152); }
.csfloat-trade-snippet-amt.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: notification dot indicator (for sidebar/header items) */
.csfloat-notif-dot {
position: relative;
display: inline-block;
}
.csfloat-notif-dot::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
border: 2px solid var(--bg);
box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}
.csfloat-notif-dot.is-cta::after { background: var(--cta); box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }
.csfloat-notif-dot.is-success::after { background: oklch(0.78 0.16 152); }
.csfloat-notif-dot.is-warning::after { background: oklch(0.78 0.16 80); }
.csfloat-notif-dot.is-pulse::after {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-notif-dot-num {
position: absolute;
top: -6px;
right: -6px;
min-width: 14px;
height: 14px;
padding: 0 4px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 9px/14px var(--mono);
text-align: center;
border: 2px solid var(--bg);
font-feature-settings: "tnum";
}
@media (prefers-reduced-motion: reduce) {
.csfloat-notif-dot.is-pulse::after { animation: none; }
}
/* CSFloat-1:1: vertical sticky help rail (FAQ side rail) */
.csfloat-help-rail {
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 16px;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 12px;
position: sticky;
top: 96px;
width: 240px;
flex: 0 0 240px;
}
.csfloat-help-rail-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 12px;
}
.csfloat-help-rail-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-help-rail-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
font: 500 12px/1.3 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-help-rail-link:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-help-rail-link-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--ink-3);
}
.csfloat-help-rail-link:hover .csfloat-help-rail-link-icon { color: var(--cta); }
.csfloat-help-rail-link-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csfloat-help-rail-foot {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
margin-top: 8px;
border-top: 1px solid var(--line);
}
.csfloat-help-rail-foot-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-help-rail-foot-action {
margin-top: 4px;
}
@media (max-width: 1100px) {
.csfloat-help-rail { position: static; width: 100%; flex: none; }
}
/* END trade snippet + notif dot + help rail */
/* CSFloat-1:1: order summary tile (compact for sidebar) */
.csfloat-order-tile {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-order-tile-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-order-tile-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-tile-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-tile-body {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 10px;
align-items: center;
}
.csfloat-order-tile-img {
width: 40px;
height: 40px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-order-tile-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-order-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-order-tile-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-order-tile-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-tile-amt {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-order-tile-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-order-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.csfloat-order-tile-status {
flex: 0 0 auto;
}
.csfloat-order-tile-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-order-tile-action:hover { opacity: 0.78; }
.csfloat-order-tile-action::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* CSFloat-1:1: trader rating widget */
.csfloat-trader-rating {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-trader-rating-circle {
position: relative;
width: 64px;
height: 64px;
flex: 0 0 64px;
}
.csfloat-trader-rating-circle > svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.csfloat-trader-rating-circle > svg > circle {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.csfloat-trader-rating-circle > svg > circle.csfloat-trader-rating-circle-track { stroke: var(--bg-3); }
.csfloat-trader-rating-circle > svg > circle.csfloat-trader-rating-circle-fill {
stroke: oklch(0.62 0.16 152);
transition: stroke-dashoffset 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-trader-rating.is-mid .csfloat-trader-rating-circle-fill { stroke: oklch(0.78 0.16 80); }
.csfloat-trader-rating.is-low .csfloat-trader-rating-circle-fill { stroke: oklch(0.66 0.18 30); }
.csfloat-trader-rating-circle-val {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-trader-rating-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trader-rating-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trader-rating-grade {
font: 700 16px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.015em;
}
.csfloat-trader-rating.is-good .csfloat-trader-rating-grade { color: oklch(0.78 0.16 152); }
.csfloat-trader-rating.is-mid .csfloat-trader-rating-grade { color: oklch(0.84 0.16 80); }
.csfloat-trader-rating.is-low .csfloat-trader-rating-grade { color: oklch(0.72 0.18 30); }
.csfloat-trader-rating-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-trader-rating-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
}
/* END order tile + trader rating */
/* CSFloat-1:1: full bleed banner — for top-of-page promo with image bg */
.csfloat-bleed-banner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 60px 32px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
min-height: 220px;
}
.csfloat-bleed-banner-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.4;
filter: blur(2px);
pointer-events: none;
}
.csfloat-bleed-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--bg-1) 30%, transparent 70%);
pointer-events: none;
}
.csfloat-bleed-banner-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 540px;
}
.csfloat-bleed-banner-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-bleed-banner-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: currentColor;
}
.csfloat-bleed-banner-title {
font: 700 clamp(28px, 4vw, 42px) / 1.1 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-bleed-banner-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-bleed-banner-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
@media (max-width: 720px) {
.csfloat-bleed-banner { padding: 36px 24px; }
}
/* CSFloat-1:1: trade card with right-rail action */
.csfloat-trade-card {
display: grid;
grid-template-columns: 1fr 200px;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
align-items: stretch;
}
.csfloat-trade-card-main {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-trade-card-main-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-trade-card-main-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-trade-card-main-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-trade-card-main-deal {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
}
.csfloat-trade-card-main-side {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.csfloat-trade-card-main-side.is-them { flex-direction: row-reverse; text-align: right; }
.csfloat-trade-card-main-side-img {
width: 44px;
height: 44px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 4px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-trade-card-main-side-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-trade-card-main-side-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-card-main-side-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-trade-card-main-side-amt {
font: 600 12px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
}
.csfloat-trade-card-main-side-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-trade-card-main-arrow {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-trade-card-main-arrow::before {
content: '';
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-trade-card-side {
background: var(--bg-2);
border-left: 1px solid var(--line);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.csfloat-trade-card-side-status {
align-self: flex-start;
}
.csfloat-trade-card-side-amt {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-trade-card-side-amt::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-trade-card-side-amt-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-trade-card-side-actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
@media (max-width: 720px) {
.csfloat-trade-card { grid-template-columns: 1fr; }
.csfloat-trade-card-side {
border-left: 0;
border-top: 1px solid var(--line);
}
}
/* END bleed banner + trade card */
/* CSFloat-1:1: announcement bell pop dropdown — for important promotion alerts */
.csfloat-bell-pop {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 380px;
max-width: calc(100vw - 32px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 200;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bell-pop.is-open { display: flex; }
.csfloat-bell-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-bell-pop-tabs {
display: flex;
border-bottom: 1px solid var(--line);
padding: 0 6px;
}
.csfloat-bell-pop-tab {
padding: 10px 12px;
background: transparent;
border: 0;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
cursor: pointer;
letter-spacing: -0.005em;
position: relative;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-bell-pop-tab:hover { color: var(--ink-2); }
.csfloat-bell-pop-tab.is-active { color: var(--ink-1); }
.csfloat-bell-pop-tab.is-active::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
}
.csfloat-bell-pop-list {
max-height: 420px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.csfloat-bell-pop-list-row:last-child { border-bottom: 0; }
.csfloat-bell-pop-list-row:hover { background: var(--bg-2); }
.csfloat-bell-pop-list-row.is-unread { background: rgba(59, 130, 246, 0.04); }
.csfloat-bell-pop-list-row.is-unread::before {
content: '';
position: absolute;
top: 50%;
left: 5px;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--cta);
transform: translateY(-50%);
}
.csfloat-bell-pop-list-row-icon.is-cta { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); color: var(--cta); }
.csfloat-bell-pop-list-row-icon.is-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); color: oklch(0.78 0.16 152); }
.csfloat-bell-pop-list-row-icon.is-warning { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: oklch(0.84 0.16 80); }
.csfloat-bell-pop-list-row-icon.is-danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: oklch(0.72 0.18 30); }
.csfloat-bell-pop-empty {
padding: 48px 16px;
text-align: center;
font: 400 13px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-bell-pop-foot {
border-top: 1px solid var(--line);
background: var(--bg);
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-bell-pop-foot-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* END bell pop dropdown */
/* CSFloat-1:1: notice-bar inline (success/warning/error inline alerts within forms) */
.csfloat-notice {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 400 12px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-notice.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.92 0.1 152);
}
.csfloat-notice.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.92 0.1 80);
}
.csfloat-notice.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.92 0.1 30);
}
.csfloat-notice.is-info {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
color: oklch(0.92 0.1 240);
}
.csfloat-notice-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--ui);
margin-top: 1px;
}
.csfloat-notice.is-success .csfloat-notice-icon {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-notice.is-warning .csfloat-notice-icon {
background: rgba(251, 191, 36, 0.18);
color: oklch(0.84 0.16 80);
}
.csfloat-notice.is-danger .csfloat-notice-icon {
background: rgba(248, 113, 113, 0.18);
color: oklch(0.72 0.18 30);
}
.csfloat-notice.is-info .csfloat-notice-icon {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
}
.csfloat-notice-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-notice-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-notice.is-success .csfloat-notice-title { color: oklch(0.94 0.1 152); }
.csfloat-notice.is-warning .csfloat-notice-title { color: oklch(0.96 0.1 80); }
.csfloat-notice.is-danger .csfloat-notice-title { color: oklch(0.94 0.1 30); }
.csfloat-notice.is-info .csfloat-notice-title { color: oklch(0.94 0.1 240); }
.csfloat-notice-msg { margin: 0; }
.csfloat-notice-action { flex: 0 0 auto; }
.csfloat-notice-x {
width: 16px;
height: 16px;
border: 0;
background: transparent;
color: currentColor;
opacity: 0.5;
border-radius: 4px;
cursor: pointer;
font: 500 12px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-notice-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
/* CSFloat-1:1: pricing tier badge — small label for tier indicators */
.csfloat-tier-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.csfloat-tier-pill.is-free {
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
}
.csfloat-tier-pill.is-bronze {
background: rgba(180, 83, 9, 0.16);
border: 1px solid rgba(180, 83, 9, 0.4);
color: oklch(0.84 0.14 50);
}
.csfloat-tier-pill.is-silver {
background: rgba(148, 163, 184, 0.16);
border: 1px solid rgba(148, 163, 184, 0.4);
color: oklch(0.92 0.04 240);
}
.csfloat-tier-pill.is-gold {
background: rgba(234, 179, 8, 0.16);
border: 1px solid rgba(234, 179, 8, 0.4);
color: oklch(0.92 0.16 80);
}
.csfloat-tier-pill.is-platinum {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(59, 130, 246, 0.18));
border: 1px solid rgba(167, 139, 250, 0.4);
color: oklch(0.94 0.1 280);
}
.csfloat-tier-pill.is-diamond {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(96, 165, 250, 0.18));
border: 1px solid rgba(96, 165, 250, 0.4);
color: oklch(0.94 0.12 240);
}
.csfloat-tier-pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.csfloat-tier-pill.is-free::before {
box-shadow: none;
opacity: 0.5;
}
/* END notice + tier pill */
/* CSFloat-1:1: small inline filter chip with leading dot indicator */
.csfloat-status-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1.4 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-status-chip::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
flex: 0 0 5px;
}
.csfloat-status-chip.is-live { color: oklch(0.78 0.16 152); }
.csfloat-status-chip.is-live::before { box-shadow: 0 0 4px currentColor; animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
.csfloat-status-chip.is-paused { color: oklch(0.84 0.16 80); }
.csfloat-status-chip.is-stopped { color: oklch(0.72 0.18 30); }
.csfloat-status-chip.is-archived { color: var(--ink-4); }
.csfloat-status-chip.is-pending { color: var(--cta); }
.csfloat-status-chip.is-pending::before { box-shadow: 0 0 4px currentColor; animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.csfloat-status-chip.is-live::before,
.csfloat-status-chip.is-pending::before { animation: none; }
}
/* CSFloat-1:1: hero spotlight call-to-action with backdrop pattern */
.csfloat-cta-spot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 36px 28px;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), var(--bg-1));
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 14px;
text-align: center;
overflow: hidden;
}
.csfloat-cta-spot::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 200px at 50% 100%, rgba(59, 130, 246, 0.16), transparent 60%);
pointer-events: none;
}
.csfloat-cta-spot::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 90%);
pointer-events: none;
}
.csfloat-cta-spot > * { position: relative; z-index: 1; }
.csfloat-cta-spot-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 20px/1 var(--mono);
letter-spacing: -0.04em;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.csfloat-cta-spot-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-cta-spot-title {
font: 700 clamp(20px, 2.6vw, 28px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
max-width: 480px;
}
.csfloat-cta-spot-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 440px;
}
.csfloat-cta-spot-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.csfloat-cta-spot-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 6px;
}
.csfloat-cta-spot-meta > b { color: var(--ink-2); font-weight: 500; }
/* CSFloat-1:1: simple block tag for grouped categories */
.csfloat-block-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 600 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-block-tag:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-block-tag.is-active {
background: var(--cta);
color: #fff;
border-color: var(--cta);
}
.csfloat-block-tag-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-block-tag.is-active .csfloat-block-tag-count {
color: rgba(255, 255, 255, 0.7);
}
.csfloat-block-tag-x {
width: 14px;
height: 14px;
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
font: 500 11px/1 var(--ui);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
.csfloat-block-tag-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
/* END status chip + cta spot + block tag */
/* CSFloat-1:1: hero showcase strip — for landing carousel */
.csfloat-showcase {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 16px;
padding: 16px 16px 24px;
margin: 0 -16px;
scrollbar-width: none;
}
.csfloat-showcase::-webkit-scrollbar { display: none; }
.csfloat-showcase > .csfloat-showcase-card {
scroll-snap-align: start;
flex: 0 0 320px;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px;
gap: 12px;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-showcase > .csfloat-showcase-card:hover {
border-color: var(--cta);
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}
.csfloat-showcase > .csfloat-showcase-card::before {
content: '';
position: absolute;
top: -20%;
right: -20%;
width: 60%;
height: 100%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
pointer-events: none;
}
.csfloat-showcase-card-tag {
position: absolute;
top: 14px;
right: 14px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.16);
padding: 3px 6px;
border-radius: 3px;
z-index: 2;
}
.csfloat-showcase-card-img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 1.5;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}
.csfloat-showcase-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-showcase > .csfloat-showcase-card:hover .csfloat-showcase-card-img > img {
transform: scale(1.05);
}
.csfloat-showcase-card-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-showcase-card-name {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-showcase-card-meta {
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-showcase-card-foot {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.csfloat-showcase-card-price {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-showcase-card-price::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-showcase-card-action {
font: 600 11px/1 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-showcase-card-action::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* CSFloat-1:1: notice-tag — small inline notice with icon */
.csfloat-notice-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 6px;
font: 500 11px/1.3 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
}
.csfloat-notice-tag-icon {
width: 12px;
height: 12px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/1 var(--ui);
flex: 0 0 12px;
}
.csfloat-notice-tag.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.25);
color: oklch(0.78 0.16 152);
}
.csfloat-notice-tag.is-success .csfloat-notice-tag-icon {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-notice-tag.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.25);
color: oklch(0.84 0.16 80);
}
.csfloat-notice-tag.is-warning .csfloat-notice-tag-icon {
background: rgba(251, 191, 36, 0.18);
color: oklch(0.84 0.16 80);
}
.csfloat-notice-tag.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.25);
color: oklch(0.72 0.18 30);
}
.csfloat-notice-tag.is-danger .csfloat-notice-tag-icon {
background: rgba(248, 113, 113, 0.18);
color: oklch(0.72 0.18 30);
}
.csfloat-notice-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
}
/* END showcase strip + notice tag */
/* CSFloat-1:1: split panel hero — for promotion cards with art on right */
.csfloat-split-hero {
display: grid;
grid-template-columns: 1fr 240px;
gap: 16px;
align-items: center;
padding: 22px 24px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 70%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.csfloat-split-hero::before {
content: '';
position: absolute;
top: -10%;
right: -10%;
width: 50%;
height: 130%;
background: radial-gradient(ellipse, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-split-hero-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-split-hero-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
padding: 4px 8px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 999px;
align-self: flex-start;
}
.csfloat-split-hero-title {
font: 700 clamp(20px, 2.4vw, 28px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
}
.csfloat-split-hero-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-split-hero-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.csfloat-split-hero-art {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 160px;
}
.csfloat-split-hero-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 24px rgba(59, 130, 246, 0.18));
}
@media (max-width: 720px) {
.csfloat-split-hero {
grid-template-columns: 1fr;
padding: 20px;
}
.csfloat-split-hero-art { height: 120px; }
}
/* CSFloat-1:1: status meta strip — for showing market/system status */
.csfloat-status-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 8px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-status-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-status-meta-item-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
.csfloat-status-meta-item-dot.is-cta { background: var(--cta); }
.csfloat-status-meta-item-dot.is-warning { background: oklch(0.78 0.16 80); }
.csfloat-status-meta-item-dot.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-status-meta-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
}
.csfloat-status-meta-divider {
width: 1px;
height: 12px;
background: var(--line);
}
@media (max-width: 540px) {
.csfloat-status-meta {
border-radius: 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.csfloat-status-meta-divider { display: none; }
}
/* CSFloat-1:1: simple inline kbd group with hint text */
.csfloat-kbd-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-kbd-hint-text {
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-kbd-hint-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 4px;
font: 600 10px/1 var(--mono);
color: var(--ink-2);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-kbd-hint-sep {
color: var(--ink-4);
font-size: 10px;
}
/* END split hero + status meta + kbd hint */
/* CSFloat-1:1: hero CTA group — for landing page action set */
.csfloat-cta-group {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.csfloat-cta-group-divider {
font: 500 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0 4px;
}
.csfloat-cta-group-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-cta-group-meta::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
/* CSFloat-1:1: minimal section heading — for compact subheaders */
.csfloat-min-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.csfloat-min-heading-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-min-heading-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
text-transform: none;
letter-spacing: 0;
}
.csfloat-min-heading-link {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-min-heading-link:hover { text-decoration: underline; }
.csfloat-min-heading-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* CSFloat-1:1: chart legend grid — for analytics with multiple series */
.csfloat-chart-legend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
padding: 10px 14px;
background: var(--bg-2);
border-radius: 8px;
margin-top: 12px;
}
.csfloat-chart-legend-grid-item {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
transition: background 100ms ease;
}
.csfloat-chart-legend-grid-item:hover { background: var(--bg-3); }
.csfloat-chart-legend-grid-item.is-faded { opacity: 0.5; }
.csfloat-chart-legend-grid-item-label {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-chart-legend-grid-item-label::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ink-3);
flex: 0 0 8px;
}
.csfloat-chart-legend-grid-item-label.is-cta::before { background: var(--cta); }
.csfloat-chart-legend-grid-item-label.is-success::before { background: oklch(0.62 0.16 152); }
.csfloat-chart-legend-grid-item-label.is-warning::before { background: oklch(0.78 0.16 80); }
.csfloat-chart-legend-grid-item-label.is-danger::before { background: oklch(0.66 0.18 30); }
.csfloat-chart-legend-grid-item-label.is-purple::before { background: oklch(0.62 0.18 290); }
.csfloat-chart-legend-grid-item-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-chart-legend-grid-item-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-chart-legend-grid-item-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-chart-legend-grid-item-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-chart-legend-grid-item-delta.is-down { color: oklch(0.72 0.18 30); }
/* END cta group + min heading + chart legend grid */
/* CSFloat-1:1: nav user pill — collapsed user widget for header */
.csfloat-user-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 10px 0 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-user-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-user-pill.is-open {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--cta);
}
.csfloat-user-pill-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
flex: 0 0 24px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-user-pill-name {
font-weight: 500;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-user-pill-balance {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
margin-left: 4px;
padding-left: 8px;
border-left: 1px solid var(--line);
}
.csfloat-user-pill-balance::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-user-pill-chev {
width: 7px;
height: 7px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-user-pill.is-open .csfloat-user-pill-chev {
transform: rotate(225deg) translate(-1px, -1px);
}
@media (max-width: 540px) {
.csfloat-user-pill-name,
.csfloat-user-pill-balance,
.csfloat-user-pill-chev { display: none; }
.csfloat-user-pill {
width: 32px;
padding: 0;
justify-content: center;
}
}
/* CSFloat-1:1: scroll progress dot indicator (for reading position) */
.csfloat-scroll-dots {
position: fixed;
top: 50%;
right: 24px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 50;
padding: 8px 6px;
background: rgba(7, 11, 24, 0.7);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 999px;
}
.csfloat-scroll-dots-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ink-4);
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.csfloat-scroll-dots-dot:hover {
background: var(--ink-2);
transform: scale(1.4);
}
.csfloat-scroll-dots-dot.is-active {
background: var(--cta);
width: 6px;
height: 18px;
border-radius: 999px;
}
.csfloat-scroll-dots-dot-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-3);
color: var(--ink-1);
padding: 4px 10px;
border-radius: 4px;
border: 1px solid var(--line-2);
font: 500 11px/1 var(--ui);
white-space: nowrap;
letter-spacing: -0.005em;
opacity: 0;
pointer-events: none;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-scroll-dots-dot:hover .csfloat-scroll-dots-dot-label {
opacity: 1;
}
@media (max-width: 1100px) {
.csfloat-scroll-dots { display: none; }
}
/* CSFloat-1:1: search empty result component (for /market with no matches) */
.csfloat-search-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 60px 24px;
text-align: center;
}
.csfloat-search-empty-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-search-empty-icon::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-radius: 999px;
}
.csfloat-search-empty-icon::after {
content: '';
position: absolute;
width: 6px;
height: 2px;
background: currentColor;
border-radius: 1px;
transform: rotate(45deg);
bottom: 13px;
right: 12px;
}
.csfloat-search-empty-title {
font: 600 16px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-search-empty-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 380px;
}
.csfloat-search-empty-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-search-empty-suggest {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 8px;
}
.csfloat-search-empty-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
/* END user pill + scroll dots + search empty */
/* CSFloat-1:1: stat highlight tile — emphasized stat with icon */
.csfloat-hl-stat {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
overflow: hidden;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hl-stat:hover { border-color: var(--line-2); }
.csfloat-hl-stat-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
font-size: 15px;
}
.csfloat-hl-stat.is-success .csfloat-hl-stat-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-hl-stat.is-warning .csfloat-hl-stat-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-hl-stat.is-danger .csfloat-hl-stat-icon {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-hl-stat-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-hl-stat-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hl-stat-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 2px;
}
.csfloat-hl-stat-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hl-stat-meta {
display: inline-flex;
align-items: center;
gap: 5px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-top: 2px;
letter-spacing: 0.02em;
}
.csfloat-hl-stat-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-hl-stat-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: countdown timer compact (for inline auction timers) */
.csfloat-countdown-compact {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-countdown-compact-cell {
display: inline-flex;
align-items: baseline;
gap: 1px;
}
.csfloat-countdown-compact-cell-val {
color: var(--ink-1);
font-weight: 700;
}
.csfloat-countdown-compact-cell-unit {
font: 500 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.02em;
margin-left: 1px;
}
.csfloat-countdown-compact-sep {
color: var(--ink-4);
font-weight: 400;
}
.csfloat-countdown-compact.is-urgent {
color: oklch(0.78 0.18 30);
}
.csfloat-countdown-compact.is-urgent .csfloat-countdown-compact-cell-val { color: oklch(0.78 0.18 30); }
.csfloat-countdown-compact.is-urgent .csfloat-countdown-compact-cell-unit { color: oklch(0.66 0.18 30); }
.csfloat-countdown-compact.is-pulse .csfloat-countdown-compact-cell-val {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-countdown-compact.is-pulse .csfloat-countdown-compact-cell-val { animation: none; }
}
/* CSFloat-1:1: footer-like simple link cluster */
.csfloat-link-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-link-cluster-link {
color: var(--ink-3);
text-decoration: none;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-cluster-link:hover { color: var(--ink-1); }
.csfloat-link-cluster-link.is-active { color: var(--cta); }
.csfloat-link-cluster-divider {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-link-cluster-divider::before { content: '·'; }
@media (max-width: 540px) {
.csfloat-link-cluster { gap: 10px; }
}
/* END hl stat + countdown compact + link cluster */
/* CSFloat-1:1: small button row — for inline grouped actions */
.csfloat-btn-row {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-btn-row > .csfloat-btn-row-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 10px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--ink-3);
font: 600 11px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-btn-row > .csfloat-btn-row-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-btn-row > .csfloat-btn-row-btn.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-btn-row > .csfloat-btn-row-btn.is-active.is-cta {
background: var(--cta);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-btn-row > .csfloat-btn-row-btn-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
}
.csfloat-btn-row > .csfloat-btn-row-btn-count {
font: 500 10px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-4);
}
.csfloat-btn-row > .csfloat-btn-row-btn.is-active .csfloat-btn-row-btn-count {
color: var(--ink-3);
}
.csfloat-btn-row.is-sm > .csfloat-btn-row-btn { height: 22px; padding: 0 8px; font-size: 10px; }
.csfloat-btn-row.is-lg > .csfloat-btn-row-btn { height: 32px; padding: 0 14px; font-size: 12px; }
/* CSFloat-1:1: hover panel for badge/info reveal */
.csfloat-hover-panel {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
display: none;
flex-direction: column;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
width: 240px;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
z-index: 200;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-panel-anchor:hover .csfloat-hover-panel {
display: flex;
}
.csfloat-hover-panel::after {
content: '';
position: absolute;
top: 100%;
left: 16px;
border: 6px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-hover-panel::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 17px;
border: 5px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-hover-panel-head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.csfloat-hover-panel-icon {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-2);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
}
.csfloat-hover-panel-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-hover-panel-body {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 8px;
}
.csfloat-hover-panel-stats {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.csfloat-hover-panel-stats-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-hover-panel-stats-row > .csfloat-hover-panel-stats-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: section pill nav (rounded, full width, for switching subsections) */
.csfloat-pill-nav {
display: flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 1px;
}
.csfloat-pill-nav > .csfloat-pill-nav-link {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pill-nav > .csfloat-pill-nav-link:hover { color: var(--ink-1); }
.csfloat-pill-nav > .csfloat-pill-nav-link.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
font-weight: 600;
}
.csfloat-pill-nav > .csfloat-pill-nav-link.is-active.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-pill-nav > .csfloat-pill-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-pill-nav > .csfloat-pill-nav-link.is-active .csfloat-pill-nav-link-count {
color: var(--ink-3);
}
/* END btn row + hover panel + pill nav */
/* CSFloat-1:1: filter card stack — for grouped filter sections */
.csfloat-filter-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-filter-stack-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-filter-stack-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
cursor: pointer;
}
.csfloat-filter-stack-card-head-title {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.csfloat-filter-stack-card-head-count {
font: 500 10px/1 var(--mono);
color: var(--cta);
font-feature-settings: "tnum";
text-transform: none;
letter-spacing: 0;
background: rgba(59, 130, 246, 0.08);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-filter-stack-card-head-chev {
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-filter-stack-card.is-open .csfloat-filter-stack-card-head-chev {
transform: rotate(225deg);
}
.csfloat-filter-stack-card-body {
padding: 0 14px;
max-height: 0;
overflow: hidden;
transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
}
.csfloat-filter-stack-card.is-open .csfloat-filter-stack-card-body {
max-height: 480px;
padding: 12px 14px;
}
/* CSFloat-1:1: scroll-restore button (jump to top of list) */
.csfloat-scroll-top {
position: sticky;
bottom: 24px;
margin: 0 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 14px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--ink-2);
font: 600 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
z-index: 10;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-scroll-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.csfloat-scroll-top:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--cta);
}
.csfloat-scroll-top::before {
content: '';
width: 8px;
height: 8px;
border-left: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg) translate(2px, 2px);
}
/* CSFloat-1:1: secondary nav with active indicator */
.csfloat-second-nav {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-second-nav::-webkit-scrollbar { display: none; }
.csfloat-second-nav-link {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
border-radius: 6px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-second-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-second-nav-link.is-active {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-second-nav-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -9px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-second-nav-link-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-second-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-second-nav-link.is-active .csfloat-second-nav-link-count { color: var(--cta); }
.csfloat-second-nav-spacer { flex: 1 1 auto; }
.csfloat-second-nav-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* END filter stack + scroll top + second nav */
/* CSFloat-1:1: filter chip with x — for active filters with delete */
.csfloat-active-pill {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 5px 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-active-pill-key {
color: var(--ink-4);
font-weight: 400;
}
.csfloat-active-pill-val {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-active-pill-x {
width: 16px;
height: 16px;
border: 0;
background: var(--bg-3);
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font: 500 10px/1 var(--ui);
margin-left: 2px;
transition: all 100ms ease;
}
.csfloat-active-pill-x:hover {
background: oklch(0.66 0.18 30);
color: #fff;
}
.csfloat-active-pill.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-active-pill.is-cta .csfloat-active-pill-key { color: rgba(125, 184, 248, 0.7); }
.csfloat-active-pill.is-cta .csfloat-active-pill-val { color: var(--cta); }
.csfloat-active-pill.is-cta .csfloat-active-pill-x {
background: rgba(59, 130, 246, 0.15);
color: var(--cta);
}
.csfloat-active-pill.is-cta .csfloat-active-pill-x:hover {
background: var(--cta);
color: #fff;
}
/* CSFloat-1:1: empty filter result block */
.csfloat-no-results {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 80px 24px;
text-align: center;
}
.csfloat-no-results-icon {
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.csfloat-no-results-title {
font: 600 18px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.015em;
margin: 0;
}
.csfloat-no-results-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 420px;
}
.csfloat-no-results-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-no-results-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
/* CSFloat-1:1: ranking table for top users / top items */
.csfloat-rank-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
font: 400 13px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-rank-table thead th {
text-align: left;
padding: 12px 14px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.csfloat-rank-table thead th:not(:first-child) { text-align: right; }
.csfloat-rank-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.csfloat-rank-table tbody tr:last-child td { border-bottom: 0; }
.csfloat-rank-table tbody tr:hover { background: var(--bg-2); }
.csfloat-rank-table tbody td:not(:first-child) {
text-align: right;
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-rank-table-rank {
width: 32px;
text-align: center !important;
font: 700 13px/1 var(--mono) !important;
color: var(--ink-3) !important;
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-rank-table-rank.is-1 { color: oklch(0.84 0.18 60) !important; }
.csfloat-rank-table-rank.is-2 { color: oklch(0.84 0.04 240) !important; }
.csfloat-rank-table-rank.is-3 { color: oklch(0.62 0.16 50) !important; }
.csfloat-rank-table-name {
display: flex;
align-items: center;
gap: 8px;
text-align: left !important;
font-family: var(--ui) !important;
font-weight: 500 !important;
color: var(--ink-1) !important;
}
.csfloat-rank-table-name-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
flex: 0 0 24px;
background: var(--bg-3);
object-fit: cover;
}
.csfloat-rank-table-name-handle {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-rank-table-name-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-rank-table-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-rank-table-amt.is-up { color: oklch(0.78 0.16 152) !important; }
.csfloat-rank-table-amt.is-down { color: oklch(0.72 0.18 30) !important; }
.csfloat-rank-table-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-rank-table-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-rank-table-delta.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 720px) {
.csfloat-rank-table { font-size: 12px; }
.csfloat-rank-table thead th, .csfloat-rank-table tbody td { padding: 8px 10px; }
}
/* END active pill + no results + rank table */
/* CSFloat-1:1: settings list group — for /settings page rows */
.csfloat-settings-list {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-settings-list-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
transition: background 100ms ease;
}
.csfloat-settings-list-row:last-child { border-bottom: 0; }
.csfloat-settings-list-row:hover { background: var(--bg-2); }
.csfloat-settings-list-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-settings-list-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-settings-list-row-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-settings-list-row-msg {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-settings-list-row-action {
flex: 0 0 auto;
}
.csfloat-settings-list-row.is-disabled { opacity: 0.5; pointer-events: none; }
/* CSFloat-1:1: heading with eyebrow stack — for marketing page sections */
.csfloat-heading-stack {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.csfloat-heading-stack-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
}
.csfloat-heading-stack-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.csfloat-heading-stack-title {
font: 700 clamp(24px, 3vw, 36px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-heading-stack-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.02em;
}
.csfloat-heading-stack-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 600px;
}
.csfloat-heading-stack-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-heading-stack.is-center {
align-items: center;
text-align: center;
}
.csfloat-heading-stack.is-center .csfloat-heading-stack-title { max-width: 720px; }
.csfloat-heading-stack.is-center .csfloat-heading-stack-msg { max-width: 540px; }
/* CSFloat-1:1: link-cluster card — for footer-style link grids */
.csfloat-link-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px;
padding: 24px 0;
}
.csfloat-link-grid-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-link-grid-col-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 4px;
}
.csfloat-link-grid-col-link {
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-grid-col-link:hover { color: var(--ink-1); }
.csfloat-link-grid-col-link-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 4px;
border-radius: 3px;
}
/* END settings list + heading stack + link grid */
/* CSFloat-1:1: notification stack toast-like inline badge */
.csfloat-stack-toast {
position: fixed;
top: 76px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1100;
max-width: 420px;
width: calc(100vw - 32px);
pointer-events: none;
}
.csfloat-stack-toast > .csfloat-stack-toast-item {
pointer-events: auto;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 10px 14px;
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 10px;
align-items: center;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
font: 400 12px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
animation: csfloat-stack-toast-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stack-toast > .csfloat-stack-toast-item.is-leaving {
animation: csfloat-stack-toast-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes csfloat-stack-toast-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes csfloat-stack-toast-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-12px); }
}
.csfloat-stack-toast > .csfloat-stack-toast-item.is-success {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.4);
color: oklch(0.94 0.1 152);
}
.csfloat-stack-toast > .csfloat-stack-toast-item.is-warning {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.4);
color: oklch(0.94 0.1 80);
}
.csfloat-stack-toast > .csfloat-stack-toast-item.is-danger {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.4);
color: oklch(0.94 0.1 30);
}
.csfloat-stack-toast > .csfloat-stack-toast-item.is-info {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.4);
color: oklch(0.94 0.1 240);
}
.csfloat-stack-toast-item-icon {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: currentColor;
font: 700 12px/1 var(--ui);
}
.csfloat-stack-toast-item-msg {
flex: 1 1 auto;
font: 500 12px/1.4 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-stack-toast-item-msg > b { font-weight: 700; }
.csfloat-stack-toast-item-x {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: currentColor;
opacity: 0.6;
border-radius: 4px;
cursor: pointer;
font: 500 13px/1 var(--ui);
}
.csfloat-stack-toast-item-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) {
.csfloat-stack-toast > .csfloat-stack-toast-item { animation: none; }
}
/* CSFloat-1:1: section CTA strip (between sections) */
.csfloat-cta-strip {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 36px 24px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.csfloat-cta-strip::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 200px at 50% 100%, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-cta-strip > * { position: relative; z-index: 1; }
.csfloat-cta-strip-title {
font: 700 clamp(20px, 2.6vw, 28px) / 1.2 var(--ui);
letter-spacing: -0.025em;
color: var(--ink-1);
margin: 0;
max-width: 540px;
}
.csfloat-cta-strip-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
}
.csfloat-cta-strip-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 420px;
}
.csfloat-cta-strip-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.csfloat-cta-strip-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 4px;
}
.csfloat-cta-strip-meta > b { color: var(--ink-2); font-weight: 500; }
/* CSFloat-1:1: highlight banner for promotions */
.csfloat-promo-flag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.18));
border: 1px solid rgba(244, 114, 182, 0.4);
border-radius: 999px;
font: 700 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.92 0.12 320);
box-shadow: 0 4px 12px rgba(244, 114, 182, 0.18);
}
.csfloat-promo-flag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.84 0.18 320);
box-shadow: 0 0 6px currentColor;
}
.csfloat-promo-flag.is-pulse::before { animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
.csfloat-promo-flag.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(96, 165, 250, 0.18));
border-color: rgba(96, 165, 250, 0.4);
color: oklch(0.94 0.1 240);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
}
.csfloat-promo-flag.is-cta::before { background: var(--cta); }
.csfloat-promo-flag.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(110, 231, 183, 0.18));
border-color: rgba(110, 231, 183, 0.4);
color: oklch(0.94 0.1 152);
box-shadow: 0 4px 12px rgba(52, 211, 153, 0.18);
}
.csfloat-promo-flag.is-success::before { background: oklch(0.78 0.16 152); }
@media (prefers-reduced-motion: reduce) {
.csfloat-promo-flag.is-pulse::before { animation: none; }
}
/* END stack toast + cta strip + promo flag */
/* CSFloat-1:1: data list with avatars (for trader directory) */
.csfloat-trader-list {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-trader-list-row {
display: grid;
grid-template-columns: 40px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-trader-list-row:last-child { border-bottom: 0; }
.csfloat-trader-list-row:hover { background: var(--bg-2); }
.csfloat-trader-list-row-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
flex: 0 0 40px;
background: var(--bg-3);
object-fit: cover;
position: relative;
}
.csfloat-trader-list-row-avatar.is-online {
box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px oklch(0.62 0.16 152);
}
.csfloat-trader-list-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trader-list-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-trader-list-row-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-trader-list-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-trader-list-row-rating {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 12px/1 var(--mono);
color: oklch(0.84 0.18 60);
font-feature-settings: "tnum";
}
.csfloat-trader-list-row-volume {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-trader-list-row-volume::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-trader-list-row-action {
flex: 0 0 auto;
}
@media (max-width: 720px) {
.csfloat-trader-list-row {
grid-template-columns: 32px 1fr auto;
gap: 10px;
}
.csfloat-trader-list-row-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.csfloat-trader-list-row-rating,
.csfloat-trader-list-row-action { display: none; }
}
/* CSFloat-1:1: simple page section frame */
.csfloat-frame {
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-frame.is-tight { padding: 14px 16px; gap: 10px; }
.csfloat-frame.is-loose { padding: 32px 36px; gap: 20px; }
.csfloat-frame.is-flush { padding: 0; }
.csfloat-frame-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-frame-head.is-no-border { border-bottom: 0; padding-bottom: 0; }
.csfloat-frame-head-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.csfloat-frame-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-frame-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-frame-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.csfloat-frame-foot.is-end { justify-content: flex-end; }
.csfloat-frame-foot-info {
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-frame-foot-info-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
}
.csfloat-frame-foot-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: minimal currency badge */
.csfloat-currency-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-currency-badge-icon {
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/1 var(--mono);
color: var(--ink-2);
}
.csfloat-currency-badge.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-currency-badge.is-cta .csfloat-currency-badge-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
/* END trader list + frame + currency badge */
/* CSFloat-1:1: progress arc indicator (semicircle for level/credit progress) */
.csfloat-progress-arc {
position: relative;
width: 120px;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
.csfloat-progress-arc > svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.csfloat-progress-arc-track,
.csfloat-progress-arc-fill {
fill: none;
stroke-width: 10;
stroke-linecap: round;
}
.csfloat-progress-arc-track { stroke: var(--bg-3); }
.csfloat-progress-arc-fill {
stroke: var(--cta);
transition: stroke-dashoffset 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-arc.is-success .csfloat-progress-arc-fill { stroke: oklch(0.62 0.16 152); }
.csfloat-progress-arc.is-warning .csfloat-progress-arc-fill { stroke: oklch(0.78 0.16 80); }
.csfloat-progress-arc.is-danger .csfloat-progress-arc-fill { stroke: oklch(0.66 0.18 30); }
.csfloat-progress-arc-val {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-progress-arc-val::after {
content: '%';
font-size: 12px;
color: var(--ink-3);
margin-left: 1px;
}
.csfloat-progress-arc-label {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
white-space: nowrap;
}
.csfloat-progress-arc.is-lg {
width: 180px;
height: 100px;
}
.csfloat-progress-arc.is-lg .csfloat-progress-arc-track,
.csfloat-progress-arc.is-lg .csfloat-progress-arc-fill { stroke-width: 12; }
.csfloat-progress-arc.is-lg .csfloat-progress-arc-val { font-size: 28px; }
/* CSFloat-1:1: data summary dot row — for inline mini-stats */
.csfloat-summary-dot {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-summary-dot-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-summary-dot-item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ink-4);
flex: 0 0 6px;
}
.csfloat-summary-dot-item.is-cta::before { background: var(--cta); }
.csfloat-summary-dot-item.is-success::before { background: oklch(0.78 0.16 152); }
.csfloat-summary-dot-item.is-warning::before { background: oklch(0.78 0.16 80); }
.csfloat-summary-dot-item.is-danger::before { background: oklch(0.66 0.18 30); }
.csfloat-summary-dot-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
letter-spacing: 0;
}
/* CSFloat-1:1: profile contact tag (steam, discord, contact) */
.csfloat-profile-contact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-profile-contact:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-profile-contact-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 11px;
flex: 0 0 22px;
}
.csfloat-profile-contact.is-steam .csfloat-profile-contact-icon { background: oklch(0.32 0.04 240); color: oklch(0.92 0.02 240); }
.csfloat-profile-contact.is-discord .csfloat-profile-contact-icon { background: rgba(88, 101, 242, 0.16); color: oklch(0.78 0.18 270); }
.csfloat-profile-contact.is-twitter .csfloat-profile-contact-icon { background: rgba(29, 161, 242, 0.16); color: oklch(0.78 0.16 240); }
.csfloat-profile-contact.is-twitch .csfloat-profile-contact-icon { background: rgba(145, 70, 255, 0.16); color: oklch(0.78 0.18 290); }
.csfloat-profile-contact.is-active {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
/* END progress arc + summary dot + profile contact */
/* CSFloat-1:1: hover overlay menu — positioned overlay for context actions */
.csfloat-overlay-menu {
position: absolute;
inset: 0;
background: rgba(7, 11, 24, 0.7);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
border-radius: inherit;
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 2;
}
.csfloat-overlay-menu-anchor:hover .csfloat-overlay-menu {
display: flex;
opacity: 1;
}
.csfloat-overlay-menu-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: rgba(255, 255, 255, 0.9);
font: 600 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-overlay-menu-btn:hover {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-overlay-menu-btn.is-cta {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-overlay-menu-btn-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
}
/* CSFloat-1:1: simple highlight box (callout) */
.csfloat-h-box {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-2);
border: 1px solid var(--line);
border-left: 2px solid var(--cta);
border-radius: 0 8px 8px 0;
}
.csfloat-h-box-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
}
.csfloat-h-box-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-h-box-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-h-box.is-success { border-left-color: oklch(0.62 0.16 152); }
.csfloat-h-box.is-success .csfloat-h-box-title { color: oklch(0.92 0.1 152); }
.csfloat-h-box.is-warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-h-box.is-warning .csfloat-h-box-title { color: oklch(0.94 0.1 80); }
.csfloat-h-box.is-danger { border-left-color: oklch(0.66 0.18 30); }
.csfloat-h-box.is-danger .csfloat-h-box-title { color: oklch(0.92 0.1 30); }
.csfloat-h-box.is-info { border-left-color: var(--cta); }
.csfloat-h-box.is-info .csfloat-h-box-title { color: oklch(0.92 0.1 240); }
.csfloat-h-box-action {
align-self: flex-start;
margin-top: 4px;
}
/* CSFloat-1:1: drag indicator (vertical line for drag handles) */
.csfloat-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 10px;
height: 16px;
cursor: grab;
color: var(--ink-4);
flex: 0 0 10px;
transition: color 120ms ease;
}
.csfloat-drag-handle:hover { color: var(--ink-2); }
.csfloat-drag-handle:active { cursor: grabbing; }
.csfloat-drag-handle::before {
content: '';
width: 3px;
height: 16px;
background: currentColor;
border-radius: 2px;
box-shadow: 4px 0 0 currentColor;
opacity: 0.6;
}
/* CSFloat-1:1: simple input with leading icon */
.csfloat-input-icon {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
}
.csfloat-input-icon > input {
width: 100%;
height: 36px;
padding: 0 12px 0 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
outline: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-input-icon > input::placeholder { color: var(--ink-3); }
.csfloat-input-icon > input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-input-icon-leading {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--ink-4);
pointer-events: none;
flex: 0 0 14px;
}
.csfloat-input-icon-trailing {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-input-icon.is-with-trailing > input { padding-right: 80px; }
.csfloat-input-icon.is-sm > input { height: 30px; font-size: 12px; padding-left: 28px; padding-right: 10px; }
.csfloat-input-icon.is-sm .csfloat-input-icon-leading { left: 10px; width: 12px; height: 12px; flex: 0 0 12px; }
.csfloat-input-icon.is-lg > input { height: 44px; font-size: 14px; padding-left: 42px; padding-right: 14px; }
.csfloat-input-icon.is-lg .csfloat-input-icon-leading { left: 14px; width: 16px; height: 16px; flex: 0 0 16px; }
/* END overlay menu + h-box + drag handle + input icon */
/* CSFloat-1:1: floating tooltip card — for hover info on links */
.csfloat-tip-card {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
width: 200px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
}
.csfloat-tip-card-anchor:hover .csfloat-tip-card,
.csfloat-tip-card.is-open {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-2px);
}
.csfloat-tip-card::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-tip-card::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-tip-card-title {
font: 600 11px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-tip-card-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-tip-card-stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--line);
}
.csfloat-tip-card-stat {
display: flex;
flex-direction: column;
gap: 1px;
}
.csfloat-tip-card-stat-label {
font: 500 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-tip-card-stat-val {
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
/* CSFloat-1:1: minimal nav segmented selector */
.csfloat-segment {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
gap: 1px;
}
.csfloat-segment > .csfloat-segment-opt {
padding: 5px 12px;
background: transparent;
border: 0;
border-radius: 4px;
font: 600 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-segment > .csfloat-segment-opt:hover { color: var(--ink-1); }
.csfloat-segment > .csfloat-segment-opt.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-segment > .csfloat-segment-opt.is-active.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-segment.is-mono > .csfloat-segment-opt {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: simple emphasis stat for inline display */
.csfloat-emphasis-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-emphasis-stat-label {
color: var(--ink-4);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-emphasis-stat-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-emphasis-stat-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-emphasis-stat-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-emphasis-stat-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-emphasis-stat-val.is-cta { color: var(--cta); }
/* END tip-card + segment + emphasis-stat */
/* CSFloat-1:1: nav search bar inline (header search) */
.csfloat-h-search {
position: relative;
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 4px 4px 14px;
width: 320px;
max-width: 100%;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-h-search:hover {
background: var(--bg-3);
border-color: var(--line-2);
}
.csfloat-h-search:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
width: 380px;
}
.csfloat-h-search-icon {
width: 14px;
height: 14px;
color: var(--ink-4);
align-self: center;
flex: 0 0 14px;
}
.csfloat-h-search > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
margin-left: 8px;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
min-width: 0;
}
.csfloat-h-search > input::placeholder { color: var(--ink-3); }
.csfloat-h-search-btn {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
background: var(--cta);
color: #fff;
border: 0;
border-radius: 999px;
font: 600 11px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex: 0 0 auto;
}
.csfloat-h-search-btn:hover {
background: oklch(0.66 0.18 240);
}
.csfloat-h-search-kbd {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 6px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
flex: 0 0 auto;
align-self: center;
}
/* CSFloat-1:1: hero benefit bullets */
.csfloat-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
padding: 18px 0;
}
.csfloat-benefits-tile {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-benefits-tile:hover { border-color: var(--line-2); }
.csfloat-benefits-tile-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
margin-top: 1px;
}
.csfloat-benefits-tile.is-success .csfloat-benefits-tile-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-benefits-tile-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-benefits-tile-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-benefits-tile-msg {
font: 400 11px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
/* CSFloat-1:1: trust pill (small badge for verified/secure indicators) */
.csfloat-trust-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-trust-pill-icon {
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 9px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-trust-pill.is-verified {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-trust-pill.is-verified .csfloat-trust-pill-icon {
background: var(--cta);
color: #fff;
}
.csfloat-trust-pill.is-verified .csfloat-trust-pill-icon::after {
content: '';
width: 5px;
height: 3px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
}
.csfloat-trust-pill.is-secure {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-trust-pill.is-secure .csfloat-trust-pill-icon {
background: oklch(0.62 0.16 152);
color: var(--bg);
}
.csfloat-trust-pill.is-secure .csfloat-trust-pill-icon::after {
content: '';
width: 8px;
height: 7px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 4px 4px 0 0;
margin-bottom: -2px;
}
/* END h-search + benefits + trust-pill */
/* CSFloat-1:1: section divider with collapsible action */
.csfloat-section-divider {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin: 8px 0;
}
.csfloat-section-divider::before,
.csfloat-section-divider::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-section-divider-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-3);
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-section-divider-toggle:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-section-divider-toggle-chev {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-section-divider.is-open .csfloat-section-divider-toggle-chev {
transform: rotate(225deg);
}
/* CSFloat-1:1: insight progress chip — for goal trackers */
.csfloat-progress-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-progress-chip-bar {
width: 36px;
height: 4px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
flex: 0 0 36px;
}
.csfloat-progress-chip-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-progress-chip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
letter-spacing: 0;
}
.csfloat-progress-chip.is-success .csfloat-progress-chip-bar-fill { background: oklch(0.62 0.16 152); }
.csfloat-progress-chip.is-warning .csfloat-progress-chip-bar-fill { background: oklch(0.78 0.16 80); }
.csfloat-progress-chip.is-danger .csfloat-progress-chip-bar-fill { background: oklch(0.66 0.18 30); }
.csfloat-progress-chip.is-success { color: oklch(0.78 0.16 152); }
.csfloat-progress-chip.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-progress-chip.is-danger { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: trade signal pill (live up/down badge for trend indicators) */
.csfloat-signal {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 700 10px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.04em;
color: var(--ink-2);
}
.csfloat-signal::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-signal.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-signal.is-up::before {
border-bottom: 4px solid currentColor;
}
.csfloat-signal.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-signal.is-down::before {
border-top: 4px solid currentColor;
}
.csfloat-signal.is-flat::before {
width: 6px;
height: 1.5px;
background: currentColor;
border: 0;
}
.csfloat-signal-pct {
font: 700 10px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
color: currentColor;
}
.csfloat-signal.is-pulse { animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.csfloat-signal.is-pulse { animation: none; }
}
/* END section-divider + progress-chip + signal */
/* CSFloat-1:1: hover-grow card (subtle scale on hover for grids) */
.csfloat-grow-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-grow-card:hover {
border-color: var(--cta);
transform: translateY(-3px) scale(1.01);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(59, 130, 246, 0.15);
}
.csfloat-grow-card-img {
position: relative;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
overflow: hidden;
}
.csfloat-grow-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-grow-card:hover .csfloat-grow-card-img > img {
transform: scale(1.08);
}
.csfloat-grow-card-glow {
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 50% 100%, rgba(59, 130, 246, 0.08), transparent 60%);
opacity: 0;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.csfloat-grow-card:hover .csfloat-grow-card-glow { opacity: 1; }
.csfloat-grow-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-grow-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-grow-card-meta {
display: inline-flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font: 400 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-grow-card-price {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-grow-card-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* CSFloat-1:1: avatar overlap row (small visual count of avatars) */
.csfloat-avatar-row {
display: inline-flex;
align-items: center;
flex-direction: row-reverse;
justify-content: flex-end;
}
.csfloat-avatar-row > .csfloat-avatar-row-img {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
margin-left: -8px;
object-fit: cover;
position: relative;
}
.csfloat-avatar-row > .csfloat-avatar-row-img:last-child { margin-left: 0; }
.csfloat-avatar-row > .csfloat-avatar-row-more {
margin-left: -8px;
height: 24px;
min-width: 24px;
padding: 0 6px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--bg);
font: 600 10px/1 var(--mono);
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-feature-settings: "tnum";
}
.csfloat-avatar-row.is-sm > .csfloat-avatar-row-img { width: 16px; height: 16px; }
.csfloat-avatar-row.is-sm > .csfloat-avatar-row-more { height: 16px; min-width: 16px; font-size: 8px; padding: 0 4px; }
.csfloat-avatar-row.is-lg > .csfloat-avatar-row-img { width: 36px; height: 36px; }
.csfloat-avatar-row.is-lg > .csfloat-avatar-row-more { height: 36px; min-width: 36px; font-size: 11px; padding: 0 8px; }
/* CSFloat-1:1: simple-link hover with arrow indicator */
.csfloat-arrow-link {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-arrow-link:hover {
color: oklch(0.84 0.18 240);
}
.csfloat-arrow-link::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-arrow-link:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
.csfloat-arrow-link.is-back::after { display: none; }
.csfloat-arrow-link.is-back::before {
content: '';
width: 6px;
height: 6px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-arrow-link.is-back:hover::before {
transform: rotate(45deg) translate(-2px, 2px);
}
.csfloat-arrow-link.is-muted { color: var(--ink-3); }
.csfloat-arrow-link.is-muted:hover { color: var(--ink-1); }
/* END grow-card + avatar-row + arrow-link */
/* CSFloat-1:1: chip with mini chart inline */
.csfloat-mini-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-mini-chip-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 14px;
}
.csfloat-mini-chip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
letter-spacing: 0;
}
.csfloat-mini-chip-spark {
width: 36px;
height: 14px;
flex: 0 0 36px;
}
.csfloat-mini-chip-spark > svg { width: 100%; height: 100%; display: block; }
.csfloat-mini-chip-spark .csfloat-mini-chip-spark-line {
fill: none;
stroke: var(--cta);
stroke-width: 1.5;
stroke-linecap: round;
}
.csfloat-mini-chip.is-up .csfloat-mini-chip-spark-line { stroke: oklch(0.78 0.16 152); }
.csfloat-mini-chip.is-down .csfloat-mini-chip-spark-line { stroke: oklch(0.72 0.18 30); }
.csfloat-mini-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-mini-chip.is-cta .csfloat-mini-chip-mono { color: var(--cta); }
/* CSFloat-1:1: storefront promo card */
.csfloat-promo-card {
display: grid;
grid-template-columns: 1fr 120px;
gap: 16px;
align-items: center;
padding: 16px 18px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 70%);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-promo-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-promo-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 100% 50%, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-promo-card-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-promo-card-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-start;
}
.csfloat-promo-card-eyebrow::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.csfloat-promo-card-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-promo-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-promo-card-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 4px;
}
.csfloat-promo-card-art {
position: relative;
z-index: 1;
width: 120px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 120px;
}
.csfloat-promo-card-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 16px rgba(59, 130, 246, 0.2));
}
@media (max-width: 540px) {
.csfloat-promo-card { grid-template-columns: 1fr; padding: 14px 16px; }
.csfloat-promo-card-art { display: none; }
}
/* CSFloat-1:1: filter group accordion (compact) */
.csfloat-acc-compact {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-acc-compact-row {
border-bottom: 1px solid var(--line);
padding: 0;
}
.csfloat-acc-compact-row:last-child { border-bottom: 0; }
.csfloat-acc-compact-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 0;
cursor: pointer;
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: transparent;
border: 0;
width: 100%;
text-align: left;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-acc-compact-head:hover { color: var(--ink-1); }
.csfloat-acc-compact-row.is-open .csfloat-acc-compact-head { color: var(--ink-1); }
.csfloat-acc-compact-row.is-open .csfloat-acc-compact-head-chev {
transform: rotate(225deg);
}
.csfloat-acc-compact-body {
max-height: 0;
overflow: hidden;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
}
.csfloat-acc-compact-row.is-open .csfloat-acc-compact-body {
max-height: 600px;
padding: 0 0 12px;
}
/* END mini-chip + promo-card + acc-compact */
/* CSFloat-1:1: search bar with filter dropdown beside */
.csfloat-search-combo {
display: flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-search-combo:focus-within {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-search-combo-cat {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px 0 14px;
background: var(--bg-3);
border: 0;
border-right: 1px solid var(--line);
font: 600 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
height: 38px;
appearance: none;
}
.csfloat-search-combo-cat:hover { color: var(--ink-1); }
.csfloat-search-combo-cat::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg);
}
.csfloat-search-combo-icon {
display: inline-flex;
align-items: center;
padding: 0 0 0 12px;
color: var(--ink-4);
flex: 0 0 auto;
}
.csfloat-search-combo > input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
height: 38px;
padding: 0 12px;
font: 400 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
min-width: 0;
}
.csfloat-search-combo > input::placeholder { color: var(--ink-3); }
.csfloat-search-combo-btn {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 18px;
background: var(--cta);
color: #fff;
border: 0;
font: 600 12px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
flex: 0 0 auto;
}
.csfloat-search-combo-btn:hover { background: oklch(0.66 0.18 240); }
/* CSFloat-1:1: thumbnail strip horizontal scroll */
.csfloat-thumb-strip {
display: flex;
gap: 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 4px;
padding: 4px 0 8px;
scrollbar-width: none;
}
.csfloat-thumb-strip::-webkit-scrollbar { display: none; }
.csfloat-thumb-strip > .csfloat-thumb-strip-thumb {
scroll-snap-align: start;
flex: 0 0 56px;
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1.5px solid var(--line);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.csfloat-thumb-strip > .csfloat-thumb-strip-thumb:hover {
border-color: var(--line-2);
}
.csfloat-thumb-strip > .csfloat-thumb-strip-thumb.is-active {
border-color: var(--cta);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-thumb-strip > .csfloat-thumb-strip-thumb > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-thumb-strip > .csfloat-thumb-strip-thumb-overlay {
position: absolute;
bottom: 2px;
right: 2px;
font: 600 8px/1 var(--mono);
color: rgba(255, 255, 255, 0.85);
background: rgba(7, 11, 24, 0.7);
padding: 1px 3px;
border-radius: 2px;
}
.csfloat-thumb-strip.is-lg > .csfloat-thumb-strip-thumb {
flex: 0 0 80px;
width: 80px;
height: 80px;
}
.csfloat-thumb-strip.is-sm > .csfloat-thumb-strip-thumb {
flex: 0 0 40px;
width: 40px;
height: 40px;
padding: 3px;
}
/* CSFloat-1:1: card with side bar (split content) */
.csfloat-side-card {
display: grid;
grid-template-columns: 4px 1fr;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-side-card:hover { border-color: var(--line-2); }
.csfloat-side-card-bar {
background: var(--cta);
}
.csfloat-side-card.is-success .csfloat-side-card-bar { background: oklch(0.62 0.16 152); }
.csfloat-side-card.is-warning .csfloat-side-card-bar { background: oklch(0.78 0.16 80); }
.csfloat-side-card.is-danger .csfloat-side-card-bar { background: oklch(0.66 0.18 30); }
.csfloat-side-card.is-rare .csfloat-side-card-bar { background: oklch(0.62 0.27 330); }
.csfloat-side-card-body {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-side-card-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-side-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-side-card-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
margin-top: 4px;
}
.csfloat-side-card-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-side-card-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
/* END search-combo + thumb-strip + side-card */
/* CSFloat-1:1: simple metric inline tile */
.csfloat-metric-inline {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-metric-inline-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-metric-inline-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-metric-inline-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-metric-inline-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-metric-inline-val.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: progress dot stepper (small inline progress) */
.csfloat-dot-stepper {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-dot-stepper > .csfloat-dot-stepper-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-dot-stepper > .csfloat-dot-stepper-dot.is-done {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
}
.csfloat-dot-stepper > .csfloat-dot-stepper-dot.is-active {
background: var(--cta);
border-color: var(--cta);
width: 18px;
}
.csfloat-dot-stepper.is-lg > .csfloat-dot-stepper-dot {
width: 8px;
height: 8px;
}
.csfloat-dot-stepper.is-lg > .csfloat-dot-stepper-dot.is-active {
width: 22px;
}
.csfloat-dot-stepper.is-line > .csfloat-dot-stepper-dot {
width: 16px;
height: 3px;
border-radius: 2px;
}
.csfloat-dot-stepper.is-line > .csfloat-dot-stepper-dot.is-active {
width: 28px;
}
/* CSFloat-1:1: cart row tiny — for inline mini-cart preview */
.csfloat-cart-tiny {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 8px;
align-items: center;
padding: 6px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
}
.csfloat-cart-tiny-img {
width: 32px;
height: 32px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-cart-tiny-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-cart-tiny-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-cart-tiny-name {
font: 500 11px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-cart-tiny-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-cart-tiny-price {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-cart-tiny-price::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-cart-tiny-x {
width: 16px;
height: 16px;
border: 0;
background: transparent;
color: var(--ink-4);
border-radius: 4px;
cursor: pointer;
font: 500 12px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-cart-tiny-x:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
/* END metric-inline + dot-stepper + cart-tiny */
/* CSFloat-1:1: account widget tile (avatar + balance + actions) */
.csfloat-acct-widget {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-acct-widget-head {
display: flex;
align-items: center;
gap: 10px;
}
.csfloat-acct-widget-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--bg-3);
border: 2px solid var(--cta);
flex: 0 0 40px;
object-fit: cover;
}
.csfloat-acct-widget-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-acct-widget-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-acct-widget-handle {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-acct-widget-bal {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 12px;
border-top: 1px dashed var(--line);
}
.csfloat-acct-widget-bal-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-acct-widget-actions {
display: flex;
gap: 6px;
}
.csfloat-acct-widget-actions > * { flex: 1 1 auto; }
/* CSFloat-1:1: dropdown nav-link with description */
.csfloat-nav-rich {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 100ms ease;
}
.csfloat-nav-rich:hover { background: var(--bg-2); }
.csfloat-nav-rich-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
font-size: 12px;
}
.csfloat-nav-rich:hover .csfloat-nav-rich-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-nav-rich-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-nav-rich-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-nav-rich-desc {
font: 400 10px/1.3 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
/* CSFloat-1:1: page badge group (tags shown next to title) */
.csfloat-page-badges {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-page-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-page-badge.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-page-badge.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
color: oklch(0.78 0.16 152);
}
.csfloat-page-badge.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.25);
color: oklch(0.84 0.16 80);
}
.csfloat-page-badge.is-danger {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.25);
color: oklch(0.72 0.18 30);
}
.csfloat-page-badge-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
/* END acct-widget + nav-rich + page-badges */
/* CSFloat-1:1: simple stack of related links / explore tiles */
.csfloat-explore-stack {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-explore-link {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-explore-link:hover {
background: var(--bg-2);
border-color: var(--line-2);
transform: translateX(2px);
}
.csfloat-explore-link-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
}
.csfloat-explore-link:hover .csfloat-explore-link-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-explore-link-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-explore-link-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-explore-link-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-explore-link-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-explore-link-arrow {
width: 16px;
height: 16px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-explore-link-arrow::before {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-explore-link:hover .csfloat-explore-link-arrow {
color: var(--cta);
transform: translateX(2px);
}
/* CSFloat-1:1: header brand mark with tagline */
.csfloat-h-brand {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.csfloat-h-brand-mark {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 14px/1 var(--mono);
letter-spacing: -0.05em;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
flex: 0 0 32px;
}
.csfloat-h-brand-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.csfloat-h-brand-name {
font: 700 14px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.015em;
}
.csfloat-h-brand-tag {
font: 600 8px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-h-brand:hover .csfloat-h-brand-name {
color: var(--cta);
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 540px) {
.csfloat-h-brand-text { display: none; }
}
/* CSFloat-1:1: page lead block (large h1 + intro) */
.csfloat-page-lead {
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px 0 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.csfloat-page-lead-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
}
.csfloat-page-lead-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
}
.csfloat-page-lead-title {
font: 700 clamp(24px, 3.6vw, 36px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-page-lead-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.02em;
}
.csfloat-page-lead-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 680px;
}
.csfloat-page-lead-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.csfloat-page-lead-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 8px;
}
.csfloat-page-lead-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-page-lead-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
}
/* END explore-stack + h-brand + page-lead */
/* CSFloat-1:1: trade rate scrub bar — vertical comparison */
.csfloat-rate-scrub {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
}
.csfloat-rate-scrub-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-rate-scrub-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-rate-scrub-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-rate-scrub-track {
position: relative;
height: 6px;
background: var(--bg-3);
border-radius: 999px;
}
.csfloat-rate-scrub-track-bid {
position: absolute;
height: 100%;
background: oklch(0.62 0.16 152);
border-radius: 999px 0 0 999px;
}
.csfloat-rate-scrub-track-ask {
position: absolute;
height: 100%;
right: 0;
background: oklch(0.66 0.18 30);
border-radius: 0 999px 999px 0;
}
.csfloat-rate-scrub-track-mid {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--ink-1);
box-shadow: 0 0 0 1px var(--bg);
}
.csfloat-rate-scrub-track-mid::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
margin-left: -4px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--ink-1);
}
.csfloat-rate-scrub-bounds {
display: flex;
justify-content: space-between;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-rate-scrub-bounds-bid { color: oklch(0.78 0.16 152); }
.csfloat-rate-scrub-bounds-ask { color: oklch(0.72 0.18 30); }
.csfloat-rate-scrub-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-rate-scrub-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: snapshot deltacard for compact stat overview */
.csfloat-snap-delta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
min-width: 140px;
}
.csfloat-snap-delta-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-snap-delta-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-snap-delta-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-snap-delta-comp {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-snap-delta-comp.is-up { color: oklch(0.78 0.16 152); }
.csfloat-snap-delta-comp.is-down { color: oklch(0.72 0.18 30); }
.csfloat-snap-delta-comp::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-snap-delta-comp.is-up::before { border-bottom: 4px solid currentColor; }
.csfloat-snap-delta-comp.is-down::before { border-top: 4px solid currentColor; }
.csfloat-snap-delta-comp-period {
color: var(--ink-4);
font-family: var(--ui);
font-weight: 400;
font-size: 10px;
}
/* END rate-scrub + snap-delta */
/* CSFloat-1:1: empty page splash for new sections */
.csfloat-splash-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 80px 32px;
background: linear-gradient(135deg, var(--bg-1), var(--bg) 60%);
border: 1px dashed var(--line-2);
border-radius: 14px;
text-align: center;
}
.csfloat-splash-empty-icon {
width: 72px;
height: 72px;
border-radius: 16px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
position: relative;
}
.csfloat-splash-empty-icon::after {
content: '';
position: absolute;
inset: -12px;
border: 1px dashed var(--line);
border-radius: 24px;
opacity: 0.5;
}
.csfloat-splash-empty-title {
font: 700 20px/1.3 var(--ui);
letter-spacing: -0.02em;
color: var(--ink-1);
margin: 0;
}
.csfloat-splash-empty-msg {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 420px;
}
.csfloat-splash-empty-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-splash-empty-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
.csfloat-splash-empty-help {
font: 400 11px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin: 4px 0 0;
max-width: 360px;
}
.csfloat-splash-empty-help > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-splash-empty-help > a:hover { border-color: var(--cta); }
/* CSFloat-1:1: confirm dialog with input */
.csfloat-confirm-input {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 22px;
}
.csfloat-confirm-input-head {
display: flex;
align-items: center;
gap: 12px;
}
.csfloat-confirm-input-icon {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(248, 113, 113, 0.16);
border: 1px solid rgba(248, 113, 113, 0.4);
color: oklch(0.72 0.18 30);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 18px/1 var(--ui);
flex: 0 0 36px;
}
.csfloat-confirm-input-icon.is-warning {
background: rgba(251, 191, 36, 0.16);
border-color: rgba(251, 191, 36, 0.4);
color: oklch(0.84 0.16 80);
}
.csfloat-confirm-input-icon.is-cta {
background: rgba(59, 130, 246, 0.16);
border-color: rgba(59, 130, 246, 0.4);
color: var(--cta);
}
.csfloat-confirm-input-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-confirm-input-title {
font: 700 15px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-confirm-input-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-confirm-input-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-confirm-input-prompt {
font: 500 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 4px 0 0;
}
.csfloat-confirm-input-prompt > .csfloat-confirm-input-prompt-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
background: var(--bg-2);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: 3px;
color: oklch(0.72 0.18 30);
font-weight: 600;
letter-spacing: 0;
}
.csfloat-confirm-input-foot {
display: flex;
justify-content: flex-end;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
/* CSFloat-1:1: simple promo strip with title + cta */
.csfloat-promo-strip-2 {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 12px 16px;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent 70%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-left: 3px solid var(--cta);
border-radius: 0 10px 10px 0;
position: relative;
}
.csfloat-promo-strip-2-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-promo-strip-2-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-promo-strip-2-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-promo-strip-2-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-promo-strip-2-action {
flex: 0 0 auto;
}
.csfloat-promo-strip-2.is-success {
background: linear-gradient(90deg, rgba(52, 211, 153, 0.06), transparent 70%);
border-color: rgba(52, 211, 153, 0.2);
border-left-color: oklch(0.62 0.16 152);
}
.csfloat-promo-strip-2.is-warning {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.06), transparent 70%);
border-color: rgba(251, 191, 36, 0.2);
border-left-color: oklch(0.78 0.16 80);
}
@media (max-width: 540px) {
.csfloat-promo-strip-2 {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* END splash empty + confirm input + promo strip 2 */
/* CSFloat-1:1: hover-reveal cart preview popover */
.csfloat-cart-preview {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 320px;
max-width: calc(100vw - 32px);
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 200;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cart-preview.is-open { display: flex; }
.csfloat-cart-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.csfloat-cart-preview-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-cart-preview-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-cart-preview-list {
display: flex;
flex-direction: column;
gap: 0;
max-height: 280px;
overflow-y: auto;
}
.csfloat-cart-preview-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-cart-preview-row:last-child { border-bottom: 0; }
.csfloat-cart-preview-row:hover { background: var(--bg-2); }
.csfloat-cart-preview-row-img {
width: 36px;
height: 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-cart-preview-row-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-cart-preview-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-cart-preview-row-name {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-cart-preview-row-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-cart-preview-row-price {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-cart-preview-row-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-cart-preview-empty {
padding: 36px 16px;
text-align: center;
font: 400 12px/1.4 var(--ui);
color: var(--ink-3);
}
.csfloat-cart-preview-foot {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 14px;
background: var(--bg);
border-top: 1px solid var(--line);
}
.csfloat-cart-preview-foot-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-cart-preview-foot-total-label {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-cart-preview-foot-total-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-cart-preview-foot-total-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-cart-preview-foot-actions {
display: flex;
gap: 6px;
}
.csfloat-cart-preview-foot-actions > * { flex: 1 1 auto; }
/* CSFloat-1:1: profile contact row block */
.csfloat-contact-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-contact-row-icon {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 11px;
flex: 0 0 24px;
}
.csfloat-contact-row-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-contact-row-label {
font: 400 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-contact-row-val {
font: 500 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-contact-row-val.is-ui {
font-family: var(--ui);
font-weight: 500;
letter-spacing: -0.005em;
}
.csfloat-contact-row-action {
flex: 0 0 auto;
}
/* END cart preview + contact row */
/* CSFloat-1:1: section nav with horizontal scrollable links */
.csfloat-h-nav {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 0;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.csfloat-h-nav::-webkit-scrollbar { display: none; }
.csfloat-h-nav-link {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 6px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-h-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-h-nav-link.is-active {
color: var(--cta);
}
.csfloat-h-nav-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -7px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.csfloat-h-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-h-nav-link.is-active .csfloat-h-nav-link-count { color: var(--cta); }
.csfloat-h-nav-link-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.12);
padding: 2px 5px;
border-radius: 3px;
margin-left: 2px;
}
.csfloat-h-nav-spacer { flex: 1 1 auto; }
/* CSFloat-1:1: filter clear button */
.csfloat-clear-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-clear-btn:hover {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-clear-btn::before {
content: '×';
font: 500 14px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-clear-btn:hover::before { color: oklch(0.72 0.18 30); }
.csfloat-clear-btn-count {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
/* CSFloat-1:1: profile contact horizontal pill */
.csfloat-h-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0;
}
.csfloat-h-contact-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-h-contact-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-h-contact-pill-icon {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
font-size: 9px;
flex: 0 0 18px;
}
.csfloat-h-contact-pill.is-steam .csfloat-h-contact-pill-icon { background: oklch(0.32 0.04 240); border-color: oklch(0.42 0.04 240); color: oklch(0.92 0.04 240); }
.csfloat-h-contact-pill.is-discord .csfloat-h-contact-pill-icon { background: rgba(88, 101, 242, 0.18); border-color: rgba(88, 101, 242, 0.3); color: oklch(0.84 0.18 270); }
.csfloat-h-contact-pill.is-twitter .csfloat-h-contact-pill-icon { background: rgba(29, 161, 242, 0.18); border-color: rgba(29, 161, 242, 0.3); color: oklch(0.84 0.16 240); }
.csfloat-h-contact-pill.is-twitch .csfloat-h-contact-pill-icon { background: rgba(145, 70, 255, 0.18); border-color: rgba(145, 70, 255, 0.3); color: oklch(0.84 0.18 290); }
/* END h-nav + clear-btn + h-contact */
/* CSFloat-1:1: marketing block with side image */
.csfloat-marketing-block {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: center;
padding: 48px 0;
}
.csfloat-marketing-block.is-reverse { grid-template-columns: 1fr 1.2fr; }
.csfloat-marketing-block.is-reverse .csfloat-marketing-block-info { order: 2; }
.csfloat-marketing-block.is-reverse .csfloat-marketing-block-art { order: 1; }
.csfloat-marketing-block-info {
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-marketing-block-eyebrow {
font: 700 11px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
}
.csfloat-marketing-block-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: currentColor;
}
.csfloat-marketing-block-title {
font: 700 clamp(28px, 4vw, 40px) / 1.15 var(--ui);
letter-spacing: -0.03em;
color: var(--ink-1);
margin: 0;
text-wrap: balance;
}
.csfloat-marketing-block-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
letter-spacing: -0.02em;
}
.csfloat-marketing-block-msg {
font: 400 14px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-marketing-block-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-marketing-block-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}
.csfloat-marketing-block-feature {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: flex-start;
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-marketing-block-feature::before {
content: '';
width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.16);
color: oklch(0.78 0.16 152);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
margin-top: 1px;
background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
background-size: 8px 1.5px, 1.5px 4px;
background-position: 25% 65%, 35% 60%;
background-repeat: no-repeat;
}
.csfloat-marketing-block-feature > b { color: var(--ink-1); font-weight: 600; }
.csfloat-marketing-block-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.csfloat-marketing-block-art {
position: relative;
aspect-ratio: 1.2;
background: linear-gradient(135deg, var(--bg-2), var(--bg) 70%);
border: 1px solid var(--line);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow: hidden;
}
.csfloat-marketing-block-art::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 300px at 50% 100%, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-marketing-block-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 32px rgba(59, 130, 246, 0.18));
}
@media (max-width: 1100px) {
.csfloat-marketing-block, .csfloat-marketing-block.is-reverse {
grid-template-columns: 1fr;
gap: 24px;
padding: 32px 0;
}
.csfloat-marketing-block.is-reverse .csfloat-marketing-block-info { order: 0; }
.csfloat-marketing-block.is-reverse .csfloat-marketing-block-art { order: 0; }
}
/* CSFloat-1:1: simple summary chip */
.csfloat-sum-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-sum-chip-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-sum-chip-val {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-sum-chip-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-sum-chip-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-sum-chip-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-sum-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
/* END marketing-block + sum-chip */
/* CSFloat-1:1: chunked nav with grouped sections */
.csfloat-chunk-nav {
display: flex;
flex-direction: column;
gap: 0;
}
.csfloat-chunk-nav-section {
margin-bottom: 12px;
}
.csfloat-chunk-nav-section:last-child { margin-bottom: 0; }
.csfloat-chunk-nav-section-title {
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 8px 4px;
margin: 0;
}
.csfloat-chunk-nav-link {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
position: relative;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-chunk-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-chunk-nav-link.is-active {
background: rgba(59, 130, 246, 0.06);
color: var(--cta);
}
.csfloat-chunk-nav-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-chunk-nav-link-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: currentColor;
opacity: 0.85;
}
.csfloat-chunk-nav-link-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-chunk-nav-link-trail {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-chunk-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-chunk-nav-link.is-active .csfloat-chunk-nav-link-count { color: var(--cta); }
.csfloat-chunk-nav-link-tag {
font: 700 8px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.12);
padding: 1px 4px;
border-radius: 2px;
}
/* CSFloat-1:1: stat band — full-width stat strip */
.csfloat-stat-band {
display: flex;
align-items: stretch;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-stat-band-cell {
flex: 1 1 0;
padding: 16px 20px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
transition: background 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-band-cell:hover { background: var(--bg-2); }
.csfloat-stat-band-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-band-cell-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 4px;
}
.csfloat-stat-band-cell-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-band-cell-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-stat-band-cell-delta {
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-stat-band-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-band-cell-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-band-cell-spark {
position: absolute;
top: 16px;
right: 16px;
width: 60px;
height: 24px;
opacity: 0.7;
}
.csfloat-stat-band-cell-spark > svg { width: 100%; height: 100%; }
.csfloat-stat-band-cell.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), var(--bg-1));
}
.csfloat-stat-band-cell.is-cta .csfloat-stat-band-cell-label { color: var(--cta); }
@media (max-width: 720px) {
.csfloat-stat-band {
flex-wrap: wrap;
}
.csfloat-stat-band-cell {
flex: 0 0 50%;
border-bottom: 1px solid var(--line);
}
.csfloat-stat-band-cell:nth-child(2n) { border-right: 0; }
.csfloat-stat-band-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* CSFloat-1:1: corner ribbon for product cards (diagonal banner) */
.csfloat-corner-banner {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.csfloat-corner-banner-text {
position: absolute;
top: 18px;
left: -22px;
width: 110px;
text-align: center;
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: var(--cta);
padding: 4px 0;
transform: rotate(-45deg);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.35);
}
.csfloat-corner-banner.is-success .csfloat-corner-banner-text {
background: oklch(0.62 0.16 152);
box-shadow: 0 4px 8px rgba(52, 211, 153, 0.35);
}
.csfloat-corner-banner.is-warning .csfloat-corner-banner-text {
background: oklch(0.78 0.16 80);
color: var(--bg);
}
.csfloat-corner-banner.is-danger .csfloat-corner-banner-text {
background: oklch(0.66 0.18 30);
}
.csfloat-corner-banner.is-rare .csfloat-corner-banner-text {
background: linear-gradient(135deg, oklch(0.62 0.27 330), oklch(0.62 0.18 290));
}
/* END chunk-nav + stat-band + corner-banner */
/* CSFloat-1:1: comparison column block — for showing differences inline */
.csfloat-cmp-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 14px 0;
}
.csfloat-cmp-col-side {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
}
.csfloat-cmp-col-side.is-current {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
}
.csfloat-cmp-col-side-tag {
position: absolute;
top: -10px;
left: 14px;
padding: 3px 8px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 999px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-cmp-col-side.is-current .csfloat-cmp-col-side-tag {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-cmp-col-side-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 4px 0 4px;
}
.csfloat-cmp-col-side-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.csfloat-cmp-col-side-list-item {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
font: 400 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-cmp-col-side-list-item::before {
content: '';
width: 14px;
height: 8px;
border: 1.5px solid oklch(0.78 0.16 152);
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
margin-top: 4px;
}
.csfloat-cmp-col-side-list-item.is-disabled {
color: var(--ink-4);
}
.csfloat-cmp-col-side-list-item.is-disabled::before {
border-color: var(--ink-4);
opacity: 0.4;
}
.csfloat-cmp-col-side-list-item.is-cross::before {
content: '×';
width: auto;
height: auto;
color: oklch(0.72 0.18 30);
border: 0;
font: 700 14px/1 var(--ui);
transform: none;
margin-top: 0;
}
@media (max-width: 540px) {
.csfloat-cmp-col { grid-template-columns: 1fr; gap: 18px; }
}
/* CSFloat-1:1: hover-card spotlight — for skin showcase tooltips */
.csfloat-hover-spot {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px;
width: 280px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
}
.csfloat-hover-spot-anchor:hover .csfloat-hover-spot {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-2px);
}
.csfloat-hover-spot::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-hover-spot::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
margin-left: -7px;
border: 7px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-hover-spot-img {
width: 100%;
aspect-ratio: 1.6;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.csfloat-hover-spot-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.csfloat-hover-spot-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-hover-spot-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-hover-spot-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
}
.csfloat-hover-spot-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-hover-spot-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hover-spot-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
/* END cmp-col + hover-spot */
/* CSFloat-1:1: hero stat with comparison side-by-side */
.csfloat-hero-cmp {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
padding: 24px 28px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 70%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.csfloat-hero-cmp::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 60%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.csfloat-hero-cmp-side {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
align-items: center;
}
.csfloat-hero-cmp-side-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-hero-cmp-side-val {
font: 700 28px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 4px;
}
.csfloat-hero-cmp-side-val.is-currency::before {
content: '$';
font-size: 15px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-hero-cmp-side-val.is-cta { color: var(--cta); }
.csfloat-hero-cmp-side-val.is-success { color: oklch(0.78 0.16 152); }
.csfloat-hero-cmp-side-val.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-hero-cmp-side-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 2px;
}
.csfloat-hero-cmp-vs {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
font: 700 10px/1 var(--ui);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-hero-cmp-vs.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
@media (max-width: 540px) {
.csfloat-hero-cmp { grid-template-columns: 1fr; gap: 14px; }
.csfloat-hero-cmp-vs { transform: rotate(90deg); }
}
/* CSFloat-1:1: cart drawer panel */
.csfloat-cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 100vw;
background: var(--bg-1);
border-left: 1px solid var(--line);
box-shadow: -16px 0 48px rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
z-index: 901;
transform: translateX(100%);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cart-drawer.is-open { transform: translateX(0); }
.csfloat-cart-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.csfloat-cart-drawer-head-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-cart-drawer-head-count {
font: 600 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
background: var(--bg-2);
padding: 3px 8px;
border-radius: 999px;
}
.csfloat-cart-drawer-head-close {
width: 28px;
height: 28px;
border: 0;
background: var(--bg-2);
border-radius: 999px;
color: var(--ink-3);
cursor: pointer;
font: 500 16px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-cart-drawer-head-close:hover {
background: var(--bg-3);
color: var(--ink-1);
transform: rotate(90deg);
}
.csfloat-cart-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 0;
}
.csfloat-cart-drawer-body.is-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 56px 24px;
text-align: center;
}
.csfloat-cart-drawer-empty-icon {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-4);
font-size: 22px;
}
.csfloat-cart-drawer-empty-msg {
font: 600 14px/1.3 var(--ui);
color: var(--ink-2);
margin: 0 0 4px;
}
.csfloat-cart-drawer-empty-sub {
font: 400 12px/1.5 var(--ui);
color: var(--ink-4);
margin: 0;
max-width: 240px;
}
.csfloat-cart-drawer-foot {
flex: 0 0 auto;
padding: 14px 20px 18px;
border-top: 1px solid var(--line);
background: var(--bg);
display: flex;
flex-direction: column;
gap: 12px;
}
.csfloat-cart-drawer-foot-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-cart-drawer-foot-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 13px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cart-drawer-foot-row > .csfloat-cart-drawer-foot-row-val {
font: 500 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-cart-drawer-foot-row.is-discount > .csfloat-cart-drawer-foot-row-val { color: oklch(0.78 0.16 152); }
.csfloat-cart-drawer-foot-row.is-fee > .csfloat-cart-drawer-foot-row-val { color: oklch(0.84 0.16 80); }
.csfloat-cart-drawer-foot-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.csfloat-cart-drawer-foot-total-label {
font: 700 14px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-cart-drawer-foot-total-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-cart-drawer-foot-total-val::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-cart-drawer-foot-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 400 10px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-cart-drawer-foot-trust-icon {
width: 12px;
height: 12px;
color: oklch(0.78 0.16 152);
}
/* END hero-cmp + cart-drawer */
/* CSFloat-1:1: action floating bar — for sticky bottom-action contexts */
.csfloat-action-float {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 18px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 999px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
z-index: 50;
animation: csfloat-action-float-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes csfloat-action-float-up {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.csfloat-action-float-text {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-action-float-text > b {
color: var(--cta);
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
margin-right: 4px;
}
.csfloat-action-float-divider {
width: 1px;
height: 18px;
background: var(--line);
}
.csfloat-action-float-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-action-float-close {
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
font: 500 14px/1 var(--ui);
}
.csfloat-action-float-close:hover {
background: var(--bg-2);
color: var(--ink-1);
}
@media (max-width: 540px) {
.csfloat-action-float {
border-radius: 12px;
flex-wrap: wrap;
width: calc(100vw - 32px);
bottom: 16px;
}
.csfloat-action-float-actions { flex: 1 1 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-action-float { animation: none; }
}
/* CSFloat-1:1: filter clear-all chip strip */
.csfloat-active-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 12px 14px;
background: rgba(59, 130, 246, 0.04);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
}
.csfloat-active-strip-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 4px;
}
.csfloat-active-strip-clear {
margin-left: auto;
font: 500 11px/1 var(--ui);
color: oklch(0.72 0.18 30);
background: transparent;
border: 0;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
letter-spacing: -0.005em;
transition: all 120ms ease;
}
.csfloat-active-strip-clear:hover {
background: rgba(248, 113, 113, 0.08);
}
/* CSFloat-1:1: small section subtitle */
.csfloat-sub-subtitle {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 600px;
}
.csfloat-sub-subtitle > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-sub-subtitle > .csfloat-sub-subtitle-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 600;
}
/* CSFloat-1:1: utility wrapper for centering content with max-width */
.csfloat-center-wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.csfloat-center-wrap.is-narrow { max-width: 720px; }
.csfloat-center-wrap.is-mid { max-width: 960px; }
.csfloat-center-wrap.is-wide { max-width: 1600px; }
.csfloat-center-wrap.is-full { max-width: none; }
@media (max-width: 720px) {
.csfloat-center-wrap { padding: 0 16px; }
}
@media (max-width: 540px) {
.csfloat-center-wrap { padding: 0 12px; }
}
/* END action-float + active-strip + sub-subtitle + center-wrap */
/* CSFloat-1:1: bordered title with split actions (used as section heads with controls) */
.csfloat-section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
}
.csfloat-section-title-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-section-title-row-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-section-title-row-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-section-title-row-count {
font: 500 12px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-section-title-row-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: stat tile with hover reveal */
.csfloat-tile-reveal {
position: relative;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tile-reveal:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-2px);
}
.csfloat-tile-reveal-default,
.csfloat-tile-reveal-hover {
display: flex;
flex-direction: column;
gap: 4px;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tile-reveal-default {
opacity: 1;
}
.csfloat-tile-reveal-hover {
position: absolute;
inset: 14px 16px;
opacity: 0;
}
.csfloat-tile-reveal:hover .csfloat-tile-reveal-default {
opacity: 0;
}
.csfloat-tile-reveal:hover .csfloat-tile-reveal-hover {
opacity: 1;
}
.csfloat-tile-reveal-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-tile-reveal-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-tile-reveal-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-tile-reveal-action {
font: 600 12px/1 var(--ui);
color: var(--cta);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-tile-reveal-action::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* CSFloat-1:1: skin grid header bar (with sort + view options) */
.csfloat-grid-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.csfloat-grid-header-info {
display: inline-flex;
align-items: baseline;
gap: 8px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-grid-header-info > b {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
}
.csfloat-grid-header-spacer { flex: 1 1 auto; }
.csfloat-grid-header-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 540px) {
.csfloat-grid-header { padding: 10px 12px; }
}
/* END section-title-row + tile-reveal + grid-header */
/* CSFloat-1:1: panel-style notification card */
.csfloat-panel-notif {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.csfloat-panel-notif.is-info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
border-color: rgba(59, 130, 246, 0.25);
}
.csfloat-panel-notif.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.04), var(--bg-1));
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-panel-notif.is-warning {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), var(--bg-1));
border-color: rgba(251, 191, 36, 0.25);
}
.csfloat-panel-notif.is-danger {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.04), var(--bg-1));
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-panel-notif-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
font-size: 15px;
}
.csfloat-panel-notif.is-info .csfloat-panel-notif-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-panel-notif.is-success .csfloat-panel-notif-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-panel-notif.is-warning .csfloat-panel-notif-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-panel-notif.is-danger .csfloat-panel-notif-icon {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-panel-notif-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-panel-notif-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-panel-notif-msg {
font: 400 11px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-panel-notif-action {
flex: 0 0 auto;
}
/* CSFloat-1:1: scroll snap card row for inline horizontal carousels */
.csfloat-snap-cards {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 8px;
padding: 8px 8px 16px;
margin: 0 -8px;
scrollbar-width: none;
}
.csfloat-snap-cards::-webkit-scrollbar { display: none; }
.csfloat-snap-cards > .csfloat-snap-cards-card {
scroll-snap-align: start;
flex: 0 0 240px;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
gap: 10px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-snap-cards > .csfloat-snap-cards-card:hover {
border-color: var(--line-2);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-snap-cards-card-img {
width: 100%;
aspect-ratio: 1.6;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.csfloat-snap-cards-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.csfloat-snap-cards-card-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-snap-cards-card-meta {
display: inline-flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-snap-cards-card-price {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-snap-cards-card-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-snap-cards-card-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
/* CSFloat-1:1: text-only cta with arrow */
.csfloat-text-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 12px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
background: transparent;
border: 0;
padding: 0;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-text-cta:hover { color: oklch(0.84 0.18 240); }
.csfloat-text-cta::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-text-cta:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
.csfloat-text-cta.is-back::before {
content: '';
width: 6px;
height: 6px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-text-cta.is-back::after { display: none; }
.csfloat-text-cta.is-back:hover::before {
transform: rotate(45deg) translate(-2px, 2px);
}
.csfloat-text-cta.is-success { color: oklch(0.78 0.16 152); }
.csfloat-text-cta.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-text-cta.is-danger { color: oklch(0.72 0.18 30); }
/* END panel-notif + snap-cards + text-cta */
/* CSFloat-1:1: simple layered sidebar — vertical menu with multi-level groups */
.csfloat-side-deep {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
width: 240px;
flex: 0 0 240px;
}
.csfloat-side-deep-section {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 8px;
margin-bottom: 6px;
border-bottom: 1px solid var(--line);
}
.csfloat-side-deep-section:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.csfloat-side-deep-section-title {
font: 700 10px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px 4px;
}
.csfloat-side-deep-link {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
position: relative;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-side-deep-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-side-deep-link.is-active {
background: rgba(59, 130, 246, 0.06);
color: var(--cta);
}
.csfloat-side-deep-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-side-deep-link-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: currentColor;
opacity: 0.85;
}
.csfloat-side-deep-link-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-side-deep-link-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-side-deep-link-children {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 22px;
margin: 2px 0 4px;
overflow: hidden;
max-height: 0;
transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-side-deep-link.is-open + .csfloat-side-deep-link-children {
max-height: 480px;
}
.csfloat-side-deep-link-children > .csfloat-side-deep-link {
font-size: 11px;
padding: 6px 10px;
}
.csfloat-side-deep-link-chev {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-side-deep-link.is-open .csfloat-side-deep-link-chev {
transform: rotate(225deg);
}
@media (max-width: 1100px) {
.csfloat-side-deep { width: 100%; flex: none; }
}
/* CSFloat-1:1: hero CTA card with image + text */
.csfloat-cta-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
padding: 18px 22px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 70%);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.csfloat-cta-card.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), var(--bg-1) 70%);
border-color: var(--cta);
}
.csfloat-cta-card-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-cta-card-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-cta-card-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-cta-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 480px;
}
.csfloat-cta-card-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-cta-card-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
.csfloat-cta-card-art {
position: relative;
z-index: 1;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 96px;
}
.csfloat-cta-card-art > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 16px rgba(59, 130, 246, 0.18));
}
@media (max-width: 540px) {
.csfloat-cta-card { grid-template-columns: 1fr; }
.csfloat-cta-card-art { display: none; }
}
/* END side-deep + cta-card */
/* CSFloat-1:1: data graph block — for embedding line/bar charts inline */
.csfloat-graph-block {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.csfloat-graph-block-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.csfloat-graph-block-title-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-graph-block-title {
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-1);
}
.csfloat-graph-block-meta {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-graph-block-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-graph-block-stat {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 4px;
}
.csfloat-graph-block-stat-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
}
.csfloat-graph-block-stat-val.is-currency::before {
content: '$';
font-size: 14px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-graph-block-stat-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
padding: 2px 6px;
border-radius: 999px;
}
.csfloat-graph-block-stat-delta.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
}
.csfloat-graph-block-stat-delta.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.08);
}
.csfloat-graph-block-body {
width: 100%;
height: 200px;
position: relative;
}
.csfloat-graph-block-body > svg {
width: 100%;
height: 100%;
display: block;
}
.csfloat-graph-block-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.csfloat-graph-block-legend {
display: inline-flex;
align-items: center;
gap: 14px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
}
.csfloat-graph-block-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-graph-block-legend-item::before {
content: '';
width: 10px;
height: 2px;
background: var(--cta);
border-radius: 1px;
}
.csfloat-graph-block-legend-item.is-success::before { background: oklch(0.62 0.16 152); }
.csfloat-graph-block-legend-item.is-warning::before { background: oklch(0.78 0.16 80); }
.csfloat-graph-block-legend-item.is-danger::before { background: oklch(0.66 0.18 30); }
.csfloat-graph-block-legend-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 600;
}
.csfloat-graph-block-foot-action {
font: 500 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 3px;
}
.csfloat-graph-block-foot-action:hover { opacity: 0.78; }
/* CSFloat-1:1: search keyword pill list */
.csfloat-keyword-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 0;
}
.csfloat-keyword-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-keyword-pill:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-keyword-pill.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-keyword-pill.is-trending::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid oklch(0.78 0.18 30);
}
.csfloat-keyword-pill-count {
font: 600 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
/* CSFloat-1:1: alert popover (small inline alert that pops above element) */
.csfloat-alert-pop {
position: absolute;
top: -8px;
left: 50%;
transform: translate(-50%, -100%);
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 8px 12px;
font: 500 11px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
z-index: 100;
animation: csfloat-alert-pop-in 220ms cubic-bezier(0.4, 1.4, 0.6, 1);
}
@keyframes csfloat-alert-pop-in {
from { opacity: 0; transform: translate(-50%, -100%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
.csfloat-alert-pop::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-alert-pop::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-alert-pop.is-success {
background: rgba(52, 211, 153, 0.16);
border-color: rgba(52, 211, 153, 0.4);
color: oklch(0.94 0.1 152);
}
.csfloat-alert-pop.is-success::before { border-top-color: rgba(52, 211, 153, 0.16); }
.csfloat-alert-pop.is-success::after { border-top-color: rgba(52, 211, 153, 0.4); }
.csfloat-alert-pop.is-danger {
background: rgba(248, 113, 113, 0.16);
border-color: rgba(248, 113, 113, 0.4);
color: oklch(0.94 0.1 30);
}
.csfloat-alert-pop.is-danger::before { border-top-color: rgba(248, 113, 113, 0.16); }
.csfloat-alert-pop.is-danger::after { border-top-color: rgba(248, 113, 113, 0.4); }
@media (prefers-reduced-motion: reduce) {
.csfloat-alert-pop { animation: none; }
}
/* END graph-block + keyword-pills + alert-pop */
/* CSFloat-1:1: minimal split layout (left rail + right content) */
.csfloat-rail-content {
display: grid;
grid-template-columns: 240px 1fr;
gap: 28px;
align-items: start;
}
.csfloat-rail-content.is-narrow { grid-template-columns: 200px 1fr; }
.csfloat-rail-content.is-wide { grid-template-columns: 280px 1fr; }
.csfloat-rail-content.is-right-rail { grid-template-columns: 1fr 320px; }
.csfloat-rail-content.is-no-rail { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
.csfloat-rail-content,
.csfloat-rail-content.is-narrow,
.csfloat-rail-content.is-wide,
.csfloat-rail-content.is-right-rail {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* CSFloat-1:1: stacked card list with separator */
.csfloat-stack-list {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-stack-list-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-stack-list-row:last-child { border-bottom: 0; }
.csfloat-stack-list-row:hover { background: var(--bg-2); }
.csfloat-stack-list-row-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-stack-list-row-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-stack-list-row-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-stack-list-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-stack-list-row-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-stack-list-row-action {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* CSFloat-1:1: ad / placement spot — for inline ad slots */
.csfloat-ad-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 90px;
padding: 16px;
background: var(--bg-1);
border: 1px dashed var(--line-2);
border-radius: 10px;
text-align: center;
}
.csfloat-ad-slot-tag {
font: 600 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-ad-slot-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-ad-slot.is-loading {
background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
background-size: 200% 100%;
animation: csfloat-ad-shimmer 1400ms ease-in-out infinite;
}
@keyframes csfloat-ad-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.csfloat-ad-slot.is-loading { animation: none; }
}
/* CSFloat-1:1: settings nav with title + count */
.csfloat-set-nav {
display: flex;
flex-direction: column;
gap: 1px;
}
.csfloat-set-nav-link {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 6px;
font: 500 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
position: relative;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-set-nav-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-set-nav-link.is-active {
background: var(--bg-2);
color: var(--ink-1);
font-weight: 600;
}
.csfloat-set-nav-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--cta);
border-radius: 0 2px 2px 0;
}
.csfloat-set-nav-link-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: currentColor;
opacity: 0.85;
}
.csfloat-set-nav-link.is-active .csfloat-set-nav-link-icon {
color: var(--cta);
}
.csfloat-set-nav-link-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-set-nav-link-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: oklch(0.84 0.16 80);
background: rgba(251, 191, 36, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-set-nav-link-arrow {
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(-45deg);
}
.csfloat-set-nav-divider {
height: 1px;
background: var(--line);
margin: 6px 0;
}
.csfloat-set-nav-section {
font: 700 9px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 12px 4px;
}
/* END rail-content + stack-list + ad-slot + set-nav */
/* CSFloat-1:1: skin profile data card — for sticker/inspect blocks */
.csfloat-skin-profile {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-skin-profile-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.csfloat-skin-profile-head-title {
font: 600 13px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-skin-profile-head-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-skin-profile-attrs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.csfloat-skin-profile-attr {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
}
.csfloat-skin-profile-attr-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-skin-profile-attr-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
margin-top: 4px;
}
.csfloat-skin-profile-attr-val.is-rare { color: oklch(0.84 0.18 60); }
.csfloat-skin-profile-attr-val.is-cta { color: var(--cta); }
.csfloat-skin-profile-attr-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
/* CSFloat-1:1: stickers grid — for showing applied stickers on item */
.csfloat-stickers-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-stickers-grid-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.csfloat-stickers-grid-head-title {
font: 600 11px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-stickers-grid-head-count {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-stickers-grid-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.csfloat-stickers-grid-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
text-align: center;
}
.csfloat-stickers-grid-cell.is-empty {
opacity: 0.5;
border-style: dashed;
}
.csfloat-stickers-grid-cell-img {
width: 100%;
aspect-ratio: 1;
background: var(--bg-2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.csfloat-stickers-grid-cell-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.csfloat-stickers-grid-cell-name {
font: 500 9px/1.2 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.csfloat-stickers-grid-cell-pct {
font: 600 9px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-stickers-grid-cell-pct.is-good { color: oklch(0.78 0.16 152); }
.csfloat-stickers-grid-cell-pct.is-warn { color: oklch(0.84 0.16 80); }
.csfloat-stickers-grid-cell-pct.is-bad { color: oklch(0.72 0.18 30); }
@media (max-width: 540px) {
.csfloat-stickers-grid-row { grid-template-columns: repeat(3, 1fr); }
}
/* CSFloat-1:1: simple inline indicator with badge */
.csfloat-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-indicator::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
.csfloat-indicator.is-cta { color: var(--cta); }
.csfloat-indicator.is-success { color: oklch(0.78 0.16 152); }
.csfloat-indicator.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-indicator.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-indicator.is-pulse::before {
box-shadow: 0 0 6px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
.csfloat-indicator-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-indicator.is-pulse::before { animation: none; }
}
/* END skin-profile + stickers-grid + indicator */
/* CSFloat-1:1: trade ladder rung — for showing rate progression */
.csfloat-trade-ladder {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-trade-ladder-rung {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
position: relative;
cursor: pointer;
transition: background 100ms ease;
}
.csfloat-trade-ladder-rung:last-child { border-bottom: 0; }
.csfloat-trade-ladder-rung:hover { background: var(--bg-2); }
.csfloat-trade-ladder-rung.is-active { background: rgba(59, 130, 246, 0.06); }
.csfloat-trade-ladder-rung.is-completed { opacity: 0.7; }
.csfloat-trade-ladder-rung-num {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-trade-ladder-rung.is-active .csfloat-trade-ladder-rung-num {
background: var(--cta);
border-color: var(--cta);
color: #fff;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-trade-ladder-rung.is-completed .csfloat-trade-ladder-rung-num {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-trade-ladder-rung.is-completed .csfloat-trade-ladder-rung-num > span { display: none; }
.csfloat-trade-ladder-rung.is-completed .csfloat-trade-ladder-rung-num::after {
content: '';
width: 8px;
height: 4px;
border: 1.5px solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
.csfloat-trade-ladder-rung-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-trade-ladder-rung-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-trade-ladder-rung-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-trade-ladder-rung-amt {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-trade-ladder-rung-amt::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-trade-ladder-rung-amt.is-up { color: oklch(0.78 0.16 152); }
/* CSFloat-1:1: hover-action overlay (for product card actions on hover) */
.csfloat-hover-actions {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
flex-direction: column;
gap: 4px;
opacity: 0;
transform: translateX(8px);
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 200ms;
z-index: 2;
}
.csfloat-hover-actions-anchor:hover .csfloat-hover-actions {
opacity: 1;
transform: translateX(0);
}
.csfloat-hover-actions-btn {
width: 28px;
height: 28px;
border-radius: 999px;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-actions-btn:hover {
background: rgba(7, 11, 24, 0.85);
border-color: var(--cta);
color: #fff;
}
.csfloat-hover-actions-btn.is-cta {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-hover-actions-btn.is-active {
background: rgba(59, 130, 246, 0.5);
border-color: var(--cta);
color: #fff;
}
.csfloat-hover-actions-btn.is-fav.is-active {
background: rgba(248, 113, 113, 0.6);
border-color: oklch(0.66 0.18 30);
color: #fff;
}
/* CSFloat-1:1: meta info line — small inline meta with icons */
.csfloat-meta-line {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-meta-line-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-meta-line-item-icon {
width: 12px;
height: 12px;
color: var(--ink-4);
flex: 0 0 12px;
}
.csfloat-meta-line-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 500;
letter-spacing: 0.02em;
}
.csfloat-meta-line-item.is-cta { color: var(--cta); }
.csfloat-meta-line-item.is-cta .csfloat-meta-line-item-icon { color: var(--cta); }
.csfloat-meta-line-item.is-success { color: oklch(0.78 0.16 152); }
.csfloat-meta-line-item.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-meta-line-item.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-meta-line-divider {
width: 1px;
height: 11px;
background: var(--line);
}
/* END trade-ladder + hover-actions + meta-line */
/* CSFloat-1:1: search results header bar */
.csfloat-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.csfloat-results-bar-info {
display: inline-flex;
align-items: baseline;
gap: 8px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-results-bar-info-mono {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-results-bar-info-detail {
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-results-bar-spacer { flex: 1 1 auto; }
.csfloat-results-bar-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CSFloat-1:1: hero benefit ring (4 benefits in a circular layout) */
.csfloat-benefit-ring {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding: 18px 0;
}
.csfloat-benefit-ring-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
transition: border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-benefit-ring-item:hover { border-color: var(--line-2); }
.csfloat-benefit-ring-item.is-success .csfloat-benefit-ring-item-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-benefit-ring-item.is-purple .csfloat-benefit-ring-item-icon {
background: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.3);
color: oklch(0.84 0.18 290);
}
.csfloat-benefit-ring-item.is-warning .csfloat-benefit-ring-item-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
@media (max-width: 540px) {
.csfloat-benefit-ring { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: subtle top-page promo strip — for slim announcements */
.csfloat-promo-thin {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 14px;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), rgba(167, 139, 250, 0.06));
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
font: 500 11px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-promo-thin-eyebrow {
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-promo-thin-eyebrow::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
}
.csfloat-promo-thin-msg > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-promo-thin-link {
font: 600 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-promo-thin-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-promo-thin-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.csfloat-promo-thin-x {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
font: 500 13px/1 var(--ui);
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
}
.csfloat-promo-thin-x:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ink-1);
}
@media (max-width: 540px) {
.csfloat-promo-thin { font-size: 10px; padding: 6px 12px; gap: 8px; }
}
/* END results-bar + benefit-ring + promo-thin */
/* CSFloat-1:1: button group with primary + secondary actions inline */
.csfloat-btn-group {
display: inline-flex;
align-items: stretch;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csfloat-btn-group > .csfloat-btn-group-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-2);
font: 600 13px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-btn-group > .csfloat-btn-group-btn:not(:first-child) { border-left: 0; }
.csfloat-btn-group > .csfloat-btn-group-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-btn-group > .csfloat-btn-group-btn.is-active {
background: var(--bg-3);
color: var(--cta);
z-index: 1;
}
.csfloat-btn-group > .csfloat-btn-group-btn.is-cta {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-btn-group > .csfloat-btn-group-btn.is-cta:hover {
background: oklch(0.66 0.18 240);
}
.csfloat-btn-group > .csfloat-btn-group-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.csfloat-btn-group.is-sm > .csfloat-btn-group-btn { height: 28px; padding: 0 10px; font-size: 11px; }
.csfloat-btn-group.is-lg > .csfloat-btn-group-btn { height: 44px; padding: 0 18px; font-size: 14px; }
.csfloat-btn-group.is-pill { border-radius: 999px; }
.csfloat-btn-group.is-icon-only > .csfloat-btn-group-btn { padding: 0; width: 36px; }
/* CSFloat-1:1: stat with comparison subtext */
.csfloat-stat-comp {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-stat-comp-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-comp-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-stat-comp-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-comp-comp {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin-top: 4px;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-stat-comp-comp-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
}
.csfloat-stat-comp-comp-mono.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-comp-comp-mono.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-comp.is-large .csfloat-stat-comp-val { font-size: 28px; letter-spacing: -0.025em; }
.csfloat-stat-comp.is-large .csfloat-stat-comp-val.is-currency::before { font-size: 15px; }
/* CSFloat-1:1: tags inline display */
.csfloat-tags-inline {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.csfloat-tags-inline-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 4px;
}
.csfloat-tags-inline-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 10px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tags-inline-tag:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-tags-inline-tag.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-tags-inline-tag.is-rare {
background: rgba(244, 114, 182, 0.08);
border-color: rgba(244, 114, 182, 0.3);
color: oklch(0.84 0.18 320);
}
.csfloat-tags-inline-tag.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-tags-inline-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
}
/* END btn-group + stat-comp + tags-inline */
/* CSFloat-1:1: page filter chip area — for combining filter chips with sort & view */
.csfloat-filter-area {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 12px 0;
}
.csfloat-filter-area-spacer { flex: 1 1 auto; }
.csfloat-filter-area-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-filter-area-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 4px;
}
.csfloat-filter-area-section-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 4px;
}
@media (max-width: 720px) {
.csfloat-filter-area-divider { display: none; }
}
/* CSFloat-1:1: chart caption header */
.csfloat-chart-cap {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
padding: 0 0 10px;
border-bottom: 1px solid var(--line);
}
.csfloat-chart-cap-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-chart-cap-eyebrow {
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-chart-cap-title {
font: 600 14px/1.3 var(--ui);
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0;
}
.csfloat-chart-cap-stat {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.csfloat-chart-cap-stat-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-chart-cap-stat-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-chart-cap-stat-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-chart-cap-stat-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-chart-cap-stat-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: brand chip with link */
.csfloat-brand-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-brand-chip:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-brand-chip-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
padding: 3px;
overflow: hidden;
}
.csfloat-brand-chip-icon > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-brand-chip.is-active {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-brand-chip-meta {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
/* END filter-area + chart-cap + brand-chip */
/* CSFloat-1:1: data row with hover preview */
.csfloat-data-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
cursor: pointer;
position: relative;
transition: background 100ms ease;
}
.csfloat-data-row:last-child { border-bottom: 0; }
.csfloat-data-row:hover { background: var(--bg-2); }
.csfloat-data-row.is-selected {
background: rgba(59, 130, 246, 0.06);
}
.csfloat-data-row-marker {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 11px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-data-row-marker.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-data-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-data-row-title {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-data-row-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-data-row-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-data-row-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-data-row-val::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-data-row-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-data-row-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-data-row-action {
flex: 0 0 auto;
}
@media (max-width: 720px) {
.csfloat-data-row {
grid-template-columns: 24px 1fr auto;
gap: 8px;
}
.csfloat-data-row-action { display: none; }
.csfloat-data-row-marker { width: 24px; height: 24px; font-size: 10px; }
}
/* CSFloat-1:1: trade match score badge */
.csfloat-match-score {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
letter-spacing: -0.005em;
color: var(--ink-2);
}
.csfloat-match-score-icon {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg-3);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 10px/1 var(--mono);
color: var(--ink-2);
}
.csfloat-match-score-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
color: var(--ink-1);
letter-spacing: 0;
}
.csfloat-match-score.is-perfect {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-match-score.is-perfect .csfloat-match-score-icon {
background: oklch(0.62 0.16 152);
color: var(--bg);
}
.csfloat-match-score.is-perfect .csfloat-match-score-mono { color: oklch(0.78 0.16 152); }
.csfloat-match-score.is-good {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-match-score.is-good .csfloat-match-score-icon {
background: var(--cta);
color: #fff;
}
.csfloat-match-score.is-good .csfloat-match-score-mono { color: var(--cta); }
.csfloat-match-score.is-fair {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-match-score.is-poor {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
/* CSFloat-1:1: trade preview header */
.csfloat-trade-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px 10px 0 0;
border-bottom: 0;
}
.csfloat-trade-preview-head-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-trade-preview-head-eyebrow {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trade-preview-head-title {
font: 700 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-trade-preview-head-counter {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-trade-preview-head-counter::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-trade-preview-head-counter.is-up { color: oklch(0.78 0.16 152); }
.csfloat-trade-preview-head-counter.is-down { color: oklch(0.72 0.18 30); }
/* END data-row + match-score + trade-preview-head */
/* CSFloat-1:1: scoped grid filter pill row */
.csfloat-pill-filter-row {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0;
flex-wrap: wrap;
}
.csfloat-pill-filter-row-spacer { flex: 1 1 auto; }
.csfloat-pill-filter-row-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 4px;
}
.csfloat-pill-filter {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pill-filter:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pill-filter.is-on {
background: var(--ink-1);
color: var(--bg);
border-color: var(--ink-1);
}
.csfloat-pill-filter.is-cta {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-pill-filter-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-pill-filter-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-pill-filter.is-on .csfloat-pill-filter-count { color: rgba(7, 11, 24, 0.55); }
/* CSFloat-1:1: tooltip help indicator with inline popover */
.csfloat-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
font: 700 9px/1 var(--ui);
cursor: help;
vertical-align: middle;
margin-left: 4px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-help-icon:hover {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-help-icon::after { content: '?'; }
.csfloat-help-icon-pop {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 200px;
padding: 8px 10px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 6px;
font: 400 11px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-transform: none;
text-align: left;
pointer-events: none;
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 100;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
.csfloat-help-icon:hover .csfloat-help-icon-pop {
opacity: 1;
pointer-events: auto;
}
.csfloat-help-icon-pop::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: var(--line-2);
}
/* CSFloat-1:1: edit indicator pencil icon */
.csfloat-edit-icon {
width: 14px;
height: 14px;
border: 0;
background: transparent;
color: var(--ink-4);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: all 100ms ease;
position: relative;
}
.csfloat-edit-icon:hover {
color: var(--cta);
background: rgba(59, 130, 246, 0.08);
}
.csfloat-edit-icon::before {
content: '';
width: 8px;
height: 1.5px;
background: currentColor;
transform: rotate(-45deg);
border-radius: 1px;
position: absolute;
}
.csfloat-edit-icon::after {
content: '';
width: 0;
height: 0;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom: 3px solid currentColor;
position: absolute;
bottom: 2px;
left: 5px;
transform: rotate(-45deg);
}
/* END pill-filter-row + help-icon + edit-icon */
/* CSFloat-1:1: simple inline metric strip (3-stat row) */
.csfloat-metric-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.csfloat-metric-strip-cell {
padding: 12px 14px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 3px;
}
.csfloat-metric-strip-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-metric-strip-cell-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-metric-strip-cell-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-metric-strip-cell-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-metric-strip-cell-val.is-down { color: oklch(0.72 0.18 30); }
@media (max-width: 540px) {
.csfloat-metric-strip { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: shared modal foot bar — for centered confirm modals */
.csfloat-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding: 12px 18px;
background: var(--bg);
border-top: 1px solid var(--line);
}
.csfloat-modal-foot.is-stretch > * { flex: 1 1 auto; }
.csfloat-modal-foot.is-between { justify-content: space-between; }
.csfloat-modal-foot-status {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: auto;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-modal-foot-status.is-success { color: oklch(0.78 0.16 152); }
.csfloat-modal-foot-status.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-modal-foot-status.is-error { color: oklch(0.72 0.18 30); }
.csfloat-modal-foot-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
/* CSFloat-1:1: minimal label + chip combo */
.csfloat-label-chip {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-label-chip > .csfloat-label-chip-key {
padding: 5px 8px;
background: var(--bg-3);
color: var(--ink-3);
border-right: 1px solid var(--line);
display: inline-flex;
align-items: center;
}
.csfloat-label-chip > .csfloat-label-chip-val {
padding: 5px 10px;
color: var(--ink-1);
font-weight: 600;
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-label-chip > .csfloat-label-chip-val.is-ui {
font-family: var(--ui);
letter-spacing: -0.005em;
}
.csfloat-label-chip.is-cta {
border-color: rgba(59, 130, 246, 0.3);
background: rgba(59, 130, 246, 0.06);
}
.csfloat-label-chip.is-cta > .csfloat-label-chip-key { background: rgba(59, 130, 246, 0.1); color: rgba(125, 184, 248, 0.7); }
.csfloat-label-chip.is-cta > .csfloat-label-chip-val { color: var(--cta); }
.csfloat-label-chip.is-success {
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-label-chip.is-success > .csfloat-label-chip-val { color: oklch(0.78 0.16 152); }
.csfloat-label-chip.is-warning {
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-label-chip.is-warning > .csfloat-label-chip-val { color: oklch(0.84 0.16 80); }
.csfloat-label-chip.is-danger {
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-label-chip.is-danger > .csfloat-label-chip-val { color: oklch(0.72 0.18 30); }
/* END metric-strip + modal-foot + label-chip */
/* CSFloat-1:1: simple delta arrow (price change indicator) */
.csfloat-delta-arrow {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-delta-arrow.is-up { color: oklch(0.78 0.16 152); }
.csfloat-delta-arrow.is-down { color: oklch(0.72 0.18 30); }
.csfloat-delta-arrow.is-flat { color: var(--ink-3); }
.csfloat-delta-arrow::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-delta-arrow.is-up::before { border-bottom: 4px solid currentColor; }
.csfloat-delta-arrow.is-down::before { border-top: 4px solid currentColor; }
.csfloat-delta-arrow.is-flat::before {
width: 6px;
height: 1.5px;
background: currentColor;
border: 0;
}
.csfloat-delta-arrow.is-pill {
padding: 2px 6px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
}
.csfloat-delta-arrow.is-pill.is-up {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-delta-arrow.is-pill.is-down {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.25);
}
/* CSFloat-1:1: hover-overlay action card */
.csfloat-overlay-action {
position: absolute;
inset: 0;
background: rgba(7, 11, 24, 0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
border-radius: inherit;
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 2;
pointer-events: none;
}
.csfloat-overlay-action-anchor:hover .csfloat-overlay-action {
opacity: 1;
pointer-events: auto;
}
.csfloat-overlay-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--cta);
color: #fff;
border: 0;
border-radius: 999px;
font: 700 11px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-overlay-action-btn:hover {
background: oklch(0.66 0.18 240);
transform: translateY(-1px);
}
.csfloat-overlay-action-btn-secondary {
background: rgba(7, 11, 24, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
box-shadow: none;
}
.csfloat-overlay-action-btn-secondary:hover {
background: rgba(7, 11, 24, 0.8);
color: #fff;
}
.csfloat-overlay-action-meta {
font: 500 11px/1.4 var(--ui);
color: rgba(255, 255, 255, 0.7);
letter-spacing: -0.005em;
text-align: center;
}
/* CSFloat-1:1: stat row with chip + label */
.csfloat-stat-chip-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
}
.csfloat-stat-chip-row-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin-right: 4px;
}
.csfloat-stat-chip-row-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 11px/1 var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stat-chip-row-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-stat-chip-row-chip.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-stat-chip-row-chip.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-stat-chip-row-chip.is-danger {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-stat-chip-row-chip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
/* END delta-arrow + overlay-action + stat-chip-row */
/* CSFloat-1:1: vertical timeline event */
.csfloat-event-vline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding-left: 16px;
}
.csfloat-event-vline::before {
content: '';
position: absolute;
left: 6px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--line);
}
.csfloat-event-vline-row {
position: relative;
padding: 0 0 18px 16px;
}
.csfloat-event-vline-row:last-child { padding-bottom: 0; }
.csfloat-event-vline-row::before {
content: '';
position: absolute;
left: -6px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--bg-2);
border: 2px solid var(--line);
z-index: 1;
}
.csfloat-event-vline-row.is-active::before {
background: var(--cta);
border-color: var(--cta);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.csfloat-event-vline-row.is-success::before {
background: oklch(0.62 0.16 152);
border-color: oklch(0.62 0.16 152);
}
.csfloat-event-vline-row.is-warning::before {
background: oklch(0.78 0.16 80);
border-color: oklch(0.78 0.16 80);
}
.csfloat-event-vline-row.is-danger::before {
background: oklch(0.66 0.18 30);
border-color: oklch(0.66 0.18 30);
}
.csfloat-event-vline-row-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.csfloat-event-vline-row-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.csfloat-event-vline-row-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-event-vline-row-msg > b { color: var(--ink-1); font-weight: 600; }
/* CSFloat-1:1: simple inline trade preview */
.csfloat-trade-pre {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 5px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-trade-pre-img {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-3);
border: 1px solid var(--line);
padding: 2px;
flex: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-trade-pre-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-trade-pre-name {
font-weight: 600;
color: var(--ink-1);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-trade-pre-price {
font: 700 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
margin-left: 2px;
}
.csfloat-trade-pre-price::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-trade-pre.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-trade-pre.is-cta .csfloat-trade-pre-name { color: var(--cta); }
/* CSFloat-1:1: hero scrolling background gradient */
.csfloat-bg-hero {
position: relative;
overflow: hidden;
}
.csfloat-bg-hero::before {
content: '';
position: absolute;
inset: -50% -50% 0 -50%;
background:
radial-gradient(800px 400px at 30% 0%, rgba(59, 130, 246, 0.08), transparent 60%),
radial-gradient(600px 300px at 80% 50%, rgba(167, 139, 250, 0.06), transparent 60%);
pointer-events: none;
z-index: 0;
}
.csfloat-bg-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 90%);
pointer-events: none;
z-index: 0;
}
.csfloat-bg-hero > * { position: relative; z-index: 1; }
.csfloat-bg-hero.is-deep::before {
background:
radial-gradient(1200px 600px at 30% 0%, rgba(59, 130, 246, 0.14), transparent 60%),
radial-gradient(800px 400px at 80% 50%, rgba(167, 139, 250, 0.1), transparent 60%);
}
.csfloat-bg-hero.is-warm::before {
background:
radial-gradient(800px 400px at 30% 0%, rgba(251, 146, 60, 0.06), transparent 60%),
radial-gradient(600px 300px at 80% 50%, rgba(244, 114, 182, 0.06), transparent 60%);
}
/* END event-vline + trade-pre + bg-hero */
/* CSFloat-1:1: small inline error/warn banner with icon */
.csfloat-inline-bar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-inline-bar.is-success {
background: rgba(52, 211, 153, 0.06);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.92 0.1 152);
}
.csfloat-inline-bar.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.94 0.1 80);
}
.csfloat-inline-bar.is-danger {
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.94 0.1 30);
}
.csfloat-inline-bar.is-cta {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
color: oklch(0.94 0.1 240);
}
.csfloat-inline-bar-icon {
width: 14px;
height: 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 10px/1 var(--ui);
flex: 0 0 14px;
background: currentColor;
color: var(--bg);
opacity: 0.9;
}
/* CSFloat-1:1: simple grid-overlay decoration (subtle background grid) */
.csfloat-grid-overlay {
position: relative;
}
.csfloat-grid-overlay::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
}
.csfloat-grid-overlay > * { position: relative; z-index: 1; }
.csfloat-grid-overlay.is-mask::before {
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
}
.csfloat-grid-overlay.is-fine::before {
background-size: 16px 16px;
opacity: 0.6;
}
.csfloat-grid-overlay.is-coarse::before {
background-size: 64px 64px;
}
/* CSFloat-1:1: small badge dot indicator with text */
.csfloat-bdg-dot {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-bdg-dot::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
flex: 0 0 5px;
}
.csfloat-bdg-dot.is-cta { color: var(--cta); background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.3); }
.csfloat-bdg-dot.is-success { color: oklch(0.78 0.16 152); background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); }
.csfloat-bdg-dot.is-warning { color: oklch(0.84 0.16 80); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.csfloat-bdg-dot.is-danger { color: oklch(0.72 0.18 30); background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.csfloat-bdg-dot.is-pulse::before { box-shadow: 0 0 4px currentColor; animation: csfloat-stamp-pulse 1500ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.csfloat-bdg-dot.is-pulse::before { animation: none; }
}
/* CSFloat-1:1: footer mini-link group */
.csfloat-foot-mini {
display: inline-flex;
align-items: center;
gap: 14px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-foot-mini-link {
color: var(--ink-3);
text-decoration: none;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-foot-mini-link:hover { color: var(--ink-1); }
.csfloat-foot-mini-divider {
color: var(--ink-4);
font-size: 9px;
}
.csfloat-foot-mini-divider::before { content: '·'; }
.csfloat-foot-mini-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* END inline-bar + grid-overlay + bdg-dot + foot-mini */
/* CSFloat-1:1: simple breadcrumb compact */
.csfloat-bcrumb {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
padding: 4px 0;
}
.csfloat-bcrumb-link {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 6px;
border-radius: 4px;
color: var(--ink-3);
text-decoration: none;
transition: all 120ms ease;
}
.csfloat-bcrumb-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-bcrumb-link.is-current {
color: var(--ink-1);
font-weight: 600;
pointer-events: none;
}
.csfloat-bcrumb-link-icon {
width: 11px;
height: 11px;
color: currentColor;
opacity: 0.85;
}
.csfloat-bcrumb-divider {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-bcrumb-divider::before { content: '/'; }
/* CSFloat-1:1: section card with eyebrow */
.csfloat-section-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 24px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-section-card.is-cta {
border-color: rgba(59, 130, 246, 0.3);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
}
.csfloat-section-card-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 4px;
}
.csfloat-section-card-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-section-card-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-section-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-section-card-msg > b { color: var(--ink-1); font-weight: 600; }
.csfloat-section-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed var(--line);
}
/* CSFloat-1:1: small bordered counter pill */
.csfloat-counter-pill {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 3px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-counter-pill-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
color: var(--ink-1);
letter-spacing: 0;
}
.csfloat-counter-pill-icon {
width: 11px;
height: 11px;
color: currentColor;
opacity: 0.85;
}
.csfloat-counter-pill.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-counter-pill.is-cta .csfloat-counter-pill-mono { color: var(--cta); }
.csfloat-counter-pill.is-pulse {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-counter-pill.is-pulse { animation: none; }
}
/* CSFloat-1:1: data-row drag-handle wrapper */
.csfloat-row-drag-wrap {
display: grid;
grid-template-columns: 14px 1fr;
gap: 10px;
align-items: center;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: grab;
user-select: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-row-drag-wrap:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-row-drag-wrap.is-dragging {
cursor: grabbing;
opacity: 0.7;
transform: scale(0.99);
border-color: var(--cta);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.csfloat-row-drag-wrap-handle {
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
}
.csfloat-row-drag-wrap-handle::before {
content: '';
width: 6px;
height: 14px;
background-image:
radial-gradient(circle at 25% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 16%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 50%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 25% 84%, currentColor 1px, transparent 1.5px),
radial-gradient(circle at 75% 84%, currentColor 1px, transparent 1.5px);
}
.csfloat-row-drag-wrap-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* END bcrumb + section-card + counter-pill + row-drag-wrap */
/* CSFloat-1:1: scroll-snap horizontal pill nav (with arrows) */
.csfloat-pill-snap {
position: relative;
display: flex;
align-items: center;
gap: 0;
}
.csfloat-pill-snap-track {
flex: 1 1 auto;
display: flex;
gap: 6px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 4px 0 8px;
scrollbar-width: none;
}
.csfloat-pill-snap-track::-webkit-scrollbar { display: none; }
.csfloat-pill-snap-track > .csfloat-pill-snap-link {
scroll-snap-align: start;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pill-snap-track > .csfloat-pill-snap-link:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pill-snap-track > .csfloat-pill-snap-link.is-active {
background: var(--cta);
color: #fff;
border-color: var(--cta);
}
.csfloat-pill-snap-arrow {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-pill-snap-arrow:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-pill-snap-arrow[disabled] { opacity: 0.4; pointer-events: none; }
.csfloat-pill-snap-arrow.is-prev { margin-right: 4px; }
.csfloat-pill-snap-arrow.is-next { margin-left: 4px; }
.csfloat-pill-snap-arrow::before {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
}
.csfloat-pill-snap-arrow.is-prev::before { transform: rotate(-135deg); margin-left: 2px; }
.csfloat-pill-snap-arrow.is-next::before { transform: rotate(45deg); margin-right: 2px; }
/* CSFloat-1:1: card with split bottom (image + label) */
.csfloat-card-split-bottom {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-split-bottom:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.csfloat-card-split-bottom-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-card-split-bottom:hover .csfloat-card-split-bottom-img > img {
transform: scale(1.06);
}
.csfloat-card-split-bottom-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* END pill-snap + card-split-bottom */
/* CSFloat-1:1: small notice line — single-line attention bar */
.csfloat-notice-line {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-2);
border-left: 2px solid var(--cta);
border-radius: 0 4px 4px 0;
font: 500 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-notice-line.is-success { border-left-color: oklch(0.62 0.16 152); }
.csfloat-notice-line.is-warning { border-left-color: oklch(0.78 0.16 80); }
.csfloat-notice-line.is-danger { border-left-color: oklch(0.66 0.18 30); }
.csfloat-notice-line-icon {
width: 12px;
height: 12px;
color: var(--cta);
flex: 0 0 12px;
}
.csfloat-notice-line.is-success .csfloat-notice-line-icon { color: oklch(0.78 0.16 152); }
.csfloat-notice-line.is-warning .csfloat-notice-line-icon { color: oklch(0.84 0.16 80); }
.csfloat-notice-line.is-danger .csfloat-notice-line-icon { color: oklch(0.72 0.18 30); }
.csfloat-notice-line-text > b { color: var(--ink-1); font-weight: 600; }
/* CSFloat-1:1: profile rating mini display */
.csfloat-rating-mini {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-rating-mini-stars {
display: inline-flex;
align-items: center;
gap: 1px;
margin-right: 2px;
}
.csfloat-rating-mini-star {
width: 10px;
height: 10px;
background: oklch(0.84 0.18 60);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.csfloat-rating-mini-star.is-empty { background: var(--ink-4); opacity: 0.4; }
.csfloat-rating-mini-count {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
/* CSFloat-1:1: simple legend marker */
.csfloat-legend-mark {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-legend-mark::before {
content: '';
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--ink-3);
}
.csfloat-legend-mark.is-cta::before { background: var(--cta); }
.csfloat-legend-mark.is-success::before { background: oklch(0.62 0.16 152); }
.csfloat-legend-mark.is-warning::before { background: oklch(0.78 0.16 80); }
.csfloat-legend-mark.is-danger::before { background: oklch(0.66 0.18 30); }
.csfloat-legend-mark.is-purple::before { background: oklch(0.62 0.18 290); }
.csfloat-legend-mark.is-square::before { border-radius: 2px; }
.csfloat-legend-mark.is-bar::before { width: 12px; height: 3px; border-radius: 1px; }
.csfloat-legend-mark.is-dashed::before {
background: none;
border: 1.5px dashed currentColor;
border-radius: 0;
width: 16px;
height: 0;
}
.csfloat-legend-mark-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
margin-left: 2px;
letter-spacing: 0;
}
/* END notice-line + rating-mini + legend-mark */
/* CSFloat-1:1: hover popover quick stats */
.csfloat-hover-stats {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
display: none;
flex-direction: column;
gap: 4px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 8px 10px;
min-width: 140px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
z-index: 100;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-hover-stats-anchor:hover .csfloat-hover-stats {
display: flex;
}
.csfloat-hover-stats::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom-color: var(--line-2);
}
.csfloat-hover-stats::before {
content: '';
position: absolute;
bottom: calc(100% - 1px);
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-bottom-color: var(--bg-3);
z-index: 1;
}
.csfloat-hover-stats-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-hover-stats-row > .csfloat-hover-stats-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-hover-stats-row > .csfloat-hover-stats-row-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-hover-stats-row > .csfloat-hover-stats-row-val.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: quick action divider with text */
.csfloat-action-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0;
}
.csfloat-action-divider::before,
.csfloat-action-divider::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-action-divider-text {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
display: inline-flex;
align-items: center;
gap: 5px;
}
/* CSFloat-1:1: minimal status row with badge */
.csfloat-status-line {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font: 500 12px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-status-line::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
color: oklch(0.78 0.16 152);
}
.csfloat-status-line.is-warning::before { background: oklch(0.78 0.16 80); color: oklch(0.84 0.16 80); }
.csfloat-status-line.is-danger::before { background: oklch(0.66 0.18 30); color: oklch(0.72 0.18 30); }
.csfloat-status-line.is-cta::before { background: var(--cta); color: var(--cta); }
.csfloat-status-line.is-offline::before {
background: var(--ink-4);
color: var(--ink-4);
box-shadow: none;
}
.csfloat-status-line-label {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-status-line-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-left: auto;
}
.csfloat-status-line.is-pulse::before {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-status-line.is-pulse::before { animation: none; }
}
/* END hover-stats + action-divider + status-line */
/* CSFloat-1:1: card with embedded video preview */
.csfloat-vid-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vid-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.csfloat-vid-card-preview {
position: relative;
background: linear-gradient(135deg, var(--bg-2), var(--bg));
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.csfloat-vid-card-preview > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vid-card:hover .csfloat-vid-card-preview > img {
transform: scale(1.05);
}
.csfloat-vid-card-play {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-vid-card-play::after {
content: '';
width: 0;
height: 0;
border-left: 12px solid currentColor;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-left: 4px;
}
.csfloat-vid-card:hover .csfloat-vid-card-play {
background: var(--cta);
border-color: var(--cta);
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
}
.csfloat-vid-card-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(7, 11, 24, 0.8);
color: #fff;
padding: 3px 6px;
border-radius: 3px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-vid-card-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-vid-card-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.csfloat-vid-card-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-vid-card-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: small inline timer badge */
.csfloat-time-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-time-badge::before {
content: '';
width: 8px;
height: 8px;
border: 1.5px solid currentColor;
border-radius: 999px;
position: relative;
}
.csfloat-time-badge.is-cta { color: var(--cta); background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.3); }
.csfloat-time-badge.is-warning { color: oklch(0.84 0.16 80); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.csfloat-time-badge.is-danger { color: oklch(0.72 0.18 30); background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.csfloat-time-badge.is-pulse {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-time-badge.is-pulse { animation: none; }
}
/* CSFloat-1:1: split header bar with two-column action */
.csfloat-split-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-split-header-side {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-split-header-side:first-child {
border-right: 1px solid var(--line);
}
.csfloat-split-header-side-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-split-header-side-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 4px;
}
.csfloat-split-header-side-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-split-header-side-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-split-header-side-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-split-header-side-meta {
font: 400 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin-top: 2px;
}
@media (max-width: 540px) {
.csfloat-split-header { grid-template-columns: 1fr; }
.csfloat-split-header-side:first-child {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
/* END vid-card + time-badge + split-header */
/* CSFloat-1:1: row icon-button cluster */
.csfloat-row-icons {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-row-icons-btn {
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: 0;
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 120ms ease;
position: relative;
}
.csfloat-row-icons-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-row-icons-btn.is-active {
color: var(--cta);
background: rgba(59, 130, 246, 0.08);
}
.csfloat-row-icons-btn.is-fav.is-active { color: oklch(0.78 0.18 30); background: rgba(248, 113, 113, 0.06); }
.csfloat-row-icons-btn.is-danger:hover {
background: rgba(248, 113, 113, 0.12);
color: oklch(0.72 0.18 30);
}
.csfloat-row-icons-btn-badge {
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
border: 1.5px solid var(--bg-1);
}
.csfloat-row-icons-btn-badge.is-cta { background: var(--cta); }
.csfloat-row-icons-btn-badge.is-success { background: oklch(0.78 0.16 152); }
.csfloat-row-icons-divider {
width: 1px;
height: 16px;
background: var(--line);
margin: 0 2px;
}
/* CSFloat-1:1: simple inline timestamp pill */
.csfloat-stamp-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 10px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-stamp-pill::before {
content: '';
width: 9px;
height: 9px;
border-radius: 999px;
border: 1.5px solid currentColor;
background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
background-size: 1px 4px, 3px 1px;
background-position: 50% 1px, 50% 50%;
background-repeat: no-repeat;
}
.csfloat-stamp-pill.is-cta { color: var(--cta); background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.3); }
.csfloat-stamp-pill.is-success { color: oklch(0.78 0.16 152); background: rgba(52, 211, 153, 0.06); border-color: rgba(52, 211, 153, 0.3); }
.csfloat-stamp-pill.is-warning { color: oklch(0.84 0.16 80); background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.3); }
/* CSFloat-1:1: simple inline currency display */
.csfloat-money {
display: inline-flex;
align-items: baseline;
gap: 1px;
font: 600 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-money::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-money-decimal {
font-size: 11px;
color: var(--ink-3);
font-weight: 500;
}
.csfloat-money.is-up { color: oklch(0.78 0.16 152); }
.csfloat-money.is-down { color: oklch(0.72 0.18 30); }
.csfloat-money.is-cta { color: var(--cta); }
.csfloat-money.is-was {
color: var(--ink-4);
text-decoration: line-through;
font-size: 12px;
font-weight: 500;
}
.csfloat-money.is-large {
font-size: 22px;
letter-spacing: -0.02em;
}
.csfloat-money.is-large::before { font-size: 14px; }
.csfloat-money.is-large .csfloat-money-decimal { font-size: 14px; }
.csfloat-money.is-xl {
font-size: 28px;
letter-spacing: -0.025em;
}
.csfloat-money.is-xl::before { font-size: 18px; }
.csfloat-money.is-xl .csfloat-money-decimal { font-size: 18px; }
.csfloat-money.is-sm { font-size: 12px; }
.csfloat-money.is-sm::before { font-size: 10px; }
/* END row-icons + stamp-pill + money */
/* CSFloat-1:1: split inline data display (left/right values) */
.csfloat-split-inline {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.csfloat-split-inline-cell {
padding: 4px 10px;
display: flex;
flex-direction: column;
gap: 1px;
border-right: 1px solid var(--line);
align-items: center;
text-align: center;
}
.csfloat-split-inline-cell:last-child { border-right: 0; }
.csfloat-split-inline-cell-label {
font: 600 8px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-split-inline-cell-val {
font: 700 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-split-inline-cell.is-up .csfloat-split-inline-cell-val { color: oklch(0.78 0.16 152); }
.csfloat-split-inline-cell.is-down .csfloat-split-inline-cell-val { color: oklch(0.72 0.18 30); }
.csfloat-split-inline-cell-val.is-currency::before {
content: '$';
font-size: 8px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
/* CSFloat-1:1: hover-card for compact preview */
.csfloat-mini-popover {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
display: none;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 8px 10px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
z-index: 100;
animation: csfloat-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mini-popover-anchor:hover .csfloat-mini-popover {
display: block;
}
.csfloat-mini-popover::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: var(--line-2);
}
.csfloat-mini-popover::before {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
margin-left: -3px;
border: 3px solid transparent;
border-top-color: var(--bg-3);
z-index: 1;
}
.csfloat-mini-popover-title {
font: 600 11px/1.3 var(--ui);
color: var(--ink-1);
margin-bottom: 2px;
}
.csfloat-mini-popover-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
/* CSFloat-1:1: simple price comparison row */
.csfloat-price-cmp-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
}
.csfloat-price-cmp-row-label {
font: 500 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
flex: 1 1 auto;
}
.csfloat-price-cmp-row-val {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-price-cmp-row-val::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-price-cmp-row-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-price-cmp-row-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-price-cmp-row-val.is-cta { color: var(--cta); }
.csfloat-price-cmp-row-delta {
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-price-cmp-row-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-price-cmp-row-delta.is-down { color: oklch(0.72 0.18 30); }
/* END split-inline + mini-popover + price-cmp-row */
/* CSFloat-1:1: header alert pulse strip */
.csfloat-pulse-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), transparent);
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
font: 500 11px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-pulse-strip::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cta);
box-shadow: 0 0 6px currentColor;
color: var(--cta);
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
flex: 0 0 6px;
}
.csfloat-pulse-strip.is-success::before { background: oklch(0.78 0.16 152); color: oklch(0.78 0.16 152); }
.csfloat-pulse-strip.is-warning::before { background: oklch(0.78 0.16 80); color: oklch(0.84 0.16 80); }
.csfloat-pulse-strip.is-danger::before { background: oklch(0.66 0.18 30); color: oklch(0.72 0.18 30); }
.csfloat-pulse-strip-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
flex: 0 0 auto;
}
.csfloat-pulse-strip-spacer { flex: 1 1 auto; }
.csfloat-pulse-strip-link {
font: 600 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
letter-spacing: -0.005em;
}
.csfloat-pulse-strip-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-pulse-strip-link:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.csfloat-pulse-strip::before { animation: none; }
}
/* CSFloat-1:1: tooltip caption underneath input fields */
.csfloat-input-cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 0 0;
font: 400 10px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-input-cap-msg {
flex: 1 1 auto;
}
.csfloat-input-cap-msg.is-error { color: oklch(0.72 0.18 30); }
.csfloat-input-cap-msg.is-success { color: oklch(0.78 0.16 152); }
.csfloat-input-cap-msg.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-input-cap-counter {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-input-cap-counter.is-warn { color: oklch(0.84 0.16 80); }
.csfloat-input-cap-counter.is-over { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: simple inline icon-text combo */
.csfloat-icon-text {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-icon-text-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--ink-4);
}
.csfloat-icon-text.is-cta { color: var(--cta); }
.csfloat-icon-text.is-cta .csfloat-icon-text-icon { color: var(--cta); }
.csfloat-icon-text.is-success { color: oklch(0.78 0.16 152); }
.csfloat-icon-text.is-success .csfloat-icon-text-icon { color: oklch(0.78 0.16 152); }
.csfloat-icon-text.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-icon-text.is-warning .csfloat-icon-text-icon { color: oklch(0.84 0.16 80); }
.csfloat-icon-text.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-icon-text.is-danger .csfloat-icon-text-icon { color: oklch(0.72 0.18 30); }
.csfloat-icon-text-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
color: var(--ink-1);
letter-spacing: 0.02em;
margin-left: 2px;
}
/* END pulse-strip + input-cap + icon-text */
/* CSFloat-1:1: chip with icon + label + value */
.csfloat-trio-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-trio-chip-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: currentColor;
opacity: 0.75;
}
.csfloat-trio-chip-label {
color: var(--ink-4);
font-weight: 400;
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-trio-chip-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 700;
letter-spacing: 0;
}
.csfloat-trio-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-trio-chip.is-cta .csfloat-trio-chip-val { color: var(--cta); }
.csfloat-trio-chip.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-trio-chip.is-success .csfloat-trio-chip-val { color: oklch(0.78 0.16 152); }
.csfloat-trio-chip.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-trio-chip.is-warning .csfloat-trio-chip-val { color: oklch(0.84 0.16 80); }
/* CSFloat-1:1: grid header with sort indicator */
.csfloat-grid-th {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
background: transparent;
border: 0;
cursor: pointer;
border-radius: 4px;
transition: all 120ms ease;
}
.csfloat-grid-th:hover {
background: var(--bg-2);
color: var(--ink-2);
}
.csfloat-grid-th.is-sorted-asc,
.csfloat-grid-th.is-sorted-desc {
color: var(--cta);
}
.csfloat-grid-th-arrow {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-135deg);
opacity: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-grid-th:hover .csfloat-grid-th-arrow { opacity: 0.5; }
.csfloat-grid-th.is-sorted-asc .csfloat-grid-th-arrow,
.csfloat-grid-th.is-sorted-desc .csfloat-grid-th-arrow { opacity: 1; color: var(--cta); }
.csfloat-grid-th.is-sorted-desc .csfloat-grid-th-arrow {
transform: rotate(45deg);
}
/* CSFloat-1:1: small floating label tag */
.csfloat-float-tag {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 6px;
background: rgba(7, 11, 24, 0.65);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.csfloat-float-tag.is-cta {
background: rgba(59, 130, 246, 0.85);
border-color: rgba(59, 130, 246, 0.95);
color: #fff;
}
.csfloat-float-tag.is-success {
background: rgba(52, 211, 153, 0.85);
border-color: rgba(52, 211, 153, 0.95);
color: var(--bg);
}
.csfloat-float-tag.is-warning {
background: rgba(251, 191, 36, 0.85);
border-color: rgba(251, 191, 36, 0.95);
color: var(--bg);
}
.csfloat-float-tag.is-danger {
background: rgba(248, 113, 113, 0.85);
border-color: rgba(248, 113, 113, 0.95);
color: #fff;
}
.csfloat-float-tag.is-rare {
background: linear-gradient(135deg, rgba(244, 114, 182, 0.85), rgba(167, 139, 250, 0.85));
border-color: rgba(244, 114, 182, 0.95);
color: #fff;
}
.csfloat-float-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
.csfloat-float-tag.is-bottom-left { top: auto; bottom: 8px; }
.csfloat-float-tag.is-bottom-right { top: auto; bottom: 8px; left: auto; right: 8px; }
.csfloat-float-tag.is-top-right { left: auto; right: 8px; }
/* END trio-chip + grid-th + float-tag */
/* CSFloat-1:1: hover-triggered popover with details */
.csfloat-detail-popover {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
display: none;
flex-direction: column;
gap: 8px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
width: 240px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
z-index: 100;
animation: csfloat-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-detail-popover-anchor:hover .csfloat-detail-popover {
display: flex;
}
.csfloat-detail-popover::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-bottom-color: var(--line-2);
}
.csfloat-detail-popover::before {
content: '';
position: absolute;
bottom: calc(100% - 1px);
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom-color: var(--bg-1);
z-index: 1;
}
.csfloat-detail-popover-head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.csfloat-detail-popover-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
flex: 0 0 28px;
}
.csfloat-detail-popover-icon.is-cta {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-detail-popover-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-detail-popover-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-detail-popover-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-detail-popover-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-detail-popover-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-detail-popover-row > .csfloat-detail-popover-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 600;
}
.csfloat-detail-popover-row.is-emphasis {
font-weight: 600;
color: var(--ink-1);
font-size: 12px;
padding-top: 6px;
border-top: 1px dashed var(--line);
margin-top: 2px;
}
.csfloat-detail-popover-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
/* CSFloat-1:1: search keyword highlight */
.csfloat-search-hl {
background: rgba(59, 130, 246, 0.18);
color: var(--cta);
padding: 0 2px;
border-radius: 2px;
font-weight: 700;
}
.csfloat-search-hl.is-success {
background: rgba(52, 211, 153, 0.18);
color: oklch(0.78 0.16 152);
}
.csfloat-search-hl.is-warning {
background: rgba(251, 191, 36, 0.18);
color: oklch(0.84 0.16 80);
}
/* CSFloat-1:1: simple sticky bottom bar */
.csfloat-stick-bottom {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
background: var(--bg-1);
border-top: 1px solid var(--line);
z-index: 10;
box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.3);
}
.csfloat-stick-bottom-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-stick-bottom-msg {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-stick-bottom-msg-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--cta);
font-weight: 700;
}
.csfloat-stick-bottom-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-stick-bottom-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* END detail-popover + search-hl + stick-bottom */
/* CSFloat-1:1: rich text input with floating label */
.csfloat-float-label {
position: relative;
display: block;
width: 100%;
}
.csfloat-float-label > input,
.csfloat-float-label > textarea {
width: 100%;
height: 48px;
padding: 18px 12px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
font: 500 14px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
outline: 0;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-float-label > textarea {
height: auto;
min-height: 96px;
padding-top: 22px;
padding-bottom: 10px;
resize: vertical;
line-height: 1.5;
}
.csfloat-float-label > input:focus,
.csfloat-float-label > textarea:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-float-label-text {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
font: 500 13px/1 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
pointer-events: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
background: transparent;
}
.csfloat-float-label > input:focus + .csfloat-float-label-text,
.csfloat-float-label > input:not(:placeholder-shown) + .csfloat-float-label-text,
.csfloat-float-label > textarea:focus + .csfloat-float-label-text,
.csfloat-float-label > textarea:not(:placeholder-shown) + .csfloat-float-label-text {
top: 12px;
font-size: 10px;
color: var(--cta);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-float-label.is-textarea .csfloat-float-label-text {
top: 14px;
transform: none;
}
.csfloat-float-label.is-textarea > textarea:focus + .csfloat-float-label-text,
.csfloat-float-label.is-textarea > textarea:not(:placeholder-shown) + .csfloat-float-label-text {
top: 8px;
}
.csfloat-float-label.is-error > input,
.csfloat-float-label.is-error > textarea {
border-color: oklch(0.66 0.18 30);
background: rgba(248, 113, 113, 0.04);
}
.csfloat-float-label.is-error > input:focus + .csfloat-float-label-text,
.csfloat-float-label.is-error > input:not(:placeholder-shown) + .csfloat-float-label-text,
.csfloat-float-label.is-error > textarea:focus + .csfloat-float-label-text,
.csfloat-float-label.is-error > textarea:not(:placeholder-shown) + .csfloat-float-label-text {
color: oklch(0.72 0.18 30);
}
.csfloat-float-label.is-success > input,
.csfloat-float-label.is-success > textarea {
border-color: oklch(0.62 0.16 152);
}
/* CSFloat-1:1: simple price card with action */
.csfloat-price-action {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-price-action-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-price-action-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-price-action-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-price-action-val::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-price-action-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-price-action-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-price-action-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-price-action-btn {
flex: 0 0 auto;
}
/* CSFloat-1:1: small grid stats card with icon */
.csfloat-icon-stat {
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-icon-stat:hover { border-color: var(--line-2); }
.csfloat-icon-stat-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
font-size: 14px;
}
.csfloat-icon-stat.is-success .csfloat-icon-stat-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-icon-stat.is-warning .csfloat-icon-stat-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-icon-stat-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-icon-stat-label {
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-icon-stat-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-icon-stat-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* END float-label + price-action + icon-stat */
/* CSFloat-1:1: split body card with separator */
.csfloat-split-body {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.csfloat-split-body > .csfloat-split-body-side {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.csfloat-split-body > .csfloat-split-body-side:first-child {
border-right: 1px solid var(--line);
}
.csfloat-split-body-side-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0;
}
.csfloat-split-body-side-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.csfloat-split-body-side-cta {
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
@media (max-width: 720px) {
.csfloat-split-body { grid-template-columns: 1fr; }
.csfloat-split-body > .csfloat-split-body-side:first-child {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
/* CSFloat-1:1: page-action button cluster (top right of pages) */
.csfloat-page-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-page-actions-divider {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 2px;
}
.csfloat-page-actions-spacer { flex: 1 1 auto; }
/* CSFloat-1:1: number range slider (with two handles for filtering) */
.csfloat-num-range {
position: relative;
height: 36px;
padding: 16px 0;
display: flex;
align-items: center;
}
.csfloat-num-range-track {
position: relative;
width: 100%;
height: 4px;
background: var(--bg-3);
border-radius: 2px;
}
.csfloat-num-range-fill {
position: absolute;
top: 0;
bottom: 0;
background: var(--cta);
border-radius: 2px;
box-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
}
.csfloat-num-range-handle {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: #fff;
border: 2px solid var(--cta);
border-radius: 999px;
transform: translate(-50%, -50%);
cursor: grab;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 140ms;
z-index: 1;
}
.csfloat-num-range-handle:hover {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.csfloat-num-range-handle:active { cursor: grabbing; }
.csfloat-num-range-bounds {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-num-range-input-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.csfloat-num-range-input-row > input {
flex: 1 1 auto;
height: 30px;
padding: 0 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
outline: 0;
text-align: center;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
-moz-appearance: textfield;
}
.csfloat-num-range-input-row > input::-webkit-outer-spin-button,
.csfloat-num-range-input-row > input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.csfloat-num-range-input-row > input:focus {
border-color: var(--cta);
background: var(--bg-1);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.csfloat-num-range-input-row-divider {
font: 500 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* END split-body + page-actions + num-range */
/* CSFloat-1:1: empty profile state */
.csfloat-profile-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 80px 24px;
text-align: center;
background: var(--bg-1);
border: 1px dashed var(--line-2);
border-radius: 14px;
}
.csfloat-profile-empty-avatar {
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
font: 700 24px/1 var(--mono);
letter-spacing: -0.02em;
}
.csfloat-profile-empty-title {
font: 700 18px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
}
.csfloat-profile-empty-msg {
font: 400 13px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 420px;
}
.csfloat-profile-empty-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
/* CSFloat-1:1: data-bar with title + percentage progress */
.csfloat-data-bar {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0;
}
.csfloat-data-bar-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-data-bar-label {
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-data-bar-label-icon {
width: 12px;
height: 12px;
color: var(--ink-4);
}
.csfloat-data-bar-val {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-data-bar-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-data-bar-track {
position: relative;
height: 5px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
}
.csfloat-data-bar-fill {
height: 100%;
background: var(--cta);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-data-bar-fill.is-success { background: oklch(0.62 0.16 152); }
.csfloat-data-bar-fill.is-warning { background: oklch(0.78 0.16 80); }
.csfloat-data-bar-fill.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-data-bar-fill.is-purple { background: oklch(0.62 0.18 290); }
.csfloat-data-bar-fill.is-gradient {
background: linear-gradient(90deg, var(--cta), oklch(0.84 0.18 240));
}
.csfloat-data-bar-meta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: simple horizontal divider with label */
.csfloat-h-divider {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font: 600 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-h-divider::before,
.csfloat-h-divider::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-h-divider-text {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-h-divider.is-cta { color: var(--cta); }
.csfloat-h-divider-icon {
width: 11px;
height: 11px;
color: currentColor;
}
/* END profile-empty + data-bar + h-divider */
/* CSFloat-1:1: minimal stat ticker (animated counter row) */
.csfloat-stat-ticker {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-stat-ticker-item {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.csfloat-stat-ticker-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 700;
letter-spacing: 0;
}
.csfloat-stat-ticker-item-mono.is-currency::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-stat-ticker-item-mono.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-ticker-item-mono.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-ticker-divider {
width: 1px;
height: 12px;
background: var(--line);
}
.csfloat-stat-ticker-pulse {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
}
.csfloat-stat-ticker-pulse::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 4px currentColor;
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-stat-ticker-pulse::before { animation: none; }
}
/* CSFloat-1:1: market overview hero strip */
.csfloat-mkt-overview {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 22px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.csfloat-mkt-overview::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px 200px at 50% 100%, rgba(59, 130, 246, 0.06), transparent 60%);
pointer-events: none;
}
.csfloat-mkt-overview-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
position: relative;
z-index: 1;
}
.csfloat-mkt-overview-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-mkt-overview-title {
font: 700 18px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.015em;
margin: 0;
}
.csfloat-mkt-overview-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
padding-top: 12px;
border-top: 1px dashed var(--line);
position: relative;
z-index: 1;
}
.csfloat-mkt-overview-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-mkt-overview-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-mkt-overview-stat-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-mkt-overview-stat-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-mkt-overview-stat-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 10px/1 var(--ui);
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-mkt-overview-stat-delta {
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-mkt-overview-stat-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-mkt-overview-stat-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: simple icon button */
.csfloat-i-btn {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-i-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-i-btn.is-active {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-i-btn.is-cta {
background: var(--cta);
border-color: var(--cta);
color: #fff;
}
.csfloat-i-btn.is-cta:hover { background: oklch(0.66 0.18 240); }
.csfloat-i-btn.is-danger:hover {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-i-btn.is-sm { width: 26px; height: 26px; }
.csfloat-i-btn.is-lg { width: 40px; height: 40px; border-radius: 8px; }
.csfloat-i-btn.is-pill { border-radius: 999px; }
.csfloat-i-btn-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 14px;
height: 14px;
padding: 0 4px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 9px/14px var(--mono);
text-align: center;
font-feature-settings: "tnum";
border: 2px solid var(--bg-1);
}
.csfloat-i-btn-badge.is-cta { background: var(--cta); }
.csfloat-i-btn-badge.is-success { background: oklch(0.62 0.16 152); }
.csfloat-i-btn-badge.is-dot {
width: 8px;
height: 8px;
min-width: 8px;
padding: 0;
font-size: 0;
}
/* END stat-ticker + mkt-overview + i-btn */
/* CSFloat-1:1: small notification ribbon (full-width) */
.csfloat-notif-ribbon {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(59, 130, 246, 0.06);
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
font: 500 11px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-notif-ribbon-icon {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 14px;
font: 700 10px/1 var(--ui);
}
.csfloat-notif-ribbon-text > b { color: var(--ink-1); font-weight: 600; }
.csfloat-notif-ribbon-spacer { flex: 1 1 auto; }
.csfloat-notif-ribbon-link {
font: 600 11px/1 var(--ui);
color: var(--cta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-notif-ribbon-link::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
.csfloat-notif-ribbon-link:hover { text-decoration: underline; }
.csfloat-notif-ribbon-x {
width: 18px;
height: 18px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 4px;
cursor: pointer;
font: 500 13px/1 var(--ui);
}
.csfloat-notif-ribbon-x:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink-1); }
.csfloat-notif-ribbon.is-success {
background: rgba(52, 211, 153, 0.06);
border-bottom-color: rgba(52, 211, 153, 0.2);
}
.csfloat-notif-ribbon.is-success .csfloat-notif-ribbon-icon {
background: oklch(0.62 0.16 152);
}
.csfloat-notif-ribbon.is-warning {
background: rgba(251, 191, 36, 0.06);
border-bottom-color: rgba(251, 191, 36, 0.2);
}
.csfloat-notif-ribbon.is-warning .csfloat-notif-ribbon-icon {
background: oklch(0.78 0.16 80);
color: var(--bg);
}
.csfloat-notif-ribbon.is-danger {
background: rgba(248, 113, 113, 0.06);
border-bottom-color: rgba(248, 113, 113, 0.2);
}
.csfloat-notif-ribbon.is-danger .csfloat-notif-ribbon-icon {
background: oklch(0.66 0.18 30);
}
/* CSFloat-1:1: page tab bar (alternative to header tabs, dense version) */
.csfloat-page-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.csfloat-page-tabs::-webkit-scrollbar { display: none; }
.csfloat-page-tabs-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: transparent;
border: 0;
border-radius: 6px;
font: 600 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-page-tabs-link:hover { color: var(--ink-1); }
.csfloat-page-tabs-link.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-page-tabs-link.is-active.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-page-tabs-link-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-page-tabs-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-page-tabs-link.is-active .csfloat-page-tabs-link-count {
color: var(--ink-3);
}
.csfloat-page-tabs.is-block { display: flex; }
.csfloat-page-tabs.is-block .csfloat-page-tabs-link { flex: 1 1 0; justify-content: center; }
/* END notif-ribbon + page-tabs */
/* CSFloat-1:1: simple price chart axes + minimal grid */
.csfloat-axes-svg {
display: block;
width: 100%;
height: auto;
}
.csfloat-axes-svg .csfloat-axes-grid line {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 2 4;
opacity: 0.5;
}
.csfloat-axes-svg .csfloat-axes-axis line,
.csfloat-axes-svg .csfloat-axes-axis path {
stroke: var(--line);
stroke-width: 1;
fill: none;
}
.csfloat-axes-svg .csfloat-axes-axis text {
fill: var(--ink-4);
font: 400 9px var(--mono);
font-feature-settings: "tnum";
}
.csfloat-axes-svg .csfloat-axes-line {
fill: none;
stroke: var(--cta);
stroke-width: 1.5;
stroke-linecap: round;
}
.csfloat-axes-svg .csfloat-axes-area {
fill: var(--cta);
fill-opacity: 0.12;
stroke: none;
}
.csfloat-axes-svg .csfloat-axes-pt {
r: 3;
fill: var(--cta);
stroke: var(--bg);
stroke-width: 2;
}
/* CSFloat-1:1: deep-link card pair — for related items inline */
.csfloat-link-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.csfloat-link-pair-card {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-link-pair-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-1px);
}
.csfloat-link-pair-card-img {
width: 36px;
height: 36px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 4px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-link-pair-card-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-link-pair-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-link-pair-card-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-link-pair-card-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-3);
font-feature-settings: "tnum";
}
.csfloat-link-pair-card-meta::before {
content: '$';
font-size: 9px;
color: var(--ink-4);
margin-right: 1px;
font-weight: 500;
}
@media (max-width: 540px) {
.csfloat-link-pair { grid-template-columns: 1fr; }
}
/* CSFloat-1:1: account section header (with action) */
.csfloat-acct-section-h {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 14px 0 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
/* END axes-svg + link-pair + acct-section-h */
/* CSFloat-1:1: floating button label */
.csfloat-fab-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--bg-3);
color: var(--ink-1);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line-2);
font: 600 11px/1 var(--ui);
letter-spacing: -0.005em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 140ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 140ms;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.csfloat-fab-label-anchor:hover .csfloat-fab-label {
opacity: 1;
transform: translateY(-50%) translateX(-4px);
}
/* CSFloat-1:1: data tile with hover gradient */
.csfloat-data-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.csfloat-data-tile::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(400px 200px at 100% 0%, rgba(59, 130, 246, 0.06), transparent 60%);
opacity: 0;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.csfloat-data-tile:hover {
border-color: var(--line-2);
transform: translateY(-2px);
}
.csfloat-data-tile:hover::before { opacity: 1; }
.csfloat-data-tile-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
position: relative;
z-index: 1;
}
.csfloat-data-tile-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 2px;
position: relative;
z-index: 1;
}
.csfloat-data-tile-val.is-currency::before {
content: '$';
font-size: 13px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-data-tile-meta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
position: relative;
z-index: 1;
}
.csfloat-data-tile-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
}
.csfloat-data-tile-meta-mono.is-up { color: oklch(0.78 0.16 152); }
.csfloat-data-tile-meta-mono.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: nav action bar (with back button + title) */
.csfloat-nav-action {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
margin-bottom: 14px;
}
.csfloat-nav-action-back {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-nav-action-back:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-nav-action-back::before {
content: '';
width: 8px;
height: 8px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(2px, -2px);
}
.csfloat-nav-action-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.csfloat-nav-action-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-nav-action-title {
font: 700 16px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-nav-action-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* END fab-label + data-tile + nav-action */
/* CSFloat-1:1: simple inline rate display (current price/avg) */
.csfloat-rate-inline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-rate-inline-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-rate-inline-val {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-rate-inline-val::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-rate-inline-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-rate-inline-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-rate-inline-divider {
width: 1px;
height: 14px;
background: var(--line);
}
.csfloat-rate-inline-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-rate-inline-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-rate-inline-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: heat marker — for time-of-day or activity heat indicator */
.csfloat-heat-marker {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.csfloat-heat-marker::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-heat-marker.is-hot {
color: oklch(0.78 0.18 30);
background: rgba(248, 113, 113, 0.06);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-heat-marker.is-hot::before {
content: '';
width: 8px;
height: 10px;
background: linear-gradient(180deg, oklch(0.84 0.18 60), oklch(0.78 0.18 30));
clip-path: polygon(50% 0%, 100% 50%, 75% 100%, 50% 80%, 25% 100%, 0% 50%);
border: 0;
}
.csfloat-heat-marker.is-cold {
color: oklch(0.78 0.16 220);
background: rgba(96, 165, 250, 0.06);
border-color: rgba(96, 165, 250, 0.3);
}
.csfloat-heat-marker.is-cold::before {
content: '';
width: 8px;
height: 10px;
background: oklch(0.78 0.16 220);
clip-path: polygon(50% 0%, 60% 35%, 100% 35%, 65% 60%, 80% 100%, 50% 75%, 20% 100%, 35% 60%, 0% 35%, 40% 35%);
border: 0;
}
.csfloat-heat-marker.is-warm {
color: oklch(0.84 0.16 80);
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-heat-marker.is-warm::before {
content: '';
width: 8px;
height: 8px;
background: oklch(0.84 0.16 80);
border-radius: 999px;
border: 0;
}
/* CSFloat-1:1: stat with progress bar inline */
.csfloat-stat-bar-inline {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-stat-bar-inline-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.csfloat-stat-bar-inline-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-bar-inline-val {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-stat-bar-inline-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-bar-inline-track {
position: relative;
height: 4px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
}
.csfloat-stat-bar-inline-fill {
height: 100%;
background: var(--cta);
border-radius: 999px;
transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-bar-inline-fill.is-success { background: oklch(0.62 0.16 152); }
.csfloat-stat-bar-inline-fill.is-warning { background: oklch(0.78 0.16 80); }
.csfloat-stat-bar-inline-fill.is-danger { background: oklch(0.66 0.18 30); }
.csfloat-stat-bar-inline-meta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* END rate-inline + heat-marker + stat-bar-inline */
/* CSFloat-1:1: order overview tile (compact for sidebar) */
.csfloat-order-overview {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 12px;
}
.csfloat-order-overview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.csfloat-order-overview-head-title {
font: 600 12px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-order-overview-head-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-overview-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.csfloat-order-overview-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font: 400 12px/1.3 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-order-overview-row > .csfloat-order-overview-row-val {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 500;
}
.csfloat-order-overview-row.is-discount > .csfloat-order-overview-row-val {
color: oklch(0.78 0.16 152);
}
.csfloat-order-overview-row.is-fee > .csfloat-order-overview-row-val {
color: oklch(0.84 0.16 80);
}
.csfloat-order-overview-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.csfloat-order-overview-total-label {
font: 700 13px/1 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-order-overview-total-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
}
.csfloat-order-overview-total-val::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* CSFloat-1:1: notification empty state */
.csfloat-notif-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 56px 24px;
text-align: center;
}
.csfloat-notif-empty-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--bg-2);
border: 1px dashed var(--line-2);
color: var(--ink-4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.csfloat-notif-empty-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-notif-empty-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin: 0;
max-width: 280px;
}
/* CSFloat-1:1: small alert tag with X */
.csfloat-alert-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 4px 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-alert-tag.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-alert-tag.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-alert-tag.is-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-alert-tag.is-danger {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-alert-tag-x {
width: 14px;
height: 14px;
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
font: 500 11px/1 var(--ui);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
.csfloat-alert-tag-x:hover { opacity: 1; }
.csfloat-alert-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
/* END order-overview + notif-empty + alert-tag */
/* CSFloat-1:1: account preview tile (small avatar + balance) */
.csfloat-acct-preview {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 500 12px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-acct-preview-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 36px;
object-fit: cover;
}
.csfloat-acct-preview-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-acct-preview-name {
font: 600 12px/1.2 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-acct-preview-handle {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-acct-preview-bal {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
text-align: right;
}
.csfloat-acct-preview-bal::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
/* CSFloat-1:1: section subnav (small under-page nav) */
.csfloat-sub-nav {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 3px;
gap: 1px;
}
.csfloat-sub-nav-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 5px;
font: 600 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-sub-nav-link:hover { color: var(--ink-1); }
.csfloat-sub-nav-link.is-active {
background: var(--bg-3);
color: var(--ink-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.csfloat-sub-nav-link.is-active.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-sub-nav-link-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: currentColor;
opacity: 0.85;
}
.csfloat-sub-nav-link-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-sub-nav-link.is-active .csfloat-sub-nav-link-count { color: var(--ink-3); }
.csfloat-sub-nav-link[disabled] {
color: var(--ink-4);
cursor: not-allowed;
}
/* CSFloat-1:1: simple status grid for system overview */
.csfloat-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
.csfloat-status-grid-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-status-grid-cell-name {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-status-grid-cell-name::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
color: oklch(0.78 0.16 152);
}
.csfloat-status-grid-cell.is-degraded .csfloat-status-grid-cell-name::before { background: oklch(0.78 0.16 80); color: oklch(0.84 0.16 80); }
.csfloat-status-grid-cell.is-down .csfloat-status-grid-cell-name::before { background: oklch(0.66 0.18 30); color: oklch(0.72 0.18 30); }
.csfloat-status-grid-cell.is-maintenance .csfloat-status-grid-cell-name::before { background: var(--cta); color: var(--cta); }
.csfloat-status-grid-cell-status {
font: 500 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 2px;
}
.csfloat-status-grid-cell.is-up .csfloat-status-grid-cell-status { color: oklch(0.78 0.16 152); }
.csfloat-status-grid-cell.is-degraded .csfloat-status-grid-cell-status { color: oklch(0.84 0.16 80); }
.csfloat-status-grid-cell.is-down .csfloat-status-grid-cell-status { color: oklch(0.72 0.18 30); }
.csfloat-status-grid-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
/* END acct-preview + sub-nav + status-grid */
/* CSFloat-1:1: avatar with status (small inline) */
.csfloat-av-status {
position: relative;
display: inline-block;
}
.csfloat-av-status > img {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-3);
object-fit: cover;
display: block;
}
.csfloat-av-status::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ink-4);
border: 2px solid var(--bg-1);
}
.csfloat-av-status.is-online::after { background: oklch(0.78 0.16 152); }
.csfloat-av-status.is-away::after { background: oklch(0.84 0.16 80); }
.csfloat-av-status.is-busy::after { background: oklch(0.66 0.18 30); }
.csfloat-av-status.is-sm > img { width: 22px; height: 22px; }
.csfloat-av-status.is-sm::after { width: 6px; height: 6px; }
.csfloat-av-status.is-lg > img { width: 36px; height: 36px; }
.csfloat-av-status.is-lg::after { width: 10px; height: 10px; }
.csfloat-av-status.is-xl > img { width: 48px; height: 48px; }
.csfloat-av-status.is-xl::after { width: 12px; height: 12px; border-width: 3px; }
.csfloat-av-status.is-square > img { border-radius: 6px; }
.csfloat-av-status.is-pulse::after {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
box-shadow: 0 0 4px currentColor;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-av-status.is-pulse::after { animation: none; }
}
/* CSFloat-1:1: scroll-snap horizontal product card row */
.csfloat-prod-snap {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 8px;
padding: 8px 8px 16px;
margin: 0 -8px;
scrollbar-width: none;
}
.csfloat-prod-snap::-webkit-scrollbar { display: none; }
.csfloat-prod-snap > .csfloat-prod-snap-card {
scroll-snap-align: start;
flex: 0 0 200px;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-prod-snap > .csfloat-prod-snap-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-prod-snap-card-img {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
aspect-ratio: 1.45;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.csfloat-prod-snap-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.csfloat-prod-snap-card-body {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-prod-snap-card-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-prod-snap-card-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px;
}
.csfloat-prod-snap-card-price {
font: 700 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-prod-snap-card-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-prod-snap-card-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: simple meta line with badge */
.csfloat-meta-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
}
.csfloat-meta-badge-icon {
width: 11px;
height: 11px;
color: currentColor;
opacity: 0.7;
flex: 0 0 11px;
}
.csfloat-meta-badge:hover {
background: var(--bg-3);
border-color: var(--line-2);
color: var(--ink-1);
}
.csfloat-meta-badge.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-meta-badge-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
}
/* END av-status + prod-snap + meta-badge */
/* CSFloat-1:1: hover-revealed compare line for grid hovers */
.csfloat-cmp-line {
display: inline-flex;
align-items: baseline;
gap: 5px;
font: 500 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-cmp-line-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-cmp-line-val {
font: 700 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-cmp-line-val::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-cmp-line-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-cmp-line-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-cmp-line-vs {
color: var(--ink-4);
font-weight: 500;
font-size: 10px;
}
.csfloat-cmp-line-delta {
display: inline-flex;
align-items: center;
gap: 2px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-left: 2px;
}
.csfloat-cmp-line-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-cmp-line-delta.is-down { color: oklch(0.72 0.18 30); }
/* CSFloat-1:1: simple inline option list (multi-select chips for forms) */
.csfloat-opt-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csfloat-opt-list-opt {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 500 12px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-opt-list-opt:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-opt-list-opt.is-selected {
background: rgba(59, 130, 246, 0.12);
border-color: var(--cta);
color: var(--cta);
}
.csfloat-opt-list-opt-mark {
width: 13px;
height: 13px;
border-radius: 3px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
flex: 0 0 13px;
position: relative;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-opt-list-opt.is-selected .csfloat-opt-list-opt-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-opt-list-opt.is-selected .csfloat-opt-list-opt-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
}
.csfloat-opt-list-opt-count {
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
margin-left: 2px;
}
/* CSFloat-1:1: minor warn message inline */
.csfloat-warn-msg {
display: inline-flex;
align-items: flex-start;
gap: 5px;
font: 400 11px/1.5 var(--ui);
color: oklch(0.84 0.16 80);
letter-spacing: -0.005em;
padding: 4px 0;
}
.csfloat-warn-msg::before {
content: '!';
width: 12px;
height: 12px;
background: oklch(0.66 0.18 80);
color: var(--bg);
border-radius: 999px;
font: 700 9px/12px var(--ui);
text-align: center;
flex: 0 0 12px;
margin-top: 1px;
}
.csfloat-warn-msg.is-error { color: oklch(0.78 0.18 30); }
.csfloat-warn-msg.is-error::before { background: oklch(0.66 0.18 30); }
.csfloat-warn-msg.is-info { color: var(--cta); }
.csfloat-warn-msg.is-info::before { background: var(--cta); content: 'i'; font-style: italic; }
.csfloat-warn-msg > b { font-weight: 600; color: currentColor; }
/* END cmp-line + opt-list + warn-msg */
/* CSFloat-1:1: trade box hero (centered swap visual) */
.csfloat-trade-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 28px 24px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 60%);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.csfloat-trade-box::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 200px at 50% 0%, rgba(59, 130, 246, 0.08), transparent 60%);
pointer-events: none;
}
.csfloat-trade-box-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
position: relative;
z-index: 1;
}
.csfloat-trade-box-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: center;
width: 100%;
position: relative;
z-index: 1;
}
.csfloat-trade-box-side {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.csfloat-trade-box-side-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trade-box-side-card {
width: 80px;
height: 80px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.csfloat-trade-box-side-card > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.csfloat-trade-box-side-amt {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-trade-box-side-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-trade-box-arrow {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--cta);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.csfloat-trade-box-arrow::before {
content: '';
width: 12px;
height: 12px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, 2px);
}
.csfloat-trade-box-actions {
display: flex;
gap: 8px;
margin-top: 4px;
position: relative;
z-index: 1;
}
@media (max-width: 540px) {
.csfloat-trade-box-row { grid-template-columns: 1fr; gap: 10px; }
.csfloat-trade-box-arrow { transform: rotate(90deg); }
}
/* CSFloat-1:1: bordered selection card */
.csfloat-select-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-select-card:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-select-card.is-selected {
border-color: var(--cta);
background: rgba(59, 130, 246, 0.04);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.csfloat-select-card-mark {
position: absolute;
top: 12px;
right: 12px;
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--bg-3);
border: 1.5px solid var(--line-2);
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-select-card.is-selected .csfloat-select-card-mark {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-select-card.is-selected .csfloat-select-card-mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-radius: 999px;
background: #fff;
transform: translate(-50%, -50%);
}
.csfloat-select-card-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
padding-right: 24px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-select-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-select-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
margin-top: 4px;
}
.csfloat-select-card-foot-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 11px/1 var(--ui);
color: var(--ink-4);
}
.csfloat-select-card-foot-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
/* END trade-box + select-card */
/* CSFloat-1:1: featured listing strip with metadata */
.csfloat-feat-strip {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feat-strip:hover {
border-color: var(--cta);
background: var(--bg-2);
transform: translateY(-1px);
}
.csfloat-feat-strip-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-feat-strip-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.csfloat-feat-strip-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-feat-strip-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-feat-strip-tag {
font: 700 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cta);
background: rgba(59, 130, 246, 0.12);
padding: 2px 5px;
border-radius: 3px;
}
.csfloat-feat-strip-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-feat-strip-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-feat-strip-trail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex: 0 0 auto;
}
.csfloat-feat-strip-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-feat-strip-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-feat-strip-meta-stamp {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: profile tabs with badge */
.csfloat-tabs-badge {
display: flex;
align-items: center;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.csfloat-tabs-badge-link {
position: relative;
padding: 12px 16px;
background: transparent;
border: 0;
font: 600 13px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-tabs-badge-link:hover { color: var(--ink-1); }
.csfloat-tabs-badge-link.is-active { color: var(--ink-1); }
.csfloat-tabs-badge-link.is-active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--cta);
border-radius: 2px 2px 0 0;
}
.csfloat-tabs-badge-link-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
background: var(--bg-3);
color: var(--ink-3);
border-radius: 999px;
font: 600 9px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-tabs-badge-link.is-active .csfloat-tabs-badge-link-badge {
background: var(--cta);
color: #fff;
}
.csfloat-tabs-badge-link-badge.is-success {
background: oklch(0.62 0.16 152);
color: #fff;
}
.csfloat-tabs-badge-link-badge.is-danger {
background: oklch(0.66 0.18 30);
color: #fff;
}
.csfloat-tabs-badge-spacer { flex: 1 1 auto; }
/* END feat-strip + tabs-badge */
/* CSFloat-1:1: scroll-snap horizontal feature row */
.csfloat-feat-snap {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 12px;
padding: 12px 12px 18px;
margin: 0 -12px;
scrollbar-width: none;
}
.csfloat-feat-snap::-webkit-scrollbar { display: none; }
.csfloat-feat-snap > .csfloat-feat-snap-card {
scroll-snap-align: start;
flex: 0 0 280px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 70%);
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feat-snap > .csfloat-feat-snap-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.csfloat-feat-snap-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--cta);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex: 0 0 40px;
}
.csfloat-feat-snap-card.is-success .csfloat-feat-snap-card-icon {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-feat-snap-card.is-warning .csfloat-feat-snap-card-icon {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-feat-snap-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.csfloat-feat-snap-card-title {
font: 600 14px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.01em;
margin: 0;
}
.csfloat-feat-snap-card-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-feat-snap-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
margin-top: auto;
border-top: 1px dashed var(--line);
}
.csfloat-feat-snap-card-foot-meta {
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-feat-snap-card-foot-action {
font: 600 11px/1 var(--ui);
color: var(--cta);
display: inline-flex;
align-items: center;
gap: 3px;
letter-spacing: -0.005em;
}
.csfloat-feat-snap-card-foot-action::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-feat-snap > .csfloat-feat-snap-card:hover .csfloat-feat-snap-card-foot-action::after {
transform: rotate(45deg) translate(2px, -2px);
}
/* CSFloat-1:1: minimal pricing label */
.csfloat-price-label {
display: inline-flex;
align-items: baseline;
gap: 4px;
font: 700 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-price-label::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-price-label-decimal {
font-size: 10px;
color: var(--ink-3);
font-weight: 500;
}
.csfloat-price-label.is-large {
font-size: 15px;
letter-spacing: -0.015em;
}
.csfloat-price-label.is-large::before { font-size: 12px; }
.csfloat-price-label.is-xl {
font-size: 22px;
letter-spacing: -0.025em;
}
.csfloat-price-label.is-xl::before { font-size: 14px; }
.csfloat-price-label.is-up { color: oklch(0.78 0.16 152); }
.csfloat-price-label.is-down { color: oklch(0.72 0.18 30); }
.csfloat-price-label.is-cta { color: var(--cta); }
/* CSFloat-1:1: simple chip cluster (multi-tag selection display) */
.csfloat-chip-cluster {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.csfloat-chip-cluster-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 500 10px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-chip-cluster-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-chip-cluster-chip.is-success {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-chip-cluster-chip.is-rare {
background: rgba(244, 114, 182, 0.08);
border-color: rgba(244, 114, 182, 0.3);
color: oklch(0.84 0.18 320);
}
.csfloat-chip-cluster-chip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
letter-spacing: 0;
}
.csfloat-chip-cluster-more {
font: 500 10px/1.4 var(--ui);
color: var(--ink-4);
padding: 3px 6px;
letter-spacing: -0.005em;
}
/* END feat-snap + price-label + chip-cluster */
/* CSFloat-1:1: hover-card with action footer */
.csfloat-action-hover-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-action-hover-card:hover {
border-color: var(--cta);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.csfloat-action-hover-card-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-action-hover-card:hover .csfloat-action-hover-card-img > img {
transform: scale(1.06);
}
.csfloat-action-hover-card-price::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-action-hover-card:hover .csfloat-action-hover-card-foot {
max-height: 80px;
opacity: 1;
padding-top: 4px;
}
/* CSFloat-1:1: simple expand collapse arrow */
.csfloat-expand-arrow {
display: inline-block;
width: 9px;
height: 9px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-expand-arrow.is-open { transform: rotate(225deg) translate(-1px, -1px); }
.csfloat-expand-arrow.is-cta { border-color: var(--cta); }
.csfloat-expand-arrow.is-success { border-color: oklch(0.78 0.16 152); }
.csfloat-expand-arrow.is-sm { width: 6px; height: 6px; border-width: 1.5px; }
.csfloat-expand-arrow.is-lg { width: 12px; height: 12px; border-width: 2px; }
/* CSFloat-1:1: small avatar group with text */
.csfloat-av-text {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-av-text-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--bg-3);
flex: 0 0 24px;
object-fit: cover;
}
.csfloat-av-text-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-av-text-name {
font: 600 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-av-text-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-av-text.is-sm .csfloat-av-text-avatar {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.csfloat-av-text.is-sm .csfloat-av-text-name { font-size: 11px; }
.csfloat-av-text.is-lg .csfloat-av-text-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.csfloat-av-text.is-lg .csfloat-av-text-name { font-size: 13px; }
.csfloat-av-text.is-lg .csfloat-av-text-meta { font-size: 11px; }
/* END action-hover-card + expand-arrow + av-text */
/* CSFloat-1:1: simple toggle row (settings-style) */
.csfloat-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-toggle-row:hover { border-color: var(--line-2); }
.csfloat-toggle-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-toggle-row-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-toggle-row-msg {
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-toggle-row-action {
flex: 0 0 auto;
}
.csfloat-toggle-row.is-disabled {
opacity: 0.5;
pointer-events: none;
}
/* CSFloat-1:1: list with hover-to-expand details */
.csfloat-expand-list {
display: flex;
flex-direction: column;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-expand-list-row {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--line);
}
.csfloat-expand-list-row:last-child { border-bottom: 0; }
.csfloat-expand-list-row-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
cursor: pointer;
background: transparent;
border: 0;
text-align: left;
width: 100%;
transition: background 100ms ease;
}
.csfloat-expand-list-row-head:hover { background: var(--bg-2); }
.csfloat-expand-list-row.is-open .csfloat-expand-list-row-head { background: var(--bg-2); }
.csfloat-expand-list-row-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-expand-list-row-title {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-expand-list-row-meta {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-expand-list-row-trail {
display: inline-flex;
align-items: center;
gap: 8px;
}
.csfloat-expand-list-row-trail-val {
font: 600 13px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-expand-list-row-trail-val::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-expand-list-row-trail-chev {
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-expand-list-row.is-open .csfloat-expand-list-row-trail-chev {
transform: rotate(225deg);
}
.csfloat-expand-list-row-body {
max-height: 0;
overflow: hidden;
padding: 0 14px;
transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 240ms;
background: var(--bg);
}
.csfloat-expand-list-row.is-open .csfloat-expand-list-row-body {
max-height: 320px;
padding: 14px;
border-top: 1px solid var(--line);
}
/* CSFloat-1:1: small price-trend chip */
.csfloat-trend-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-trend-chip.is-up {
color: oklch(0.78 0.16 152);
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.25);
}
.csfloat-trend-chip.is-down {
color: oklch(0.72 0.18 30);
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.25);
}
.csfloat-trend-chip.is-flat {
color: var(--ink-3);
}
.csfloat-trend-chip::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.csfloat-trend-chip.is-up::before { border-bottom: 4px solid currentColor; }
.csfloat-trend-chip.is-down::before { border-top: 4px solid currentColor; }
.csfloat-trend-chip.is-flat::before {
width: 6px;
height: 1.5px;
background: currentColor;
border: 0;
}
.csfloat-trend-chip-period {
color: var(--ink-4);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: var(--ui);
margin-left: 2px;
}
/* END toggle-row + expand-list + trend-chip */
/* CSFloat-1:1: section heading bar with action and divider */
.csfloat-h-bar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 12px 0 10px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
}
.csfloat-h-bar-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-h-bar-eyebrow {
font: 600 10px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-h-bar-title {
font: 700 16px/1.3 var(--ui);
letter-spacing: -0.015em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-h-bar-count {
font: 500 12px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-h-bar-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-h-bar.is-no-border {
border-bottom: 0;
margin-bottom: 12px;
}
/* CSFloat-1:1: row of compact buttons */
.csfloat-btn-strip {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-btn-strip-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
font: 600 11px/1 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-btn-strip-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-btn-strip-btn.is-active {
background: rgba(59, 130, 246, 0.12);
color: var(--cta);
border-color: var(--cta);
}
.csfloat-btn-strip-btn.is-cta {
background: var(--cta);
color: #fff;
border-color: var(--cta);
}
.csfloat-btn-strip-btn.is-danger:hover {
background: rgba(248, 113, 113, 0.08);
color: oklch(0.72 0.18 30);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-btn-strip-btn.is-active .csfloat-btn-strip-btn-count { color: var(--cta); }
.csfloat-btn-strip-divider {
width: 1px;
height: 16px;
background: var(--line);
margin: 0 2px;
}
/* CSFloat-1:1: simple stat chip with mono value */
.csfloat-mono-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
font: 600 11px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-mono-chip-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-mono-chip-val {
color: var(--ink-1);
}
.csfloat-mono-chip.is-currency .csfloat-mono-chip-val::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-mono-chip.is-cta {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-mono-chip.is-cta .csfloat-mono-chip-val { color: var(--cta); }
.csfloat-mono-chip.is-up {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-mono-chip.is-up .csfloat-mono-chip-val { color: oklch(0.78 0.16 152); }
.csfloat-mono-chip.is-down {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-mono-chip.is-down .csfloat-mono-chip-val { color: oklch(0.72 0.18 30); }
/* END h-bar + btn-strip + mono-chip */
/* CSFloat-1:1: vertical icon-action list (sidebar action menu) */
.csfloat-vaction {
display: flex;
flex-direction: column;
gap: 1px;
padding: 4px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-vaction-link {
display: grid;
grid-template-columns: 16px 1fr;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 5px;
font: 500 13px/1 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.csfloat-vaction-link:hover {
background: var(--bg-2);
color: var(--ink-1);
}
.csfloat-vaction-link.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
}
.csfloat-vaction-link.is-danger:hover {
background: rgba(248, 113, 113, 0.08);
color: oklch(0.72 0.18 30);
}
.csfloat-vaction-link-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: currentColor;
opacity: 0.85;
}
.csfloat-vaction-link-shortcut {
margin-left: auto;
font: 500 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
background: var(--bg-2);
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.04em;
}
.csfloat-vaction-divider {
height: 1px;
background: var(--line);
margin: 4px 0;
}
.csfloat-vaction-section {
font: 700 9px/1 var(--ui);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 10px 4px;
}
/* CSFloat-1:1: hover stripe row indicator (for tables) */
.csfloat-stripe-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: transparent;
border-bottom: 1px solid var(--line);
cursor: pointer;
position: relative;
transition: background 100ms ease;
}
.csfloat-stripe-row:nth-child(odd) { background: rgba(255, 255, 255, 0.012); }
.csfloat-stripe-row:hover { background: var(--bg-2); }
.csfloat-stripe-row:last-child { border-bottom: 0; }
.csfloat-stripe-row.is-selected {
background: rgba(59, 130, 246, 0.06);
}
.csfloat-stripe-row.is-selected::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--cta);
}
.csfloat-stripe-row-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.csfloat-stripe-row-title {
font: 500 12px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-stripe-row-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-stripe-row-val {
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
/* CSFloat-1:1: caption text style for footers / muted text */
.csfloat-caption {
font: 400 11px/1.5 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
margin: 0;
}
.csfloat-caption > b { color: var(--ink-2); font-weight: 500; }
.csfloat-caption > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-caption > a:hover { border-color: var(--cta); }
.csfloat-caption.is-success { color: oklch(0.78 0.16 152); }
.csfloat-caption.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-caption.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-caption.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-caption.is-italic { font-style: italic; }
.csfloat-caption.is-center { text-align: center; }
/* END vaction + stripe-row + caption */
/* CSFloat-1:1: stack-of-numbers display (kpi grid for dashboards) */
.csfloat-num-stack {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.csfloat-num-stack-cell {
padding: 14px 16px;
background: var(--bg-1);
display: flex;
flex-direction: column;
gap: 2px;
}
.csfloat-num-stack-cell-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-num-stack-cell-val {
font: 700 18px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.csfloat-num-stack-cell-val.is-currency::before {
content: '$';
font-size: 12px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-num-stack-cell-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-num-stack-cell-delta {
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
}
.csfloat-num-stack-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-num-stack-cell-delta.is-down { color: oklch(0.72 0.18 30); }
.csfloat-num-stack-cell.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--bg-1));
}
.csfloat-num-stack-cell.is-cta .csfloat-num-stack-cell-label { color: var(--cta); }
/* CSFloat-1:1: simple compact action row */
.csfloat-action-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
}
.csfloat-action-row.is-cta {
background: rgba(59, 130, 246, 0.04);
border-color: rgba(59, 130, 246, 0.25);
}
.csfloat-action-row-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
}
.csfloat-action-row.is-cta .csfloat-action-row-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-action-row-text {
flex: 1 1 auto;
font: 500 12px/1.4 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-action-row-text > b { color: var(--ink-1); font-weight: 600; }
.csfloat-action-row-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* CSFloat-1:1: simple icon-only avatar (placeholder when no image) */
.csfloat-av-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
color: var(--ink-2);
font: 700 13px/1 var(--mono);
letter-spacing: -0.02em;
font-feature-settings: "tnum";
}
.csfloat-av-placeholder.is-sm { width: 24px; height: 24px; font-size: 10px; }
.csfloat-av-placeholder.is-lg { width: 56px; height: 56px; font-size: 18px; }
.csfloat-av-placeholder.is-xl { width: 80px; height: 80px; font-size: 28px; }
.csfloat-av-placeholder.is-square { border-radius: 6px; }
.csfloat-av-placeholder.is-cta {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.32));
border-color: rgba(59, 130, 246, 0.4);
color: oklch(0.94 0.1 240);
}
.csfloat-av-placeholder.is-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.32));
border-color: rgba(52, 211, 153, 0.4);
color: oklch(0.94 0.1 152);
}
.csfloat-av-placeholder.is-warning {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.32));
border-color: rgba(251, 191, 36, 0.4);
color: oklch(0.94 0.12 80);
}
.csfloat-av-placeholder.is-rare {
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.32));
border-color: rgba(244, 114, 182, 0.4);
color: oklch(0.94 0.1 320);
}
/* END num-stack + action-row + av-placeholder */
/* CSFloat-1:1: market profile metric tile (KPI for shop pages) */
.csfloat-mp-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
position: relative;
overflow: hidden;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mp-tile:hover {
border-color: var(--line-2);
background: var(--bg-2);
}
.csfloat-mp-tile::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(200px 100px at 100% 0%, rgba(59, 130, 246, 0.04), transparent 60%);
opacity: 0;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.csfloat-mp-tile:hover::before { opacity: 1; }
.csfloat-mp-tile-label {
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
position: relative;
z-index: 1;
}
.csfloat-mp-tile-val {
font: 700 22px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.025em;
margin-top: 4px;
position: relative;
z-index: 1;
}
.csfloat-mp-tile-val.is-currency::before {
content: '$';
font-size: 13px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-mp-tile-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1 var(--ui);
color: var(--ink-3);
margin-top: 4px;
position: relative;
z-index: 1;
}
.csfloat-mp-tile-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 600;
}
.csfloat-mp-tile-meta-mono.is-up { color: oklch(0.78 0.16 152); }
.csfloat-mp-tile-meta-mono.is-down { color: oklch(0.72 0.18 30); }
.csfloat-mp-tile-icon {
position: absolute;
top: 14px;
right: 16px;
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--ink-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
z-index: 1;
}
.csfloat-mp-tile.is-cta .csfloat-mp-tile-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
/* CSFloat-1:1: marketplace listing strip with hover */
.csfloat-mkt-strip {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-strip:hover {
border-color: var(--line-2);
background: var(--bg-2);
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.csfloat-mkt-strip-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-mkt-strip-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-mkt-strip:hover .csfloat-mkt-strip-img > img { transform: scale(1.05); }
.csfloat-mkt-strip-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-mkt-strip-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-mkt-strip-name-wear {
font: 400 11px/1 var(--ui);
color: var(--ink-3);
margin-left: 4px;
}
.csfloat-mkt-strip-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-3);
}
.csfloat-mkt-strip-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-mkt-strip-trail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.csfloat-mkt-strip-price {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.csfloat-mkt-strip-price::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-mkt-strip-action {
flex: 0 0 auto;
}
@media (max-width: 540px) {
.csfloat-mkt-strip { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px 12px; }
.csfloat-mkt-strip-img { width: 48px; height: 48px; flex: 0 0 48px; }
}
/* END mp-tile + mkt-strip */
/* CSFloat-1:1: simple inline tag-pair (key + value) */
.csfloat-tag-pair {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
font: 500 10px/1.4 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-tag-pair > .csfloat-tag-pair-key {
padding: 3px 6px;
background: var(--bg-3);
color: var(--ink-4);
border-right: 1px solid var(--line);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 9px;
display: inline-flex;
align-items: center;
}
.csfloat-tag-pair > .csfloat-tag-pair-val {
padding: 3px 8px;
color: var(--ink-1);
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
display: inline-flex;
align-items: center;
letter-spacing: 0.02em;
}
.csfloat-tag-pair > .csfloat-tag-pair-val.is-ui {
font-family: var(--ui);
letter-spacing: -0.005em;
}
.csfloat-tag-pair.is-cta {
border-color: rgba(59, 130, 246, 0.3);
}
.csfloat-tag-pair.is-cta > .csfloat-tag-pair-key { background: rgba(59, 130, 246, 0.12); color: rgba(125, 184, 248, 0.7); }
.csfloat-tag-pair.is-cta > .csfloat-tag-pair-val { color: var(--cta); }
.csfloat-tag-pair.is-success {
border-color: rgba(52, 211, 153, 0.3);
}
.csfloat-tag-pair.is-success > .csfloat-tag-pair-val { color: oklch(0.78 0.16 152); }
.csfloat-tag-pair.is-warning {
border-color: rgba(251, 191, 36, 0.3);
}
.csfloat-tag-pair.is-warning > .csfloat-tag-pair-val { color: oklch(0.84 0.16 80); }
/* CSFloat-1:1: simple footer link strip */
.csfloat-foot-link-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--line);
font: 400 11px/1.4 var(--ui);
color: var(--ink-4);
letter-spacing: -0.005em;
}
.csfloat-foot-link-strip-link {
color: var(--ink-3);
text-decoration: none;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-foot-link-strip-link:hover { color: var(--ink-1); }
.csfloat-foot-link-strip-spacer { flex: 1 1 auto; }
.csfloat-foot-link-strip-divider {
color: var(--ink-4);
font-size: 10px;
}
.csfloat-foot-link-strip-divider::before { content: '·'; }
.csfloat-foot-link-strip-region {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csfloat-foot-link-strip-region::before {
content: '';
width: 5px;
height: 5px;
border-radius: 999px;
background: oklch(0.78 0.16 152);
box-shadow: 0 0 4px currentColor;
}
.csfloat-foot-link-strip-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* CSFloat-1:1: simple status check badge with check icon */
.csfloat-check-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 4px;
background: rgba(52, 211, 153, 0.06);
border: 1px solid rgba(52, 211, 153, 0.3);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: oklch(0.78 0.16 152);
}
.csfloat-check-badge::before {
content: '';
width: 14px;
height: 14px;
border-radius: 999px;
background: oklch(0.62 0.16 152);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-check-badge::after {
content: '';
position: absolute;
width: 6px;
height: 3px;
border: 1.5px solid #fff;
border-top: 0;
border-right: 0;
transform: translateX(-15px) translateY(1px) rotate(-45deg);
}
.csfloat-check-badge.is-cta {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.3);
color: var(--cta);
}
.csfloat-check-badge.is-cta::before { background: var(--cta); }
.csfloat-check-badge.is-warning {
background: rgba(251, 191, 36, 0.06);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-check-badge.is-warning::before { background: oklch(0.66 0.18 80); }
/* END tag-pair + foot-link-strip + check-badge */
/* CSFloat-1:1: simple two-column row (label + value) */
.csfloat-kv-row-2 {
display: grid;
grid-template-columns: 120px 1fr;
gap: 12px;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px dashed var(--line);
}
.csfloat-kv-row-2:last-child { border-bottom: 0; }
.csfloat-kv-row-2-key {
font: 600 11px/1.3 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-kv-row-2-val {
font: 500 13px/1.4 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
}
.csfloat-kv-row-2-val.is-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-kv-row-2-val.is-currency {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-kv-row-2-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-kv-row-2-val.is-success { color: oklch(0.78 0.16 152); }
.csfloat-kv-row-2-val.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-kv-row-2-val.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-kv-row-2-val.is-cta { color: var(--cta); }
@media (max-width: 540px) {
.csfloat-kv-row-2 { grid-template-columns: 1fr; gap: 4px; }
}
/* CSFloat-1:1: minimal action button group */
.csfloat-action-mini {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-action-mini-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--line);
border-radius: 4px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-action-mini-btn:hover {
background: var(--bg-2);
color: var(--ink-1);
border-color: var(--line-2);
}
.csfloat-action-mini-btn.is-active {
background: rgba(59, 130, 246, 0.08);
color: var(--cta);
border-color: rgba(59, 130, 246, 0.3);
}
.csfloat-action-mini-btn.is-cta {
background: var(--cta);
color: #fff;
border-color: var(--cta);
}
.csfloat-action-mini-btn.is-danger {
color: oklch(0.72 0.18 30);
border-color: rgba(248, 113, 113, 0.3);
}
.csfloat-action-mini-btn.is-danger:hover {
background: rgba(248, 113, 113, 0.08);
}
/* CSFloat-1:1: simple stat tile in grid (compact) */
.csfloat-stat-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-stat-cell:hover { border-color: var(--line-2); }
.csfloat-stat-cell-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-stat-cell-val {
font: 700 16px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
margin-top: 2px;
}
.csfloat-stat-cell-val.is-currency::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-stat-cell-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-cell-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-stat-cell-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
margin-top: 2px;
}
.csfloat-stat-cell-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font: 600 10px/1 var(--mono);
font-feature-settings: "tnum";
margin-top: 2px;
}
.csfloat-stat-cell-delta.is-up { color: oklch(0.78 0.16 152); }
.csfloat-stat-cell-delta.is-down { color: oklch(0.72 0.18 30); }
/* END kv-row-2 + action-mini + stat-cell */
/* CSFloat-1:1: section header with eyebrow + title + side action */
.csfloat-h-section {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 8px 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.csfloat-h-section-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-h-section-eyebrow {
font: 700 10px/1 var(--ui);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cta);
}
.csfloat-h-section-title {
font: 700 18px/1.3 var(--ui);
letter-spacing: -0.02em;
color: var(--ink-1);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.csfloat-h-section-title-italic {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--cta);
}
.csfloat-h-section-msg {
font: 400 12px/1.5 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 520px;
}
.csfloat-h-section-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* CSFloat-1:1: simple inline divider (vertical separator) */
.csfloat-vsep {
display: inline-block;
width: 1px;
height: 14px;
background: var(--line);
vertical-align: middle;
margin: 0 4px;
}
.csfloat-vsep.is-tall { height: 24px; }
.csfloat-vsep.is-thick { width: 2px; }
.csfloat-vsep.is-cta { background: var(--cta); }
.csfloat-vsep.is-fade {
background: linear-gradient(180deg, transparent, var(--line), transparent);
}
/* CSFloat-1:1: order item compact tile */
.csfloat-order-tile-mini {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-order-tile-mini:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-order-tile-mini-img {
width: 32px;
height: 32px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 3px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
}
.csfloat-order-tile-mini-img > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csfloat-order-tile-mini-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.csfloat-order-tile-mini-name {
font: 500 11px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-order-tile-mini-meta {
font: 400 10px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-tile-mini-amt {
font: 700 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-order-tile-mini-amt::before {
content: '$';
font-size: 9px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
}
.csfloat-order-tile-mini-amt.is-up { color: oklch(0.78 0.16 152); }
.csfloat-order-tile-mini-amt.is-down { color: oklch(0.72 0.18 30); }
/* END h-section + vsep + order-tile-mini */
/* CSFloat-1:1: simple status indicator with label */
.csfloat-status-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
font: 600 10px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.csfloat-status-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
.csfloat-status-tag.is-active {
background: rgba(52, 211, 153, 0.08);
border-color: rgba(52, 211, 153, 0.3);
color: oklch(0.78 0.16 152);
}
.csfloat-status-tag.is-active::before {
box-shadow: 0 0 4px currentColor;
}
.csfloat-status-tag.is-pending {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.3);
color: oklch(0.84 0.16 80);
}
.csfloat-status-tag.is-failed {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.3);
color: oklch(0.72 0.18 30);
}
.csfloat-status-tag.is-paused {
color: var(--ink-4);
background: var(--bg-2);
border-color: var(--line);
}
.csfloat-status-tag.is-pulse::before {
animation: csfloat-stamp-pulse 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.csfloat-status-tag.is-pulse::before { animation: none; }
}
.csfloat-status-tag-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
font-weight: 700;
letter-spacing: 0;
}
/* CSFloat-1:1: chunked badge with right action */
.csfloat-badge-act {
display: inline-flex;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
font: 500 11px/1 var(--ui);
letter-spacing: -0.005em;
}
.csfloat-badge-act > .csfloat-badge-act-text {
padding: 5px 10px;
color: var(--ink-2);
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-badge-act > .csfloat-badge-act-text > b {
color: var(--ink-1);
font-weight: 600;
font-family: var(--mono);
font-feature-settings: "tnum";
}
.csfloat-badge-act > .csfloat-badge-act-btn {
padding: 5px 10px;
background: var(--bg-3);
color: var(--ink-2);
border: 0;
border-left: 1px solid var(--line);
cursor: pointer;
font: 600 10px/1 var(--ui);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-badge-act > .csfloat-badge-act-btn:hover {
background: var(--bg-3);
color: var(--ink-1);
}
.csfloat-badge-act > .csfloat-badge-act-btn.is-cta {
background: var(--cta);
color: #fff;
}
.csfloat-badge-act > .csfloat-badge-act-btn.is-cta:hover { background: oklch(0.66 0.18 240); }
/* CSFloat-1:1: simple description line under headers */
.csfloat-desc-line {
font: 400 13px/1.6 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
margin: 0;
max-width: 720px;
}
.csfloat-desc-line > b {
color: var(--ink-1);
font-weight: 600;
}
.csfloat-desc-line > em {
font-family: var(--serif);
font-style: italic;
color: var(--ink-1);
font-weight: 500;
}
.csfloat-desc-line > a {
color: var(--cta);
text-decoration: none;
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.csfloat-desc-line > a:hover { border-color: var(--cta); }
.csfloat-desc-line > .csfloat-desc-line-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-2);
font-weight: 600;
letter-spacing: 0.02em;
}
.csfloat-desc-line.is-muted { color: var(--ink-4); }
.csfloat-desc-line.is-success { color: oklch(0.78 0.16 152); }
.csfloat-desc-line.is-warning { color: oklch(0.84 0.16 80); }
.csfloat-desc-line.is-danger { color: oklch(0.72 0.18 30); }
.csfloat-desc-line.is-large { font-size: 14px; line-height: 1.65; }
/* END status-tag + badge-act + desc-line */
/* CSFloat-1:1: simple inline divider with text in middle */
.csfloat-text-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.csfloat-text-divider::before,
.csfloat-text-divider::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.csfloat-text-divider-text {
font: 600 11px/1 var(--ui);
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.csfloat-text-divider-text.is-cta { color: var(--cta); }
.csfloat-text-divider.is-thick::before,
.csfloat-text-divider.is-thick::after { height: 2px; }
.csfloat-text-divider.is-tight { margin: 8px 0; }
.csfloat-text-divider.is-loose { margin: 32px 0; }
/* CSFloat-1:1: link with underline reveal animation */
.csfloat-uline-link {
position: relative;
color: var(--ink-1);
text-decoration: none;
font: 500 13px/1 var(--ui);
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-uline-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1.5px;
background: var(--cta);
transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-uline-link:hover {
color: var(--cta);
}
.csfloat-uline-link:hover::after { width: 100%; }
.csfloat-uline-link.is-active {
color: var(--cta);
}
.csfloat-uline-link.is-active::after { width: 100%; }
.csfloat-uline-link.is-muted { color: var(--ink-3); }
.csfloat-uline-link.is-muted:hover { color: var(--ink-1); }
.csfloat-uline-link.is-muted::after { background: var(--ink-1); }
/* CSFloat-1:1: trade-stat tile (compact) */
.csfloat-trade-stat {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
min-width: 100px;
}
.csfloat-trade-stat-label {
font: 600 9px/1 var(--ui);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-4);
}
.csfloat-trade-stat-val {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: -0.005em;
}
.csfloat-trade-stat-val.is-currency::before {
content: '$';
font-size: 10px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-trade-stat-val.is-up { color: oklch(0.78 0.16 152); }
.csfloat-trade-stat-val.is-down { color: oklch(0.72 0.18 30); }
.csfloat-trade-stat-val.is-cta { color: var(--cta); }
.csfloat-trade-stat-meta {
font: 400 9px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-trade-stat-row {
display: inline-flex;
align-items: stretch;
gap: 6px;
}
/* END text-divider + uline-link + trade-stat */
/* CSFloat-1:1: hover-revealed checkbox for grid selection */
.csfloat-grid-check {
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
border-radius: 4px;
background: rgba(7, 11, 24, 0.6);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-grid-check-anchor:hover .csfloat-grid-check,
.csfloat-grid-check.is-checked {
opacity: 1;
}
.csfloat-grid-check.is-checked {
background: var(--cta);
border-color: var(--cta);
}
.csfloat-grid-check.is-checked::after {
content: '';
width: 9px;
height: 5px;
border: 1.5px solid #fff;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-1px);
}
/* CSFloat-1:1: floating action button (square version) */
.csfloat-fab-sq {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--cta);
color: #fff;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.45);
z-index: 50;
transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-fab-sq:hover {
background: oklch(0.66 0.18 240);
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.55);
}
.csfloat-fab-sq:active {
transform: translateY(0);
}
.csfloat-fab-sq.is-secondary {
background: var(--bg-3);
color: var(--ink-1);
border: 1px solid var(--line-2);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.csfloat-fab-sq.is-secondary:hover {
background: var(--bg-2);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.csfloat-fab-sq-icon {
width: 22px;
height: 22px;
}
.csfloat-fab-sq-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: oklch(0.66 0.18 30);
color: #fff;
font: 700 10px/18px var(--mono);
text-align: center;
font-feature-settings: "tnum";
border: 2px solid var(--bg);
}
@media (max-width: 720px) {
.csfloat-fab-sq { bottom: 80px; }
}
/* CSFloat-1:1: small inline meta cluster */
.csfloat-meta-cluster {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font: 400 11px/1.4 var(--ui);
color: var(--ink-3);
letter-spacing: -0.005em;
}
.csfloat-meta-cluster-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.csfloat-meta-cluster-item-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
color: var(--ink-4);
}
.csfloat-meta-cluster-item-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
color: var(--ink-2);
font-weight: 500;
}
.csfloat-meta-cluster-item.is-up { color: oklch(0.78 0.16 152); }
.csfloat-meta-cluster-item.is-up .csfloat-meta-cluster-item-icon { color: oklch(0.78 0.16 152); }
.csfloat-meta-cluster-item.is-down { color: oklch(0.72 0.18 30); }
.csfloat-meta-cluster-item.is-down .csfloat-meta-cluster-item-icon { color: oklch(0.72 0.18 30); }
.csfloat-meta-cluster-item.is-cta { color: var(--cta); }
.csfloat-meta-cluster-item.is-cta .csfloat-meta-cluster-item-icon { color: var(--cta); }
.csfloat-meta-cluster-divider {
width: 1px;
height: 11px;
background: var(--line);
}
/* END grid-check + fab-sq + meta-cluster */
/* CSFloat-1:1: simple inline star rating display */
.csfloat-stars-line {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
letter-spacing: 0;
}
.csfloat-stars-line-stars {
display: inline-flex;
align-items: center;
gap: 1px;
}
.csfloat-stars-line-star {
width: 12px;
height: 12px;
background: oklch(0.84 0.18 60);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.csfloat-stars-line-star.is-empty { background: var(--ink-4); opacity: 0.4; }
.csfloat-stars-line-star.is-half {
background: linear-gradient(90deg, oklch(0.84 0.18 60) 50%, var(--ink-4) 50%);
}
.csfloat-stars-line-num {
font-family: var(--mono);
font-feature-settings: "tnum";
color: var(--ink-1);
font-weight: 700;
}
.csfloat-stars-line-count {
font: 400 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
}
.csfloat-stars-line.is-sm .csfloat-stars-line-star { width: 10px; height: 10px; }
.csfloat-stars-line.is-lg .csfloat-stars-line-star { width: 16px; height: 16px; }
/* CSFloat-1:1: order item compact tile (with image + label + price + status) */
.csfloat-order-item {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.csfloat-order-item:hover {
background: var(--bg-2);
border-color: var(--line-2);
}
.csfloat-order-item-img {
width: 56px;
height: 56px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csfloat-order-item-img > img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.csfloat-order-item-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.csfloat-order-item-id {
font: 500 11px/1 var(--mono);
color: var(--ink-4);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-item-name {
font: 600 13px/1.3 var(--ui);
color: var(--ink-1);
letter-spacing: -0.005em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.csfloat-order-item-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font: 400 11px/1.3 var(--ui);
color: var(--ink-4);
}
.csfloat-order-item-meta-mono {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.csfloat-order-item-amt {
font: 700 14px/1 var(--mono);
color: var(--ink-1);
font-feature-settings: "tnum";
text-align: right;
letter-spacing: -0.005em;
}
.csfloat-order-item-amt::before {
content: '$';
font-size: 11px;
color: var(--ink-3);
margin-right: 1px;
font-weight: 500;
vertical-align: top;
}
.csfloat-order-item-amt.is-up { color: oklch(0.78 0.16 152); }
.csfloat-order-item-amt.is-down { color: oklch(0.72 0.18 30); }
.csfloat-order-item-status { flex: 0 0 auto; }
@media (max-width: 720px) {
.csfloat-order-item {
grid-template-columns: 48px 1fr auto;
gap: 10px;
padding: 10px 12px;
}
.csfloat-order-item-img { width: 48px; height: 48px; flex: 0 0 48px; }
.csfloat-order-item-status { display: none; }
}
/* CSFloat-1:1: small accordion bullet list */
.csfloat-acc-bullet {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
list-style: none;
}
.csfloat-acc-bullet-item {
display: grid;
grid-template-columns: 16px 1fr;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed var(--line);
align-items: flex-start;
font: 400 13px/1.5 var(--ui);
color: var(--ink-2);
letter-spacing: -0.005em;
}
.csfloat-acc-bullet-item:last-child { border-bottom: 0; }
.csfloat-acc-bullet-item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cta);
margin-top: 7px;
flex: 0 0 6px;
}
.csfloat-acc-bullet-item.is-success::before { background: oklch(0.62 0.16 152); }
.csfloat-acc-bullet-item.is-warning::before { background: oklch(0.78 0.16 80); }
.csfloat-acc-bullet-item.is-danger::before { background: oklch(0.66 0.18 30); }
.csfloat-acc-bullet-item.is-muted::before { background: var(--ink-4); opacity: 0.5; }
.csfloat-acc-bullet-item > b {
color: var(--ink-1);
font-weight: 600;
}
/* END stars-line + order-item + acc-bullet */
/* ─── Subnav active-tab fix (2026-04-29) ──────────────────────────
Earlier polish layered three competing rules onto .csfloat-subnav-tab:
the original underline (line ~11108), a pill-with-radius override
(line ~12064), an ::after stripe that never had `content`/`position`
set up (line ~12164), AND no focus-outline reset — so on click the
active tab grew a thin blue rectangular border (the browser-default
focus ring on the |